/* ============================================================
   Reviews Explainer — v1.0
   Namespace: rs-
   Goal: Standalone dark theme sectioned page (no conflict with master)
   ============================================================ */

/* ---------- Root palette (dark) ---------- */
:root {
    --rs-bg: #0b1022;
    --rs-text: #e7eaf3;
    --rs-muted: #93a4b5;
    --rs-primary: #A78BFA; /* purple */
    --rs-accent: #22D3EE;  /* cyan */
    --rs-border: rgba(148,163,184,.22);
    --rs-card: rgba(17,26,47,.76);
    --rs-shadow: 0 24px 62px rgba(0,0,0,.40);
}

/* ---------- Page shell ---------- */
.rs-main{
    background:
      radial-gradient(1200px 900px at 90% -20%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(1000px 700px at 15% -20%, rgba(167,139,250,.10), transparent 60%),
      var(--rs-bg);
    color: var(--rs-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    min-height: 100%;
}

/* ---------- Hero ---------- */
.rs-hero{position:relative;overflow:hidden}
.rs-hero .rs-hero-inner{
  max-width: 1200px; margin: 0 auto; padding: 48px 16px 24px; text-align:center;
}
.rs-title{
  margin:0; font-weight:900; font-size: clamp(2rem,5vw,3.1rem);
  background: linear-gradient(90deg,#ffffff,#e8f1ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.rs-sub{max-width: 860px; margin: 10px auto 0; color: var(--rs-muted); font-size: 1.02rem}
.rs-cta{margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.rs-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
  border:1px solid var(--rs-border); text-decoration:none; color:var(--rs-text);
  font-weight:800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rs-btn.primary{ background: linear-gradient(135deg,var(--rs-primary),var(--rs-accent)); color:#0b1022; border:0; box-shadow:0 16px 34px rgba(99,102,241,.35)}
.rs-btn.ghost{ background: rgba(255,255,255,.06)}
.rs-btn:hover{ transform: translateY(-1px) }

.rs-orbs{position:absolute; inset:0; pointer-events:none}
.rs-orb{position:absolute; width:14px; height:14px; border-radius:999px;
  background: radial-gradient(circle at 50% 50%, #fff, #bfe7ff 60%, transparent 70%);
  box-shadow: 0 0 26px rgba(34,211,238,.75), 0 0 48px rgba(167,139,250,.55);
  animation: rsFloat 11s ease-in-out infinite;
}
.rs-orb.o1{left:14%; top:20%; animation-delay:-1.4s}
.rs-orb.o2{left:70%; top:16%; animation-delay:-3.1s}
.rs-orb.o3{left:46%; top:10%; animation-delay:-2.2s}
@keyframes rsFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-10px)}}

/* ---------- Sections ---------- */
.rs-section{max-width:1200px; margin: 32px auto 48px; padding: 0 16px}
.rs-sec-head{ text-align:center; display:grid; gap:8px; justify-items:center; margin-bottom:14px }
.rs-sec-head h2{ margin:0; font-weight:900; letter-spacing:.2px; font-size:clamp(1.6rem,3vw,2.1rem) }
.rs-sec-head p{ margin:0; color:var(--rs-muted) }

/* ---------- How steps ---------- */
.rs-steps{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px }
@media (max-width:980px){ .rs-steps{ grid-template-columns: repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .rs-steps{ grid-template-columns: 1fr } }

.rs-inset{
  border:1px solid var(--rs-border);
  border-radius:18px;
  background: linear-gradient(180deg,rgba(255,255,255,.06),transparent), var(--rs-card);
  box-shadow: var(--rs-shadow);
}
.rs-step{ padding:16px }
.rs-badge{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg,var(--rs-primary),var(--rs-accent)); color:#0b1022; box-shadow:0 10px 24px rgba(99,102,241,.35)
}
.rs-step h3{ margin:10px 0 6px; font-weight:900 }
.rs-step p{ margin:0 0 8px; color:var(--rs-text) }
.rs-bullets{ margin:0; padding-left:18px; color:var(--rs-muted) }
.rs-seeds-demo{display:flex; gap:6px; margin-top:8px; opacity:.95}
.rs-seeds-demo img{ width:16px; height:16px; filter: drop-shadow(0 0 4px rgba(167,139,250,.35)) }

/* ---------- Cards row (admin tools) ---------- */
.rs-cards{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px }
@media (max-width:980px){ .rs-cards{ grid-template-columns: repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .rs-cards{ grid-template-columns: 1fr } }

.rs-card{ padding:14px; border:1px solid var(--rs-border); border-radius:16px;
  background: linear-gradient(180deg,rgba(255,255,255,.06),transparent),var(--rs-card);
  box-shadow: var(--rs-shadow);
}
.rs-card-head{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; margin-bottom:6px }
.rs-card p{ margin:0; color:var(--rs-muted) }

/* ---------- Patient tiles ---------- */
.rs-tiles{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px }
@media (max-width:980px){ .rs-tiles{ grid-template-columns: 1fr 1fr } }
@media (max-width:640px){ .rs-tiles{ grid-template-columns: 1fr } }

.rs-tile{ padding:16px; border:1px solid var(--rs-border); border-radius:16px;
  background: linear-gradient(180deg,rgba(255,255,255,.06),transparent),var(--rs-card);
  box-shadow: var(--rs-shadow);
}
.rs-tile-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg,var(--rs-primary),var(--rs-accent)); color:#0b1022; margin-bottom:8px }

/* ---------- Split panels ---------- */
.rs-grid-two{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width:820px){ .rs-grid-two{ grid-template-columns: 1fr } }
.rs-panel{ padding:16px; border:1px solid var(--rs-border); border-radius:16px;
  background: linear-gradient(180deg,rgba(255,255,255,.06),transparent),var(--rs-card);
  box-shadow: var(--rs-shadow);
}
.rs-panel h3{ margin:0 0 6px; display:flex; gap:8px; align-items:center }
.rs-panel p{ margin:0; color:var(--rs-muted) }

/* ---------- CTA band ---------- */
.rs-cta-band{ margin-bottom: 60px }
.rs-cta-inner{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:center;
  border:1px solid var(--rs-border); border-radius:22px;
  background: radial-gradient(800px 260px at 30% 30%, rgba(167,139,250,.20), transparent 70%),
              radial-gradient(840px 300px at 70% 70%, rgba(34,211,238,.20), transparent 70%),
              rgba(17,26,47,.92);
  box-shadow: var(--rs-shadow); padding:20px;
}
@media (max-width:900px){ .rs-cta-inner{ grid-template-columns:1fr } }
.rs-cta-copy h2{ margin:0 0 6px; font-weight:900; font-size:clamp(1.5rem,3.2vw,2rem) }
.rs-cta-copy p{ margin:0; color:var(--rs-muted) }
.rs-cta-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }

/* ---------- Reveal on scroll ---------- */
.rs-reveal{ opacity:0; transform: translateY(10px) scale(.992); transition: opacity .26s ease, transform .26s ease }
.rs-reveal.rs-in{ opacity:1; transform:none }