@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary: #1a56db;
  --primary-dark: #1042a3;
  --primary-light: #e8f0fe;
  --accent: #059669;
  --accent-light: #d1fae5;
  --text: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --bg: #ffffff;
  --bg-section: #f8fafc;
  --bg-card: #ffffff;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --max-width: 1120px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans', -apple-system, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--primary); text-decoration:none; transition:color .2s; }
a:hover { color:var(--primary-dark); }

.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav .container {
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo {
  font-weight:700; font-size:1.25rem; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.nav-logo span { color:var(--primary); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { color:var(--text-secondary); font-weight:500; font-size:.9rem; }
.nav-links a:hover { color:var(--primary); }

/* ── HERO ── */
.hero {
  padding:80px 0 60px;
  text-align:center;
  background:linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
}
.hero h1 {
  font-size:clamp(2rem, 5vw, 3.2rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:16px;
  letter-spacing:-0.02em;
}
.hero h1 em { font-style:normal; color:var(--primary); }
.hero p {
  font-size:1.15rem;
  color:var(--text-secondary);
  max-width:600px;
  margin:0 auto 32px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-light); color:var(--accent);
  padding:6px 14px; border-radius:20px;
  font-size:.85rem; font-weight:600; margin-bottom:24px;
}

/* ── TOOL CARDS ── */
.tools-section { padding:60px 0 80px; }
.tools-section h2 {
  font-size:1.6rem; font-weight:700; margin-bottom:8px; text-align:center;
}
.tools-section .subtitle {
  color:var(--text-secondary); text-align:center; margin-bottom:40px; font-size:1rem;
}
.tools-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
}
.tool-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:all .25s;
  display:flex; flex-direction:column;
}
.tool-card:hover {
  border-color:var(--primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.tool-card-icon {
  width:48px; height:48px;
  background:var(--primary-light);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:16px;
}
.tool-card h3 { font-size:1.1rem; font-weight:600; margin-bottom:8px; }
.tool-card p { color:var(--text-secondary); font-size:.9rem; flex:1; margin-bottom:16px; }
.tool-card-link {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--primary); font-weight:600; font-size:.9rem;
}
.tool-card-link::after { content:'→'; transition:transform .2s; }
.tool-card:hover .tool-card-link::after { transform:translateX(4px); }
.tool-card-badge {
  display:inline-block;
  background:var(--accent-light); color:var(--accent);
  font-size:.7rem; font-weight:600; text-transform:uppercase;
  padding:3px 8px; border-radius:4px; margin-bottom:12px; width:fit-content;
}

/* ── TOOL PAGE ── */
.tool-hero {
  padding:48px 0 32px;
  background:linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
}
.tool-hero .breadcrumb {
  font-size:.85rem; color:var(--text-muted); margin-bottom:16px;
}
.tool-hero .breadcrumb a { color:var(--text-secondary); }
.tool-hero h1 {
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  font-weight:700; line-height:1.2; margin-bottom:12px;
}
.tool-hero p { color:var(--text-secondary); font-size:1.05rem; max-width:640px; }

.tool-content { padding:40px 0 80px; }
.tool-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:32px;
  align-items:start;
}

/* ── CALCULATOR ── */
.calc-box {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.calc-box h2 { font-size:1.2rem; font-weight:700; margin-bottom:24px; }

.form-group { margin-bottom:20px; }
.form-group label {
  display:block; font-weight:500; font-size:.9rem;
  margin-bottom:6px; color:var(--text);
}
.form-group small { color:var(--text-muted); font-size:.8rem; }
.form-group input, .form-group select {
  width:100%; padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem;
  transition:border-color .2s;
  background:var(--bg);
}
.form-group input:focus, .form-group select:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,86,219,0.1);
}

.btn-calc {
  width:100%; padding:14px;
  background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.btn-calc:hover { background:var(--primary-dark); }

.result-box {
  margin-top:24px; padding:24px;
  background:var(--bg-section);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  display:none;
}
.result-box.show { display:block; }
.result-row {
  display:flex; justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--border-light);
  font-size:.95rem;
}
.result-row:last-child { border-bottom:none; }
.result-row .label { color:var(--text-secondary); }
.result-row .value { font-weight:600; font-family:'JetBrains Mono', monospace; }
.result-row.total {
  margin-top:8px; padding-top:12px;
  border-top:2px solid var(--primary);
  font-size:1.1rem;
}
.result-row.total .value { color:var(--primary); }

/* ── SIDEBAR ── */
.sidebar { display:flex; flex-direction:column; gap:20px; }

.sidebar-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.sidebar-card h3 { font-size:1rem; font-weight:600; margin-bottom:8px; }
.sidebar-card p { color:var(--text-secondary); font-size:.85rem; margin-bottom:16px; }
.sidebar-card .btn-affiliate {
  display:block; text-align:center;
  padding:12px; border-radius:var(--radius-sm);
  background:var(--accent); color:#fff;
  font-weight:600; font-size:.9rem;
  transition:background .2s;
}
.sidebar-card .btn-affiliate:hover { background:#047857; color:#fff; }
.sidebar-card .btn-affiliate.secondary {
  background:var(--primary);
}
.sidebar-card .btn-affiliate.secondary:hover { background:var(--primary-dark); }

.sidebar-card .savings-highlight {
  font-size:1.8rem; font-weight:700; color:var(--accent);
  margin:8px 0;
}

/* ── SEO CONTENT ── */
.seo-content {
  margin-top:40px; padding:32px;
  background:var(--bg-section);
  border-radius:var(--radius);
}
.seo-content h2 { font-size:1.2rem; font-weight:700; margin-bottom:16px; }
.seo-content h3 { font-size:1rem; font-weight:600; margin:20px 0 8px; }
.seo-content p { color:var(--text-secondary); font-size:.9rem; margin-bottom:12px; }

/* ── FOOTER ── */
.footer {
  padding:40px 0;
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:.85rem;
}
.footer .container {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.footer-links { display:flex; gap:24px; list-style:none; }
.footer-links a { color:var(--text-muted); }
.footer-links a:hover { color:var(--text); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .tool-layout { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .tools-grid { grid-template-columns:1fr; }
  .hero { padding:48px 0 40px; }
}

/* ── AFFILIATE NOTICE ── */
.affiliate-notice {
  font-size:.75rem; color:var(--text-muted); text-align:center;
  padding:12px 0; border-top:1px solid var(--border-light); margin-top:24px;
}
.affiliate-label {
  display:inline-block; font-size:.65rem; color:var(--text-muted);
  background:var(--border-light); padding:2px 6px; border-radius:3px;
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;
}
.powered-by {
  font-size:.7rem; color:var(--text-muted); text-align:center; margin-top:8px;
}