/* ============================================================
   service-dr-services.css
   Extracted from <style> block in service-dr-services.html.
   ============================================================ */

/* ========== HERO · DR Console ========== */
.dr-hero-svg { width: 100%; height: auto; max-width: 480px; display: block; margin: 0 auto; }

/* Primary rack — subtle opacity pulse */
@keyframes drPrimaryPulse {
  0%, 100% { opacity: .88; }
  50%      { opacity: 1; }
}
.dr-primary { animation: drPrimaryPulse 1.8s ease-in-out infinite; }

/* Sync flow packets — travel from primary right edge (x=130) to standby left edge (x=390)
   at y=205 (midpoint between the two replication lines at y=197 and y=213) */
@keyframes drSyncFlow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.dr-sync {
  offset-path: path('M 130 205 C 210 205 310 205 390 205');
  animation: drSyncFlow 2s ease-in-out infinite;
}
.dr-sync.s2 { animation-delay: .7s; }
.dr-sync.s3 { animation-delay: 1.4s; }

/* Standby rack — soft breath (scale only, no translate so it stays right-side) */
@keyframes drStandbyBreath {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.025); }
}
.dr-standby {
  animation: drStandbyBreath 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Dashed replication lines — soft pulse for "live-data" feel */
@keyframes drSyncLinePulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .8; }
}
.dr-sync-line      { animation: drSyncLinePulse 2.2s ease-in-out infinite; }
.dr-sync-line.sl2  { animation-delay: -1.1s; }

/* RTO clock centre dot */
@keyframes drClockTick {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.dr-clock-dot { animation: drClockTick 1s steps(1) infinite; }

/* Status dot blink */
@keyframes drStatusBlink {
  0%, 100% { fill: #5EAA8C; }
  50%      { fill: rgba(94,170,140,.35); }
}
.dr-status-dot { animation: drStatusBlink 1.4s ease-in-out infinite; }

/* =========================================================
   DR NODE-LABEL FLOAT ANIMATIONS
   Six independent micro-drift timings for a premium
   parallax feel — each label moves on its own cadence.
   ========================================================= */

/* nl-1 (Primary site) — upper-left, gentle drift */
@keyframes drFloat1 {
  0%, 100% { transform: translate(0,    0px); }
  33%      { transform: translate(4px, -12px); }
  66%      { transform: translate(-3px, -6px); }
}

/* nl-2 (Standby site) — upper-right, offset timing */
@keyframes drFloat2 {
  0%, 100% { transform: translate(0,    0px); }
  33%      { transform: translate(-4px,-12px); }
  66%      { transform: translate(3px, -6px); }
}

/* nl-3 (Async sync) — centred label, keeps its translateX(-50%) in keyframes */
@keyframes drFloat3 {
  0%, 100% { transform: translateX(-50%) translate(0px, 0px); }
  33%      { transform: translateX(-50%) translate(-3px, -10px); }
  66%      { transform: translateX(-50%) translate(3px, -5px); }
}

/* nl-4 (RTO target) — lower-left */
@keyframes drFloat4 {
  0%, 100% { transform: translate(0,   0px); }
  33%      { transform: translate(4px, -11px); }
  66%      { transform: translate(-3px,-5px); }
}

/* nl-5 (RPO target) — lower-right, no translateX needed */
@keyframes drFloat5 {
  0%, 100% { transform: translate(0,    0px); }
  33%      { transform: translate(-4px,-11px); }
  66%      { transform: translate(3px, -5px); }
}

/* nl-6 (Recovery ready) — bottom-centre, keeps translateX(-50%) */
@keyframes drFloat6 {
  0%, 100% { transform: translateX(-50%) translate(0px, 0px); }
  33%      { transform: translateX(-50%) translate(3px, -10px); }
  66%      { transform: translateX(-50%) translate(-3px,-4px); }
}

/* =========================================================
   DR-SPECIFIC NODE-LABEL POSITIONS
   Override the generic service.css .nl-* defaults.
   Specificity (0,3,0) beats service.css (0,1,0).

   SVG layout map inside the .topo square container
   (viewBox 520×480, preserveAspectRatio xMidYMid meet):
     Scale = container_w / 520; letterbox top/bottom = container_w × 3.85%
     Status bar    : y ≈ 6.9 – 11.5 % of container height
     Primary rack  : x ≈ 4.2 – 25 %, y ≈ 23 – 61.5 %
     Standby rack  : x ≈ 75 – 95.8 %, y ≈ 23 – 61.5 %
     Sync lane     : x ≈ 25 – 75 %, y ≈ 41.7 – 44.8 %
     Metric tiles  : y ≈ 65.8 – 78.1 %
     Status strip  : y ≈ 81.9 – 90.8 %
   ========================================================= */

/* nl-1 — "Primary site" · above-left of primary rack
   Free zone: status bar bottom (11.5%) → rack top (23%)  */
.hero-vis .topo .nl-1 {
  top: 10%; left: 4%;
  bottom: auto; right: auto;
  animation: drFloat1 7.2s ease-in-out infinite;
  will-change: transform;
}

/* nl-2 — "Standby site" · above-right of standby rack */
.hero-vis .topo .nl-2 {
  top: 10%; right: 4%;
  bottom: auto; left: auto;
  animation: drFloat2 8.1s ease-in-out infinite -1.8s;
  will-change: transform;
}

/* nl-3 — "Async sync" · centred horizontally, below encrypted text */
.hero-vis .topo .nl-3 {
  top: 45%; left: 50%;
  bottom: auto; right: auto;
  transform: translateX(-50%);
  animation: drFloat3 6.5s ease-in-out infinite -.9s;
  will-change: transform;
}

/* nl-4 — "RTO target" · below-left, above RTO metric tile (tile top ≈ 65.8%) */
.hero-vis .topo .nl-4 {
  bottom: 44%; left: -2%;
  top: auto; right: auto;
  animation: drFloat4 7.8s ease-in-out infinite -2.3s;
  will-change: transform;
}

/* nl-5 — "RPO target" · below-right, above RPO metric tile
   Override the shared translateX(-50%) default. */
.hero-vis .topo .nl-5 {
  bottom: 44%; right: -2%;
  top: auto; left: auto;
  transform: none;
  animation: drFloat5 8.5s ease-in-out infinite -.5s;
  will-change: transform;
}

/* nl-6 — "Recovery ready" · bottom-centred, below status strip (strip top ≈ 81.9%) */
.hero-vis .topo .nl-6 {
  bottom: 12%; left: 50%;
  top: auto; right: auto;
  animation: drFloat6 6.2s ease-in-out infinite -3.2s;
  will-change: transform;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  .dr-primary, .dr-standby,
  .dr-sync, .dr-sync-line,
  .dr-clock-dot, .dr-status-dot { animation: none !important; }

  .hero-vis .topo .nl-1,
  .hero-vis .topo .nl-2,
  .hero-vis .topo .nl-4 { animation: none !important; }

  /* Centred labels: keep the translateX so they don't jump */
  .hero-vis .topo .nl-3 { animation: none !important; transform: translateX(-50%); }
  .hero-vis .topo .nl-5 { animation: none !important; transform: none; }
  .hero-vis .topo .nl-6 { animation: none !important; transform: translateX(-50%); }
}

/* ========== DR TIER PANEL SVGs ========== */
.dt-vis-r { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }

@keyframes drHotMirror {
  0%, 100% { opacity: 1; }
  50%      { opacity: .85; }
}
.dr-hot-pri, .dr-hot-sec { animation: drHotMirror 2s ease-in-out infinite; }
.dr-hot-sec { animation-delay: .5s; }

@keyframes drWarmRehyd {
  0%, 100% { transform: scaleY(.6); }
  50%      { transform: scaleY(1); }
}
.dr-warm-bar { animation: drWarmRehyd 2.4s ease-in-out infinite; transform-origin: bottom center; transform-box: fill-box; }
.dr-warm-bar.b2 { animation-delay: .25s; }
.dr-warm-bar.b3 { animation-delay: .5s; }

@keyframes drColdSnow {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
.dr-cold-flake { animation: drColdSnow 2.2s ease-in-out infinite; }
.dr-cold-flake.f2 { animation-delay: .4s; }
.dr-cold-flake.f3 { animation-delay: .8s; }
.dr-cold-flake.f4 { animation-delay: 1.2s; }

@keyframes drVaultLock {
  0%, 50% { transform: translateY(0); }
  60%, 100% { transform: translateY(-2px); }
}
.dr-vault-lock { animation: drVaultLock 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ========== RTO / RPO TIERS ========== */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 920px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 18px;
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11,30,63,.08);
}
.tier-card.tier-gold {
  background: linear-gradient(160deg, #0B1E3F, #1E63E9);
  color: var(--c-white);
  border-color: transparent;
}
.tier-card.tier-silver {
  background: linear-gradient(160deg, rgba(30,99,233,.08), rgba(255,255,255,.5));
}
.tier-medal {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 18px/1 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #FF6B35, #1E63E9);
  color: var(--c-white);
  margin-bottom: 18px;
}
.tier-card.tier-gold .tier-medal { background: rgba(255,255,255,.15); }
.tier-card h3 {
  font: 700 1.25rem/1.2 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 6px;
}
.tier-card.tier-gold h3 { color: var(--c-white); }
.tier-card > p {
  font: 500 .9rem/1.5 'Inter', sans-serif;
  color: #4D5A77;
  margin: 0 0 20px;
}
.tier-card.tier-gold > p { color: rgba(255,255,255,.7); }
.tier-targets {
  padding: 16px 0;
  border-top: 1px dashed rgba(11,30,63,.18);
  border-bottom: 1px dashed rgba(11,30,63,.18);
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tier-card.tier-gold .tier-targets { border-color: rgba(255,255,255,.15); }
.tier-target { font-family: 'Space Grotesk', sans-serif; }
.tier-target .tt-l {
  font: 700 10px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: 6px;
}
.tier-target .tt-v {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0B1E3F;
  line-height: 1;
  display: block;
}
.tier-card.tier-gold .tier-target .tt-v { color: var(--c-white); }
.tier-target .tt-sub {
  font: 500 10px/1.2 'JetBrains Mono', monospace;
  color: rgba(11,30,63,.55);
  margin-top: 4px;
  display: block;
}
.tier-card.tier-gold .tier-target .tt-sub { color: rgba(255,255,255,.55); }
.tier-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.tier-includes li {
  font: 500 .85rem/1.4 'Inter', sans-serif;
  color: #0B1E3F;
  padding-left: 22px;
  position: relative;
}
.tier-card.tier-gold .tier-includes li { color: rgba(255,255,255,.9); }
.tier-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #1E63E9;
  font-weight: 800;
}
.tier-card.tier-gold .tier-includes li::before { color: #5EEAD4; }

/* ========== FAILOVER SCENARIOS ========== */
.scn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 760px) { .scn-grid { grid-template-columns: 1fr; } }
.scn-card {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 14px;
  padding: 28px 26px;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.scn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11,30,63,.08);
}
.scn-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.scn-icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0B1E3F, #FF6B35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
}
.scn-icon svg { width: 22px; height: 22px; }
.scn-head h3 {
  font: 700 1.1rem/1.2 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 4px;
}
.scn-head small {
  display: block;
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.scn-desc {
  font: 500 .88rem/1.5 'Inter', sans-serif;
  color: #4D5A77;
  margin: 0 0 18px;
}
.scn-steps {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px dashed rgba(11,30,63,.18);
  display: grid;
  gap: 8px;
  counter-reset: scn-step;
}
.scn-steps li {
  font: 500 .82rem/1.4 'Inter', sans-serif;
  color: #0B1E3F;
  padding-left: 28px;
  position: relative;
  counter-increment: scn-step;
}
.scn-steps li::before {
  content: counter(scn-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font: 700 10px/1 'JetBrains Mono', monospace;
  color: #1E63E9;
  background: rgba(30,99,233,.1);
  padding: 4px 6px;
  border-radius: 4px;
}

/* ========== COMPLIANCE EVIDENCE CHECKLIST ========== */
.evid {
  margin-top: 40px;
  background: #0B1E3F;
  color: var(--c-white);
  border-radius: 18px;
  padding: 40px clamp(24px, 4vw, 50px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.evid::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,107,53,.3), transparent 65%);
  z-index: -1;
}
.evid-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.evid-head h3 {
  font: 800 1.4rem/1.2 'Space Grotesk', sans-serif;
  margin: 8px 0 4px;
  color: var(--c-white);
}
.evid-head p { font: 500 .9rem/1.4 'Inter', sans-serif; color: rgba(255,255,255,.6); margin: 0; }
.evid-tag {
  font: 700 10px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  background: rgba(255,107,53,.15);
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.evid-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 620px) { .evid-counts { grid-template-columns: 1fr; } }
.evid-count {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px;
}
.evid-count .ec-fw {
  font: 700 10px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: .12em;
  display: block;
}
.evid-count .ec-name {
  font: 700 .9rem/1.3 'Space Grotesk', sans-serif;
  color: var(--c-white);
  display: block;
  margin: 8px 0;
}
.evid-count .ec-score {
  font: 800 1.6rem/1 'Space Grotesk', sans-serif;
  color: #5EEAD4;
}
.evid-count .ec-sub {
  font: 600 10px/1.2 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  display: block;
}
.evid-list { display: grid; gap: 8px; }
.evid-item {
  display: grid;
  grid-template-columns: 24px 1fr 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.evid-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5EAA8C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evid-check::after {
  content: '✓';
  color: #0B1E3F;
  font: 800 11px/1 'Space Grotesk', sans-serif;
}
.evid-item.miss .evid-check { background: rgba(255,107,53,.3); }
.evid-item.miss .evid-check::after { content: '!'; color: #FF6B35; }
.evid-name { font: 500 .88rem/1.3 'Inter', sans-serif; color: rgba(255,255,255,.9); }
.evid-name small { display: block; font: 600 10px/1 'JetBrains Mono', monospace; color: rgba(255,255,255,.55); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
.evid-date { font: 700 11px/1 'JetBrains Mono', monospace; color: rgba(94,170,140,.85); text-align: right; }
.evid-item.miss .evid-date { color: #FF6B35; }
@media (max-width: 620px) {
  .evid-item { grid-template-columns: 24px 1fr; }
  .evid-date { grid-column: 2; }
}