/* Rayva agencies page — sections not shared with the other pages.
   Faithful translation of "Rayva Agencies.dc.html". */

/* ── Centered hero ────────────────────────────────────────────────────── */
.hero-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 80px;
  text-align: center;
}
.hero-center .hero-badge {
  margin-bottom: 22px;
}
.hero-center .hero-badge i {
  color: var(--honey);
}
.hero-center h1 {
  font-size: clamp(40px, 5.5vw, 60px);
  line-height: 1.02;
  margin: 0 auto 16px;
  color: var(--ghost);
  max-width: 820px;
}
.hero-center .hero-sub {
  margin: 0 auto 30px;
  max-width: 620px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-ctas .btn-coral {
  font-size: 16px;
  padding: 15px 28px;
}
.btn-ghost {
  display: inline-block;
  text-decoration: none;
  border: 1px solid rgba(247, 246, 251, 0.25);
  color: var(--ghost);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
}
.btn-ghost:hover {
  background: rgba(247, 246, 251, 0.06);
  color: var(--ghost);
}
.hero-center .fine {
  font-size: 13px;
  color: var(--ghost-50);
  margin: 18px 0 0;
}

/* ── Dispatch dashboard ───────────────────────────────────────────────── */
.dashboard-section {
  max-width: 1200px;
  margin: -36px auto 0;
  padding: 0 24px 88px;
}
.dashboard {
  background: #191919;
  border-radius: 20px;
  box-shadow: 10px 30px 30px 3px rgba(23, 23, 23, 0.25);
  overflow: hidden;
  color: var(--ghost);
}
.dash-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(247, 246, 251, 0.08);
  flex-wrap: wrap;
}
.dash-head img {
  height: 22px;
}
.dash-title {
  font-weight: 700;
  font-size: 15px;
}
.dash-date {
  font-size: 13px;
  color: var(--ghost-50);
}
.dash-preview-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ghost-45);
  border: 1px solid rgba(247, 246, 251, 0.15);
  padding: 5px 11px;
  border-radius: 999px;
}
.dash-storm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(244, 184, 96, 0.14);
  color: var(--honey);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.dash-storm i {
  font-size: 14px;
}
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border-bottom: 1px solid rgba(247, 246, 251, 0.08);
}
.dash-stat {
  padding: 18px 22px;
}
.dash-stat .k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ghost-50);
}
.dash-stat .v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-stat .note {
  font-size: 12.5px;
  color: var(--ghost-50);
  margin-top: 6px;
}
.dash-stat .meter {
  height: 5px;
  border-radius: 999px;
  background: rgba(247, 246, 251, 0.1);
  margin-top: 6px;
}
.dash-stat .meter span {
  display: block;
  width: 96%;
  height: 100%;
  background: var(--honey);
  border-radius: 999px;
}
.dash-stat .pulse-dot {
  width: 9px;
  height: 9px;
}
.dash-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.dash-col {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dash-col.timeline {
  gap: 12px;
  border-left: 1px solid rgba(247, 246, 251, 0.08);
}
.dash-col .k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ghost-50);
}
.visit-row {
  background: rgba(247, 246, 251, 0.04);
  border-radius: 14px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.visit-row.open {
  background: rgba(255, 124, 100, 0.1);
  border: 1px solid rgba(255, 124, 100, 0.45);
}
.visit-row.placed {
  background: rgba(31, 138, 91, 0.12);
  border: 1px solid rgba(31, 138, 91, 0.4);
}
.visit-icon {
  width: 33px;
  height: 33px;
  border-radius: 11px;
  background: rgba(247, 246, 251, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visit-icon i {
  font-size: 16px;
  color: var(--ghost-85);
}
.visit-row.open .visit-icon {
  background: rgba(255, 124, 100, 0.16);
}
.visit-row.open .visit-icon i {
  color: var(--coral);
}
.visit-main {
  flex: 1;
}
.visit-name {
  font-weight: 700;
  font-size: 13.5px;
}
.visit-meta {
  font-size: 12px;
  color: var(--ghost-50);
}
.visit-row.open .visit-meta,
.visit-row.placed .visit-meta {
  color: rgba(247, 246, 251, 0.55);
}
.visit-row > i.done {
  font-size: 16px;
  color: var(--success);
}
.visit-row > i.placed-check {
  font-size: 17px;
  color: var(--success);
}
.visit-tag {
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(244, 184, 96, 0.16);
  color: var(--honey);
  padding: 4px 10px;
  border-radius: 999px;
}
.fill-steps {
  display: flex;
  flex-direction: column;
}
.fill-step {
  display: flex;
  gap: 12px;
}
.fill-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fill-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--ghost);
  flex: none;
}
.fill-dot.honey {
  background: var(--honey);
}
.fill-dot.coral {
  background: var(--coral);
  animation: rvPulse 2s infinite;
}
.fill-dot.next {
  background: none;
  border: 2px solid rgba(247, 246, 251, 0.3);
  box-sizing: border-box;
}
.fill-rail .line {
  width: 2px;
  flex: 1;
  background: rgba(247, 246, 251, 0.15);
}
.fill-step .body {
  padding-bottom: 14px;
}
.fill-step .t {
  font-weight: 700;
  font-size: 13px;
}
.fill-step .t.dim {
  color: rgba(247, 246, 251, 0.6);
}
.fill-step .d {
  font-size: 12px;
  color: var(--ghost-50);
}

/* ── ROI ──────────────────────────────────────────────────────────────── */
.roi {
  background: #fff;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.roi .wrap {
  padding: 88px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}
.roi-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.roi-copy .eyebrow {
  margin: 0;
}
.roi-copy h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.05;
  margin: 0;
}
.roi-copy .lede {
  font-size: 16.5px;
  color: var(--charcoal);
  margin: 0;
  max-width: 520px;
}
.roi-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 500px;
}
.roi-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.roi-point i {
  font-size: 20px;
  margin-top: 2px;
  flex: none;
}
.roi-point span {
  font-size: 15px;
}
.storm-card {
  background: var(--ghost);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
}
.storm-card .k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 18px;
}
.storm-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.storm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.storm-row .label {
  font-size: 15px;
}
.storm-row .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.storm-row .num.tomato {
  color: var(--tomato);
}
.storm-row .num.green {
  color: var(--success);
}
.storm-row.total {
  border-top: 1px solid rgba(23, 23, 23, 0.12);
  padding-top: 16px;
}
.storm-row.total .label {
  font-weight: 700;
}
.storm-card .starburst-num > svg {
  fill: rgba(31, 138, 91, 0.14);
}
.storm-card .fine {
  font-size: 12px;
  color: var(--charcoal);
  margin: 18px 0 0;
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.pricing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px;
}
.pricing h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  margin: 0 0 40px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.price-card {
  border: 1px solid rgba(23, 23, 23, 0.1);
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price-card.featured {
  border-color: rgba(255, 124, 100, 0.5);
  background: #fff1ee;
}
.price-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.price-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--honey-tile);
}
.price-tag.coral {
  background: var(--coral);
  color: var(--ink);
}
.price-card .amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.02em;
}
.price-card p {
  font-size: 14.5px;
  color: var(--charcoal);
  margin: 0;
  flex: 1;
}
.price-card .cta {
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
}
.price-card .cta.outline {
  background: #fff;
  border: 1px solid rgba(23, 23, 23, 0.15);
  color: var(--ink);
}
.price-card .cta.outline:hover {
  background: rgba(23, 23, 23, 0.04);
  color: var(--ink);
}