/* ═══════════════════════════════════════════════════════════════
   imgavio — main.css — Homepage + shared styles
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#fff;--bg2:#f8faff;--bg3:#f1f5ff;--bg4:#e8effe;
  --border:#e2e8f8;--bh:#c7d5f5;
  --text:#0f1729;--text2:#4a5578;--muted:#8a96b8;
  --blue:#2563eb;--blue2:#1d4ed8;--blue3:#3b82f6;
  --blue-lt:#eff4ff;--blue-bd:#bfcffd;
  --green:#10b981;--red:#ef4444;--orange:#f59e0b;--purple:#7c3aed;
  --shadow-sm:0 1px 3px rgba(37,99,235,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(37,99,235,.10),0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(37,99,235,.14),0 4px 16px rgba(0,0,0,.06);
  --fd:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--fb:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r:12px;--rs:8px;--max:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:16px;line-height:1.7;overflow-x:hidden;padding-top:64px}
a{color:inherit;text-decoration:none}

/* ── ACCESSIBILITY ──────────────────────────────────────────── */
/* Skip-to-content link: visible only when focused via keyboard */
.skip-link{position:absolute;top:-100px;left:8px;z-index:9999;padding:10px 16px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;border-radius:6px;text-decoration:none}
.skip-link:focus{top:8px;outline:2px solid #fff;outline-offset:2px;transition:top .15s}

/* Visible focus indicator for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.tool-card:focus-visible,.rel-card:focus-visible,.cat-btn:focus-visible,.cat-nav-btn:focus-visible,.what-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── NAV ─────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:9px}
.logo-icon{flex-shrink:0;display:block;transition:transform .25s}
.logo-text{display:inline-flex;line-height:1;color:var(--text)}
.logo-text > span{color:inherit}
.logo:hover .logo-icon{transform:rotate(-4deg) scale(1.05)}
.nav-right{display:flex;align-items:center;gap:8px}
/* New nav layout (iLoveIMG-style): logo+links left, search+dark right */
.nav-left{
  display:flex;
  align-items:center;
  gap:32px;
  flex:1;
  min-width:0;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
/* Wider Stripe-style search bar */
.nav-search-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px 7px 14px;
  min-width:200px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  color:var(--text2);
  cursor:pointer;
  transition:all .15s;
}
.nav-search-trigger:hover{
  background:var(--blue-lt);
  border-color:var(--blue-bd);
  color:var(--blue);
}
.nav-search-text{
  flex:1;
  text-align:left;
  font-weight:500;
}
.nav-search-kbd{
  font-size:11px;
  font-family:ui-monospace,monospace;
  padding:2px 6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text2);
  font-weight:600;
}
[data-theme="dark"] .nav-search-trigger{
  background:var(--bg2);
  border-color:var(--border);
}
[data-theme="dark"] .nav-search-trigger:hover{
  background:var(--bg3);
}

/* Responsive: shrink search bar then hide on mobile */
@media (max-width: 1100px){
  .nav-search-trigger{min-width:auto;padding:7px 12px}
  .nav-search-text{display:none}
}
@media (max-width: 768px){
  .nav-left{gap:0;flex:0 0 auto}
  .nav-links{display:none}
  .nav-tools{display:none}
}

.nav-link{font-size:14px;font-weight:500;color:var(--text2);text-decoration:none;padding:6px 12px;border-radius:8px;transition:all .2s}
.nav-link:hover{color:var(--blue);background:var(--blue-lt)}
.nav-link.cta{background:var(--blue);color:#fff;font-weight:600;padding:7px 16px}
.nav-link.cta:hover{background:var(--blue2);color:#fff}
.nav-cta{font-size:13px;font-weight:600;padding:8px 20px;border-radius:100px;background:var(--blue);color:#fff;text-decoration:none;transition:all .2s;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.nav-cta:hover{background:var(--blue2);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;width:40px;height:40px;padding:0;background:none;border:none;border-radius:8px;z-index:201;transition:background .15s}
.hamburger:hover,.hamburger:active{background:var(--bg2)}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);padding:14px 18px 24px;flex-direction:column;z-index:199;box-shadow:var(--shadow);max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{display:flex}

/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.3)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

/* CSS-only entry animation — graceful fallback if JS fails */
@media (prefers-reduced-motion: no-preference) {
  .tool-card,.why-point{animation:fadeUp .35s ease backwards}
  .tool-card:nth-child(n+5){animation-delay:.04s}
  .tool-card:nth-child(n+10){animation-delay:.08s}
  .tool-card:nth-child(n+15){animation-delay:.12s}
  .tool-card:nth-child(n+20){animation-delay:.16s}
  .tool-card:nth-child(n+25){animation-delay:.2s}
  .why-point:nth-child(2){animation-delay:.06s}
  .why-point:nth-child(3){animation-delay:.12s}
}

/* ── FOOTER ───────────────────────────────────────────────────── */
footer{width:100%;border-top:1px solid var(--border);background:var(--bg);margin-top:0}
.footer-inner{max-width:1280px;margin:0 auto;padding:32px 48px 16px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-brand{display:flex;flex-direction:column;gap:0}
.footer-brand p{font-size:13px;color:var(--muted);max-width:230px;line-height:1.65;margin-top:10px}
.footer-col{display:block}
.footer-col h4{font-family:var(--fd);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:var(--text2);text-decoration:none;margin-bottom:11px;transition:color .2s}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{max-width:1280px;margin:0 auto;padding:18px 48px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:18px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:12px;transition:color .2s}
.footer-links a:hover{color:var(--blue)}

/* ── HERO — search-first design ───────────────────────────────────
   Phase 3.19.6: redesigned. Was a generic centered title hero (used
   in many sites including the user's own). Now leads with a large
   search input as the page's primary action, with popular tool
   shortcuts below. Title is smaller and supportive, not the focal
   point. Background simplified — no orb, no grid pattern. */
.hero{
  padding:96px 24px 24px;
  text-align:center;
  position:relative;
  overflow:visible;
  background:linear-gradient(180deg,var(--bg2) 0%,#fff 100%);
}
.hero-h1{
  font-family:var(--fd);
  font-size:clamp(34px,5.5vw,56px);
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1.05;
  margin:0 auto 16px;
  max-width:760px;
  color:var(--text);
}
.hero-h1-em{
  display:block;
  color:var(--blue);
  font-weight:800;
}
.hero-desc{
  font-size:16px;
  color:var(--text2);
  max-width:560px;
  margin:0 auto 36px;
  line-height:1.65;
  font-weight:400;
}

/* Hero search — the primary action of the page */
.hero-search{
  width:100%;
  max-width:600px;
  position:relative;
  margin:0 auto;
  z-index:50;
}
.search-input{
  width:100%;
  padding:18px 64px 18px 24px;
  border:2px solid var(--border);
  border-radius:100px;
  font-size:16px;
  font-family:var(--fb);
  color:var(--text);
  background:var(--bg);
  box-shadow:0 4px 24px rgba(37,99,235,.08);
  transition:all .2s;
  outline:none;
}
.search-input:focus{
  border-color:var(--blue);
  box-shadow:0 4px 28px rgba(37,99,235,.18);
}
.search-input::placeholder{color:var(--muted)}
.search-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  padding:0;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s;
}
.search-btn:hover{
  background:var(--blue2);
  transform:translateY(-50%) scale(1.05);
}

/* ── SEARCH SUGGESTIONS DROPDOWN ──────────────────────────────────
   Phase 3.19.7: smart search popup. Each item shows the tool name
   (with matched substring highlighted via <mark>) and a category
   badge on the right. Keyboard navigation highlights the active
   row via .ss-active. ─────────────────────────────────────────── */
.ss-box{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(15,23,42,.12);
  z-index:100;
  overflow:hidden;
  text-align:left;
}
.ss-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.ss-item:last-child{border-bottom:none}
.ss-item:hover,
.ss-item.ss-active{
  background:var(--blue-lt);
}
.ss-name{
  flex:1;
  font-weight:500;
  color:var(--text);
}
.ss-name mark{
  background:transparent;
  color:var(--blue);
  font-weight:700;
  padding:0;
}
.ss-cat{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  background:var(--bg2);
  padding:3px 10px;
  border-radius:100px;
  flex-shrink:0;
}
.ss-item:hover .ss-cat,
.ss-item.ss-active .ss-cat{
  background:#fff;
  color:var(--blue);
}
.ss-empty{
  padding:18px 20px;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}

/* Legacy hero classes — kept for back-compat with any other pages */
.hero-grid-bg{display:none}
.hero-orb{display:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);padding:6px 16px;border-radius:100px;margin-bottom:24px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.2);flex-shrink:0;animation:pulse 2s infinite}
.hero h1:not(.hero-h1){font-family:var(--fd);font-size:clamp(48px,8vw,96px);font-weight:800;letter-spacing:-4px;line-height:.95;margin-bottom:20px;color:var(--text)}
.hero h1:not(.hero-h1) em{font-style:normal;color:var(--blue);position:relative}
.hero h1:not(.hero-h1) .line2{display:block;font-size:clamp(40px,7vw,84px)}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text2);padding:7px 15px;border:1.5px solid var(--border);border-radius:100px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.badge svg{color:var(--green)}

/* ── TOOLS SECTION ────────────────────────────────────────────── */
/* Phase 3.19.7: visual separation between hero and tools section.
   Hero has a soft tinted gradient (bg2→white); tools section gets
   a subtle border-top and crisp white background to read as a
   distinct page region. section-title has no bottom margin —
   the cat-filter row sits right under it. */
.tools-section{
  padding:48px 48px 56px;
  max-width:1280px;
  margin:0 auto;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.section-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:block}
.section-title{font-family:var(--fd);font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-1.5px;margin-bottom:0;padding-bottom:8px;color:var(--text);line-height:1.18}
.section-title span{color:var(--blue)}
.cat-filter{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 28px}
.cat-btn{font-size:12px;font-weight:600;padding:7px 18px;border-radius:100px;background:var(--bg);border:1.5px solid var(--border);color:var(--text2);cursor:pointer;transition:all .2s;font-family:var(--fb)}
.cat-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
.cat-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ── Tools page categories ─────────────────────────────────── */
.cat-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  margin:24px auto 0;
  max-width:720px;
}
.cat-nav-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  transition:all .18s;
  white-space:nowrap;
}
.cat-nav-btn:hover{
  background:var(--bg2);
  border-color:var(--text2);
  transform:translateY(-1px);
}
.cat-nav-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}

.cat-section{
  max-width:1200px;
  margin:0 auto;
  padding:32px 24px 60px;
}
.cat-block{
  margin-bottom:48px;
  scroll-margin-top:90px;
}
.cat-block:last-child{margin-bottom:0}
.cat-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.cat-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.cat-title{
  font-family:var(--fd);
  font-size:22px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.4px;
}
.cat-count{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--bg2);
  padding:3px 10px;
  border-radius:100px;
  margin-left:4px;
}

@media (max-width:480px){
  .cat-nav{gap:6px;padding:0 12px}
  .cat-nav-btn{font-size:12px;padding:7px 12px}
  .cat-section{padding:24px 16px 40px}
  .cat-title{font-size:19px}
}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tool-card{display:flex;flex-direction:column;padding:20px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text);transition:all .2s ease;min-height:148px;position:relative;overflow:hidden}
.tool-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.10)}
.tool-icon{width:42px;height:42px;background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0;transition:all .2s}
.tool-icon svg{color:var(--blue);transition:color .2s;width:20px;height:20px}
.tool-card:hover .tool-icon{background:var(--blue);border-color:var(--blue)}
.tool-card:hover .tool-icon svg{color:#fff}
.tool-name{font-family:var(--fd);font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.3;letter-spacing:-.2px}
.tool-desc{font-size:12.5px;color:var(--muted);line-height:1.55;flex:1}
.tool-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-top:12px;border:1px solid transparent;align-self:flex-start}
.tool-tag.compress,.tool-tag.popular{background:rgba(37,99,235,.08);color:var(--blue);border-color:rgba(37,99,235,.2)}
.tool-tag.convert{background:rgba(124,58,237,.08);color:var(--purple);border-color:rgba(124,58,237,.2)}
.tool-tag.edit,.tool-tag.lossless{background:rgba(5,150,105,.08);color:#059669;border-color:rgba(5,150,105,.2)}
.tool-tag.ai{background:rgba(219,39,119,.08);color:#db2777;border-color:rgba(219,39,119,.2)}
.tool-tag.dev{background:rgba(37,99,235,.08);color:var(--blue);border-color:rgba(37,99,235,.2)}
.tool-tag.new{background:rgba(16,185,129,.08);color:#059669;border-color:rgba(16,185,129,.2)}

/* ── STATS BANNER ─────────────────────────────────────────────── */
.stats-banner{background:var(--blue);padding:24px 48px}
.stats-inner{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;max-width:800px;margin:0 auto;text-align:center}
.banner-stat-num{font-family:var(--fd);font-size:42px;font-weight:800;color:#fff;line-height:1;letter-spacing:-2px}
.banner-stat-label{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;font-weight:500;letter-spacing:.3px}

/* ── WHY SECTION ─────────────────────────────────────────────── */
.why-section{padding:48px 48px;max-width:1280px;margin:0 auto}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.why-headline{font-family:var(--fd);font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-2.5px;line-height:1.0;margin-bottom:16px;color:var(--text)}
.why-headline span{color:var(--blue)}
.why-sub{font-size:16px;color:var(--text2);line-height:1.75;max-width:420px}
.why-points{display:flex;flex-direction:column;gap:16px}
.why-point{display:flex;gap:16px;padding:20px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;transition:border-color .2s}
.why-point:hover{border-color:var(--blue-bd)}
.why-point-icon{width:42px;height:42px;background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-point-icon svg{color:var(--blue)}
.why-point-title{font-family:var(--fd);font-size:14px;font-weight:700;margin-bottom:5px;color:var(--text)}
.why-point-desc{font-size:13px;color:var(--text2);line-height:1.6}
.breadcrumb-sep{color:var(--muted);font-size:12px}

/* ── BLOG CARDS ───────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;max-width:1140px;margin:0 auto;padding:0 48px 24px}
.blog-card{background:var(--bg);border:1.5px solid var(--border);border-radius:16px;text-decoration:none;color:var(--text);transition:all .22s;display:flex;flex-direction:column;overflow:hidden;position:relative}
.blog-card::before{content:"";position:absolute;inset:0;border-radius:16px;border:2px solid transparent;transition:border-color .22s;pointer-events:none;z-index:1}
.blog-card:hover::before{border-color:var(--blue)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(37,99,235,.12)}
.blog-card-thumb{height:130px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1.5px solid var(--border);overflow:hidden}
.blog-card-emoji{font-size:44px;line-height:1;transition:transform .3s}
.blog-card:hover .blog-card-emoji{transform:scale(1.1)}
.blog-cat-pill{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:100px;color:#fff;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.blog-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.blog-card-h2{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:-.3px;line-height:1.4;margin-bottom:8px;color:var(--text)}
.blog-card-p{font-size:13px;color:var(--text2);line-height:1.6;flex:1;margin-bottom:12px}
.blog-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.blog-date{font-weight:600;color:var(--muted)}
.blog-dot{opacity:.3}
.blog-read{color:var(--muted)}
.blog-arrow{margin-left:auto;width:28px;height:28px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:13px;font-weight:700;transition:all .2s;opacity:.8}
.blog-card:hover .blog-arrow{opacity:1;transform:translateX(2px)}
.blog-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);padding:5px 14px;border-radius:100px;margin-bottom:20px}
.blog-hero h1 em{font-style:normal;color:var(--blue)}

/* ── BLOG PREVIEW SECTION (homepage) ─────────────────────────── */
.blog-preview-section{background:var(--bg2);padding:48px 48px 56px;border-top:1px solid var(--border)}
.blog-preview-inner{max-width:1140px;margin:0 auto}
.blog-preview-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;gap:16px}
.blog-all-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--blue);text-decoration:none;padding:10px 20px;border:1.5px solid var(--blue-bd);border-radius:100px;background:var(--bg);transition:all .2s;white-space:nowrap}
.blog-all-link:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.blog-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-preview-card{background:var(--bg);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);transition:all .22s;display:flex;flex-direction:column}
.blog-preview-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 32px rgba(37,99,235,.12)}
.bpc-thumb{height:130px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.bpc-emoji{font-size:44px;line-height:1;transition:transform .3s}
.blog-preview-card:hover .bpc-emoji{transform:scale(1.1)}
.bpc-cat{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:3px 10px;border-radius:100px;color:#fff}
.bpc-body{padding:20px;flex:1;display:flex;flex-direction:column}
.bpc-title{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:-.3px;line-height:1.4;color:var(--text);margin-bottom:8px;flex:1}
.bpc-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:14px}
.bpc-read{font-size:12px;font-weight:700;color:var(--blue);display:block;margin-top:auto}

/* ── HOMEPAGE FAQ ─────────────────────────────────────────────── */
.faq-inner{max-width:720px;margin:0 auto}










/* ── ARTICLE PAGE ──────────────────────────────────────────────── */
.article-breadcrumb{margin-top:0;padding:14px 40px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg);max-width:100%;overflow:hidden;white-space:nowrap}
.article-breadcrumb > span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.article-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.article-breadcrumb a:hover{color:var(--blue)}
.article-wrap{max-width:780px;margin:0 auto;padding:40px 40px 60px;width:100%}

/* ── ARTICLE HERO — clean, no border ─────────────────────────── */
.article-hero{padding:0 0 32px}
.article-cat{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:10px}
.article-wrap h1{font-family:var(--fd);font-size:clamp(28px,3.5vw,46px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin-bottom:14px;color:var(--text)}
.lead,.article-lead{font-size:16px;color:var(--text2);margin-bottom:20px;line-height:1.7}

/* ── ARTICLE META — clean, no box ─────────────────────────────── */
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;margin-bottom:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.meta-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-family:var(--fd);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.5px;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.meta-author-info{display:flex;flex-direction:column;gap:2px}
.meta-author-name{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.meta-author-title{font-size:11px;color:var(--muted);font-weight:500}
.meta-divider{width:1px;height:32px;background:var(--border);margin:0 2px}
.meta-date,.meta-read{color:var(--text2);display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;background:var(--bg2);padding:4px 10px;border-radius:100px;border:1px solid var(--border)}

/* ── TOC — simple numbered list, no box ──────────────────────── */
.toc,.toc-box{margin:20px 0 24px;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px}
.toc h4,.toc-box h4{font-family:var(--fd);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:12px}
.toc ol,.toc-list{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc ol li,.toc-list li{counter-increment:toc;padding:3px 0;font-size:13px;display:flex;gap:10px;align-items:baseline;line-height:1.5}
.toc ol li::before,.toc-list li::before{content:counter(toc);font-family:var(--fd);font-size:10px;font-weight:700;color:var(--muted);min-width:16px;flex-shrink:0}
.toc ol a,.toc-list a{color:var(--text2);text-decoration:none;transition:color .2s}
.toc ol a:hover,.toc-list a:hover{color:var(--blue)}

/* ── ARTICLE BODY ─────────────────────────────────────────────── */
.article-body{padding-top:0}
.article-body p{font-size:15.5px;color:var(--text2);margin-bottom:16px;line-height:1.72}
.article-body h2{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.5px;margin:28px 0 10px;color:var(--text)}
.article-body h3{font-family:var(--fd);font-size:16px;font-weight:700;margin:18px 0 7px;color:var(--text)}
.article-body ul,.article-body ol{padding-left:20px;margin-bottom:16px}
.article-body li{font-size:15px;color:var(--text2);margin-bottom:6px;line-height:1.7}
.article-body strong{color:var(--text);font-weight:600}
.article-body a{color:var(--blue);text-decoration:none}
.article-body a:hover{text-decoration:underline}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body th{padding:9px 13px;background:var(--bg3);font-weight:600;border-bottom:1px solid var(--border);color:var(--text2);text-align:left;font-size:12px;text-transform:uppercase}
.article-body td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text2)}
.article-body tr:last-child td{border-bottom:none}
.article-body pre{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-size:13px;margin:16px 0}

/* ── ARTICLE TAGS ─────────────────────────────────────────────── */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.article-tag{font-size:11px;font-weight:600;padding:4px 12px;border-radius:100px;background:var(--blue-lt);color:var(--blue);border:1px solid var(--blue-bd)}

/* ── BOXES — unified blue, professional ──────────────────────── */
.info-box,.tip-box,.warn-box{
  padding:14px 16px;
  margin:24px 0;
  font-size:14px;
  line-height:1.7;
  background:var(--blue-lt);
  border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;
  color:var(--text2);
}
.info-box p,.tip-box p,.warn-box p{margin:0;color:var(--text2);font-size:14px;line-height:1.7}
.info-box strong,.tip-box strong,.warn-box strong{color:var(--text);font-weight:700}
.info-box a,.tip-box a,.warn-box a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-color:rgba(37,99,235,.3);text-underline-offset:2px;transition:text-decoration-color .15s}
.info-box a:hover,.tip-box a:hover,.warn-box a:hover{text-decoration-color:var(--blue)}

/* ── BLOCKQUOTE — match design ────────────────────────────── */
blockquote{
  margin:24px 0;
  padding:16px 20px;
  background:var(--bg3);
  border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;
  color:var(--text2);
  font-style:normal;
  font-size:15px;
  line-height:1.7;
}
blockquote p{margin:0}
blockquote cite{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-style:normal}
blockquote cite::before{content:"— "}

.cta-box{background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;padding:28px;margin:28px 0;text-align:center}
.cta-box h3{font-family:var(--fd);font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text)}
.cta-box p{font-size:15px;color:var(--text2);margin-bottom:18px}
.cta-box a,.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--blue);color:#fff!important;border-radius:100px;font-size:14px;font-weight:700;text-decoration:none!important;transition:background .2s}
.cta-box a:hover,.cta-btn:hover{background:var(--blue2)}
.tip-label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin-bottom:6px;display:block}

/* ── DATA TABLE ───────────────────────────────────────────────── */
.data-table,.quality-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.data-table th,.quality-table th{padding:9px 13px;background:var(--bg3);font-weight:600;border-bottom:1px solid var(--border);color:var(--text2);text-align:left;font-size:12px;text-transform:uppercase}
.data-table td,.quality-table td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text2)}
.data-table tr:last-child td,.quality-table tr:last-child td{border-bottom:none}

/* ── FAQ SECTION — no top border, spacing only ────────────────── */
.faq-section{padding:36px 0 0;margin-top:4px}
.faq-section h2{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:20px;color:var(--text)}
.faq-list{list-style:none;padding:0;margin:0}
/* ── RELATED ARTICLES — no top border, spacing only ──────────── */
.related-widget{padding:36px 0 0;margin-top:4px}
.related-widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.related-widget-header h2{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--text);margin:0;letter-spacing:-.5px}
.related-widget-header a{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:5px;transition:gap .2s}
.related-widget-header a:hover{gap:9px}
.related-articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-card{display:flex;flex-direction:column;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);transition:all .22s}
.rel-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 8px 24px rgba(37,99,235,.12)}
.rel-thumb{height:90px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.rel-thumb-icon{font-size:32px;line-height:1}
.rel-thumb-bar{position:absolute;bottom:0;left:0;right:0;height:3px}
.rel-body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column}
.rel-cat-badge{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:100px;align-self:flex-start;background:var(--blue-lt);color:var(--blue);margin-bottom:6px;border:1px solid var(--blue-bd)}
.rel-title{font-family:var(--fd);font-size:12px;font-weight:700;line-height:1.4;color:var(--text);flex:1;margin-bottom:8px}
.rel-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.rel-read{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:3px}
.rel-arrow{width:22px;height:22px;background:var(--blue-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;border:1px solid var(--blue-bd)}
.rel-arrow svg{color:var(--blue);width:10px;height:10px}
.rel-card:hover .rel-arrow{background:var(--blue);border-color:var(--blue)}
.rel-card:hover .rel-arrow svg{color:#fff}

/* ── READING PROGRESS ─────────────────────────────────────────── */
.reading-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--blue),#60a5fa);z-index:9999;transition:width .1s linear;border-radius:0 2px 2px 0}

/* Anchor offset for fixed nav */
h2[id],h3[id]{scroll-margin-top:80px}

/* article wrapper */
article{max-width:780px;margin:0 auto;padding:0;width:100%;display:block}

/* ── STATIC PAGES (about, contact, privacy, terms) ────────────── */
.page-hero{padding:40px 48px 24px;max-width:860px;margin:0 auto;text-align:center}
.page-hero h1{font-family:var(--fd);font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-2px;line-height:1.0;margin-bottom:14px;color:var(--text)}
.page-hero p{font-size:17px;color:var(--text2);line-height:1.7;max-width:560px;margin:0 auto 0}
.page-hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);padding:5px 14px;border-radius:100px;margin-bottom:20px}
.page-body{max-width:860px;margin:0 auto;padding:0 48px 80px}
.page-section{margin-bottom:32px}
.page-section h2{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--text);margin-bottom:12px}
.page-section h3{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--text);margin:20px 0 8px}
.page-section p{font-size:15px;color:var(--text2);line-height:1.72;margin-bottom:12px}
.page-section ul{padding-left:20px;margin-bottom:10px}
.page-section li{font-size:15px;color:var(--text2);line-height:1.65;margin-bottom:5px}
.page-section a{color:var(--blue);text-decoration:none}
.page-section a:hover{text-decoration:underline}
.page-divider{border:none;border-top:1px solid var(--border);margin:28px 0}
.page-toc{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:36px}
.page-toc-title{font-family:var(--fd);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:12px}
.page-toc ol{padding-left:18px;margin:0}
.page-toc li{font-size:13px;color:var(--text2);padding:3px 0;line-height:1.5}
.page-toc a{color:var(--text2);text-decoration:none;transition:color .2s}
.page-toc a:hover{color:var(--blue)}
.page-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:36px}
.page-summary-card{padding:20px;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.page-summary-icon{font-size:22px}
.page-summary-title{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--text)}
.page-summary-desc{font-size:13px;color:var(--text2);line-height:1.6}
.page-stat{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;padding:32px;background:linear-gradient(135deg,var(--blue),var(--blue2));border-radius:16px;margin:24px 0 32px}
.page-stat-item{text-align:center}
.page-stat-n{font-family:var(--fd);font-size:38px;font-weight:800;color:#fff;letter-spacing:-2px;line-height:1}
.page-stat-l{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px;font-weight:500}
.principle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:20px 0}
.principle-card{padding:24px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;transition:all .25s;position:relative;overflow:hidden}
.principle-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.principle-card:hover{border-color:var(--blue);background:linear-gradient(135deg,var(--blue-lt) 0%,#fff 60%);transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,99,235,.10)}
.principle-card:hover::before{transform:scaleY(1)}
.principle-icon{font-size:28px;margin-bottom:12px;display:inline-block;line-height:1}
.principle-title{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.2px}
.principle-desc{font-size:13.5px;color:var(--text2);line-height:1.65}

.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:20px 0}
.team-card{padding:28px 24px;background:var(--bg);border:1.5px solid var(--border);border-radius:16px;display:flex;flex-direction:column;gap:14px;transition:all .25s;position:relative;overflow:hidden}
.team-card:hover{border-color:var(--blue);background:linear-gradient(135deg,var(--blue-lt) 0%,#fff 70%);transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,99,235,.10)}
.team-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-family:var(--fd);font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.team-name{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.team-role{font-size:12px;font-weight:700;color:var(--blue);margin-top:-8px;text-transform:uppercase;letter-spacing:.6px}
.team-desc{font-size:13.5px;color:var(--text2);line-height:1.65}
.what-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:20px 0}
.what-card{padding:22px 20px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text);transition:all .25s;position:relative;overflow:hidden}
.what-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.what-card:hover{border-color:var(--blue);background:linear-gradient(180deg,var(--blue-lt) 0%,#fff 100%);transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,99,235,.12)}
.what-card:hover::before{transform:scaleX(1)}
.what-card-icon{font-size:30px;margin-bottom:12px;display:block;line-height:1}
.what-card-title{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:-.2px}
.what-card-count{font-size:11px;color:var(--blue);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.what-card-desc{font-size:13px;color:var(--text2);line-height:1.55}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}
.contact-card{padding:22px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;transition:border-color .2s}
.contact-card:hover{border-color:var(--blue-bd)}
.contact-card-icon{font-size:22px;margin-bottom:10px}
.contact-card-title{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.contact-card-desc{font-size:13px;color:var(--text2);line-height:1.6}
.contact-email{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--blue);color:#fff;border-radius:100px;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;margin:8px 0}
.contact-email:hover{background:var(--blue2);transform:translateY(-1px)}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s;margin-top:32px}
.back-link:hover{color:var(--blue)}
.legal-meta{font-size:13px;color:var(--muted);margin-bottom:32px;display:flex;gap:16px;flex-wrap:wrap}
.legal-meta span{display:flex;align-items:center;gap:5px}
.page-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.page-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--blue);color:#fff;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.page-cta-btn:hover{background:var(--blue2)}
.page-cta-btn.outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue-bd)}
.page-cta-btn.outline:hover{background:var(--blue-lt)}


/* ── DATA TABLE ───────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.data-table th{padding:9px 13px;background:var(--bg3);font-weight:600;border-bottom:1px solid var(--border);color:var(--text2);text-align:left;font-size:12px;text-transform:uppercase}
.data-table td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text2)}
.data-table tr:last-child td{border-bottom:none}
/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .why-grid{gap:48px}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .blog-preview-grid{grid-template-columns:repeat(2,1fr)}
  .principle-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  nav{padding:0 16px}
  .nav-right .nav-link,.nav-right .nav-cta{display:none}
  /* Phase 3.19.6 fix: with all .nav-link hidden, .nav-right would
     otherwise float at the centre because of nav's justify-content:
     space-between. Push it to the right (next to the hamburger)
     using margin-left:auto + tight gap. */
  .nav-right{
    margin-left:auto;
    margin-right:8px;
    gap:0;
  }
  .hamburger{display:flex!important}
  .hero{padding:84px 20px 40px}
  .hero h1{letter-spacing:-2px}
  /* Phase 3.19.6: new search-first hero — mobile */
  .hero-h1{
    font-size:clamp(26px,7vw,40px) !important;
    letter-spacing:-1px !important;
    margin-bottom:12px !important;
  }
  .hero-desc{font-size:14px;margin-bottom:24px}
  .hero-search{max-width:100%}
  .search-input{padding:15px 56px 15px 20px;font-size:15px}
  .search-btn{width:40px;height:40px;right:5px}
  .tools-section{padding:32px 20px 56px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .stats-banner{padding:28px 20px}
  .stats-inner{gap:28px}
  .banner-stat-num{font-size:32px}
  .why-section{padding:48px 20px}
  .why-grid{grid-template-columns:1fr;gap:32px}
  .footer-inner{padding:32px 20px 0;grid-template-columns:1fr 1fr;gap:20px}
  .footer-bottom{padding:14px 20px;flex-direction:column;gap:8px;text-align:center}
  /* Phase 3.19.5: enlarged footer column titles on mobile */
  .footer-col h4{font-size:13px;margin-bottom:14px}
  .footer-col a{font-size:14px;margin-bottom:10px}
  .blog-grid{grid-template-columns:1fr;padding:0 20px 16px}
  .blog-preview-section{padding:48px 20px}
  .blog-preview-grid{grid-template-columns:1fr}
  .blog-preview-header{flex-direction:column;align-items:flex-start}
    .article-breadcrumb{margin-top:0;padding:10px 16px}
  .article-wrap{padding:12px 20px 48px;max-width:100%}
  .article-wrap h1{font-size:clamp(22px,6vw,36px)}
  .article-body h2{font-size:19px}
  .related-articles-grid{grid-template-columns:repeat(2,1fr)}
    .page-hero{padding:84px 20px 40px}
  .page-body{padding:0 20px 56px}
  .page-summary{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .what-grid{grid-template-columns:repeat(2,1fr)}
  .page-stat{padding:24px 20px;gap:32px}
  .page-stat-n{font-size:28px}
}
@media(max-width:560px){
  .related-articles-grid{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .team-grid{grid-template-columns:1fr}
  .what-grid{grid-template-columns:1fr}
  /* H10 fix: tool-cards on small screens can overflow with long names/descriptions */
  .tool-card{min-height:160px;padding:16px}
  .tool-name{font-size:13px;line-height:1.25}
  .tool-desc{font-size:11.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tool-icon{width:36px;height:36px;margin-bottom:8px}
  .tool-icon svg{width:18px;height:18px}
  .tool-tag{font-size:9px;padding:2px 7px;margin-top:8px}
}
@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr}
}

/* ── Dark Mode toggle button ─────────────────────────────────────
   Phase 3.19.6: redesigned. Was emoji-based (rendering varied per OS),
   now uses an SVG injected from pwa.js. Circular 36×36 button with
   thin border, smooth hover, fits cleanly between the nav links and
   any other navbar element. */
#dm-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin-left:6px;
  background:transparent;
  border:1.5px solid var(--border);
  border-radius:50%;
  padding:0;
  cursor:pointer;
  color:var(--text2);
  transition:all .18s ease;
  line-height:1;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#dm-toggle:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-lt);
  transform:translateY(-1px);
}
#dm-toggle svg{display:block}
#dm-toggle:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}


/* ═══════════════════════════════════════════════════════════════
   AD ZONES — controlled via /js/ads-config.js
   Default: HIDDEN. ads.js makes them visible only when filled.
   ═══════════════════════════════════════════════════════════════ */
.ad-zone{
  /* Hidden by default to prevent layout shift before ads.js runs */
  display:none;
  margin:24px auto;
  padding:8px 8px 12px;
  text-align:center;
  background:var(--bg2);
  border-radius:var(--rs);
  border:1px solid var(--border);
  position:relative;
}
/* Empty ad-zone or with no children must NEVER occupy space */
.ad-zone:empty{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  height:0 !important;
}
.ad-zone[data-filled="true"]{
  display:block;
}
.ad-zone[data-disabled="true"]{
  display:none !important;
}
.ad-zone::before{
  content:"Advertisement";
  display:block;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:8px;
  font-weight:600;
  opacity:.7;
}
/* ad-zone outside content blocks → cap width */
body > .ad-zone,
main > .ad-zone{
  max-width:760px;
  padding-left:24px;
  padding-right:24px;
}
/* hide when ad failed to load */
.ad-zone[data-filled="true"]:has(ins[data-ad-status="unfilled"]){
  display:none;
}

/* ── AdSense Auto Ads layout guards ──────────────────────────
   These rules don't disable any ad type — they prevent layout
   breaks when AdSense injects ads into the page. */
ins.adsbygoogle{
  max-width:100% !important;
  overflow:hidden !important;
}
ins.adsbygoogle[data-ad-format]{
  display:block !important;
  margin:24px auto !important;
}
/* If AdSense injects an ad inside the tools-grid, span full width */
.tools-grid > ins.adsbygoogle,
.tools-grid > .adsbygoogle{
  grid-column:1 / -1;
  margin:16px 0;
}
/* Mobile: prevent horizontal overflow */
@media(max-width:768px){
  .ad-zone{margin:20px 12px}
  body > .ad-zone, main > .ad-zone{padding-left:16px;padding-right:16px}
  ins.adsbygoogle{max-width:calc(100vw - 32px) !important}
}

/* ════════════════════════════════════════════════════════════════════
   IMGAVIO PRO v2 — DESIGN SYSTEM
   ════════════════════════════════════════════════════════════════════
   Unified patterns used across all 9 main pages + 35 tools + 19 blog
   ════════════════════════════════════════════════════════════════════ */

/* ── Spacing System ────────────────────────────────────────── */
:root{
  --section-pad-y: 80px;
  --section-pad-y-md: 64px;
  --section-pad-y-sm: 48px;
  --container-wide: 1200px;
  --container-medium: 960px;
  --container-narrow: 720px;
}

/* ── Background Rhythm ─────────────────────────────────────── */
.bg-white{background:#fff}
.bg-soft{background:var(--bg2)}
.bg-blue-grad{background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);color:#fff}

/* ── Universal Hero Pattern ────────────────────────────────── */
.v2-hero{
  padding:32px 24px 80px;
  text-align:center;
  position:relative;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.v2-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  background:var(--blue-lt);
  border:1px solid rgba(37,99,235,.15);
  padding:7px 15px;
  border-radius:100px;
  margin-bottom:14px;
  letter-spacing:.2px;
}
.v2-hero-h1{
  font-family:var(--fd);
  font-size:clamp(32px,5vw,52px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-1.6px;
  color:var(--text);
  margin:0 auto 14px;
  max-width:900px;
}
.v2-hero-h1 .accent{color:var(--blue)}
.v2-hero-desc{
  font-size:clamp(15px,1.8vw,17px);
  color:var(--text2);
  line-height:1.55;
  max-width:620px;
  margin:0 auto 18px;
}
.v2-hero-cta{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.v2-btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--blue);
  color:#fff !important;
  padding:12px 24px;
  border-radius:12px;
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.v2-btn-primary:hover{background:var(--blue2);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.35)}
.v2-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg);
  color:var(--text) !important;
  padding:12px 24px;
  border-radius:12px;
  font-weight:600;
  font-size:14.5px;
  text-decoration:none;
  border:1.5px solid var(--border);
  transition:all .2s;
}
.v2-btn-secondary:hover{border-color:var(--blue);color:var(--blue) !important;transform:translateY(-2px)}

/* ── Universal Section Pattern (TIGHTER) ──────────────────── */
.v2-section{padding:48px 24px;position:relative}
.v2-section-inner{
  max-width:var(--container-wide);
  margin:0 auto;
}
.v2-section-narrow{max-width:var(--container-medium)}
.v2-section-text{max-width:var(--container-narrow)}

.v2-section-header{
  text-align:center;
  margin-bottom:32px;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.v2-section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:800;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:1.4px;
  margin-bottom:10px;
}
.v2-section-h2{
  font-family:var(--fd);
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-1.2px;
  color:var(--text);
  margin:0 0 14px;
}
.v2-section-h2 .accent{color:var(--blue)}
.v2-section-sub{
  font-size:clamp(15px,1.6vw,16px);
  color:var(--text2);
  line-height:1.55;
  max-width:560px;
  margin:0 auto;
}

/* ── Stats Bar Pattern (compact, integrated) ────────────────── */
.v2-stats-bar{
  background:linear-gradient(135deg,#1e40af 0%,var(--blue) 50%,var(--blue2) 100%);
  padding:24px 24px;
  position:relative;
}
.v2-stats-inner{
  max-width:var(--container-wide);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.v2-stat-item{
  text-align:center;
  position:relative;
}
.v2-stat-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-12px;
  top:20%;
  bottom:20%;
  width:1px;
  background:rgba(255,255,255,.12);
}
.v2-stat-num{
  font-family:var(--fd);
  font-size:clamp(26px,4vw,40px);
  font-weight:800;
  color:#fff;
  letter-spacing:-1.5px;
  line-height:1;
}
.v2-stat-label{
  font-size:12px;
  color:rgba(255,255,255,.85);
  margin-top:8px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
}

/* ── Universal Card Patterns ───────────────────────────────── */
/* Feature Card — simple, connected, no fragmentation */
.v2-card-feature{
  padding:22px 20px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  transition:all .2s ease;
  text-decoration:none;
  color:var(--text);
  display:block;
}
.v2-card-feature:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(37,99,235,.08);
}
.v2-card-feature .v2-card-icon{font-size:28px;margin-bottom:10px;display:block;line-height:1}
.v2-card-feature .v2-card-title{
  font-family:var(--fd);
  font-size:15.5px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:-.2px;
}
.v2-card-feature .v2-card-desc{
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
}

/* Pill / Chip pattern */
.v2-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  background:var(--bg);
  border:1.5px solid var(--border);
  padding:8px 14px;
  border-radius:100px;
  text-decoration:none;
  transition:all .2s;
}
.v2-pill:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-lt);
  transform:translateY(-1px);
}
.v2-pill .v2-pill-emoji{font-size:14px}
.v2-pills-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

/* Category Card (large, for tools cat nav) */
.v2-cat-card{
  display:block;
  padding:28px 22px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:16px;
  text-decoration:none;
  color:var(--text);
  transition:all .25s;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.v2-cat-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s;
}
.v2-cat-card:hover{
  border-color:var(--blue);
  background:linear-gradient(180deg,var(--blue-lt) 0%,#fff 70%);
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(37,99,235,.12);
}
.v2-cat-card:hover::before{transform:scaleX(1)}
.v2-cat-icon{
  font-size:38px;
  margin-bottom:12px;
  display:block;
  line-height:1;
}
.v2-cat-name{
  font-family:var(--fd);
  font-size:17px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.v2-cat-count{
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:.3px;
}

/* ── Final CTA Box ─────────────────────────────────────────── */
.v2-final-cta{padding:56px 24px;
  text-align:center;
  background:linear-gradient(135deg,#1e3a8a 0%,var(--blue) 50%,var(--blue2) 100%);
  position:relative;
  overflow:hidden;
}
.v2-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12) 0%,transparent 40%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.08) 0%,transparent 40%);
  pointer-events:none;
}
.v2-final-cta-inner{
  max-width:640px;
  margin:0 auto;
  position:relative;
}
.v2-final-cta h2{
  font-family:var(--fd);
  font-size:clamp(24px,3.5vw,34px);
  font-weight:800;
  color:#fff;
  letter-spacing:-1.2px;
  margin:0 0 12px;
  line-height:1.15;
}
.v2-final-cta p{
  font-size:15.5px;
  color:rgba(255,255,255,.9);
  margin:0 0 20px;
  line-height:1.55;
}
.v2-final-cta .v2-btn-primary{
  background:#fff;
  color:var(--blue) !important;
  padding:13px 28px;
  font-size:15px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.v2-final-cta .v2-btn-primary:hover{
  background:#fff;
  color:var(--blue2) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}

/* ── Reading Progress Bar (for blog articles) ──────────────── */
.v2-progress-bar{
  position:fixed;
  top:0;left:0;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  z-index:9999;
  transition:width .1s ease-out;
}

/* ── Author Byline Card (for blog articles) ────────────────── */
.v2-author-card{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:14px 22px;
  margin:24px auto 0;
  text-align:left;
  transition:all .2s;
}
.v2-author-card:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.v2-author-avatar{
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  font-family:var(--fd);
  font-size:18px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.v2-author-info{display:flex;flex-direction:column;gap:2px}
.v2-author-name{
  font-family:var(--fd);
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.2px;
}
.v2-author-role{
  font-size:11.5px;
  color:var(--blue);
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.v2-author-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.v2-author-meta span{margin:0 4px}

/* ── Mobile Responsive ────────────────────────────────────── */
@media(max-width:768px){
  .v2-hero{padding:32px 20px 20px}
  .v2-section{padding:40px 20px}
  .v2-stats-bar{padding:24px 20px}
  .v2-stats-inner{grid-template-columns:repeat(2,1fr);gap:16px}
  .v2-stat-item:nth-child(2)::after,.v2-stat-item:not(:last-child)::after{display:none}
  .v2-final-cta{padding:40px 20px}
  .v2-section-header{margin-bottom:24px}
  .v2-author-card{padding:12px 16px}
}
@media(max-width:480px){
  .v2-hero-cta{flex-direction:column;align-items:stretch}
  .v2-btn-primary,.v2-btn-secondary{justify-content:center}
}


/* ════════════════════════════════════════════════════════════════════
   FOOTER v2 — DARK THEME (premium global brand feel)
   ════════════════════════════════════════════════════════════════════ */
footer.v2-footer{
  background:#0f172a;
  color:#cbd5e1;
  border-top:none;
  margin-top:0;
  width:100%;
}
.v2-footer-main{
  max-width:1280px;
  margin:0 auto;
  padding:48px 48px 28px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
}
.v2-footer-brand{display:flex;flex-direction:column;gap:12px}
.v2-footer-logo{
  font-family:var(--fd);
  font-size:24px;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  letter-spacing:-1px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.v2-footer-logo-icon{flex-shrink:0;transition:transform .25s}
.v2-footer-logo-text{color:#fff;line-height:1}
.v2-footer-logo:hover .v2-footer-logo-icon{transform:rotate(-4deg) scale(1.05)}
.v2-footer-tagline{
  font-size:13px;
  color:#94a3b8;
  line-height:1.6;
  max-width:280px;
  margin:0;
}
.v2-footer-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  font-size:12px;
  color:#64748b;
  font-weight:600;
  margin-top:6px;
}
.v2-footer-stats span:not(.v2-stat-dot){color:#94a3b8}
.v2-stat-dot{color:#334155}

.v2-footer-col h4{
  font-family:var(--fd);
  font-size:12.5px;
  font-weight:800;
  color:#fff;
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.v2-footer-col h4.v2-h4-spacing{margin-top:20px}
.v2-footer-col a{
  display:block;
  font-size:13px;
  color:#94a3b8;
  text-decoration:none;
  padding:4px 0;
  transition:color .15s;
  line-height:1.4;
}
.v2-footer-col a:hover{color:#fff}

/* Tagcloud */
.v2-footer-tagcloud{
  max-width:1280px;
  margin:0 auto;
  padding:16px 48px;
  border-top:1px solid #1e293b;
  font-size:13px;
  color:#94a3b8;
  line-height:1.6;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.v2-footer-tagcloud::-webkit-scrollbar{display:none}
.v2-footer-tagcloud-label{
  font-weight:700;
  color:#fff;
  margin-right:8px;
}
.v2-footer-tagcloud a{
  color:#94a3b8;
  text-decoration:none;
  transition:color .15s;
}
.v2-footer-tagcloud a:hover{color:#60a5fa}
.v2-footer-tagcloud-sep{color:#334155;margin:0 6px}

/* Bottom bar */
.v2-footer-bottom{
  max-width:1280px;
  margin:0 auto;
  padding:16px 48px;
  border-top:1px solid #1e293b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:12.5px;
  color:var(--muted);
  flex-wrap:wrap;
}
.v2-footer-bottom-text{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#94a3b8}
.v2-footer-heart{color:#ef4444}
.v2-footer-bottom-links{display:flex;gap:18px}
.v2-footer-bottom-links a{
  color:#94a3b8;
  text-decoration:none;
  transition:color .15s;
}
.v2-footer-bottom-links a:hover{color:#fff}

@media(max-width:1024px){
  .v2-footer-main{grid-template-columns:1fr 1fr;gap:32px;padding:48px 24px 24px}
  .v2-footer-tagcloud,.v2-footer-bottom{padding-left:24px;padding-right:24px}
}
@media(max-width:560px){
  .v2-footer-main{grid-template-columns:1fr;gap:28px;padding:40px 20px 20px}
  .v2-footer-tagcloud,.v2-footer-bottom{padding-left:20px;padding-right:20px}
  .v2-footer-bottom{flex-direction:column;text-align:center;gap:8px}
}


/* ════════════════════════════════════════════════════════════════════
   ARTICLE v2 — Enhanced typography + author card + reading progress
   ════════════════════════════════════════════════════════════════════ */

/* Reading Progress Bar (auto via JS) */
.reading-progress{
  position:fixed;
  top:0;left:0;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  z-index:9999;
  transition:width .1s ease-out;
}

/* Article wrap: TIGHT spacing — content visible quickly (Google + UX) */
.article-wrap{
  max-width:760px;
  margin:0 auto;
  padding:20px 24px 32px;
}

/* Breadcrumb tight spacing */
.article-breadcrumb + .ad-zone{margin-top:0;margin-bottom:0}

/* Article hero — compact */
.article-hero{
  padding:0 0 20px !important;
  text-align:center;
  position:relative;
}
.article-cat{
  display:inline-block !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--blue);
  background:var(--blue-lt);
  padding:5px 14px;
  border-radius:100px;
  border:1px solid rgba(37,99,235,.15);
  margin-bottom:14px !important;
}
.article-hero h1{
  font-family:var(--fd);
  font-size:clamp(26px,4vw,38px);
  font-weight:800;
  letter-spacing:-1.4px;
  line-height:1.15;
  margin:0 auto 14px;
  color:var(--text);
  max-width:720px;
}
.article-lead{
  font-size:clamp(15px,1.8vw,17px) !important;
  color:var(--text2);
  line-height:1.6;
  max-width:640px;
  margin:0 auto 18px;
  font-weight:400;
}

/* Article meta: card-style centered author display */
.article-meta{
  display:inline-flex !important;
  align-items:center;
  gap:14px;
  padding:12px 20px !important;
  background:var(--bg);
  border:1.5px solid var(--border) !important;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
  margin:0 auto !important;
  text-align:left;
  flex-wrap:nowrap;
  width:auto;
}
.meta-avatar{
  width:48px !important;
  height:48px !important;
  font-size:16px !important;
  flex-shrink:0;
}
.meta-author-info{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.meta-author-name{
  font-family:var(--fd);
  font-size:14px !important;
  font-weight:700;
  color:var(--text);
}
.meta-author-title{
  font-size:11px !important;
  color:var(--blue);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.meta-divider{
  width:1px;
  height:40px;
  background:var(--border);
  flex-shrink:0;
}
.meta-date,.meta-read{
  font-size:12.5px !important;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}

/* Article body: TIGHT typography */
.article-body{padding-top:20px !important}
.article-body p{
  font-size:16px !important;
  line-height:1.75 !important;
  color:#374151;
  margin-bottom:14px !important;
}
.article-body h2{
  font-family:var(--fd);
  font-size:clamp(20px,2.6vw,26px) !important;
  font-weight:800;
  letter-spacing:-.5px;
  margin:32px 0 12px !important;
  color:var(--text) !important;
  line-height:1.2;
}
.article-body h3{
  font-family:var(--fd);
  font-size:17px !important;
  font-weight:700;
  margin:22px 0 10px !important;
  color:var(--text);
  letter-spacing:-.3px;
}
.article-body ul,.article-body ol{padding-left:22px !important;margin-bottom:16px !important}
.article-body li{
  font-size:15.5px !important;
  color:#374151;
  margin-bottom:8px !important;
  line-height:1.7;
}
.article-body strong{color:var(--text);font-weight:700}
.article-body a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3);transition:border-color .15s}
.article-body a:hover{border-bottom-color:var(--blue)}

/* Article tags: better styling */
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:24px 0;
  margin-top:32px;
  border-top:1px solid var(--border);
}
.article-tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  background:var(--bg2);
  padding:6px 12px;
  border-radius:100px;
  border:1px solid var(--border);
  transition:all .2s;
}
.article-tag:hover{background:var(--blue-lt);color:var(--blue);border-color:var(--blue-bd)}

/* Mobile */
@media(max-width:768px){
  .article-wrap{padding:12px 16px 24px}
  .article-meta{flex-wrap:wrap;padding:12px 16px !important;gap:10px !important}
  .meta-divider{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   MISSING CLASSES — Photo editor, blog cards, FAQ, dynamic inputs
   ════════════════════════════════════════════════════════════════════ */

/* Blog index card extras */
.blog-arrow-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--blue-lt);
  color:var(--blue);
  font-weight:700;
  font-size:18px;
  transition:all .2s;
  border:1.5px solid transparent;
  flex-shrink:0;
}
.blog-card:hover .blog-arrow-btn{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  transform:translateX(2px);
}
.blog-meta-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  font-size:12px;
  color:var(--muted);
}


/* ── Photo editor interactive viewer (iv-) classes ─────────────── */
.iv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  background:#fff;
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
}
.iv-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
.iv-btn:active{transform:translateY(1px)}
.iv-btn:disabled{opacity:.5;cursor:not-allowed}
.iv-btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.iv-btn-primary:hover{background:var(--blue2);color:#fff}
.iv-btn-compact{padding:7px 12px;font-size:12px}

.iv-input,.iv-select{
  width:100%;
  padding:9px 12px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:8px;
  transition:border-color .15s,box-shadow .15s;
}
.iv-input:focus,.iv-select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.iv-color-input{
  width:44px;
  height:36px;
  padding:2px;
  border:1.5px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  background:#fff;
}
.iv-slider{
  width:100%;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:var(--border);
  border-radius:3px;
  outline:none;
  cursor:pointer;
}
.iv-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--blue);
  cursor:pointer;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(37,99,235,.3);
  transition:transform .15s;
}
.iv-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.iv-slider::-moz-range-thumb{
  width:18px;height:18px;
  border-radius:50%;
  background:var(--blue);
  cursor:pointer;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(37,99,235,.3);
}

/* ── Photo editor (pe-) classes ─────────────────────────────── */
.pe-canvas-area{
  background:#1a1a1a;
  border-radius:12px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  position:relative;
  overflow:hidden;
}
.pe-canvas{
  max-width:100%;
  max-height:60vh;
  display:block;
  background:#fff;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.pe-quality-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:13px;
}
.pe-quality-row label{
  font-weight:600;
  color:var(--text);
  min-width:80px;
}
.pe-fmt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  background:#fff;
  color:var(--text2);
  border:1.5px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.4px;
  transition:all .2s;
  font-family:inherit;
}
.pe-fmt-btn:hover{border-color:var(--blue);color:var(--blue)}
.pe-fmt-btn.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}

/* ── Dynamically-rendered controller inputs (qr/html-to-image) ─ */
.qr-input,.htm-input{
  width:100%;
  padding:11px 14px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
  resize:vertical;
}
.qr-input:focus,.htm-input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}


/* ════════════════════════════════════════════════════════════════════
   Missing class definitions (discovered in deep audit)
   ════════════════════════════════════════════════════════════════════ */

/* Blog card meta layout */
.blog-meta-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--muted);
}

.blog-arrow-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--blue-lt);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .25s;
}
.blog-arrow-btn svg{width:14px;height:14px}
.blog-card:hover .blog-arrow-btn{
  background:var(--blue);
  color:#fff;
  transform:translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ — Universal harfex-style (used everywhere)
   ═══════════════════════════════════════════════════════════════ */
.homepage-faq-list,
.faq-list,
.faq{
  list-style:none;
  padding:0;
  margin:0;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.faq-item{
  border-bottom:1px solid var(--border);
  list-style:none;
}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 4px;
  cursor:pointer;
  font-family:var(--fd);
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
  user-select:none;
  transition:color .15s;
  line-height:1.4;
}
.faq-q:hover,
.faq-item.open .faq-q{color:var(--blue)}
.faq-q svg{
  color:var(--muted);
  transition:transform .25s, color .15s;
  flex-shrink:0;
  width:18px;
  height:18px;
}
.faq-item.open .faq-q svg{
  transform:rotate(180deg);
  color:var(--blue);
}
.faq-arrow{
  font-family:var(--fd);
  font-weight:300;
  color:var(--muted);
  flex-shrink:0;
  transition:color .15s;
  display:inline-block;
  line-height:1;
  width:18px;
  height:18px;
  text-align:center;
  font-size:22px;
}
.faq-arrow::before{
  content:"+";
  display:inline-block;
}
.faq-item.open .faq-arrow{
  color:var(--blue);
  background:transparent;
}
.faq-item.open .faq-arrow::before{
  content:"−";
}
.faq-q:hover .faq-arrow{color:var(--blue)}
.faq-a{
  display:none;
  padding:0 4px 18px;
  font-size:14.5px;
  color:var(--text2);
  line-height:1.7;
}
.faq-item.open .faq-a{display:block}

/* Empty ad zones don't take space */
.ad-zone:empty{display:none}
.ad-zone{margin:0}

/* Blog load more — hide cards beyond 12 */
.blog-card[data-hidden]{display:none}

/* ════════════════════════════════════════════════════════════════════
   ABOUT PAGE — Stats grid (harfex-inspired)
   ════════════════════════════════════════════════════════════════════ */
.about-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.about-stat{
  padding:20px 12px;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:var(--bg);
  transition:all .25s;
}
.about-stat:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,99,235,.08);
}
.about-stat-num{
  font-family:var(--fd);
  font-size:clamp(32px,4vw,44px);
  font-weight:800;
  color:var(--blue);
  letter-spacing:-1.5px;
  line-height:1;
  margin-bottom:6px;
}
.about-stat-label{
  font-size:13px;
  color:var(--text2);
  font-weight:600;
}
@media(max-width:768px){
  .about-stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ════════════════════════════════════════════════════════════════════
   SITEMAP — harfex-style inline links
   ════════════════════════════════════════════════════════════════════ */



.sm-content{max-width:860px;margin:0 auto;padding:48px 24px 64px}
.sm-h2{
  font-family:var(--fd);
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  letter-spacing:-1px;
  color:var(--text);
  margin:48px 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.sm-h2:first-of-type{margin-top:0}
/* SITEMAP: Category cards with pills */
.sm-cat{
  margin-bottom:14px;
  padding:20px 24px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  transition:all .2s;
}
.sm-cat:hover{
  border-color:var(--blue-bd);
  box-shadow:0 4px 14px rgba(37,99,235,.06);
}
.sm-cat-h3{
  font-family:var(--fd);
  font-size:17px;
  font-weight:800;
  color:var(--text);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:-.3px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.sm-cat-more{
  margin-left:auto;
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
  letter-spacing:.2px;
  transition:gap .2s;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.sm-cat-more:hover{gap:7px;text-decoration:underline}
/* Pills */
.sm-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sm-pills a{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  transition:all .18s;
  white-space:nowrap;
}
.sm-pills a:hover{
  background:var(--blue-lt);
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px);
}
/* Main Pages section — keep simpler (inline-style) */
section.sm-main-section .sm-pills a{
  font-weight:700;
  font-size:13.5px;
}
@media(max-width:560px){
  .sm-cat-h3{flex-wrap:wrap}
  .sm-cat-more{margin-left:0}
}




.sm-footer-note{
  text-align:center;
  margin-top:48px;
  font-size:14.5px;
  color:var(--text2);
}
.sm-footer-note a{
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
}
.sm-footer-note a:hover{text-decoration:underline}
@media(max-width:560px){
  
  
  .sm-cat-h3{flex-wrap:wrap}
}

/* Section transitions — when adjacent sections have same bg, reduce gap */
.v2-section + .v2-section:not(.bg-soft){padding-top:24px}
.v2-section.bg-soft + .v2-section.bg-soft{padding-top:24px}
.v2-section + .v2-section .v2-section-header{margin-top:0}

/* When .v2-section follows .v2-hero (which has its own bottom padding), reduce top */
.v2-hero + .v2-section{padding-top:56px}
.v2-hero.v2-hero-compact + .v2-section{padding-top:24px}

@media(max-width:600px){
  .v2-hero-stats{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:32px;
    padding-top:28px;
  }
  .v2-hero-stat:nth-child(2)::after{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   TRUST STRIP — stats as pills with colored icons (homepage + sitemap)
   ════════════════════════════════════════════════════════════════════ */
.trust-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:24px auto 0;
  max-width:920px;
  padding:0 8px;
}
.trust-pill-stat{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px 12px 14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  cursor:default;
  position:relative;
  overflow:hidden;
}
.trust-pill-stat::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ts-bg);
  opacity:0;
  transition:opacity .25s;
  z-index:0;
}
.trust-pill-stat:hover{
  border-color:var(--ts-color);
  transform:translateY(-3px);
  box-shadow:0 10px 24px -6px color-mix(in srgb, var(--ts-color) 25%, transparent);
}
.trust-pill-stat:hover::before{opacity:.6}
.trust-pill-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--ts-bg);
  color:var(--ts-color);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .25s;
  position:relative;
  z-index:1;
}
.trust-pill-stat:hover .trust-pill-icon{
  background:var(--ts-color);
  color:#fff;
  transform:scale(1.05);
}
.trust-pill-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  position:relative;
  z-index:1;
}
.trust-pill-num{
  font-family:var(--fd);
  font-size:20px;
  font-weight:800;
  color:var(--ts-color);
  letter-spacing:-.7px;
  line-height:1.05;
}
.trust-pill-label{
  font-size:12px;
  color:var(--text2);
  font-weight:600;
  letter-spacing:.1px;
  line-height:1.2;
}
@media(max-width:680px){
  .trust-strip{
    gap:8px;
    margin-top:28px;
  }
  .trust-pill-stat{
    padding:10px 14px 10px 10px;
    gap:10px;
  }
  .trust-pill-icon{width:32px;height:32px}
  .trust-pill-icon svg{width:16px;height:16px}
  .trust-pill-num{font-size:17px}
  .trust-pill-label{font-size:11px}
}
@media(max-width:420px){
  .trust-strip{
    grid-template-columns:repeat(2,1fr);
    display:grid;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COMPACT HERO — for tools/blog/about pages (less impactful than homepage)
   ════════════════════════════════════════════════════════════════════ */
.v2-hero.v2-hero-compact{
  padding:32px 24px 32px;
}
.v2-hero-h1.v2-hero-h1-compact{
  font-size:clamp(28px,3.6vw,40px);
  letter-spacing:-1.2px;
  margin-bottom:10px;
}
@media(max-width:768px){
  .v2-hero.v2-hero-compact{padding:24px 20px 40px}
  .v2-hero-h1.v2-hero-h1-compact{font-size:clamp(26px,5vw,32px)}
}

/* ════════════════════════════════════════════════════════════════════
   HERO MINI (iLoveIMG-style — homepage)
   Tool-first design: small hero, tools immediately below
   ════════════════════════════════════════════════════════════════════ */
.v2-hero.v2-hero-mini{
  padding:48px 24px 32px;
  text-align:center;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.v2-hero-h1-mini{
  font-family:var(--fd);
  font-size:clamp(28px,4.2vw,44px);
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1.15;
  color:var(--text);
  margin:0 auto 14px;
  max-width:780px;
}
.v2-hero-h1-mini .accent{
  color:var(--blue);
}
.v2-hero-desc-mini{
  font-size:clamp(15px,1.6vw,17px);
  color:var(--text2);
  max-width:600px;
  margin:0 auto;
  line-height:1.55;
}
@media(max-width:768px){
  .v2-hero.v2-hero-mini{padding:32px 20px 24px}
  .v2-hero-h1-mini{font-size:clamp(26px,5.5vw,34px);letter-spacing:-1px}
  .v2-hero-desc-mini{font-size:14.5px}
}

/* ════════════════════════════════════════════════════════════════════
   NAV — refined with sticky shadow, mega menu, search, active state
   ════════════════════════════════════════════════════════════════════ */

/* Sticky nav with shadow on scroll */
nav.scrolled{
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px -4px rgba(0,0,0,.06);
  background:rgba(255,255,255,.98);
}
[data-theme="dark"] nav.scrolled{
  background:rgba(15,23,42,.98);
  box-shadow:0 1px 3px rgba(0,0,0,.2), 0 8px 24px -4px rgba(0,0,0,.3);
}

/* Active state — current tool/page link is highlighted */
.nav-link.is-active{
  color:var(--blue);
  background:var(--blue-lt);
}
.nav-link{
  position:relative;
}

/* Dropdown trigger */
.nav-dropdown{
  position:relative;
  display:inline-block;
}
.nav-dropdown-toggle{
  background:none;
  border:none;
  padding:6px 12px;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--text2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:8px;
  transition:all .15s;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"]{
  color:var(--blue);
  background:var(--blue-lt);
}
.nav-chevron{
  transition:transform .2s;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron{
  transform:rotate(180deg);
}

/* Mega menu — fixed centered, never overflows screen */
.nav-mega-menu{
  position:fixed;
  top:74px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px, calc(100vw - 32px));
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 18px 10px;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.18), 0 4px 12px -4px rgba(0,0,0,.08);
  display:none;
  grid-template-columns:repeat(5, 1fr);
  gap:8px 18px;
  z-index:300;
  animation:megaFadeIn .18s ease-out;
}
.nav-mega-menu.open{display:grid}
@keyframes megaFadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.nav-mega-col{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.nav-mega-h{
  font-family:var(--fd);
  font-size:11px;
  font-weight:800;
  color:var(--text2);
  letter-spacing:.6px;
  text-transform:uppercase;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 8px 8px;
  border-bottom:1px solid var(--border);
}
.nav-mega-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.nav-mega-col a{
  padding:6px 8px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  border-radius:6px;
  transition:all .12s;
  display:block;
}
.nav-mega-col a:hover{
  background:var(--blue-lt);
  color:var(--blue);
  padding-left:12px;
}
.nav-mega-footer{
  grid-column:1 / -1;
  border-top:1px solid var(--border);
  margin-top:8px;
  padding-top:12px;
  text-align:center;
}
.nav-mega-cta{
  display:inline-block;
  padding:8px 22px;
  background:var(--blue);
  color:#fff !important;
  font-size:13px;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  transition:all .15s;
}
.nav-mega-cta:hover{
  background:var(--blue2);
  transform:translateY(-1px);
}

/* Search trigger button */
.nav-search-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 12px;
  margin-left:6px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  color:var(--text2);
  cursor:pointer;
  transition:all .15s;
}
.nav-search-trigger:hover{
  background:var(--blue-lt);
  border-color:var(--blue-bd);
  color:var(--blue);
}
.nav-search-kbd{
  font-size:11px;
  font-family:ui-monospace,monospace;
  padding:2px 6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text2);
  font-weight:600;
}

/* Search modal */
.search-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:14vh;
}
@media (max-width:768px){
  .search-modal{padding-top:6vh}
}
.search-modal[hidden]{display:none}
.search-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
  animation:fadeIn .15s;
}
.search-modal-panel{
  position:relative;
  width:min(640px, calc(100vw - 32px));
  max-height:70vh;
  background:var(--bg);
  border-radius:14px;
  box-shadow:0 24px 64px -12px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:slideDown .2s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.search-input-wrap{
  display:flex;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  gap:10px;
}
.search-icon{
  color:var(--text2);
  flex-shrink:0;
}
#search-input{
  flex:1;
  border:none;
  background:none;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  outline:none;
  padding:4px 0;
}
#search-input::placeholder{color:var(--muted)}
.search-close{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 10px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text2);
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.search-close:hover,
.search-close:active{
  background:var(--bg3, #e2e8f0);
  color:var(--text);
  border-color:var(--text2);
}
.search-close-hint{
  font-size:11px;
  font-family:ui-monospace,monospace;
  font-weight:600;
}
@media (max-width:768px){
  .search-close{
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
  }
  .search-close-hint{display:none}
}
[data-theme="dark"] .search-close:hover{background:var(--bg3)}
.search-results{
  flex:1;
  overflow-y:auto;
  padding:8px;
}
.search-result{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  cursor:pointer;
  transition:background .12s;
}
.search-result:hover,
.search-result.is-selected{
  background:var(--blue-lt);
}
.search-result-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
  border-radius:8px;
  background:var(--bg2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.search-result-text{
  flex:1;
  min-width:0;
}
.search-result-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.search-result-cat{
  font-size:11.5px;
  color:var(--text2);
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:600;
}
.search-result-arrow{
  color:var(--text2);
  flex-shrink:0;
  opacity:0;
  transition:opacity .12s;
}
.search-result:hover .search-result-arrow,
.search-result.is-selected .search-result-arrow{opacity:1}
.search-empty{
  text-align:center;
  padding:32px 16px;
  color:var(--text2);
  font-size:14px;
}

/* Mobile menu redesign — drawer with collapsible categories */
.mobile-search-wrap{
  position:relative;
  margin-bottom:14px;
}
.mobile-search-wrap input{
  width:100%;
  padding:10px 14px 10px 36px;
  font-family:inherit;
  font-size:14px;
  color:var(--text);
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:10px;
  outline:none;
}
.mobile-search-wrap input:focus{
  border-color:var(--blue);
  background:var(--bg);
}
.mobile-search-wrap svg{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text2);
  pointer-events:none;
}
.mobile-search-results{
  margin-bottom:14px;
}
.mobile-search-results:empty{display:none}
.mobile-search-results a{
  display:block;
  padding:8px 14px;
  font-size:13px;
  color:var(--text);
  border-radius:6px;
  text-decoration:none;
}
.mobile-search-results a:hover{
  background:var(--blue-lt);
  color:var(--blue);
}

.mobile-cat{
  border-bottom:1px solid var(--border);
  padding:6px 0;
}
.mobile-cat:last-of-type{margin-bottom:8px}
.mobile-cat summary{
  list-style:none;
  cursor:pointer;
  padding:10px 8px;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:6px;
  user-select:none;
}
.mobile-cat summary::-webkit-details-marker{display:none}
.mobile-cat summary::after{
  content:"+";
  margin-left:auto;
  font-size:18px;
  color:var(--text2);
  font-weight:600;
  line-height:1;
}
.mobile-cat[open] summary::after{content:"−"}
.mobile-cat summary:hover{background:var(--bg2)}
.mobile-cat-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.mobile-cat-count{
  font-size:11px;
  color:var(--text2);
  font-weight:600;
  background:var(--bg2);
  padding:2px 8px;
  border-radius:100px;
  letter-spacing:0;
}
.mobile-cat[open] .mobile-cat-count{
  background:var(--blue-lt);
  color:var(--blue);
}
.mobile-cat a{
  display:block;
  padding:8px 14px 8px 28px;
  font-size:13.5px;
  color:var(--text);
  text-decoration:none;
  border-radius:6px;
}
.mobile-cat a:hover{
  background:var(--blue-lt);
  color:var(--blue);
}
.mobile-all-tools{
  display:block;
  text-align:center;
  margin:14px 0 8px;
  padding:12px;
  background:var(--blue);
  color:#fff !important;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
}
.mobile-all-tools:hover{background:var(--blue2)}
.mobile-section-bottom{
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:13px;
}
.mobile-section-bottom a{
  color:var(--text2);
  text-decoration:none;
  padding:4px 0;
}
.mobile-section-bottom a:hover{color:var(--blue)}

/* Responsive nav links — hide on smaller screens */
@media (max-width: 1100px){
  .nav-links > a.nav-link:nth-child(3),
  .nav-links > a.nav-link:nth-child(4){display:none}
}
@media (max-width: 950px){
  .nav-links > a.nav-link:nth-child(2),
  .nav-links > a.nav-link:nth-child(5){display:none}
}
@media (max-width: 850px){
  .nav-links > a.nav-link{display:none}
}
@media (max-width: 768px){
  .nav-right{display:none}
}

/* Dark mode for mega menu + search modal */
[data-theme="dark"] .nav-mega-menu{
  background:var(--bg2);
  border-color:var(--border);
  box-shadow:0 12px 40px -8px rgba(0,0,0,.5), 0 4px 12px -4px rgba(0,0,0,.3);
}
[data-theme="dark"] .nav-dropdown-toggle:hover,
[data-theme="dark"] .nav-dropdown-toggle[aria-expanded="true"]{
  background:var(--bg3);
}
[data-theme="dark"] .nav-mega-col a:hover{
  background:var(--bg3);
  color:#93c5fd;
}
[data-theme="dark"] .nav-search-trigger{
  background:var(--bg2);
  border-color:var(--border);
}
[data-theme="dark"] .nav-search-trigger:hover{
  background:var(--bg3);
}
[data-theme="dark"] .search-modal-panel{
  background:var(--bg2);
}
[data-theme="dark"] .search-result:hover,
[data-theme="dark"] .search-result.is-selected{
  background:var(--bg3);
}
[data-theme="dark"] .nav-link.is-active{
  background:var(--bg3);
  color:#93c5fd;
}

/* Mobile fixes — Phase 17 */
@media (max-width: 768px){
  /* Tighten logo on small phones to prevent overflow */
  .logo{gap:7px;font-size:20px}
  .logo-icon{width:24px!important;height:24px!important}
  
  /* Hero mini — shorter text on mobile (CSS-only break) */
  .v2-hero-h1-mini{
    font-size:clamp(24px,6.8vw,32px) !important;
    line-height:1.2 !important;
    letter-spacing:-.8px !important;
    padding:0 8px;
  }
  .v2-hero-desc-mini{
    font-size:14px !important;
    padding:0 6px;
  }
  
  /* Mobile menu styling for new structure */
  .mobile-menu{
    padding:12px 16px 32px;
  }
  
  /* Tighten mobile-cat for better fit */
  .mobile-cat summary{
    padding:9px 8px;
    font-size:13.5px;
  }
  .mobile-cat a{
    padding:7px 12px 7px 26px;
    font-size:13px;
  }
}

/* Mobile search button — visible only on mobile, sits next to hamburger */
.mobile-search-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  z-index:201;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.mobile-search-btn:hover,
.mobile-search-btn:active{
  background:var(--bg2);
}
@media (max-width: 768px){
  .mobile-search-btn{
    display:inline-flex;
    margin-left:auto;        /* pushes to right, next to hamburger */
    margin-right:4px;        /* small gap between search and hamburger */
  }
  .hamburger{margin-left:0!important}
}