/* =================================================================
   VARIANT 04 — SPATIAL (v2 with 5 layered images)
   ================================================================= */

.rp-body { background: #0A0E1A; color: #E5E7EB; }
.rp-header { background: rgba(10,14,26,0.8); border-bottom-color: #1F2937; }
.rp-header__phone { color: #E5E7EB; }
.rp-header__nav a { color: #94A3B8; }
.rp-header__nav a:hover { color: #fff; }
.rp-btn--primary { background: #fff; color: #0A0E1A; }
.rp-btn--secondary { color: #E5E7EB; border-color: #374151; }
.rp-btn--secondary:hover { background: #1F2937; border-color: #E5E7EB; }
.rp-btn--accent { background: var(--rp-orange); color: #fff; }
.rp-btn--ghost { background: transparent; color: #E5E7EB; border: 1.5px solid rgba(255,255,255,0.3); }
.rp-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.rp-h1, .rp-h2, .rp-h3, .rp-h4 { color: #fff; }
.rp-eyebrow { color: #94A3B8; }
.rp-eyebrow--accent { color: var(--rp-orange); }

/* ----- HERO with 5 layered images + mesh ----- */
.v04-hero { padding: var(--sp-12) 0 var(--sp-20); position: relative; overflow: hidden; }
.v04-hero__status {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: var(--fs-12); color: #6EE7B7;
  font-family: var(--font-mono); margin-bottom: var(--sp-8);
}
.v04-hero__status .rp-pulse { background: #10B981; }
.v04-hero__status .rp-pulse::after { background: #10B981; }

.v04-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; min-height: 70vh; }
.v04-hero__main { position: relative; z-index: 3; max-width: 600px; }
.v04-h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); }
.v04-accent { background: linear-gradient(135deg, #FF6B1A, #F472B6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v04-hero__main .rp-lede { color: #94A3B8; }
.v04-hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* 5 layered images with depth — fills the right column */
.v04-hero__layers {
  position: relative; width: 100%; height: 580px;
}
.v04-layer {
  position: absolute; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  transition: transform 600ms var(--ease-out);
}
.v04-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v04-layer--1 { width: 240px; height: 160px; top: 0; left: 0; transform: rotate(-4deg); z-index: 1; }
.v04-layer--2 { width: 220px; height: 280px; top: 40px; right: 0; transform: rotate(3deg); z-index: 3; }
.v04-layer--3 { width: 280px; height: 200px; top: 180px; left: 30px; transform: rotate(-2deg); z-index: 2; }
.v04-layer--4 { width: 200px; height: 240px; top: 280px; right: 30px; transform: rotate(4deg); z-index: 1; }
.v04-layer--5 { width: 240px; height: 180px; bottom: 0; left: 60px; transform: rotate(-3deg); z-index: 2; }

@media (max-width: 1100px) { .v04-hero__inner { grid-template-columns: 1fr; } .v04-hero__layers { display: none; } }

.v04-glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: var(--sp-6); transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease); }
.v04-glass:hover { transform: translateY(-4px); border-color: rgba(255,107,26,0.4); background: rgba(255,107,26,0.04); }
.v04-glass__kicker { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--rp-orange); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.v04-glass h3 { color: #fff; margin-bottom: 8px; }
.v04-glass p { color: #94A3B8; font-size: var(--fs-14); line-height: 1.6; }

.rp-section--alt { background: #0F1424; }
.rp-section--ink { background: #050810; color: #fff; }
.rp-eyebrow--light { color: rgba(255,255,255,0.6); }
.rp-trust-strip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.rp-trust-strip > div { background: transparent; color: #E5E7EB; }
.rp-trust-strip strong { color: #fff; }
.rp-trust-strip span { color: #94A3B8; }

.rp-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: var(--sp-6); text-align: center; }
.rp-stat__num { font-size: 56px; font-weight: 700; line-height: 1; color: var(--rp-orange); }
.rp-stat__lbl { font-size: var(--fs-12); color: #94A3B8; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 8px; }
.rp-stats-strip { display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(255,255,255,0.04); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); padding: var(--sp-8) 0; }
.rp-stats-strip > div { text-align: center; padding: 0 var(--sp-4); border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 4px; }
.rp-stats-strip > div:last-child { border-right: 0; }
.rp-stats-strip > div > * { color: #fff; }
.rp-stats-strip > div > span:last-child { font-size: var(--fs-12); color: #94A3B8; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.rp-stat__big { font-size: 40px; font-weight: 700; line-height: 1; }
@media (max-width: 900px) { .rp-stats-strip { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .rp-stats-strip > div { border-right: 0; } }
@media (max-width: 500px) { .rp-stats-strip { grid-template-columns: repeat(2, 1fr); } }

.rp-svc { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); }
.rp-svc__item { background: transparent; }
.rp-svc__item:hover { background: rgba(255,255,255,0.04); }
.rp-svc__num { color: #94A3B8; }
.rp-svc__body h3 { color: #fff; }
.rp-svc__body p { color: #94A3B8; }
.rp-svc__price strong { color: #fff; }

.rp-bento__tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.rp-bento__tile:hover { background: rgba(255,107,26,0.04); border-color: rgba(255,107,26,0.3); }
.rp-bento__num { color: #94A3B8; }
.rp-bento__name { color: #fff; }
.rp-bento__meta { color: #94A3B8; }
.rp-bento__price strong { color: #fff; }
.rp-bento__price span { color: #94A3B8; }

.rp-quote { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.rp-quote__body { color: #E5E7EB; }
.rp-quote__name { color: #fff; }
.rp-quote__meta { color: #94A3B8; }
.rp-quote__cite { border-top-color: rgba(255,255,255,0.1); }
.rp-cities { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.rp-cities__item { background: transparent; color: #E5E7EB; }
.rp-cities__item span { color: #94A3B8; }
.rp-faq-item { border-bottom-color: rgba(255,255,255,0.08); }
.rp-faq-item summary { color: #fff; }
.rp-faq-item__a { color: #94A3B8; }
.rp-case__body { color: #94A3B8; }
.rp-case__body p:last-child { color: #fff; }
.rp-creds { color: #E5E7EB; }
.rp-creds th { color: #94A3B8; border-bottom-color: rgba(255,255,255,0.1); }
.rp-creds td { border-bottom-color: rgba(255,255,255,0.05); }
.rp-creds td strong { color: #fff; }