
.oxp-hero {
  padding: 3.75rem 0 2.25rem;
  background:
    radial-gradient(1200px 420px at 12% -10%, rgba(63,107,255,0.28), transparent 60%),
    radial-gradient(900px 380px at 90% 0%, rgba(14,168,149,0.18), transparent 55%),
    linear-gradient(180deg, #070b16 0%, #121a33 100%);
  color: #f8fafc;
}
.oxp-hero h1,
.oxp-hero .h1 {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 750;
  max-width: 18ch;
  color: #f8fafc !important;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.oxp-kicker {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 0.85rem;
}
.oxp-kicker a { color: inherit; text-decoration: none; }
.oxp-kicker a:hover { text-decoration: underline; }
.oxp-lead { max-width: 46rem; color: #dbe4f0; font-size: 1.08rem; line-height: 1.55; }
.oxp-note { color: #9aa8bd; font-size: 0.92rem; max-width: 42rem; }
.oxp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.oxp-step {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  min-height: 100%;
}
.oxp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: #3f6bff; color: #fff; font-size: 0.75rem; font-weight: 800;
  margin-bottom: 0.55rem;
}
.oxp-step strong { display: block; color: #fff; font-size: 0.92rem; margin-bottom: 0.25rem; }
.oxp-step p { margin: 0; color: #c5d0e0; font-size: 0.82rem; line-height: 1.45; }
.oxp-step.is-on { border-color: rgba(63,107,255,0.55); background: rgba(63,107,255,0.16); }
.oxp-steps-light { margin: 0 0 1.5rem; }
.oxp-steps-light .oxp-step {
  background: #fff; border: 1px solid rgba(11,27,58,0.1); color: inherit;
}
.oxp-steps-light .oxp-step strong { color: #0c1224; }
.oxp-steps-light .oxp-step p { color: #5b6b86; }
.oxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.oxp-card {
  display: flex; flex-direction: column; gap: 0.45rem; min-height: 100%;
  padding: 1.2rem 1.25rem 1.1rem; border-radius: 16px;
  border: 1px solid rgba(11,27,58,0.1);
  background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oxp-card:hover {
  border-color: #3f6bff;
  box-shadow: 0 14px 32px rgba(15,23,42,0.08);
  transform: translateY(-2px);
  color: inherit;
}
.oxp-card h2 { font-size: 1.08rem; margin: 0.15rem 0 0; color: #0c1224; }
.oxp-card p { color: #5b6b86; font-size: 0.9rem; margin: 0; flex: 1; }
.oxp-card-cta { font-size: 0.8rem; font-weight: 700; color: #2a4fd6; margin-top: 0.35rem; }
.oxp-mark {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff); color: #1e4ed8;
}
.oxp-mark svg { width: 20px; height: 20px; }
.oxp-mark-lg { width: 58px; height: 58px; border-radius: 16px; }
.oxp-range { font-size: 0.8rem; font-weight: 700; color: #1e4ed8; }
.oxp-service-head { display: flex; gap: 1rem; align-items: flex-start; }
.oxp-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.8fr); gap: 2rem; align-items: start; }
.oxp-aside {
  background: #fff;
  border: 1px solid rgba(11,27,58,0.1);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  height: fit-content;
  box-shadow: 0 10px 30px rgba(15,23,42,0.04);
}
.oxp-aside .oxp-range { font-size: 1.05rem; display: block; margin-bottom: 0.6rem; }
.oxp-aside .btn { width: 100%; }
.oxp-form-card {
  background: #fff; border: 1px solid rgba(11,27,58,0.1); border-radius: 16px;
  padding: 1.5rem 1.55rem 1.6rem; box-shadow: 0 10px 28px rgba(15,23,42,0.04);
}
.oxp-form .form-control-dark { width: 100%; }
.oxp-docs, .oxp-log { padding-left: 1.1rem; }
.oxp-docs li, .oxp-log li { margin-bottom: 0.5rem; }
.oxp-check { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.9rem; font-size: 0.9rem; }
.oxp-invoice {
  background: #fff; border: 1px solid rgba(11,27,58,0.1); border-radius: 16px;
  padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.oxp-invoice-amt { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: #0c1224; }
.oxp-badge {
  display: inline-block; padding: 0.18rem 0.58rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.oxp-badge-submitted { background: #eef2ff; color: #1e4ed8; }
.oxp-badge-quoted { background: #fef3c7; color: #92400e; }
.oxp-badge-customerapproved { background: #d1fae5; color: #065f46; }
.oxp-badge-paid { background: #dbeafe; color: #1e3a8a; }
.ox-doc { background: #fff; color: #111; padding: 1.5rem; }
.ox-doc-head { border-bottom: 2px solid #111; margin-bottom: 1rem; padding-bottom: 0.75rem; }
.ox-doc-brand { letter-spacing: 0.18em; font-weight: 800; margin: 0; }
.ox-doc-sub { color: #5b6b86; margin: 0 0 0.5rem; }
.ox-doc-dl { display: grid; gap: 0.4rem 1rem; }
.ox-doc-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem; }
.ox-doc-pre { white-space: pre-wrap; font-family: inherit; background: #f7f8fc; padding: 0.8rem; border-radius: 8px; }
.ox-doc-foot { margin-top: 1.5rem; font-size: 0.8rem; color: #5b6b86; }
.ox-quote-panel {
  background: #fff; border: 1px solid rgba(11,27,58,0.1); border-radius: 14px;
  padding: 1.15rem 1.2rem; max-width: 40rem;
}
@media (max-width: 900px) {
  .oxp-split, .ox-doc-row, .oxp-steps, .oxp-steps-light { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .site-footer, .ox-chat, .back-to-top, .no-print { display: none !important; }
  .oxp-hero { background: #fff; color: #111; padding: 0; }
  .oxp-hero h1 { color: #111 !important; }
}
