/*
Theme Name: FreeBenchTools Complete - Professional
Version: 7.0 Final Professional
Description: Exact same design as preview - Free Online Tools For Everyday Tasks - 12 Tools Working - No Ads Boxes - AdSense Ready
*/
:root{--p:#6366f1;--p2:#8b5cf6;--bg:#f8f9ff;--card:#fff;--border:#e8eaf1;--text:#111827;--muted:#6b7280}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.h-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--p),var(--p2));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
nav a{margin-left:20px;font-weight:500;font-size:14px;color:#374151} nav a:hover{color:var(--p)}
.search-box{background:#f3f4f6;border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13px;width:220px}
.ad-top{text-align:center;font-size:11px;color:#9ca3af;padding:8px;background:#fff;border-bottom:1px solid var(--border);letter-spacing:.5px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding:50px 0;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.badge-trusted{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:var(--p);font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.hero h1{font-size:52px;line-height:1.05;font-weight:900;letter-spacing:-1px} .hero h1 span{color:var(--p)}
.hero p{color:var(--muted);margin-top:14px;font-size:15px;max-width:520px}
.btn-primary{background:var(--p);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:700;cursor:pointer} .btn-secondary{background:#fff;border:1px solid var(--border);padding:10px 18px;border-radius:10px;font-weight:600;cursor:pointer;margin-left:8px}
.badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .badge-sm{background:#fff;border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px}
.tools-preview{background:linear-gradient(180deg,#fff,#f9f8ff);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:0 20px 40px rgba(99,102,241,.12)}
.tools-preview-header{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:12px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tp-card{background:#fff;border:1px solid #f0f0f5;border-radius:14px;padding:12px}
.tp-card h4{font-size:12px;margin-top:6px} .tp-card p{font-size:10px;color:var(--muted);margin-top:4px}
.icon-box{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.tools-section{margin-top:30px}
.section-title{font-size:22px;font-weight:800;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;cursor:pointer;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.08);border-color:var(--p)}
.card h3{font-size:15px} .card p{font-size:12px;color:var(--muted);margin-top:6px}
.tool-modal{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;margin:22px 0;display:none}
.input{width:100%;padding:11px 14px;border:1px solid #d1d5db;border-radius:10px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:18px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px}
.footer{background:#fff;border-top:1px solid var(--border);padding:40px 0;margin-top:50px;color:var(--muted);font-size:13px}