:root {
  --bg: #0b0f1a;
  --surface: #101522;
  --text: #e6e9ef;
  --muted: #a9b2c3;
  --primary: #6c8cff;
  --accent: #ff7ac6;
}
body { background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
.breadcrumbs { max-width: 1100px; margin: 24px auto; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.hero { max-width: 1100px; margin: 24px auto; padding: 24px; background: var(--surface); border-radius: 16px; }
.hero h1 { margin: 0 0 8px; }
.calculator .calc-container { max-width: 1100px; margin: 24px auto; background: var(--surface); border-radius: 16px; padding: 24px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.calc-inputs label { display: block; margin: 12px 0 6px; color: var(--muted); }
.calc-inputs input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #1e2536; background: #0d1320; color: var(--text); }
.btn-primary { margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: var(--primary); color: #081019; border: none; cursor: pointer; }
.calc-results { background: #0d1320; border: 1px solid #1e2536; border-radius: 12px; padding: 16px; }
.page-description, .faq { max-width: 1100px; margin: 24px auto; padding: 0 8px; }
.faq details { background: var(--surface); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }