/* ════════════════════════════════════════════════════════════
   RESEARCH VISION — Dedicated page CSS
   Namespace: .rv-*
   Design tokens from industries.css (loaded before this file).
   Loaded last — can override and extend any ind-* rule.
════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   SHARED KEYFRAMES
────────────────────────────────────────────────────────── */
@keyframes rvScan {
  0%   { top: -4%;  opacity: 0; }
  4%   { opacity: 0.55; }
  86%  { opacity: 0.08; }
  100% { top: 108%; opacity: 0; }
}

@keyframes rvFlow {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}

@keyframes rvNodePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(22,139,255,0.08), 0 0 0 0px rgba(22,139,255,0.00);
  }
  50% {
    box-shadow: 0 0 28px rgba(22,139,255,0.36), 0 0 0 5px rgba(22,139,255,0.05);
  }
}

@keyframes rvNodeRing {
  0%, 100% { opacity: 0.10; transform: scale(1.00); }
  50%      { opacity: 0.34; transform: scale(1.14); }
}

@keyframes rvGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px  rgba(22,139,255,0.16),
      0 0 40px   rgba(22,139,255,0.08),
      0 0 80px   rgba(22,139,255,0.04);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(22,139,255,0.46),
      0 0 0 4px   rgba(22,139,255,0.07),
      0 0 60px    rgba(22,139,255,0.22),
      0 0 130px   rgba(22,139,255,0.08);
  }
}

@keyframes rvShine {
  from { transform: translateX(-100%) skewX(-20deg); }
  to   { transform: translateX(300%) skewX(-20deg); }
}

@keyframes rvArrowPulse {
  0%, 100% {
    opacity: 0.28;
    filter: drop-shadow(0 0 2px rgba(22,139,255,0.25));
  }
  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 6px rgba(0,93,186,0.85)) drop-shadow(0 0 14px rgba(0,93,186,0.40));
  }
}

/* ──────────────────────────────────────────────────────────
   1. HERO
────────────────────────────────────────────────────────── */
.rv-hero {
  position: relative;
  overflow: hidden;
  background: var(--ind-bg);
  min-height: 720px;
}

.rv-hero::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,139,255,0.07) 0%, transparent 68%);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}

.rv-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(22,139,255,0.08) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 18%, rgba(0,93,186,0.05) 0%, transparent 42%),
    linear-gradient(180deg, rgba(2,5,10,0.25) 0%, transparent 35%, rgba(2,5,10,0.55) 100%);
  pointer-events: none; z-index: 0;
}

.rv-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1380px;
  margin: 0 auto; padding: 0 24px;
}

.rv-hero-grid {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  min-height: 720px;
  gap: 0;
  position: relative;
  z-index: 1;
}

.rv-hero-text {
  align-self: center;
  padding: 160px 48px 80px 0;
  z-index: 2;
}

.rv-hero-h1 {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.rv-hero-h1 .rv-blue {
  color: var(--ind-blue);
  font-style: normal;
}

.rv-hero-sub {
  font-size: 15.5px;
  color: rgba(169,184,200,0.72);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 480px;
}

.rv-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.rv-hero-visual {
  position: relative;
  height: 100%;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: -20px;
}

.rv-hero-visual img {
  width: auto;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  object-position: center center;
  display: block;
  transform: translateY(18px);
  -webkit-mask-image:
    radial-gradient(ellipse 90% 82% at 54% 44%, black 16%, rgba(0,0,0,0.88) 42%, rgba(0,0,0,0.42) 68%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.48) 11%, black 30%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 90% 82% at 54% 44%, black 16%, rgba(0,0,0,0.88) 42%, rgba(0,0,0,0.42) 68%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.48) 11%, black 30%);
  mask-composite: intersect;
}

.rv-hero-visual::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--ind-bg) 0%, rgba(2,5,10,0.42) 16%, transparent 40%),
    radial-gradient(ellipse at 68% 38%, rgba(22,139,255,0.07) 0%, transparent 52%),
    linear-gradient(to top, var(--ind-bg) 0%, transparent 18%);
  pointer-events: none; z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   2. BLACK BOX SECTION
────────────────────────────────────────────────────────── */
.rv-blackbox {
  padding: 72px 0;
  background: var(--ind-bg);
  position: relative;
  overflow: hidden;
}

.rv-blackbox::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 52%; aspect-ratio: 1;
  background: radial-gradient(ellipse at center, rgba(22,139,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.rv-bb-layout {
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 40px;
  align-items: start;
}

.rv-bb-editorial {
  position: relative;
}

.rv-bb-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  padding: 0;
}

.rv-bb-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.80);
}

.rv-bb-check-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ind-blue);
}

.rv-bb-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(22,139,255,0.38);
  box-shadow:
    0 0 0 1px rgba(22,139,255,0.16),
    0 0 60px rgba(22,139,255,0.26),
    0 0 120px rgba(22,139,255,0.12),
    0 0 200px rgba(22,139,255,0.06);
  background:
    radial-gradient(ellipse at 60% 40%, rgba(22,139,255,0.10) 0%, transparent 60%);
}

.rv-bb-frame img {
  width: 100%;
  display: block;
  filter: brightness(0.90) saturate(0.88);
  position: relative;
  z-index: 1;
}

/* Animated scan line on the frame */
.rv-bb-frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22,139,255,0.55) 30%,
    rgba(0,93,186,0.80) 50%,
    rgba(22,139,255,0.55) 70%,
    transparent 100%);
  animation: rvScan 7s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* HUD Corner brackets */
.rv-bb-corner {
  position: absolute;
  width: 16px; height: 16px;
  z-index: 3;
  pointer-events: none;
}

.rv-bb-corner--tl {
  top: 8px; left: 8px;
  border-top: 1.5px solid rgba(22,139,255,0.70);
  border-left: 1.5px solid rgba(22,139,255,0.70);
}

.rv-bb-corner--tr {
  top: 8px; right: 8px;
  border-top: 1.5px solid rgba(22,139,255,0.70);
  border-right: 1.5px solid rgba(22,139,255,0.70);
}

.rv-bb-corner--bl {
  bottom: 8px; left: 8px;
  border-bottom: 1.5px solid rgba(22,139,255,0.70);
  border-left: 1.5px solid rgba(22,139,255,0.70);
}

.rv-bb-corner--br {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid rgba(22,139,255,0.70);
  border-right: 1.5px solid rgba(22,139,255,0.70);
}

/* Comparison panels */
.rv-bb-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.rv-bb-comp-panel {
  background: linear-gradient(160deg, rgba(4,10,24,0.98), rgba(2,7,18,0.96));
  border: 1px solid;
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.rv-bb-comp-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
}

.rv-bb-comp-panel--bad {
  border-color: rgba(255,61,61,0.20);
}

.rv-bb-comp-panel--bad::before {
  background: linear-gradient(90deg, transparent, rgba(255,61,61,0.40), transparent);
}

.rv-bb-comp-panel--good {
  border-color: var(--ind-border-hi);
}

.rv-bb-comp-panel--good::before {
  background: linear-gradient(90deg, transparent, rgba(22,139,255,0.45), transparent);
}

.rv-bb-comp-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rv-bb-comp-tag--bad { color: rgba(255,80,80,0.85); }
.rv-bb-comp-tag--good { color: var(--ind-cyan); }

.rv-bb-comp-label {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.rv-bb-comp-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rv-bb-comp-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ind-muted-dim);
}

.rv-bb-comp-icon--bad {
  width: 14px; height: 14px;
  color: rgba(255,80,80,0.75);
  flex-shrink: 0;
}

.rv-bb-comp-icon--good {
  width: 14px; height: 14px;
  color: var(--ind-blue);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   3. RESEARCH FOUNDATIONS
────────────────────────────────────────────────────────── */
.rv-foundations {
  padding: 80px 0;
  background: var(--ind-surface);
  border-top: 1px solid var(--ind-border);
  border-bottom: 1px solid var(--ind-border);
  position: relative;
  overflow: hidden;
}

.rv-foundations-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
  position: relative;
  z-index: 1;
}

.rv-foundations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(22,139,255,0.28);
  border: 1px solid rgba(22,139,255,0.28);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(22,139,255,0.12), 0 0 80px rgba(22,139,255,0.06);
}

.rv-foundation-card {
  background: rgba(4,10,24,0.97);
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  transition: background 0.35s, box-shadow 0.35s;
  cursor: default;
}

/* Blue bottom edge per card */
.rv-foundation-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(22,139,255,0.50), rgba(0,93,186,0.60), rgba(22,139,255,0.50), transparent);
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 4;
  pointer-events: none;
}

.rv-foundation-card:hover {
  background: rgba(22,139,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(22,139,255,0.55), 0 0 32px rgba(22,139,255,0.18);
  z-index: 1;
}

.rv-foundation-card:hover::after {
  opacity: 1;
}

.rv-fc-top {
  flex-shrink: 0;
  padding: 20px 18px 14px;
  position: relative;
  z-index: 2;
}

.rv-fc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(22,139,255,0.16), rgba(0,93,186,0.08));
  border: 1px solid rgba(22,139,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: box-shadow 0.35s, border-color 0.35s;
  box-shadow: 0 0 16px rgba(22,139,255,0.10);
}

.rv-foundation-card:hover .rv-fc-icon {
  box-shadow: 0 0 28px rgba(22,139,255,0.32);
  border-color: rgba(22,139,255,0.50);
}

.rv-fc-icon svg {
  width: 20px; height: 20px;
  color: var(--ind-blue);
}

.rv-fc-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.rv-fc-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ind-muted-dim);
}

.rv-fc-image {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.rv-fc-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.60) saturate(0.72);
  transition: filter 0.4s;
}

.rv-foundation-card:hover .rv-fc-image img {
  filter: brightness(0.76) saturate(0.88);
}

.rv-fc-image::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(4,12,26,0.95), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Scan line per card */
.rv-fc-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22,139,255,0.55) 30%,
    rgba(0,93,186,0.70) 50%,
    rgba(22,139,255,0.55) 70%,
    transparent 100%);
  animation: rvScan 6s linear infinite;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

/* Stagger scan delays across 6 cards */
.rv-foundations-grid .rv-foundation-card:nth-child(1) .rv-fc-scan { animation-delay:    0s; }
.rv-foundations-grid .rv-foundation-card:nth-child(2) .rv-fc-scan { animation-delay:   -1s; }
.rv-foundations-grid .rv-foundation-card:nth-child(3) .rv-fc-scan { animation-delay:   -2s; }
.rv-foundations-grid .rv-foundation-card:nth-child(4) .rv-fc-scan { animation-delay:   -3s; }
.rv-foundations-grid .rv-foundation-card:nth-child(5) .rv-fc-scan { animation-delay:   -4s; }
.rv-foundations-grid .rv-foundation-card:nth-child(6) .rv-fc-scan { animation-delay:   -5s; }

/* ──────────────────────────────────────────────────────────
   4. CONTINUOUS RESEARCH LOOP
────────────────────────────────────────────────────────── */
.rv-loop {
  padding: 90px 0;
  background: #02050A;
  position: relative;
}

/* Framed module — the visible glowing container */
.rv-loop-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(22,139,255,0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(22,139,255,0.18) 0%, transparent 46%),
    linear-gradient(180deg, rgba(4,12,26,0.92) 0%, rgba(2,5,10,0.96) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,93,186,0.08),
    0 0 45px rgba(22,139,255,0.20),
    0 0 120px rgba(22,139,255,0.08);
  padding: 54px 48px 64px;
}

/* Bottom wave background — contained inside the frame */
.rv-loop-frame::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: url('../../assets/imgs/company/research-vision/research-vision-continuous-research-background.webp') bottom center / 100% auto no-repeat;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* Edge glow lines — top, bottom, left, right */
.rv-loop-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(22,139,255,0.55), transparent 16%, transparent 84%, rgba(22,139,255,0.55)),
    linear-gradient(180deg, rgba(22,139,255,0.45), transparent 18%, transparent 82%, rgba(22,139,255,0.45));
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.rv-loop-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
  position: relative;
  z-index: 2;
}

.rv-loop-track {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.rv-loop-step {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Vertical energy line from node down to label */
.rv-loop-step::before {
  content: '';
  position: absolute;
  top: 68px; left: 50%;
  width: 1px; height: 16px;
  background: linear-gradient(to bottom, rgba(22,139,255,0.36), transparent);
}

/* Marching-dash connector between steps */
.rv-loop-connector {
  flex: 1;
  height: 1px;
  margin-top: 34px;
  position: relative;
  background: repeating-linear-gradient(
    90deg,
    rgba(22,139,255,0.65)  0px,
    rgba(0,93,186,0.80)   6px,
    transparent             6px,
    transparent            18px
  );
  background-size: 48px 1px;
  animation: rvFlow 1.0s linear infinite;
}

/* Chevron arrow at right end of connector */
.rv-loop-connector::before {
  content: '';
  position: absolute;
  right: -4px; top: -4px;
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(0,93,186,0.80);
  border-top: 1.5px solid rgba(0,93,186,0.80);
  transform: rotate(45deg);
  animation: rvArrowPulse 1.0s ease-in-out infinite;
}

/* Glow haze below dashes */
.rv-loop-connector::after {
  content: '';
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 9px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,93,186,0.18),
    transparent);
  filter: blur(3px);
}

.rv-loop-node {
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(22,139,255,0.45);
  background: linear-gradient(135deg, rgba(4,10,24,0.98), rgba(2,7,18,1));
  box-shadow: 0 0 20px rgba(22,139,255,0.10), inset 0 0 12px rgba(22,139,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ind-blue);
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  animation: rvNodePulse 2.8s ease-in-out infinite;
  transition: border-color 0.3s;
}

/* Outer ring on each node */
.rv-loop-node::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(22,139,255,0.18);
  animation: rvNodeRing 2.8s ease-in-out infinite;
}

/* Stagger node pulses across 6 steps */
.rv-loop-track .rv-loop-step:nth-child(1) .rv-loop-node         { animation-delay:    0s; }
.rv-loop-track .rv-loop-step:nth-child(2) .rv-loop-node         { animation-delay: -0.47s; }
.rv-loop-track .rv-loop-step:nth-child(3) .rv-loop-node         { animation-delay: -0.94s; }
.rv-loop-track .rv-loop-step:nth-child(4) .rv-loop-node         { animation-delay: -1.41s; }
.rv-loop-track .rv-loop-step:nth-child(5) .rv-loop-node         { animation-delay: -1.88s; }
.rv-loop-track .rv-loop-step:nth-child(6) .rv-loop-node         { animation-delay: -2.35s; }
.rv-loop-track .rv-loop-step:nth-child(1) .rv-loop-node::before { animation-delay:    0s; }
.rv-loop-track .rv-loop-step:nth-child(2) .rv-loop-node::before { animation-delay: -0.47s; }
.rv-loop-track .rv-loop-step:nth-child(3) .rv-loop-node::before { animation-delay: -0.94s; }
.rv-loop-track .rv-loop-step:nth-child(4) .rv-loop-node::before { animation-delay: -1.41s; }
.rv-loop-track .rv-loop-step:nth-child(5) .rv-loop-node::before { animation-delay: -1.88s; }
.rv-loop-track .rv-loop-step:nth-child(6) .rv-loop-node::before { animation-delay: -2.35s; }

.rv-loop-step:last-child .rv-loop-node {
  border-color: rgba(0,93,186,0.40);
  color: var(--ind-cyan);
}

.rv-loop-step:last-child .rv-loop-node::before {
  border-color: rgba(0,93,186,0.18);
}

.rv-loop-step-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.rv-loop-step-desc {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ind-muted-dim);
}

/* Step reveal (triggered by JS) */
.rv-loop-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.rv-loop-step.rv-step-visible {
  opacity: 1;
  transform: none;
}

/* ──────────────────────────────────────────────────────────
   5. AREAS OF EXPLORATION
────────────────────────────────────────────────────────── */
.rv-areas {
  padding: 96px 0;
  background: var(--ind-bg);
  position: relative;
  overflow: hidden;
}

.rv-areas-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}

.rv-areas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 16px;
  background: transparent;
}

.rv-area-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(22,139,255,0.42);
  border-radius: 10px;
  background: rgba(4,12,26,0.82);
  box-shadow: 0 0 20px rgba(22,139,255,0.10);
  isolation: isolate;
  cursor: default;
  transition: border-color 0.40s, box-shadow 0.40s;
}

.rv-area-bg {
  position: absolute; inset: 0;
  z-index: 0;
  transition: transform 0.80s cubic-bezier(0.25,0.46,0.45,0.94);
}

.rv-area-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.90);
  transition: filter 0.6s;
}

.rv-area-card:hover {
  border-color: rgba(0,93,186,0.80);
  box-shadow: 0 0 34px rgba(22,139,255,0.28);
}

.rv-area-card:hover .rv-area-bg {
  transform: scale(1.06);
}

.rv-area-card:hover .rv-area-bg img {
  filter: brightness(0.88) saturate(1.05);
}

/* Gradient overlay — light at top, darker at bottom for title legibility */
.rv-area-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(2,5,10,0.08)  0%,
    rgba(2,5,10,0.40) 50%,
    rgba(2,5,10,0.88) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.5s;
}

.rv-area-card:hover::before {
  background: linear-gradient(180deg,
    rgba(2,5,10,0.00)  0%,
    rgba(2,5,10,0.28) 50%,
    rgba(2,5,10,0.82) 100%);
}

/* Inner edge glow on hover (supplementary to the card's own border) */
.rv-area-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 transparent;
  z-index: 3;
  pointer-events: none;
  transition: box-shadow 0.4s;
}

.rv-area-card:hover::after {
  box-shadow: inset 0 0 24px rgba(22,139,255,0.10);
}

/* Shine overlay */
.rv-area-shine {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.rv-area-shine::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: translateX(-100%) skewX(-20deg);
}

.rv-area-card:hover .rv-area-shine::after {
  animation: rvShine 0.7s ease-out forwards;
}

.rv-area-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
}

.rv-area-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(2,5,10,0.75);
  border: 1px solid rgba(22,139,255,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.rv-area-icon svg {
  width: 16px; height: 16px;
  color: var(--ind-blue);
}

.rv-area-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 14px 14px;
  z-index: 4;
}

.rv-area-body::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 60px;
  background: linear-gradient(to top, rgba(2,5,10,0.95), transparent);
}

.rv-area-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.01em;
  position: relative;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* ──────────────────────────────────────────────────────────
   6. EUROPEAN INTELLIGENCE
────────────────────────────────────────────────────────── */
.rv-european {
  padding: 96px 0;
  background: var(--ind-surface);
  border-top: 1px solid var(--ind-border);
  border-bottom: 1px solid var(--ind-border);
  position: relative;
  overflow: hidden;
}

.rv-european::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(ellipse at right top, rgba(22,139,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}

.rv-eu-layout {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: 60px;
  align-items: center;
}

.rv-eu-text {
  position: relative;
}

.rv-eu-checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 28px;
}

.rv-eu-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.80);
}

.rv-eu-check-icon {
  width: 16px; height: 16px;
  color: var(--ind-green);
  flex-shrink: 0;
}

.rv-eu-visual {
  position: relative;
}

.rv-eu-frame {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 80px rgba(22,139,255,0.14),
    0 0 180px rgba(22,139,255,0.05),
    0 0 0 1px rgba(22,139,255,0.12);
}

.rv-eu-frame img {
  width: 100%;
  display: block;
  filter: brightness(0.90) saturate(0.85);
}

.rv-eu-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(22,139,255,0.08), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   7. COLLABORATION
────────────────────────────────────────────────────────── */
.rv-collab {
  padding: 80px 0;
  background: var(--ind-bg);
  position: relative;
  overflow: hidden;
}

.rv-collab-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}

/* Card-grid layout — 5 equal columns */
.rv-collab-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--ind-border);
  border: 1px solid var(--ind-border);
  border-radius: 12px;
  overflow: hidden;
}

.rv-collab-card {
  background: rgba(4,10,24,0.97);
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 0;
  transition: background 0.35s, box-shadow 0.35s;
  cursor: default;
}

.rv-collab-card:hover {
  background: rgba(22,139,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(22,139,255,0.45), 0 0 28px rgba(22,139,255,0.12);
  z-index: 1;
}

/* Top accent line per card */
.rv-collab-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,139,255,0.30), transparent);
  pointer-events: none;
}

.rv-collab-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(22,139,255,0.22);
  background: linear-gradient(135deg, rgba(4,10,24,0.96), rgba(2,7,18,0.99));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
  box-shadow: 0 0 22px rgba(22,139,255,0.08);
  transition: border-color 0.35s, box-shadow 0.35s;
}

.rv-collab-card:hover .rv-collab-card-icon {
  border-color: rgba(22,139,255,0.55);
  box-shadow: 0 0 36px rgba(22,139,255,0.24);
}

/* Dashed outer ring */
.rv-collab-card-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(22,139,255,0.14);
  animation: rvNodeRing 4s ease-in-out infinite;
}

.rv-collab-card-icon svg {
  width: 24px; height: 24px;
  color: var(--ind-blue);
  transition: filter 0.35s;
}

.rv-collab-card:hover .rv-collab-card-icon svg {
  filter: drop-shadow(0 0 6px rgba(22,139,255,0.70));
}

.rv-collab-card-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.rv-collab-card-desc {
  font-size: 11.5px;
  line-height: 1.58;
  color: var(--ind-muted-dim);
}

/* ──────────────────────────────────────────────────────────
   8. CTA
────────────────────────────────────────────────────────── */
.rv-cta-wrap {
  padding: 96px 0;
  background: var(--ind-bg);
}

.rv-cta-box {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border: 1px solid rgba(22,139,255,0.18);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(22,139,255,0.08);
}

.rv-cta-text {
  padding: 56px 52px;
  background:
    linear-gradient(160deg, rgba(4,10,24,0.99), rgba(2,7,18,0.97)),
    radial-gradient(ellipse at 20% 0%, rgba(22,139,255,0.12), transparent 52%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.rv-cta-text::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,139,255,0.45), transparent);
}

.rv-cta-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #005dba;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rv-cta-eyebrow::before {
  content: '';
  display: inline-block;
  width: 12px; height: 1.5px;
  background: #005dba;
}

.rv-cta-h2 {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.rv-cta-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ind-muted-dim);
  margin-bottom: 32px;
  max-width: 440px;
}

.rv-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.rv-cta-visual {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}

.rv-cta-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.06);
  filter: brightness(0.52) saturate(0.80);
}

/* ──────────────────────────────────────────────────────────
   9. RESPONSIVE
────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .rv-foundations-grid { grid-template-columns: repeat(3, 1fr); }
  .rv-areas-grid       { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 190px); }
  .rv-loop-frame       { padding: 44px 32px 56px; }
}

@media (max-width: 1024px) {
  /* Hero stacks */
  .rv-hero-grid    { grid-template-columns: 1fr; min-height: auto; align-items: start; }
  .rv-hero-text    { padding: 100px 0 32px; align-self: auto; }
  .rv-hero-visual  { min-height: 360px; align-items: center; margin-left: 0; }
  .rv-hero-sub     { max-width: 100%; }
  .rv-hero-visual img { max-height: 340px; width: 100%; transform: translateY(0); }

  /* Black Box stacks */
  .rv-bb-layout       { grid-template-columns: 1fr; gap: 32px; }
  .rv-bb-comparison   { grid-template-columns: 1fr 1fr; }

  /* Foundations 3-col */
  .rv-foundations-grid { grid-template-columns: repeat(3, 1fr); }
  .rv-foundation-card  { height: 300px; }

  /* Loop wraps */
  .rv-loop-frame       { padding: 36px 24px 48px; border-radius: 14px; }
  .rv-loop-track       { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .rv-loop-connector   { display: none; }
  .rv-loop-step        { width: 110px; }
  .rv-loop-step::before { display: none; }

  /* Areas 2-col */
  .rv-areas-grid       { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 190px); }

  /* European layout stacks */
  .rv-eu-layout        { grid-template-columns: 1fr; gap: 40px; }

  /* Collaboration — 3 cols on first row, 2 on second */
  .rv-collab-cards     { grid-template-columns: repeat(3, 1fr); border-radius: 8px; }

  /* CTA stacks */
  .rv-cta-box          { grid-template-columns: 1fr; }
  .rv-cta-visual       { min-height: 240px; }
}

@media (max-width: 768px) {
  .rv-blackbox     { padding: 52px 0; }
  .rv-foundations  { padding: 52px 0; }
  .rv-loop         { padding: 52px 0 0; }
  .rv-areas        { padding: 52px 0; }
  .rv-european     { padding: 52px 0; }
  .rv-collab       { padding: 52px 0; }
  .rv-cta-wrap     { padding: 52px 0; }

  .rv-foundations-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-foundation-card  { height: 280px; }
  .rv-areas-grid       { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 170px); gap: 10px; }
  .rv-bb-comparison    { grid-template-columns: 1fr 1fr; }
  .rv-cta-text         { padding: 36px 28px; }
  .rv-loop-frame       { padding: 28px 16px 40px; border-radius: 12px; }
  .rv-loop-step        { width: 90px; flex: 0 0 28%; }
  .rv-collab-cards     { grid-template-columns: repeat(2, 1fr); border-radius: 8px; }
  .rv-collab-card      { padding: 22px 14px 18px; }
  .rv-collab-card-icon { width: 52px; height: 52px; }
  .rv-collab-card-icon svg { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .rv-hero-h1          { font-size: clamp(28px, 7vw, 40px); }
  .rv-foundations-grid { grid-template-columns: 1fr 1fr; }
  .rv-foundation-card  { height: 260px; }
  .rv-areas-grid       { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 155px); gap: 8px; }
  .rv-loop-step        { flex: 0 0 42%; }
  .rv-collab-cards     { grid-template-columns: repeat(2, 1fr); }
  .rv-cta-box          { border-radius: 12px; }
  .rv-cta-text         { padding: 28px 20px; }
}

@media (max-width: 380px) {
  .rv-foundations-grid { grid-template-columns: 1fr; }
  .rv-areas-grid       { grid-template-columns: 1fr; grid-template-rows: repeat(10, 160px); }
  .rv-collab-cards     { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   10. PREFERS-REDUCED-MOTION
────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv-bb-frame::after,
  .rv-fc-scan,
  .rv-loop-node,
  .rv-loop-node::before,
  .rv-loop-connector,
  .rv-loop-connector::before,
  .rv-collab-card-icon::before,
  .rv-area-card:hover .rv-area-shine::after { animation: none; }

  .rv-loop-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rv-area-bg    { transition: none; }
  .rv-area-bg img { transition: none; }
  .rv-area-card::after { transition: none; }
  .rv-area-card::before { transition: none; }
  .rv-fc-icon    { transition: none; }
  .rv-foundation-card { transition: none; }
  .rv-eu-frame   { box-shadow: 0 0 0 1px rgba(22,139,255,0.22); }
  .rv-bb-frame   { box-shadow: 0 0 0 1px rgba(22,139,255,0.22); }
  .rv-collab-icon-wrap { transition: none; }
  .rv-collab-icon svg  { transition: none; }
}