/* Bread Box IT styles */
:root {
  --color-primary: #0F766E;
  --color-accent: #FDBA74;
  --color-dark: #1e293b;
  --color-light: #f8fafc;
  --spacing: 1rem;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--color-dark);
  background-color: var(--color-light);
}
a { color: var(--color-primary); text-decoration: none; }
a:focus, button:focus { outline: 2px dashed var(--color-accent); outline-offset: 2px; }
header {
  position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e7eb; z-index: 10;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.nav-toggle { display: none; background: none; border: none; }
@media (max-width: 768px) {
  nav ul { flex-direction: column; display: none; background: #fff; position: absolute; top: 100%; right: 0; width: 200px; padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  nav ul.show { display: flex; }
  .nav-toggle { display: block; }
  .call-btn { display: none; }
}
.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--color-primary); color: #fff; text-align: center; }
.btn-accent { background: var(--color-accent); color: #000; }
.btn:hover, .btn:focus { opacity: 0.9; }
.hero { display: grid; place-items: center; text-align: center; padding: 4rem 1rem; background-color: #e0f2f1; }
.hero img { max-width: 100%; height: auto; }
.cards { display: grid; gap: 1rem; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); } }
.card { background: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem 0; font-weight: bold; }
.process { display: flex; flex-direction: column; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .process { flex-direction: row; justify-content: center; } }
.process div { flex: 1; }
.testimonials { background: #f1f5f9; padding: 2rem 1rem; }
.testimonials blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 4px solid var(--color-primary); }
.footer-cta { background: var(--color-primary); color: #fff; padding: 1rem; text-align: center; }
footer { background: var(--color-dark); color: #fff; padding: 2rem 1rem; }
footer a { color: #fff; }
footer nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0; list-style: none; }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-item button { width: 100%; text-align: left; padding: 1rem; background: none; border: none; font-weight: bold; }
.faq-item button:after { content: '+'; float: right; }
.faq-item button[aria-expanded="true"]:after { content: '-'; }
.faq-item div { display: none; padding: 0 1rem 1rem; }
.faq-item div.show { display: block; }
.tier-toggle { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.tier-toggle button { padding: 0.5rem 1rem; border: 1px solid var(--color-primary); background: #fff; }
.tier-toggle button.active { background: var(--color-primary); color: #fff; }
.business-page[data-mode="contracts"] .ondemand { display: none; }
.business-page[data-mode="ondemand"] .contracts { display: none; }
.tiers { overflow-x: auto; }
.tiers table { width: 100%; border-collapse: collapse; }
.tiers th, .tiers td { border: 1px solid #e5e7eb; padding: 0.5rem; text-align: left; }
.tiers th { background: #f1f5f9; }
form { display: grid; gap: 1rem; max-width: 600px; margin: auto; }
input, select, textarea { padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px var(--color-accent); }
.error { color: red; font-size: 0.875rem; }
.map { max-width: 100%; height: auto; }