/* ============ Nav ============ */
.nav-ob {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-ob.is-scrolled { border-bottom-color: var(--color-line); box-shadow: var(--shadow-sm); }
.nav-ob__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; }
.nav-ob__logo { display: inline-flex; align-items: center; gap: .6rem; }
.nav-ob__logo img { width: 36px; height: 36px; }
.nav-ob__brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.nav-ob__brand small { display: block; font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-grey); }

/* ============ Buttons ============ */
.btn-ob {
  --pad-y: .72rem; --pad-x: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; font-family: inherit;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn-ob:disabled { opacity: .5; cursor: not-allowed; }
.btn-ob:active:not(:disabled) { transform: translateY(1px); }
.btn-ob--primary { background: var(--color-blue); color: #fff; }
.btn-ob--primary:hover:not(:disabled) { background: var(--color-blue-600); }
.btn-ob--ghost { background: #fff; color: var(--color-blue); border-color: var(--color-line); }
.btn-ob--ghost:hover:not(:disabled) { border-color: var(--color-blue); background: var(--color-blue-050); }
.btn-ob--lg { --pad-y: .95rem; --pad-x: 1.7rem; font-size: 1rem; }
.btn-ob--sm { --pad-y: .5rem; --pad-x: .9rem; font-size: .85rem; }
.btn-ob--block { width: 100%; }

/* ============ Card ============ */
.card-ob {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ============ Stepper ============ */
.stepper-ob { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--space-6); flex-wrap: wrap; }
.stepper-ob .step-ob { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--color-grey); font-weight: 700; }
.stepper-ob .step-ob__num {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-grey-050); color: var(--color-grey); font-size: .75rem;
}
.stepper-ob .step-ob.is-active { color: var(--color-blue); }
.stepper-ob .step-ob.is-active .step-ob__num { background: var(--color-blue); color: #fff; }
.stepper-ob .step-ob.is-done .step-ob__num { background: var(--color-success); color: #fff; }
.stepper-ob .step-ob__bar { flex: 1; height: 2px; background: var(--color-line); min-width: 12px; }

/* ============ Forms ============ */
.field-ob { margin-bottom: var(--space-4); }
.field-ob label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-grey); margin-bottom: .4rem; }
.field-ob input[type="text"], .field-ob input[type="email"], .field-ob input[type="tel"], .field-ob select, .field-ob textarea {
  width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-md); background: #fff; color: var(--color-ink);
  transition: border-color .15s var(--ease);
}
.field-ob input:focus, .field-ob select:focus, .field-ob textarea:focus { outline: none; border-color: var(--color-blue); }
.field-ob textarea { resize: vertical; min-height: 90px; }
.field-ob .hint { font-size: var(--fs-xs); color: var(--color-grey); margin-top: .3rem; }
.field-ob.has-error input, .field-ob.has-error select, .field-ob.has-error textarea { border-color: var(--color-danger); }
.field-ob .error-ob { display: none; color: var(--color-danger); font-size: var(--fs-xs); margin-top: .3rem; }
.field-ob.has-error .error-ob { display: block; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); margin-bottom: .75rem;
  transition: border-color .15s var(--ease);
}
.toggle-row.has-error { border-color: var(--color-danger); }
.toggle-row__label { font-weight: 700; font-size: var(--fs-sm); }
.toggle-row__sub { font-size: var(--fs-xs); color: var(--color-grey); margin-top: .15rem; }
.toggle-ob { display: inline-flex; border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); overflow: hidden; }
.toggle-ob button { border: none; background: #fff; padding: .4rem 1rem; font-weight: 700; font-size: var(--fs-xs); cursor: pointer; color: var(--color-grey); }
.toggle-ob button.is-active { background: var(--color-blue); color: #fff; }

.checkbox-ob { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.checkbox-ob input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--color-blue); flex-shrink: 0; }
.checkbox-ob.has-error { color: var(--color-danger); }

/* ============ Feature picker cards ============ */
.feature-card {
  border: 1.5px solid var(--color-line); border-radius: var(--radius-md); padding: 1.1rem 1.25rem;
  margin-bottom: .75rem; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.feature-card:hover { border-color: var(--color-blue); }
.feature-card.is-selected { border-color: var(--color-blue); background: var(--color-blue-050); }
.feature-card.is-free { border-color: var(--color-success); background: var(--color-success-bg); cursor: default; }
.feature-card__name { font-weight: 800; font-size: var(--fs-md); margin-bottom: .25rem; }
.feature-card__desc { font-size: var(--fs-sm); color: var(--color-grey); max-width: 46ch; }
.feature-card__price { font-weight: 800; color: var(--color-blue); white-space: nowrap; font-size: var(--fs-sm); }
.feature-card.is-free .feature-card__price { color: var(--color-success); }
.feature-card__check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-line);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.feature-card.is-selected .feature-card__check { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }

/* ============ Estimate summary ============ */
.estimate-box { background: var(--color-blue-050); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; }
.estimate-box__row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: var(--fs-sm); }
.estimate-box__total { display: flex; justify-content: space-between; padding-top: .6rem; margin-top: .5rem; border-top: 1px solid rgba(0,82,204,.2); font-weight: 800; font-size: var(--fs-lg); }
.disclaimer-note { font-size: var(--fs-xs); color: var(--color-grey); margin-top: .75rem; }

/* ============ Trust / rules of engagement box ============ */
.trust-box { background: var(--color-success-bg); border: 1px solid rgba(31,138,77,.25); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; margin-bottom: var(--space-5); }
.trust-box h4 { font-size: var(--fs-md); color: var(--color-success); margin-bottom: .5rem; }
.trust-box ul { list-style: none; }
.trust-box li { display: flex; gap: .5rem; font-size: var(--fs-sm); margin-bottom: .4rem; align-items: flex-start; }
.trust-box li svg { flex-shrink: 0; margin-top: .15rem; color: var(--color-success); }

/* ============ Legal text ============ */
.legal { padding: var(--space-8) 0; max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: var(--fs-xxl); margin-bottom: .5rem; }
.legal h2 { font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-3); }
.legal p, .legal li { font-size: var(--fs-sm); margin-bottom: .6rem; }
.legal ol.legal__clauses { padding-left: 1.1rem; }
.legal ol.legal__clauses > li { list-style: decimal; margin-bottom: .9rem; }
.legal ol.legal__sub { padding-left: 1.1rem; margin-top: .4rem; }
.legal ol.legal__sub > li { list-style: lower-alpha; margin-bottom: .4rem; }
.legal__meta { color: var(--color-grey); font-size: var(--fs-xs); }
.legal__rules { background: var(--color-blue-050); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; margin: var(--space-5) 0 var(--space-7); }
.legal__rules li { list-style: disc; margin-left: 1.1rem; }

/* ============ Admin ============ */
.admin-shell { min-height: 100vh; background: var(--color-grey-050); }
.admin-bar { background: var(--color-ink); color: #fff; padding: .85rem 0; }
.admin-bar__inner { display: flex; align-items: center; justify-content: space-between; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.admin-table th, .admin-table td { padding: .75rem 1rem; text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--color-line); }
.admin-table th { background: var(--color-grey-050); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-grey); }
.admin-table tr:hover td { background: var(--color-blue-050); cursor: pointer; }
.badge-ob { display: inline-flex; padding: .25rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; text-transform: capitalize; }
.badge-ob--new { background: var(--color-blue-050); color: var(--color-blue); }
.badge-ob--contacted { background: var(--color-warn-bg); color: var(--color-warn); }
.badge-ob--quoted { background: var(--color-orange-050); color: var(--color-orange-600); }
.badge-ob--won { background: var(--color-success-bg); color: var(--color-success); }
.badge-ob--lost { background: var(--color-danger-bg); color: var(--color-danger); }

.modal-ob__backdrop { position: fixed; inset: 0; background: rgba(13,17,23,.5); display: none; align-items: center; justify-content: center; padding: 1.5rem; z-index: 60; }
.modal-ob__backdrop.is-open { display: flex; }
.modal-ob { background: #fff; border-radius: var(--radius-lg); max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; padding: var(--space-6); }

/* ============ Footer ============ */
.footer-ob { background: var(--color-ink); color: rgba(255,255,255,.75); padding: var(--space-6) 0; margin-top: var(--space-8); }
.footer-ob__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: var(--fs-xs); }

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .feature-card { flex-direction: column; }
  .estimate-box__row, .estimate-box__total { font-size: var(--fs-xs); }
  .toggle-row { flex-wrap: wrap; }
  .toggle-row__label, .toggle-row__sub { max-width: 100%; }
  .toggle-ob { flex-shrink: 0; }
}