/* ========================================
   DigiFreeTools - Shared SaaS Style Theme
   ======================================== */
:root{
  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --primary-light:#eef2ff;
  --accent:#06b6d4;
  --text:#1e293b;
  --text-light:#64748b;
  --bg:#f8fafc;
  --white:#ffffff;
  --border:#e2e8f0;
  --success:#10b981;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px rgba(0,0,0,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"]{
  --text:#e2e8f0;
  --text-light:#94a3b8;
  --bg:#0f172a;
  --white:#1e293b;
  --border:#334155;
  --primary-light:#1e2749;
}
[data-theme="dark"] .site-header{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .hero{background:linear-gradient(180deg,#1e2749 0%,var(--bg) 100%);}
[data-theme="dark"] .tool-card,[data-theme="dark"] .tool-card-main,[data-theme="dark"] .info-box,[data-theme="dark"] .sidebar-box{background:#1e293b;}
[data-theme="dark"] .form-row input,[data-theme="dark"] .form-row select,[data-theme="dark"] .form-row textarea{background:#0f172a;color:var(--text);}
[data-theme="dark"] .nav-links{background:#1e293b;}
[data-theme="dark"] .search-box input{background:#1e293b;color:var(--text);}

.theme-toggle{
  background:var(--bg);border:1px solid var(--border);width:38px;height:38px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:.2s;
}
.theme-toggle:hover{background:var(--primary-light);}

/* ---------- Animations ---------- */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

.reveal{opacity:0;animation:slideUp .6s ease forwards;}
.reveal-1{animation-delay:.05s;}
.reveal-2{animation-delay:.15s;}
.reveal-3{animation-delay:.25s;}


.site-header.scrolled{box-shadow:0 4px 16px rgba(0,0,0,.08);}

/* ---------- Hero Upgrade ---------- */
.hero-wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;
  max-width:1180px;margin:0 auto;padding:34px 20px 30px;
}
@media(max-width:900px){.hero-wrap{grid-template-columns:1fr;text-align:center;padding:28px 20px 22px;}}
.hero-left h1{font-size:clamp(24px,3.4vw,38px);font-weight:800;text-align:left;margin-bottom:10px;line-height:1.15;}
@media(max-width:900px){.hero-left h1{text-align:center;}}
.hero-left p{color:var(--text-light);font-size:15.5px;margin-bottom:16px;max-width:520px;}
@media(max-width:900px){.hero-left p{margin:0 auto 16px;}}
.hero-btns{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
@media(max-width:900px){.hero-btns{justify-content:center;}}
.hero-stats{display:flex;gap:32px;flex-wrap:wrap;}
@media(max-width:900px){.hero-stats{justify-content:center;}}
.hero-stat strong{font-size:24px;font-weight:800;color:var(--primary);display:block;}
.hero-stat p{font-size:13px;color:var(--text-light);}

.hero-right{position:relative;}
@media(max-width:900px){.hero-right{display:none;}}
/* ---------- Why Choose / Testimonials / FAQ / Newsletter ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:800px){.why-grid{grid-template-columns:1fr;}}
.why-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:.2s;}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.why-card .ic{font-size:30px;margin-bottom:10px;}
.why-card h3{font-size:16px;margin-bottom:6px;}
.why-card p{font-size:13.5px;color:var(--text-light);}

.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--white);transition:border-color .15s ease;}
.faq-item:hover{border-color:var(--primary-light);}
.faq-q{padding:16px 20px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.faq-a{max-height:0;overflow:hidden;transition:.25s;padding:0 20px;color:var(--text-light);font-size:14.5px;}
.faq-item.open .faq-a{max-height:200px;padding:0 20px 18px;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-q span{transition:.2s;font-size:20px;color:var(--primary);}

.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:800px){.testimonial-grid{grid-template-columns:1fr;}}
.testimonial-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.testimonial-card p{font-size:14.5px;color:var(--text-light);margin-bottom:14px;}
.testimonial-user{display:flex;align-items:center;gap:10px;}
.testimonial-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary);}
.stars{color:#f59e0b;font-size:14px;margin-bottom:8px;}

.newsletter-box{
  background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius);
  padding:44px;text-align:center;color:#fff;
}
.newsletter-box h2{font-size:24px;margin-bottom:8px;}
.newsletter-box p{opacity:.9;margin-bottom:22px;}
.newsletter-form{display:flex;max-width:420px;margin:0 auto;gap:10px;}
@media(max-width:480px){.newsletter-form{flex-direction:column;}}
.newsletter-form input{flex:1;padding:13px 16px;border-radius:8px;border:none;outline:none;}
.newsletter-form button{background:#0f172a;color:#fff;border:none;padding:13px 22px;border-radius:8px;font-weight:600;}

/* ---------- Tool Page + Sidebar Layout ---------- */
.tool-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;}
@media(max-width:900px){.tool-layout{grid-template-columns:1fr;}}
.sidebar{display:flex;flex-direction:column;gap:16px;}
.sidebar-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.sidebar-box a{display:block;padding:8px 0;font-size:14px;border-bottom:1px solid var(--border);transition:color .15s ease, padding-left .15s ease;}
.sidebar-box a:last-child{border-bottom:none;}
.sidebar-box a:hover{color:var(--primary);padding-left:3px;}
.ad-slot{
  background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 10px,var(--border) 10px,var(--border) 11px);
  border:1px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--text-light);font-size:12px;min-height:250px;
}

/* ---------- AdSense-ready responsive ad containers (reserve space to prevent CLS) ---------- */
.ad-container{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
}
.ad-container::before{
  content:"Advertisement";position:absolute;top:4px;left:8px;font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--text-light);opacity:.6;
}
.ad-container:empty::after{
  content: attr(data-ad-slot) " (" attr(data-ad-size) ")";
  color:var(--text-light);font-size:11px;text-transform:uppercase;letter-spacing:.4px;
}

.tag-pill{display:inline-block;background:var(--primary-light);color:var(--primary);padding:4px 10px;border-radius:14px;font-size:12px;margin:3px 4px 3px 0;}

.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.icon-btn{
  background:var(--white);border:1px solid var(--border);padding:9px 16px;border-radius:8px;
  font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--text);
}
.icon-btn:hover{border-color:var(--primary);color:var(--primary);}

/* ---------- Social Icons Footer ---------- */
.social-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.social-icon{
  width:46px;height:46px;border-radius:50%;background:#94a3b8;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.12);
  line-height:1;flex-shrink:0;
}
.social-icon svg,.social-icon i{font-size:19px;width:19px;height:19px;line-height:1;text-align:center;}
.social-icon:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 18px rgba(0,0,0,.22);filter:brightness(1.08);}
.social-icon:active{transform:translateY(-1px) scale(1);}
.social-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-light), 0 0 0 5px var(--primary);}
@media(max-width:480px){.social-icon{width:42px;height:42px;} .social-icon svg,.social-icon i{font-size:17px;width:17px;height:17px;}}
.social-icon.fb{background:#3b5998;}
.social-icon.tw{background:#1da1f2;}
.social-icon.ig{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
.social-icon.li{background:#0a66c2;}
.social-icon.pin{background:#e60023;}
.social-icon.yt{background:#ff0000;}
.social-icon.gh{background:#333;}
.social-icon.dc{background:#5865f2;}

/* ---------- Smart Sidebar (sticky, auto-populated widgets) ---------- */
.sidebar.sidebar-auto, .sidebar{
  position:sticky; top:88px; align-self:start; max-height:calc(100vh - 100px); overflow-y:auto;
}
@media(max-width:900px){
  .sidebar.sidebar-auto, .sidebar{ position:static; max-height:none; overflow-y:visible; margin-top:32px; }
}
.sidebar-box h3{font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);display:flex;align-items:center;gap:8px;}
.sidebar-box h3 svg,.sidebar-box h3 i{color:var(--primary);font-size:13px;width:13px;height:13px;}
.sidebar-search-input{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:13.5px;background:var(--bg);color:var(--text);
}
.sidebar-search-input:focus{outline:none;border-color:var(--primary);}

/* ---------- Social Share Buttons (tool pages) ---------- */
.share-box{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-top:20px;
}
.share-prompt{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:14px;font-weight:600;}
.share-prompt svg,.share-prompt i{color:var(--primary);width:15px;height:15px;}
.share-row{display:flex;flex-wrap:wrap;gap:10px;}
.share-icon{
  width:40px;height:40px;border-radius:10px;background:var(--bg);border:1px solid var(--border);
  color:var(--text-light);display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:.2s;cursor:pointer;text-decoration:none;
}
.share-icon:hover{transform:translateY(-3px);color:#fff;border-color:transparent;box-shadow:var(--shadow);}
.share-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-light), 0 0 0 5px var(--primary);}
.share-copy-msg{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#10b981;}
.share-fb:hover{background:#1877f2;}
.share-tw:hover{background:#000;}
.share-wa:hover{background:#25d366;}
.share-li:hover{background:#0a66c2;}
.share-tg:hover{background:#26a5e4;}
.share-pin:hover{background:#e60023;}
.share-rd:hover{background:#ff4500;}
.share-em:hover{background:#64748b;}
.share-copy:hover{background:var(--primary);}

/* =====================================================================
   AD CONTAINER SYSTEM — DigiFreeTools
   =====================================================================
   .ad-container is the universal wrapper for every ad slot on the site.
   It reserves space up-front (via min-height per size) to prevent
   Cumulative Layout Shift (CLS) whether showing a placeholder or a
   real, loaded ad. Add data-ad-size="WxH" on the element to pick a
   preset reserved height; omit it for a flexible responsive slot.
   ===================================================================== */
.ad-container{
  width:100%;
  margin:24px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.ad-container[data-ad-size="728x90"],
.ad-container[data-ad-size="970x90"]{ min-height:90px; max-width:728px; margin-left:auto; margin-right:auto; }
.ad-container[data-ad-size="970x250"]{ min-height:250px; }
.ad-container[data-ad-size="336x280"]{ min-height:280px; max-width:336px; margin-left:auto; margin-right:auto; }
.ad-container[data-ad-size="300x250"]{ min-height:250px; max-width:336px; margin-left:auto; margin-right:auto; }
.ad-container[data-ad-size="300x600"],
.ad-container[data-ad-size="160x600"]{ min-height:600px; max-width:300px; margin-left:auto; margin-right:auto; }
.ad-container[data-ad-size="320x100"]{ min-height:100px; }
.ad-container[data-ad-size="320x50"]{ min-height:50px; }
.ad-container:not([data-ad-size]){ min-height:100px; }

.ad-placeholder-inner{
  width:100%;
  height:100%;
  min-height:inherit;
  border:1.5px dashed var(--border);
  border-radius:10px;
  background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 12px,rgba(148,163,184,.08) 12px,rgba(148,163,184,.08) 13px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:16px;
  color:var(--text-light);
  text-align:center;
}
.ad-placeholder-inner .ad-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-light);
  opacity:.7;
}
.ad-placeholder-inner .ad-sub{
  font-size:13px;
  font-weight:600;
  color:var(--text-light);
}
.ad-placeholder-inner .ad-size-tag{
  font-size:11px;
  color:var(--text-light);
  opacity:.6;
}
.ad-live{
  min-height:0;
  border:none;
  background:none;
}

/* Sticky sidebar ad wrapper (desktop only) */
.ad-sticky-wrap{ position:sticky; top:340px; }
@media(max-width:900px){ .ad-sticky-wrap{ position:static; } }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:1180px;margin:0 auto;
}
.logo{
  font-size:21px;font-weight:800;color:var(--primary);
  display:flex;align-items:center;gap:8px;transition:opacity .15s ease;
}
.logo:hover{opacity:.85;}
.logo span{color:var(--text);}
.nav-links{display:flex;gap:18px;align-items:center;}
.nav-links a{font-weight:500;color:var(--text-light);font-size:14px;transition:color .2s;position:relative;white-space:nowrap;}
.nav-links a:hover{color:var(--primary);}
.nav-links a.active{color:var(--primary);font-weight:700;}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-6px;left:0;right:0;height:2px;background:var(--primary);border-radius:2px;
}
.menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--text);}

/* ---------- Hero ---------- */
.hero{
  text-align:center;padding:64px 20px 48px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--primary-light) 0%, transparent 70%),linear-gradient(180deg,var(--primary-light) 0%,var(--bg) 100%);
}
.hero h1 .highlight{background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.search-box{
  max-width:520px;margin:0 auto;position:relative;
}
.search-box input{
  width:100%;padding:16px 20px 16px 48px;border-radius:50px;
  border:1px solid var(--border);font-size:15px;background:var(--white);
  box-shadow:var(--shadow);outline:none;transition:.2s;
}
.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);}
.search-box::before{
  content:"🔍";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-size:16px;opacity:.6;
}

/* ---------- Category / Tools Grid ---------- */
.section{padding:48px 0;}
#calculators{padding-top:28px;}
.section-title{
  font-size:26px;font-weight:700;margin-bottom:6px;
}
.section-sub{color:var(--text-light);margin-bottom:28px;font-size:15px;}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;
}
.tool-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;transition:.2s;display:flex;flex-direction:column;gap:10px;
}
.tool-card:hover{
  box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--primary);
}
.tool-icon{
  width:44px;height:44px;border-radius:10px;background:var(--primary-light);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.tool-card h3{font-size:16px;font-weight:600;}
.tool-card strong{font-size:16px;font-weight:600;display:block;}
.tool-card p{font-size:13.5px;color:var(--text-light);}

.category-pill{
  display:inline-block;background:var(--primary-light);color:var(--primary);
  padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:24px;
}

/* ---------- Tool Page Layout ---------- */
.tool-page{padding:40px 0 60px;}
.breadcrumb{font-size:13px;color:var(--text-light);margin-bottom:18px;}
.breadcrumb a{color:var(--primary);}
.tool-header{margin-bottom:28px;}
.tool-header h1{font-size:30px;font-weight:800;margin-bottom:8px;}
.tool-header p{color:var(--text-light);font-size:15.5px;}

.tool-card-main{
  background:var(--white);border:1.5px solid var(--border);border-top:4px solid var(--primary);
  border-radius:var(--radius);
  padding:36px 32px 32px;box-shadow:0 4px 18px rgba(79,70,229,.09),var(--shadow);max-width:760px;
  position:relative;
}
.tool-card-main::before{
  content:'🛠️ Interactive Tool';
  position:absolute;top:-13px;left:24px;
  background:var(--primary);color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 12px;border-radius:20px;letter-spacing:.3px;
  box-shadow:0 2px 6px rgba(79,70,229,.35);
}
.contact-form-card{border-top:1.5px solid var(--border);box-shadow:var(--shadow);}
.contact-form-card::before{content:none;}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:15px;outline:none;transition:border-color .15s ease, box-shadow .15s ease;background:var(--bg);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px var(--primary-light);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.form-grid{grid-template-columns:1fr;}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;border:none;padding:13px 26px;cursor:pointer;
  border-radius:10px;font-weight:600;font-size:15px;transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(79,70,229,.25);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:8px;}
.btn-secondary{background:var(--white);color:var(--primary);border:1.5px solid var(--primary);}
.btn-secondary:hover{background:var(--primary-light);box-shadow:none;}
.btn-block{width:100%;}

.result-box{
  margin-top:22px;padding:20px;border-radius:var(--radius);background:var(--primary-light);
  border:1px solid rgba(79,70,229,.12);display:none;
}
.result-box.show{display:block;}
.result-box h3{font-size:14px;color:var(--text-light);margin-bottom:6px;}
.result-box .value{font-size:28px;font-weight:800;color:var(--primary);}

.info-box{
  max-width:760px;margin-top:30px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px;
}
.info-box h2{font-size:19px;margin-bottom:12px;}
.info-box p{color:var(--text-light);font-size:14.5px;margin-bottom:10px;}
.info-box ul{padding-left:18px;list-style:disc;color:var(--text-light);font-size:14.5px;}
.info-box li{margin-bottom:6px;}

/* ---------- Footer ---------- */
.site-footer{
  background:#0f172a;color:#cbd5e1;padding:52px 0 22px;margin-top:60px;
}
/* ---------- Utilities ---------- */
.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.copy-btn{
  background:var(--white);border:1px solid var(--border);padding:8px 14px;border-radius:6px;
  font-size:13px;font-weight:600;color:var(--primary);
}
.copy-btn:hover{background:var(--primary-light);}

@media(max-width:1024px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;
    padding:20px;gap:0;box-shadow:var(--shadow-lg);transform:translateY(-150%);
    transition:.25s;
  }
  .nav-links.active{transform:translateY(0);}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--border);width:100%;}
  .nav-links a.active::after{display:none;}
  .nav-links a.active{background:var(--primary-light);padding-left:8px;border-radius:6px;}
  .menu-toggle{display:block;}
}

/* ============================================================
   HOMEPAGE PREMIUM REDESIGN — scoped to body.homepage only.
   Tool pages, category pages, and legal pages are untouched.
   ============================================================ */

/* ---------- Compact Premium Hero ---------- */
body.homepage .hero{
  padding:44px 20px 40px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(6,182,212,.10) 0%, transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(109,40,217,.12) 0%, transparent 40%),
    radial-gradient(ellipse 90% 70% at 50% 0%, var(--primary-light) 0%, transparent 65%),
    linear-gradient(180deg,var(--primary-light) 0%,var(--bg) 100%);
}
body.homepage .hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(79,70,229,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}
body.homepage .hero-wrap{
  display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;
  max-width:1160px;margin:0 auto;padding:0;
}
@media(max-width:900px){body.homepage .hero-wrap{grid-template-columns:1fr;text-align:center;gap:26px;}}

body.homepage .hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border);
  color:var(--primary);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;
  margin-bottom:14px;box-shadow:var(--shadow);
}

body.homepage .hero-left h1{
  font-size:clamp(26px,3.4vw,40px);font-weight:800;text-align:left;margin-bottom:10px;line-height:1.15;
  letter-spacing:-0.5px;
}
@media(max-width:900px){body.homepage .hero-left h1{text-align:center;}}
body.homepage .hero-left p{color:var(--text-light);font-size:15.5px;margin-bottom:16px;max-width:480px;line-height:1.6;}
@media(max-width:900px){body.homepage .hero-left p{margin:0 auto 16px;}}

body.homepage .hero-btns{margin-bottom:22px;}
body.homepage .btn-gradient{
  background:linear-gradient(135deg,var(--primary) 0%,#6d28d9 100%);
  box-shadow:0 8px 20px rgba(79,70,229,.32);border:none;
}
body.homepage .btn-gradient:hover{
  background:linear-gradient(135deg,var(--primary-dark) 0%,#5b21b6 100%);
  box-shadow:0 10px 24px rgba(79,70,229,.42);transform:translateY(-1px);
}

body.homepage .hero-stats{display:flex;gap:28px;}
@media(max-width:900px){body.homepage .hero-stats{justify-content:center;}}
body.homepage .hero-stat strong{font-size:22px;}
body.homepage .hero-stat p{font-size:12.5px;color:var(--text-light);margin-top:2px;}

/* Compact hero visual panel (replaces scattered floating icons) */
body.homepage .hero-panel{
  background:rgba(255,255,255,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:18px;box-shadow:0 20px 40px -12px rgba(79,70,229,.25);
  display:flex;flex-direction:column;gap:12px;max-width:360px;margin:0 auto;
}
[data-theme="dark"] body.homepage .hero-panel{background:rgba(30,41,59,.7);border-color:rgba(51,65,85,.6);}
body.homepage .hero-panel-row{display:flex;gap:12px;}
body.homepage .hero-chip{
  flex:1;background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:12px 10px;font-size:12.5px;font-weight:600;color:var(--text);text-align:center;
  box-shadow:var(--shadow);transition:transform .2s ease;
}
[data-theme="dark"] body.homepage .hero-chip{background:#1e293b;}
body.homepage .hero-panel-row:nth-child(1) .hero-chip:first-child{transform:rotate(-2deg);}
body.homepage .hero-panel-row:nth-child(1) .hero-chip:last-child{transform:rotate(2deg) translateY(6px);}
body.homepage .hero-panel-row:nth-child(2) .hero-chip:first-child{transform:rotate(2deg) translateY(4px);}
body.homepage .hero-panel-row:nth-child(2) .hero-chip:last-child{transform:rotate(-2deg);}
body.homepage .hero-panel-row:nth-child(3) .hero-chip:first-child{transform:rotate(-1deg) translateY(6px);}
body.homepage .hero-panel-row:nth-child(3) .hero-chip:last-child{transform:rotate(1deg);}
@media(max-width:900px){body.homepage .hero-panel{margin-top:8px;}}
@media(max-width:480px){body.homepage .hero-panel{max-width:100%;padding:14px;}body.homepage .hero-chip{font-size:11.5px;padding:10px 6px;}}


/* ---------- Section Rhythm ---------- */
body.homepage .section{padding:52px 0;}
body.homepage #calculators{padding-top:36px;}
body.homepage .category-pill{
  font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;padding:5px 14px;
}
body.homepage .section-title{font-size:28px;letter-spacing:-0.3px;}
body.homepage .section-sub{font-size:15.5px;margin-bottom:30px;}

/* ---------- Premium Tool Cards (SaaS style) ---------- */
body.homepage .tools-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;
}
body.homepage .tool-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:10px;height:100%;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
body.homepage .tool-card:hover{
  transform:translateY(-5px);border-color:transparent;
  box-shadow:0 16px 32px -8px rgba(79,70,229,.22),0 0 0 1px var(--primary-light);
}
body.homepage .tool-icon{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary-light) 0%,#e0e7ff 100%);
  display:flex;align-items:center;justify-content:center;font-size:23px;
  margin-bottom:2px;transition:transform .22s ease;
}
body.homepage .tool-card:hover .tool-icon{transform:scale(1.08);}
body.homepage .tool-card h3{font-size:15.5px;font-weight:700;line-height:1.3;}
body.homepage .tool-card p{font-size:13px;color:var(--text-light);line-height:1.5;margin-top:-4px;}

/* ---------- Why / Testimonial Cards Polish ---------- */
body.homepage .why-card{border-radius:16px;}
body.homepage .testimonial-card{border-radius:16px;}

/* ---------- Newsletter Premium Gradient ---------- */
body.homepage .newsletter-box{
  background:linear-gradient(135deg,var(--primary) 0%,#6d28d9 60%,var(--accent) 130%);
  border-radius:20px;
}

/* ---------- Footer Spacing Polish ---------- */
body.homepage .site-footer{padding:56px 0 20px;}
body.homepage .footer-grid-3{gap:40px;margin-bottom:36px;}

/* ============================================================
   PREMIUM 3-COLUMN FOOTER REDESIGN
   ============================================================ */
.footer-grid-3{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:36px;
}
@media(max-width:768px){.footer-grid-3{grid-template-columns:1fr;gap:32px;}}

.footer-desc{color:#94a3b8;font-size:14px;max-width:300px;line-height:1.65;margin-bottom:18px;}
.footer-brand .logo{color:#a5b4fc;}
.footer-brand .logo span{color:#fff;}

.footer-badges{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer-badges li{
  color:#cbd5e1;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;
}
.footer-badges li::before{content:none;}

.footer-grid-3 > div > h3{color:#fff;margin-bottom:16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.footer-grid-3 > div > a{
  color:#94a3b8;font-size:14px;line-height:2.3;display:block;
  transition:color .15s ease, transform .15s ease;
}
.footer-grid-3 > div > a:hover{color:#fff;transform:translateX(3px);}

.footer-bottom{
  border-top:1px solid #1e293b;padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:13px;color:#94a3b8;text-align:left;
}
.footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:0;}
.footer-legal-links a{color:#94a3b8;font-size:13px;padding:0 12px;position:relative;transition:color .15s ease;}
.footer-legal-links a:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:#334155;
}
.footer-legal-links a:hover{color:#fff;}
.footer-legal-links a:first-child{padding-left:0;}

@media(max-width:640px){
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left;}
  .footer-legal-links{flex-direction:column;align-items:flex-start;gap:10px;}
  .footer-legal-links a{padding:0;}
  .footer-legal-links a:not(:last-child)::after{display:none;}
}

/* ============================================================
   HOMEPAGE — Compact Category Grid (inspired reference layout)
   ============================================================ */
.cats-section{padding:8px 20px 12px;max-width:1180px;}
.cats-heading{font-size:16px;font-weight:700;margin-bottom:14px;color:var(--text);}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.cat-card{
  display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:12px;
  padding:14px;text-decoration:none;color:var(--text);background:var(--white);
  transition:border-color .15s ease, transform .15s ease;
}
.cat-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.cat-icon{
  width:38px;height:38px;border-radius:9px;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;
}
.cat-card-text{display:flex;flex-direction:column;gap:2px;}
.cat-card-text strong{font-size:14px;}
.cat-card-text span{font-size:12px;color:var(--text-light);}

/* ============ Sticky Bottom Ad Banner (mobile + desktop) ============ */
.sticky-bottom-ad{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:var(--white); border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  padding:6px 40px 6px 6px;
  transform:translateY(0); transition:transform .3s ease;
  max-height:120px; overflow:hidden;
}
.sticky-bottom-ad.hidden{ transform:translateY(100%); pointer-events:none; }
.sticky-bottom-ad .ad-container{ border:none; background:transparent; max-width:100%; }
.sticky-bottom-ad-close{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:var(--white); color:var(--text-light); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.sticky-bottom-ad-close:hover{ background:var(--bg); color:var(--text); }
body.has-sticky-bottom-ad{ padding-bottom:90px; }
@media(max-width:600px){
  .sticky-bottom-ad{ padding:4px 36px 4px 4px; max-height:90px; }
  body.has-sticky-bottom-ad{ padding-bottom:70px; }
}

/* ============ Left Sticky Sidebar Ad (very wide desktop only) ============ */
.left-sticky-ad{
  position:fixed; left:12px; top:130px; z-index:500;
  width:160px; display:none;
}
.left-sticky-ad .ad-container{ margin:0 auto; }
.left-sticky-ad-close{
  position:absolute; top:-10px; right:-10px;
  width:24px; height:24px; border-radius:50%; border:1px solid var(--border);
  background:var(--white); color:var(--text-light); font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.left-sticky-ad-close:hover{ background:var(--bg); color:var(--text); }
/* Only show when the viewport is wide enough to have real empty space
   to the left of the centered 1180px content container, so it never
   overlaps the header, navigation, or main tool content. */
@media(min-width:1600px){
  .left-sticky-ad.has-ad{ display:block; }
}