.protection-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(20px, 5vw, 72px);
}

.protection-heading p {
  max-width: 51ch;
  margin: 18px 0 0;
}

.protection-visual {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #79baaa55;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at center, #2e655b8c, transparent 70%),
    repeating-linear-gradient(90deg, #91ceb410 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, #91ceb410 0 1px, transparent 1px 24px),
    #0e2935;
  box-shadow: inset 0 1px #c5f7e316, 0 14px 32px #09242d26;
}

.protection-visual svg {
  display: block;
  width: min(100%, 420px);
  height: auto;
}

.protection-circuits {
  stroke: #8bcab1;
  stroke-width: 1.25;
  opacity: .48;
}

.protection-signal { stroke: #bdffe5; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 4px #8cffe1); }
.protection-signal path { opacity: 0; stroke-dasharray: 16 116; stroke-dashoffset: 16; }
.protection-lock-halo { fill: #91ffdb; opacity: 0; filter: blur(10px); transform-origin: 180px 94px; }

.protection-orbit {
  transform-origin: 180px 88px;
  animation: protection-orbit-rotate 24s linear infinite;
}

.protection-orbit-track {
  stroke: #9cdec474;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.protection-orbit-arc {
  stroke: #a9f7d7a0;
  stroke-width: 1.5;
  stroke-dasharray: 11 89;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #8cffe1a0);
}

.protection-shield {
  fill: url(#protection-shield-fill);
  stroke: #75b9a2;
  stroke-width: 1.8;
}

.protection-shield-trace {
  opacity: 0;
  stroke: #bafbe0;
  stroke-width: 2.4;
}

.protection-lock {
  stroke: #d6ffec;
  stroke-width: 2.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #a9f7d784);
}

.data-protection .protection-grid {
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(24px, 4vw, 46px);
}

.protection-grid article {
  padding: clamp(16px, 2vw, 23px);
  border: 1px solid #b6cec2;
  border-radius: 14px;
  background: #fff;
}

.protection-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #276653;
}

.protection-step svg {
  box-sizing: content-box;
  padding: 9px;
  border: 1px solid #8cc4ad66;
  border-radius: 10px;
  background: #e8f6ee;
}

.protection-step span {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.theme-dark .protection-grid article {
  border-color: #416961;
  background: #12323d;
}

.theme-dark .protection-step {
  color: #baf7de;
}

.theme-dark .protection-step svg {
  background: #1e494b;
}

/* Start independently of viewport scripts. The site-wide Pause motion control still applies. */
.protection-signal path {
  animation: protection-inward 4s linear infinite;
}

.protection-lock {
  animation: protection-lock-pulse 4s ease-in-out infinite;
}

.protection-lock-halo {
  animation: protection-halo-pulse 4s ease-out infinite;
}

.protection-shield-trace {
  animation: protection-shield-pulse 4s ease-out infinite;
}

@keyframes protection-orbit-rotate {
  to { transform: rotate(360deg); }
}

@keyframes protection-inward {
  0% { opacity: 0; stroke-dashoffset: 16; }
  8% { opacity: 1; }
  58% { opacity: 1; stroke-dashoffset: -84; }
  68%, 100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes protection-lock-pulse {
  0%, 48%, 100% { stroke: #d6ffec; filter: drop-shadow(0 0 4px #a9f7d760); }
  66% { stroke: #ffffff; filter: drop-shadow(0 0 10px #a9ffdf) drop-shadow(0 0 19px #52e9bb); }
}
@keyframes protection-halo-pulse {
  0%, 48%, 100% { opacity: 0; transform: scale(.75); }
  65% { opacity: .3; transform: scale(1); }
  88% { opacity: 0; transform: scale(1.65); }
}
@keyframes protection-shield-pulse {
  0%, 52%, 100% { opacity: 0; }
  68% { opacity: .75; }
}

@media (max-width: 700px) {
  .protection-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}