.dfao-managed-retinography-page .entry-title,
.dfao-managed-retinography-page .page-title {
  display: none !important;
}

.dfao-retinography-page .dfao-biometry-hero {
  background:
    radial-gradient(circle at 9% 15%, rgba(112, 199, 125, .18), transparent 29%),
    radial-gradient(circle at 91% 78%, rgba(42, 100, 202, .14), transparent 27%),
    linear-gradient(122deg, #fbfdff 0%, #f1f7fb 57%, #e4f0f7 100%);
}

.dfao-retinography-page .dfao-biometry-hero__photo img {
  object-position: 53% center;
}

.dfao-retinography-page .dfao-biometry-hero__photo::before {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 10%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: dfao-retinography-focus 6.5s ease-in-out infinite;
}

.dfao-retinography-page .dfao-biometry-hero__signals li::before {
  background: #68d58c;
  box-shadow: 0 0 0 4px rgba(104, 213, 140, .18), 0 0 14px rgba(104, 213, 140, .42);
}

.dfao-retinography-structures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 32px;
  padding: 0;
  list-style: none;
}

.dfao-retinography-structures li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 14px 17px;
  border: 1px solid #dce8f0;
  border-radius: 16px;
  color: #244762;
  background: rgba(255, 255, 255, .88);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(6, 41, 88, .06);
}

.dfao-retinography-structures li > span {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #68d58c;
  box-shadow: 0 0 0 3px rgba(104, 213, 140, .2);
}

.dfao-retinography-capture {
  background:
    radial-gradient(circle at 46% 48%, rgba(242, 171, 92, .28), transparent 21%),
    linear-gradient(145deg, #082c5d, #031a38);
}

.dfao-retinography-capture::before {
  inset: 9%;
  border: 1px dashed rgba(255, 255, 255, .2);
  animation: dfao-retinography-spin 28s linear infinite;
}

.dfao-retinography-capture::after {
  display: none;
}

.dfao-retinography-capture__retina {
  position: absolute;
  width: 270px;
  height: 270px;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 63% 49%, #f4c788 0 3%, transparent 4%),
    radial-gradient(circle at 43% 53%, #5c1d18 0 7%, transparent 8%),
    radial-gradient(circle at 52% 50%, #da744c, #a43e31 46%, #5e1d24 77%, #2d1020);
  box-shadow:
    0 0 0 31px rgba(255, 255, 255, .03),
    0 28px 64px rgba(0, 0, 0, .35);
}

.dfao-retinography-capture__retina::before,
.dfao-retinography-capture__retina::after {
  position: absolute;
  top: 48%;
  left: 61%;
  width: 160px;
  height: 2px;
  content: "";
  opacity: .55;
  background: linear-gradient(90deg, rgba(255, 225, 183, .9), transparent);
  transform-origin: left;
}

.dfao-retinography-capture__retina::before {
  transform: rotate(24deg);
}

.dfao-retinography-capture__retina::after {
  transform: rotate(-31deg);
}

.dfao-retinography-capture__macula {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 18px 0 0 -43px;
  border: 1px solid rgba(255, 226, 176, .32);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(255, 191, 112, .32);
}

.dfao-retinography-capture__nerve {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 34px;
  margin: -4px 0 0 73px;
  border-radius: 50%;
  background: rgba(255, 214, 153, .76);
  box-shadow: 0 0 18px rgba(255, 211, 148, .58);
}

.dfao-retinography-capture__scan {
  position: absolute;
  z-index: 3;
  width: 305px;
  height: 2px;
  opacity: .72;
  background: linear-gradient(90deg, transparent, #72dfa0, transparent);
  box-shadow: 0 0 12px rgba(114, 223, 160, .75);
  animation: dfao-retinography-scan 5.2s ease-in-out infinite;
}

.dfao-retinography-capture__flash {
  position: absolute;
  z-index: 4;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 67%);
  animation: dfao-retinography-flash 6.8s ease-out infinite;
}

.dfao-retinography-guidance {
  background:
    radial-gradient(circle at 11% 92%, rgba(104, 213, 140, .12), transparent 25%),
    #f7fafc;
}

.dfao-retinography-guidance .dfao-biometry-guidance__card:first-child {
  background:
    radial-gradient(circle at 91% 10%, rgba(42, 100, 202, .11), transparent 26%),
    #fff;
}

.dfao-retinography-guidance .dfao-biometry-guidance__card:last-child {
  background:
    radial-gradient(circle at 91% 10%, rgba(104, 213, 140, .13), transparent 26%),
    #fff;
}

.dfao-retinography-page .dfao-biometry-cta__inner {
  background:
    radial-gradient(circle at 89% 13%, rgba(104, 213, 140, .25), transparent 26%),
    linear-gradient(135deg, #073066, #031b3d);
}

@keyframes dfao-retinography-focus {
  0%,
  100% {
    opacity: .25;
    transform: scale(.96);
  }

  50% {
    opacity: .7;
    transform: scale(1.03);
  }
}

@keyframes dfao-retinography-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dfao-retinography-scan {
  0%,
  12% {
    opacity: 0;
    transform: translateY(-120px);
  }

  23%,
  76% {
    opacity: .8;
  }

  88%,
  100% {
    opacity: 0;
    transform: translateY(120px);
  }
}

@keyframes dfao-retinography-flash {
  0%,
  64%,
  100% {
    opacity: 0;
    transform: scale(.75);
  }

  68% {
    opacity: .7;
    transform: scale(1);
  }

  72% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (max-width: 680px) {
  .dfao-retinography-structures {
    grid-template-columns: 1fr;
  }

  .dfao-retinography-capture__retina {
    width: 230px;
    height: 230px;
  }

  .dfao-retinography-capture__scan {
    width: 255px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dfao-retinography-page *,
  .dfao-retinography-page *::before,
  .dfao-retinography-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
