:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fd;
  --border: #e5ebf3;
  --text: #122033;
  --muted: #526276;
  --primary: #15396b;
  --shadow: 0 12px 35px rgba(16, 36, 70, 0.07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; }

.topbar, .tool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar { padding-top: 2rem; margin-bottom: 3rem; }
.brand { font-weight: 700; }
.navlinks { display: flex; gap: 1rem; align-items: center; }
.nav-cta, .primary-btn, .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .85rem 1.2rem;
  font-weight: 600;
}
.primary-btn, .nav-cta { background: var(--primary); color: white; }
.secondary-btn { background: white; border: 1px solid #cad4e3; }
.secondary-btn.small { padding: .6rem 1rem; }

.hero {
  padding-bottom: 4rem;
  background: linear-gradient(180deg, #f9fbff 0%, #eef3fb 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items: center;
}
.badge {
  display: inline-block;
  background: #e8f0ff;
  color: var(--primary);
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 4.1rem);
  line-height: 1.05;
  margin: 1rem 0;
  max-width: 11ch;
}
.hero-copy { max-width: 60ch; color: #42526b; font-size: 1.05rem; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-card, .feature-card, .step-card, .tool-card, .result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.hero-card { padding: 1.2rem; }
.metric-card-grid, .feature-grid, .steps-grid { display: grid; gap: 1rem; }
.metric-card { padding: 1rem; border-radius: 18px; background: var(--surface-soft); display: grid; gap: .35rem; }

.section { padding: 4rem 0; }
.section h2 { font-size: clamp(1.6rem, 2vw, 2.4rem); margin-top: 0; }
.feature-grid, .steps-grid { grid-template-columns: repeat(3, 1fr); }
.feature-card, .step-card { padding: 1.3rem; }
.muted-section { background: #edf2f8; }
.step-card span {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--primary); color: white; font-weight: 700;
}

.tool-section { padding-top: 4rem; padding-bottom: 4rem; }
.tool-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.tool-left, .tool-right { display: grid; gap: 1rem; align-content: start; }
.tool-card, .result-card { padding: 1.15rem; }
.tool-card-header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem;
}
.tool-card-header h3, .result-card h3 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.input-group { display: grid; gap: .35rem; }
.input-group span { font-size: .92rem; color: #4d5d74; }
.input-group input {
  width: 100%; border: 1px solid #d6dfec; border-radius: 14px; padding: .82rem .95rem; font-size: .98rem; background: #fbfcfe;
}
.result-list, .summary-list { display: grid; gap: .7rem; }
.result-list div, .summary-list div {
  display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eef2f7; padding-bottom: .65rem;
}
.result-list div:last-child, .summary-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.result-list span, .summary-list span { color: var(--muted); }
.result-list strong, .summary-list strong { text-align: right; }
.section-hidden .section-body { display: none; }

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d8e1ef;
  background: #f7f9fc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.icon-btn svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .hero-grid, .tool-layout, .feature-grid, .steps-grid { grid-template-columns: 1fr; }
  .navlinks { display: none; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .tool-heading { align-items: flex-start; flex-direction: column; }
}