/* Shared visual finish for the hero specimen and the three-stage scene. */
/* Every phase contributes its full height, including the final translated copy. */
.story-steps { display: grid; min-height: 0; margin-bottom: 1.6rem; }
.story-step { position: relative; inset: auto; grid-area: 1 / 1; visibility: hidden; }
.story-step.is-active { visibility: visible; }
.story-step h3 { overflow-wrap: anywhere; }
.story-progress { margin-top: 0; }
.brand img { width: 174px; height: auto; }
.feature-icon { display: block; width: 42px; height: 42px; color: #f15a79; }
.trust-card h3 { margin-top: 1.1rem; }
.protection-art { display: block; width: 100%; height: auto; margin-bottom: 1.5rem; }
@media (max-width: 800px) and (max-height: 700px), (prefers-reduced-motion: reduce) {
  .story-step { grid-area: auto; visibility: visible; }
}

.signal-card {
  padding: clamp(1.1rem, 2.1vw, 1.6rem);
  border: 1px solid rgba(226, 229, 236, .14);
  border-radius: 1.4rem;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(176, 27, 59, .09), transparent 58%),
    linear-gradient(145deg, rgba(25, 27, 34, .96), rgba(10, 12, 17, .97));
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(16px);
  isolation: isolate;
}

.signal-head {
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: .1rem .15rem 1.15rem;
}

.signal-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(231, 66, 98, .42), rgba(232, 235, 243, .06));
}

.core-caption { color: #9095a5; font-size: .65rem; letter-spacing: .02em; margin-left: auto; }
.signal-head::after { display: none; }
.story-copy .section-title { font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; }
@media (max-width: 800px) {
  .story-copy .section-title { font-size: clamp(1.9rem, 7.5vw, 2.7rem); }
}

.signal-title {
  color: #dfe1e7;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .19em;
}

.signal-core {
  min-height: 300px;
  aspect-ratio: 1.12;
  border-color: rgba(223, 226, 236, .075);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(194, 29, 65, .13), transparent 64%),
    linear-gradient(165deg, #15161e, #080a10 76%);
  background-size: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  isolation: isolate;
}

.signal-core::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 9%;
  right: 9%;
  bottom: 8%;
  height: 36%;
  border: 1px solid rgba(185, 155, 165, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgba(208, 183, 192, .018),
    0 0 0 25px rgba(208, 183, 192, .035);
  transform: rotate(-13deg);
  pointer-events: none;
}

.signal-core::after {
  z-index: 0;
  bottom: 7%;
  width: 55%;
  height: 13%;
  background: rgba(195, 22, 61, .2);
  filter: blur(26px);
}

.signal-core .signal-phage {
  position: relative;
  z-index: 1;
  width: min(88%, 340px);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35));
}

.signal-phage .target-ring {
  animation: none;
  opacity: .6;
}

#phage-hero-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.signal-core.is-ready #phage-hero-canvas { opacity: 1; }
.signal-core.is-ready .signal-phage { visibility: hidden; }

.principles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.15rem;
  padding: .1rem .15rem 0;
}

.principle {
  display: grid;
  align-content: start;
  justify-content: start;
  gap: .3rem;
  padding: .15rem .65rem .15rem 0;
  border-top: 0;
  color: #9da1af;
  font-size: .74rem;
  line-height: 1.4;
}

.principle + .principle {
  padding-left: .85rem;
  border-left: 1px solid rgba(224, 227, 238, .1);
}

.principle strong {
  color: #e5e6eb;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.phage-viewport {
  border-color: rgba(224, 227, 238, .14);
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse at 53% 41%, rgba(173, 24, 58, .13), transparent 57%),
    radial-gradient(ellipse at 50% 100%, rgba(139, 141, 158, .055), transparent 58%),
    linear-gradient(145deg, #171820, #090b11 72%);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

.phage-viewport::before {
  opacity: .5;
  background-image:
    linear-gradient(rgba(217, 217, 229, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 217, 229, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 65%, #000, transparent 70%);
}

.phage-viewport.is-complete {
  border-color: rgba(233, 70, 105, .3);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .38), 0 0 54px rgba(183, 22, 59, .07);
}

#phage-canvas { display: block; }

.viewport-meta {
  z-index: 3;
  inset: 1.4rem 1.5rem auto;
  color: #c7c9d2;
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
}

.viewport-counter {
  color: #ed7992;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

@media (max-width: 800px) {
  .signal-card { width: 100%; margin-inline: auto; }
  .signal-core { min-height: 310px; aspect-ratio: 1.4; }
  .phage-viewport { border-radius: 1.1rem; }
  .viewport-meta { inset: 1.1rem 1.15rem auto; }
}

@media (max-width: 480px) {
  .signal-card { padding: 1rem; border-radius: 1.2rem; }
  .signal-head { margin-bottom: .9rem; }
  .signal-core { min-height: 270px; aspect-ratio: 1.1; border-radius: .85rem; }
  .principles { margin-top: 1rem; }
  .principle { gap: .25rem; font-size: .71rem; padding-right: .4rem; }
  .principle strong { font-size: .69rem; }
  .principle + .principle { padding-left: .6rem; }
  .viewport-meta { inset: 1rem 1rem auto; font-size: .6rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-card,
  .signal-core,
  .signal-phage,
  #phage-hero-canvas,
  .phage-viewport { animation: none; transition: none; }
}