/* AegisFace page hero — matched to the AegisFace slide on the homepage. */
.aegisface-hero {
  position: relative;
  height: clamp(620px, calc(100svh - 76px), 760px);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 28%, rgba(140, 108, 255, 0.28), transparent 26%),
    radial-gradient(circle at 62% 80%, rgba(72, 167, 255, 0.18), transparent 36%),
    #06101d;
}

.aegisface-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(4, 13, 25, 0.96) 0%, rgba(4, 13, 25, 0.66) 48%, rgba(4, 13, 25, 0.1) 100%);
}

.aegisface-hero-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
  transform: scale(1.035);
  transform-origin: center center;
  animation: aegisface-hero-zoom 5s cubic-bezier(0.37, 0, 0.63, 1) both;
}

.aegisface-hero-scan {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.aegisface-scan-frame {
  position: absolute;
  top: 23%;
  right: 12.5%;
  width: min(26vw, 500px);
  height: min(60vw, 570px);
  transform-origin: center center;
  animation: aegisface-frame-scale 5s cubic-bezier(0.37, 0, 0.63, 1) both;
}

.aegisface-scan-line {
  position: absolute;
  right: 7%;
  bottom: 33%;
  left: 7%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #62e7ff 20%, #e4fcff 50%, #62e7ff 80%, transparent);
  box-shadow: 0 0 14px rgba(98, 231, 255, 0.9), 0 0 30px rgba(98, 231, 255, 0.45);
  animation: aegisface-scan-line 2.8s ease-in-out infinite;
  transform: translateX(18px);
}

.aegisface-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: inherit;
  align-items: center;
}

.aegisface-hero-copy-inner {
  max-width: 820px;
  padding: 76px 0 154px;
}

.aegisface-hero-copy-inner > * {
  opacity: 0;
  animation: aegisface-content-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.aegisface-hero-copy-inner > :nth-child(1) { animation-delay: 100ms; }
.aegisface-hero-copy-inner > :nth-child(2) {
  animation-name: aegisface-heading-in;
  animation-delay: 190ms;
}
.aegisface-hero-copy-inner > :nth-child(3) { animation-delay: 290ms; }
.aegisface-hero-copy-inner > :nth-child(4) {
  animation-name: aegisface-actions-in;
  animation-delay: 400ms;
}

.aegisface-hero-kicker {
  font-size: 1.125rem;
  letter-spacing: 0.18em;
}

.aegisface-hero h1 {
  max-width: 760px;
  margin: 18px 0;
  font-size: clamp(2.5rem, 4.8vw, 4.375rem);
}

.aegisface-hero p {
  max-width: 610px;
  margin-bottom: 28px;
  color: #d1deec;
  font-size: 1.125rem;
}

.aegisface-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.aegisface-hero-actions .btn-secondary { padding-inline: 26px; }

/* Reuse the Home AegisFace product visual inside the AegisFace page. */
.aegisface-product-overview .aegis-panel {
  isolation: isolate;
  background: #061525;
}

.aegisface-product-overview .aegis-panel-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.92;
}

.aegisface-product-overview .aegis-panel::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: transparent;
}

.aegisface-product-overview .aegis-panel-scan {
  position: absolute;
  z-index: 2;
  top: 15%;
  left: 50%;
  width: min(76%, 330px);
  height: 65%;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.aegisface-product-overview .aegis-panel-scan::before {
  position: absolute;
  top: 10px;
  right: -10%;
  left: -10%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(98, 231, 255, 0.78) 14%, #d9fbff 50%, rgba(98, 231, 255, 0.78) 86%, transparent);
  box-shadow: 0 0 8px rgba(90, 225, 255, 0.95), 0 0 22px rgba(90, 225, 255, 0.62);
  animation: aegisface-panel-scan 2.8s ease-in-out infinite alternate;
}

@keyframes aegisface-hero-zoom {
  from { transform: scale(1.035); }
  to { transform: scale(1.08); }
}

@keyframes aegisface-frame-scale {
  from { transform: scale(1.035); }
  to { transform: scale(1.08); }
}

@keyframes aegisface-scan-line {
  0%, 100% { bottom: 33%; opacity: 0.45; }
  50% { bottom: 96%; opacity: 1; }
}

@keyframes aegisface-content-in {
  from { opacity: 0; transform: translateX(-34px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes aegisface-heading-in {
  from { opacity: 0; transform: translateX(34px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes aegisface-actions-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aegisface-panel-scan {
  from { top: 10px; }
  to { top: calc(100% - 13px); }
}

@media (max-width: 640px) {
  .aegisface-hero { height: 620px; }
  .aegisface-hero-background { object-position: 83% center; }
  .aegisface-hero-copy-inner { padding: 300px 0 136px; }
  .aegisface-hero-kicker { font-size: clamp(0.9rem, 3.2vw, 1.125rem); }
  .aegisface-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .aegisface-hero p { font-size: clamp(0.95rem, 3.4vw, 1.125rem); }
  .aegisface-hero-actions { flex-direction: column; align-items: stretch; }
  .aegisface-hero-actions .btn { width: 100%; font-size: clamp(0.875rem, 3.8vw, 0.9375rem); }
  .aegisface-hero::after { background: linear-gradient(180deg, rgba(4, 13, 25, 0.58) 0%, rgba(4, 13, 25, 0.94) 78%); }
  .aegisface-hero-scan { display: none; }

}

/* Keep the recognition subject centred when the product panel becomes narrower. */
@media (max-width: 1024px) {
  .aegisface-product-overview .aegis-panel-face {
    object-position: center center;
  }
}

/* Keep the phone panel crop aligned with the Home AegisFace panel. */
@media (max-width: 640px) {
  .aegisface-product-overview .aegis-panel-face {
    object-position: 87% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aegisface-hero-background,
  .aegisface-scan-frame,
  .aegisface-scan-line,
  .aegisface-hero-copy-inner > * { animation: none; }

  .aegisface-hero-copy-inner > * { opacity: 1; }
  .aegisface-scan-line { bottom: 62%; }
  .aegisface-product-overview .aegis-panel-scan::before { animation: none; top: 48%; }
}