/* ==========================================================================
   Mr Tools — Free Tools Module Stylesheet
   Shared across every /free-tools/ page. Loaded ONLY when a visitor enters
   the Free Tools section — the homepage never references this file, so it
   has zero impact on homepage load time.

   Design tokens below are intentionally identical to the main site's
   inline <style> block (in index.html) so the two sections feel like one
   product. If you update brand colors on the main site, mirror the change
   in the :root block here too.
   ========================================================================== */

:root{
  --primary: #5B4BFF;
  --primary-dark: #4636D6;
  --secondary: #00D4FF;
  --accent: #FF6B35;
  --bg: #F8FAFC;
  --bg-alt: #EEF1F8;
  --text: #1F2937;
  --text-mute: #5B6472;
  --card-bg: rgba(255,255,255,0.7);
  --card-border: rgba(255,255,255,0.5);
  --shadow-soft: 0 20px 45px -20px rgba(91,75,255,0.25);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, #FF9166 100%);
  --transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg: #0B0E1A;
  --bg-alt: #10162B;
  --text: #E7EAF3;
  --text-mute: #93A0BF;
  --card-bg: rgba(23,28,50,0.65);
  --card-border: rgba(255,255,255,0.08);
  --shadow-soft: 0 20px 50px -20px rgba(0,0,0,0.6);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p{ line-height: 1.65; }
li{ line-height: 1.55; }
h1,h2,h3,h4,h5,h6{ line-height: 1.25; letter-spacing: -0.01em; }
a{ text-decoration: none; }
ul{ list-style: none; padding: 0; margin: 0; }
img{ max-width: 100%; }

@supports selector(:focus-visible){ :focus{ outline: none; } }
:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.skip-link{
  position: absolute; top: -60px; left: 1rem; background: var(--primary); color: #fff;
  padding: 0.75rem 1.5rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; z-index: 10001; transition: top 0.25s ease;
}
.skip-link:focus{ top: 0; outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- Loader & scroll progress (reused pattern from main site) ---------- */
.loader{
  position: fixed; inset: 0; z-index: 9999; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark{ position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--primary); }
.loader-ring{ position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(91,75,255,0.15); border-top-color: var(--primary); animation: spin 0.9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.scroll-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--gradient-primary); z-index: 2000; transition: width 0.1s ease; }

/* ---------- Header (identical structure/behavior to main site) ---------- */
.site-header{
  position: sticky; top: 0; z-index: 1000; background: var(--card-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--card-border); transition: var(--transition);
}
.site-header.scrolled{ box-shadow: 0 8px 30px -15px rgba(0,0,0,0.15); }
.navbar{ padding: 0.9rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; max-width: 1320px; margin: 0 auto; }
.brand{ font-weight: 700; font-size: 1.35rem; color: var(--text); display: flex; align-items: center; gap: 0.6rem; }
.brand-mark{ width: 38px; height: 38px; border-radius: 12px; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 8px 20px -8px rgba(91,75,255,0.6); }
.brand-accent{ color: var(--primary); }
.nav-links{ display: flex; align-items: center; gap: 1.5rem; flex: 1; justify-content: flex-end; }
.nav-links .navbar-nav{ display: flex; flex-direction: row; gap: 0.4rem; list-style: none; margin: 0 auto 0 2rem; padding: 0; }
.nav-link{ color: var(--text-mute); font-weight: 500; font-size: 0.95rem; padding: 0.5rem 0.9rem; border-radius: 30px; transition: var(--transition); display: inline-block; white-space: nowrap; }
.nav-link:hover{ color: var(--primary); background: rgba(91,75,255,0.08); }
.nav-link.active{ color: var(--primary); background: rgba(91,75,255,0.1); }
.header-actions{ display: flex; align-items: center; gap: 0.9rem; }
.theme-toggle{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border); background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
.theme-toggle:hover{ background: rgba(91,75,255,0.1); color: var(--primary); }
.navbar-toggler{ display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.navbar-toggler .bar{ width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.navbar-toggler .bar:nth-child(1){ transform-origin: left center; }
.navbar-toggler .bar:nth-child(3){ transform-origin: left center; }
.navbar-toggler.open .bar:nth-child(1){ transform: rotate(45deg); }
.navbar-toggler.open .bar:nth-child(2){ opacity: 0; transform: translateX(-8px); }
.navbar-toggler.open .bar:nth-child(3){ transform: rotate(-45deg); }

.btn{ font-family: var(--font-display); font-weight: 600; border-radius: 50px; padding: 0.65rem 1.5rem; border: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; }
.btn-cta{ background: var(--gradient-primary); color: #fff; box-shadow: 0 10px 25px -10px rgba(91,75,255,0.6); }
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(91,75,255,0.7); color: #fff; }
.btn-outline-cta{ background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: calc(0.65rem - 2px) calc(1.5rem - 2px); }
.btn-outline-cta:hover{ background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-lg{ padding: 0.85rem 2rem; font-size: 1.05rem; }
.btn-sm{ padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.ripple{ position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 0.6s linear; background: rgba(255,255,255,0.5); pointer-events: none; }
@keyframes ripple-anim{ to{ transform: scale(3); opacity: 0; } }

/* Medium-desktop range: nav has room to stay inline but needs tighter
   spacing than full desktop, otherwise items can crowd or wrap awkwardly
   right before the mobile menu breakpoint kicks in. */
@media (min-width: 992px) and (max-width: 1300px){
  .nav-links{ gap: 0.6rem; }
  .nav-links .navbar-nav{ gap: 0.1rem; }
  .nav-link{ padding: 0.5rem 0.6rem !important; font-size: 0.88rem; }
  .header-actions{ gap: 0.5rem; }
  .btn{ padding: 0.6rem 1.1rem; font-size: 0.92rem; }
}

@media (max-width: 991.98px){
  .navbar-toggler{ display: flex; }
  .nav-links{
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 85vw);
    background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 6rem 2rem 2rem; gap: 2rem; box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transition: right 0.4s cubic-bezier(.4,0,.2,1); z-index: 999;
  }
  .nav-links.open{ right: 0; }
  .nav-links .navbar-nav{ flex-direction: column; align-items: flex-start; width: 100%; gap: 0.3rem; margin: 0; }
  .nav-link{ width: 100%; }
  .header-actions{ flex-direction: column; align-items: flex-start; width: 100%; gap: 1rem; }
  .header-actions .btn{ width: 100%; justify-content: center; }
  .nav-backdrop{
    position: fixed; inset: 0; z-index: 998; background: rgba(15,18,32,0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .nav-backdrop.open{ opacity: 1; visibility: visible; }
}

/* ---------- Layout helpers ---------- */
.container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 1400px){ .container{ max-width: 1280px; } }
.section{ padding: 4.5rem 0; }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width: 640px; margin: 0 auto 2.5rem; text-align: center; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0.5rem 0 0.7rem; }
.section-head p{ color: var(--text-mute); }
.eyebrow{ display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(91,75,255,0.1); color: var(--primary); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 30px; margin-bottom: 1rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{ padding: 1.1rem 0; border-bottom: 1px solid var(--card-border); }
.breadcrumb-list{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.breadcrumb-list li{ display: flex; align-items: center; gap: 0.4rem; color: var(--text-mute); }
.breadcrumb-list a{ color: var(--text-mute); transition: var(--transition); }
.breadcrumb-list a:hover{ color: var(--primary); }
.breadcrumb-list li:last-child{ color: var(--text); font-weight: 600; }
.breadcrumb-list i{ font-size: 0.7rem; opacity: 0.5; }

/* ---------- Free Tools hero ---------- */
.tools-hero{ position: relative; padding: 4.5rem 0 3rem; overflow: hidden; }
.tools-hero-blobs{ position: absolute; inset: 0; z-index: 0; }
.blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.3; animation: float 12s ease-in-out infinite; }
.blob-1{ width: 380px; height: 380px; background: var(--primary); top: -120px; left: -80px; }
.blob-2{ width: 320px; height: 320px; background: var(--secondary); top: 60px; right: -100px; animation-delay: 2s; }
@keyframes float{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(24px,-24px) scale(1.06); } }
.tools-hero .container{ position: relative; z-index: 1; text-align: center; }
.tools-hero h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 0.8rem 0; }
.tools-hero p{ color: var(--text-mute); max-width: 600px; margin: 0 auto 2rem; font-size: 1.05rem; }
.tools-stat-row{ display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 2rem; }
.tools-stat{ text-align: center; }
.tools-stat strong{ display: block; font-size: 1.6rem; font-weight: 800; color: var(--primary); font-family: var(--font-mono); }
.tools-stat span{ font-size: 0.82rem; color: var(--text-mute); }

/* ---------- Search bar ---------- */
.tools-search-wrap{ max-width: 620px; margin: 0 auto; position: relative; }
.tools-search{
  width: 100%; padding: 1.05rem 1.5rem 1.05rem 3.2rem; border-radius: 50px;
  border: 1px solid var(--card-border); background: var(--card-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text); font-family: var(--font-display); font-size: 1rem;
  box-shadow: var(--shadow-soft); transition: var(--transition);
}
.tools-search:focus-visible{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,75,255,0.15); }
.tools-search-icon{ position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); color: var(--text-mute); }
.tools-search-count{ text-align: center; margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-mute); min-height: 1.2rem; }

/* ---------- Category filters ---------- */
.tools-filters{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 2rem 0 0.5rem; }
.filter-btn{
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-mute);
  padding: 0.55rem 1.3rem; border-radius: 30px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem;
}
.filter-btn i{ font-size: 0.8rem; }
.filter-btn.active, .filter-btn:hover{ background: var(--gradient-primary); color: #fff; border-color: transparent; }
.filter-btn .count{ background: rgba(0,0,0,0.08); padding: 0.05rem 0.45rem; border-radius: 20px; font-size: 0.72rem; }
.filter-btn.active .count{ background: rgba(255,255,255,0.25); }

/* ---------- Tool cards ---------- */
.tools-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.tool-card{
  position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 1.6rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column; height: 100%;
}
.tool-card:hover{ transform: translateY(-6px); border-color: transparent; box-shadow: 0 25px 50px -20px rgba(91,75,255,0.4), 0 0 32px -10px rgba(0,212,255,0.28); }
.tool-card-top{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.tool-icon{ width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.tool-badge{ font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.6rem; border-radius: 20px; }
.tool-badge.popular{ background: rgba(255,107,53,0.12); color: var(--accent); }
.tool-badge.new{ background: rgba(6,214,160,0.12); color: #06D6A0; }
.tool-badge.soon{ background: rgba(91,75,255,0.1); color: var(--primary); }
.tool-card h3{ font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.tool-card p{ color: var(--text-mute); font-size: 0.85rem; margin-bottom: 1.1rem; flex-grow: 1; }
.tool-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tool-cat-tag{ font-size: 0.72rem; color: var(--text-mute); font-family: var(--font-mono); }
.tool-open-btn{ color: var(--primary); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: var(--transition); }
.tool-card:hover .tool-open-btn{ gap: 0.6rem; }
.fav-btn{
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg);
  color: var(--text-mute); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: var(--transition); flex-shrink: 0;
}
.fav-btn:hover, .fav-btn.active{ color: var(--accent); border-color: var(--accent); }
.fav-btn.active i{ font-weight: 900; }
.tools-empty{ text-align: center; padding: 3rem 1rem; color: var(--text-mute); grid-column: 1 / -1; }
.tools-empty i{ font-size: 2.4rem; color: var(--card-border); margin-bottom: 1rem; display: block; }

.load-more-wrap{ text-align: center; margin-top: 2.5rem; }

/* ---------- Tool detail page ---------- */
.tool-detail-header{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 2rem; }
.tool-detail-icon{ width: 64px; height: 64px; border-radius: 18px; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; box-shadow: 0 16px 30px -12px rgba(91,75,255,0.55); }
.tool-detail-header h1{ font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 0.3rem; }
.tool-detail-header p{ color: var(--text-mute); margin: 0; max-width: 560px; }

.tool-panel{
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  margin-bottom: 2.5rem;
}
.tool-panel label{ font-size: 0.85rem; font-weight: 600; color: var(--text-mute); display: block; margin-bottom: 0.4rem; }
.tool-panel input[type="text"], .tool-panel input[type="number"], .tool-panel input[type="password"],
.tool-panel input[type="email"], .tool-panel input[type="url"], .tool-panel select, .tool-panel textarea{
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.5); color: var(--text); font-family: var(--font-display); transition: var(--transition);
}
[data-theme="dark"] .tool-panel input, [data-theme="dark"] .tool-panel select, [data-theme="dark"] .tool-panel textarea{ background: rgba(255,255,255,0.04); }
.tool-panel input:focus-visible, .tool-panel select:focus-visible, .tool-panel textarea:focus-visible{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,75,255,0.15); }
.tool-panel textarea{ resize: vertical; min-height: 140px; font-family: var(--font-mono); font-size: 0.9rem; }
.tool-field{ margin-bottom: 1.2rem; }
.tool-row{ display: flex; flex-wrap: wrap; gap: 1rem; }
.tool-row > *{ flex: 1; min-width: 160px; }
.tool-slider-row{ display: flex; align-items: center; gap: 1rem; }
.tool-slider-row input[type="range"]{ flex: 1; accent-color: var(--primary); }
.tool-slider-value{ font-family: var(--font-mono); font-weight: 700; color: var(--primary); min-width: 2.5rem; text-align: right; }
.tool-checkbox-row{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.tool-checkbox-row input{ accent-color: var(--primary); width: 18px; height: 18px; }
.tool-checkbox-row label{ margin: 0; font-weight: 500; color: var(--text); cursor: pointer; }

.tool-output{
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 1.2rem; font-family: var(--font-mono); font-size: 0.9rem; word-break: break-all;
  white-space: pre-wrap; min-height: 60px; margin-top: 0.5rem;
}
.tool-output.empty{ color: var(--text-mute); font-style: italic; }
.tool-actions{ display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.tool-copy-note{ font-size: 0.82rem; color: #06D6A0; font-weight: 600; margin-left: 0.4rem; opacity: 0; transition: opacity 0.3s ease; }
.tool-copy-note.show{ opacity: 1; }

.stat-pill-row{ display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.stat-pill{ background: var(--bg-alt); border-radius: var(--radius-sm); padding: 0.7rem 1.1rem; text-align: center; flex: 1; min-width: 100px; }
.stat-pill strong{ display: block; font-size: 1.3rem; font-weight: 800; color: var(--primary); font-family: var(--font-mono); }
.stat-pill span{ font-size: 0.75rem; color: var(--text-mute); }

.tool-instructions{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 1.6rem; margin-bottom: 2.5rem; }
.tool-instructions h2{ font-size: 1.1rem; font-weight: 700; margin-bottom: 0.8rem; }
.tool-instructions ol{ list-style: decimal; padding-left: 1.3rem; color: var(--text-mute); font-size: 0.92rem; }
.tool-instructions li{ margin-bottom: 0.5rem; }

.coming-soon-box{ text-align: center; padding: 3rem 1.5rem; }
.coming-soon-box i{ font-size: 2.6rem; color: var(--primary); margin-bottom: 1.2rem; display: block; }
.coming-soon-box h2{ font-size: 1.4rem; font-weight: 800; margin-bottom: 0.6rem; }
.coming-soon-box p{ color: var(--text-mute); max-width: 460px; margin: 0 auto 1.5rem; }

/* ---------- FAQ (shared pattern) ---------- */
.faq-accordion{ max-width: 760px; margin: 0 auto; }
.faq-item{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); margin-bottom: 1rem; overflow: hidden; }
.faq-question{ width: 100%; text-align: left; background: transparent; border: none; padding: 1.1rem 1.4rem; font-weight: 600; font-size: 0.95rem; color: var(--text); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-question i{ transition: transform 0.3s ease; color: var(--primary); flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-question i{ transform: rotate(180deg); }
.faq-answer{ max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer p{ padding: 0 1.4rem 1.1rem; color: var(--text-mute); font-size: 0.9rem; margin: 0; }

/* ---------- Related tools ---------- */
.related-tools-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; }

/* ---------- CTA banner ---------- */
.tools-cta{ text-align: center; padding: 3.5rem 0; }
.tools-cta h2{ font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.7rem; }
.tools-cta p{ color: var(--text-mute); margin-bottom: 1.6rem; }

/* ---------- Footer (compact reuse) ---------- */
.site-footer{ background: var(--bg-alt); padding: 3rem 0 1.5rem; border-top: 1px solid var(--card-border); }
.footer-brand{ margin-bottom: 1rem; }
.site-footer p{ color: var(--text-mute); font-size: 0.9rem; }
.site-footer h4{ font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; }
.footer-links li{ margin-bottom: 0.6rem; }
.footer-links a{ color: var(--text-mute); font-size: 0.88rem; transition: var(--transition); }
.footer-links a:hover{ color: var(--primary); padding-left: 4px; }
.footer-bottom{ text-align: center; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--card-border); font-size: 0.82rem; }
.footer-bottom p{ margin: 0; }
.back-to-top{
  position: fixed; bottom: 1.8rem; right: 1.8rem; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff; border: none; box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition);
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Reveal-on-scroll (lightweight, no external lib needed here) ---------- */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .blob, .back-to-top{ transition: none; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}

@media (max-width: 575.98px){
  .section{ padding: 3rem 0; }
  .tools-grid{ grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .tool-card{ padding: 1.1rem; }
  .tools-stat-row{ gap: 1.4rem; }
}
@media (max-width: 400px){
  .tools-grid{ grid-template-columns: 1fr; }
}