/* =================================================================
   VARIANT 08 — Y2K (v2 with hero image + marquee)
   ================================================================= */

.rp-body { background: linear-gradient(135deg, #FFE4E6 0%, #DBEAFE 50%, #F0ABFC 100%); background-attachment: fixed; color: #0A0A0A; min-height: 100vh; }
.rp-header { background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.1); }
.rp-btn { border-radius: 12px; }
.rp-btn--primary { background: #0A0A0A; color: #fff; }
.rp-btn--secondary { color: #0A0A0A; border: 1.5px solid rgba(0,0,0,0.3); background: rgba(255,255,255,0.5); }
.rp-btn--secondary:hover { background: rgba(255,255,255,0.8); border-color: #0A0A0A; }
.rp-btn--accent { background: linear-gradient(135deg, #06B6D4, #F0ABFC); color: #0A0A0A; font-weight: 700; }
.rp-btn--accent:hover { background: linear-gradient(135deg, #F0ABFC, #06B6D4); }
.rp-btn--ghost { background: transparent; color: #0A0A0A; border: 1.5px solid #0A0A0A; }
.rp-btn--ghost:hover { background: #0A0A0A; color: #fff; }
.rp-h1, .rp-h2, .rp-h3, .rp-h4 { color: #0A0A0A; }
.rp-eyebrow { color: #0A0A0A; }

/* ----- HERO with image + chrome card + marquee + orbs ----- */
.v08-hero { padding: 0; position: relative; overflow: hidden; }
.v08-hero__bg { position: absolute; inset: 0; z-index: 0; }
.v08-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.v08-hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,228,230,0.4) 0%, rgba(219,234,254,0.5) 50%, rgba(240,171,252,0.5) 100%); }

.v08-hero__chrome {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 32px;
  margin: var(--sp-12) var(--container-pad) var(--sp-8);
  padding: var(--sp-12) var(--sp-8);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 20px 60px rgba(240, 171, 252, 0.3), 0 0 0 1px rgba(255,255,255,0.4) inset;
  overflow: hidden;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.v08-hero__chrome::before {
  content: ""; position: absolute; inset: 0; border-radius: 32px; padding: 2px;
  background: linear-gradient(135deg, #06B6D4, #F0ABFC, #FFD93D, #06B6D4);
  background-size: 300% 300%;
  animation: rp-chrome 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.v08-hero__inner { position: relative; z-index: 1; max-width: 800px; }
.v08-eyebrow { background: linear-gradient(135deg, #06B6D4, #F0ABFC); color: #0A0A0A; padding: 6px 14px; border-radius: 999px; font-weight: 700; display: inline-block; }
.v08-h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin-top: var(--sp-4); }
.v08-accent { background: linear-gradient(135deg, #EC4899, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v08-lede { font-size: var(--fs-20); line-height: 1.6; color: #1A1A1A; max-width: 60ch; margin-top: var(--sp-6); }
.v08-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* Marquee */
.v08-marquee { margin-top: var(--sp-8); padding: var(--sp-3) 0; border-top: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.v08-marquee__track { display: flex; gap: var(--sp-8); flex-shrink: 0; min-width: 100%; animation: rp-marquee 40s linear infinite; }
.v08-marquee__track span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-12); color: #0A0A0A; white-space: nowrap; font-weight: 600; }

/* Orbs */
.v08-hero__orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.v08-orb { position: absolute; border-radius: 50%; filter: blur(40px); }
.v08-orb--1 { width: 280px; height: 280px; background: #F0ABFC; top: -80px; right: -80px; opacity: 0.7; }
.v08-orb--2 { width: 200px; height: 200px; background: #06B6D4; bottom: -60px; left: -60px; opacity: 0.6; }
.v08-orb--3 { width: 160px; height: 160px; background: #FFD93D; top: 50%; right: 30%; opacity: 0.5; }

.rp-stats-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); padding: var(--sp-6) 0; background: transparent; }
.rp-stats-strip > div { background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; text-align: center; padding: var(--sp-5); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 16px rgba(240, 171, 252, 0.2); }
.rp-stats-strip > div > * { color: #0A0A0A; }
.rp-stats-strip > div > span:last-child { font-size: var(--fs-12); color: #4A4A4A; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.rp-stat__big { font-size: 32px; font-weight: 800; line-height: 1; }
@media (max-width: 900px) { .rp-stats-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .rp-stats-strip { grid-template-columns: repeat(2, 1fr); } }

.rp-section--alt { background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); }
.rp-section--ink { background: #0A0A0A; color: #fff; }
.rp-eyebrow--light { color: #F0ABFC; }
.rp-stat { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; padding: var(--sp-6); text-align: center; box-shadow: 0 4px 16px rgba(240,171,252,0.2); }
.rp-stat__num { font-size: 56px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #EC4899, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-stat__lbl { font-size: var(--fs-12); color: #0A0A0A; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 8px; }
.rp-svc { background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; }
.rp-svc__item { background: transparent; border-radius: 0; }
.rp-svc__item:hover { background: rgba(240,171,252,0.2); }
.rp-svc__item:first-child { border-radius: 16px 16px 0 0; }
.rp-svc__item:last-child { border-radius: 0 0 16px 16px; }
.rp-svc__num { color: #EC4899; font-weight: 700; }
.rp-svc__body h3 { color: #0A0A0A; }
.rp-svc__price strong { color: #0A0A0A; }
.rp-quote { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; }
.rp-quote__stars { color: #EC4899; }
.rp-quote__body { color: #0A0A0A; }
.rp-cities { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; }
.rp-cities__item { background: transparent; color: #0A0A0A; }
.rp-cities__item span { color: #06B6D4; font-weight: 600; }
.rp-faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.rp-faq-item summary { color: #0A0A0A; font-weight: 600; }
.rp-case__body p:last-child { background: linear-gradient(135deg, #06B6D4, #F0ABFC); color: #0A0A0A; padding: var(--sp-5); border-radius: 16px; font-weight: 700; }
.rp-creds { background: rgba(255,255,255,0.6); border-radius: 16px; padding: var(--sp-5); }
.rp-creds th { color: #0A0A0A; border-bottom: 1px solid rgba(0,0,0,0.1); }
.rp-creds td { border-bottom: 1px solid rgba(0,0,0,0.05); }
.rp-trust-strip { background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); }
.rp-trust-strip > div { background: transparent; }