/* ==========================================================
   INFRAVISOR LAUNCH PAGE
   Page-specific product contract
   ========================================================== */

.infravisor-page {
  --infra-blue: #168fe3;
  --infra-blue-bright: #4db7ff;
  --infra-copy: #c9c9c9;
  --infra-gutter: 44px;
  --infra-section-gap: clamp(52px, 4.5vw, 76px);
}

.infravisor-page main.infra-launch-page {
  margin-top: -50px;
}

.infra-launch-container {
  width: min(calc(100% - (var(--infra-gutter) * 2)), 1240px);
  margin: 0 auto;
}

.infra-launch-section {
  padding: var(--infra-section-gap) 0;
}

/* ==========================================================
   SHARED PRODUCT TYPOGRAPHY
   ========================================================== */

.infra-section-eyebrow,
.infra-card-role {
  display: block;

  color: var(--infra-blue-bright);

  font-size: clamp(14px, 1vw, 17px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;

  text-transform: uppercase;
}

.infra-section-heading {
  margin-bottom: clamp(30px, 3vw, 44px);
}

.infra-section-heading h2,
.infra-final-box h2 {
  max-width: 1040px;
  margin: 10px 0 0;

  font-family: "Bebas Neue", "Arial Narrow", sans-serif;

  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1;

  text-transform: uppercase;

  background: linear-gradient(
    118deg,
    #d0d0d0 0%,
    #b3b3b3 12%,
    #8c8c8c 40%,
    #6e6e6e 64%,
    #525252 84%,
    #383838 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.infravisor-page .infra-launch-section p {
  color: var(--infra-copy);

  font-size: clamp(25px, 1.7vw, 30px);
  font-weight: 400;
  line-height: 1.5;
}

.infra-overview-copy {
  max-width: 1080px;
}

.infra-overview-copy p {
  margin: 0;
}

.infra-overview-copy p + p {
  margin-top: 22px;
}

/* ==========================================================
   HERO
   ========================================================== */

.infra-launch-hero {
  padding: 12px 0 clamp(42px, 4vw, 64px);

  text-align: center;
}

.infra-launch-art {
  display: block;

  width: min(100%, 1080px);
  height: auto;

  margin: 0 auto clamp(44px, 4vw, 64px);
}

.infra-launch-heading {
  max-width: 1050px;
  margin: 0 auto;

  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: clamp(64px, 6.5vw, 100px);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.98;

  text-transform: uppercase;

  background: linear-gradient(
    118deg,
    #d0d0d0 0%,
    #b3b3b3 12%,
    #8c8c8c 40%,
    #6e6e6e 64%,
    #525252 84%,
    #383838 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.infravisor-page .infra-launch-lead {
  max-width: 1040px;

  margin: 34px auto 0;

  font-size: clamp(26px, 1.8vw, 32px);
  line-height: 1.5;
}

.infra-launch-button {
  min-width: 270px;
  min-height: 60px;

  margin: 42px auto 0;
  padding: 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-color: var(--infra-blue) !important;
}

.infra-launch-button:hover,
.infra-launch-button:focus-visible {
  border-color: var(--infra-blue-bright) !important;

  background: linear-gradient(
    135deg,
    var(--infra-blue-bright) 0%,
    var(--infra-blue) 48%,
    #0b6fb8 100%
  ) !important;

  color: #02070c !important;
}

/* ==========================================================
   TRAILER
   ========================================================== */

.infra-video {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  background: #000;
}

/* ==========================================================
   TRAILER MODAL
   ========================================================== */

.infra-trailer-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 32px;
}

.infra-trailer-modal.is-open {
  display: flex;
}

.infra-trailer-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
}

.infra-trailer-modal__panel {
  position: relative;
  z-index: 1;

  width: min(1120px, 100%);
  max-height: calc(100dvh - 64px);

  padding: 18px;

  overflow-y: auto;

  border: 1px solid rgba(77, 183, 255, 0.5);

  background: #050505;

  box-shadow: 0 0 60px rgba(22, 143, 227, 0.16);
}

.infra-trailer-modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 18px;

  width: 44px;
  height: 44px;

  border: 0;
  background: transparent;
  color: #f4f4f4;

  font-size: 34px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.infra-trailer-modal__close:hover,
.infra-trailer-modal__close:focus-visible {
  color: var(--infra-blue-bright);
}

body.infra-trailer-open {
  overflow: hidden;
}

/* ==========================================================
   THREE PERSPECTIVES
   ========================================================== */

.infra-perspective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 26px;
}

.infra-perspective-card {
  padding: 18px 18px 30px;

  border: 1px solid #303030;

  background: rgba(6, 6, 6, 0.82);
}

.infra-perspective-image {
  position: relative;

  width: 100%;
  margin: 0 0 28px;
  padding: 0;

  display: block;

  overflow: hidden;

  border: 1px solid rgba(77, 183, 255, 0.32);
  background: #080808;

  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.infra-perspective-image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.infra-perspective-image__hint {
  position: absolute;
  right: 12px;
  bottom: 10px;

  padding: 6px 9px;

  background: rgba(0, 0, 0, 0.78);
  color: #d9d9d9;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  opacity: 0.78;
}

.infra-perspective-image:hover,
.infra-perspective-image:focus-visible {
  transform: scale(1.02);

  border-color: var(--infra-blue-bright);

  box-shadow:
    0 0 24px rgba(22, 143, 227, 0.2),
    0 0 6px rgba(77, 183, 255, 0.18);
}

/* ==========================================================
   SCREENSHOT MODAL
   ========================================================== */

.infra-image-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;
}

.infra-image-modal.is-open {
  display: flex;
}

.infra-image-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
}

.infra-image-modal__panel {
  position: relative;
  z-index: 1;

  width: min(1600px, 100%);
  max-height: calc(100dvh - 48px);

  padding: 16px;

  overflow: auto;

  border: 1px solid rgba(77, 183, 255, 0.5);
  background: #050505;

  box-shadow: 0 0 60px rgba(22, 143, 227, 0.16);
}

.infra-image-modal__image {
  display: block;

  width: 100%;
  height: auto;

  background: #000;
}

.infra-image-modal__close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;

  width: 44px;
  height: 44px;

  border: 0;
  background: rgba(0, 0, 0, 0.82);
  color: #f4f4f4;

  font-size: 34px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.infra-image-modal__close:hover,
.infra-image-modal__close:focus-visible {
  color: var(--infra-blue-bright);
}

body.infra-image-open {
  overflow: hidden;
}

.infra-perspective-card h3,
.infra-capability-grid h3 {
  margin: 10px 0 14px;

  color: #f0f0f0;

  font-size: clamp(22px, 1.65vw, 29px);
  line-height: 1.15;
}

.infravisor-page .infra-perspective-card p,
.infravisor-page .infra-capability-grid p {
  margin: 0;

  font-size: clamp(20px, 1.25vw, 23px);
  line-height: 1.5;
}

/* ==========================================================
   CAPABILITIES
   ========================================================== */

.infra-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px;
}

.infra-capability-grid article {
  min-height: 210px;

  padding: 28px 26px;

  border: 1px solid #303030;

  background: rgba(6, 6, 6, 0.74);
}

.infra-capability-grid article::before {
  content: "";

  display: block;

  width: 44px;
  height: 2px;

  margin-bottom: 22px;

  background: var(--infra-blue);
}

/* ==========================================================
   FINAL CTA
   ========================================================== */

.infra-final {
  padding-bottom: clamp(84px, 8vw, 130px);
}

.infra-final-box {
  max-width: 1040px;

  margin: 0 auto;

  padding: clamp(42px, 5vw, 72px);

  border: 1px solid rgba(77, 183, 255, 0.48);

  background:
    linear-gradient(135deg, rgba(22, 143, 227, 0.08), rgba(0, 0, 0, 0) 55%),
    rgba(5, 5, 5, 0.84);

  text-align: center;
}

.infra-final-box h2 {
  margin-right: auto;
  margin-left: auto;
}

.infra-final-box p {
  max-width: 820px;

  margin: 28px auto 0;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 820px) {
  .infravisor-page {
    --infra-gutter: 20px;
    --infra-section-gap: 38px;
  }

  .infravisor-page main.infra-launch-page {
    margin-top: 0;
  }

  .infra-launch-container {
    width: calc(100% - (var(--infra-gutter) * 2));
  }

  .infra-launch-hero {
    padding: 16px 0 60px;
  }

  .infra-launch-art {
    width: 100%;
    margin-bottom: 38px;
  }

  .infra-launch-heading {
    font-size: clamp(48px, 12vw, 64px);
    line-height: 1;
  }

  .infravisor-page .infra-launch-lead,
  .infravisor-page .infra-launch-section p {
    font-size: 19px;
    line-height: 1.5;
  }

  .infra-launch-button {
    width: 100%;
    min-width: 0;
  }

  .infra-section-heading {
    margin-bottom: 26px;
  }

  .infra-section-heading h2,
  .infra-final-box h2 {
    font-size: clamp(40px, 11vw, 54px);
  }

  .infra-perspective-grid,
  .infra-capability-grid {
    grid-template-columns: 1fr;
  }

  .infra-perspective-grid {
    gap: 24px;
  }

  .infra-capability-grid article {
    min-height: 0;
  }

  .infra-video-frame {
    padding: 4px;
  }

  .infra-final-box {
    padding: 34px 24px;
  }

  .infra-trailer-modal {
    padding: 12px;
  }

  .infra-trailer-modal__panel {
    width: 100%;
    max-height: calc(100dvh - 24px);

    padding: 18px;
  }

  .infra-trailer-modal__close {
    top: 8px;
    right: 10px;
  }

  .infra-perspective-image {
    margin-bottom: 22px;
  }

  .infra-perspective-image__hint {
    right: 8px;
    bottom: 8px;
  }

  .infra-image-modal {
    padding: 8px;
  }

  .infra-image-modal__panel {
    width: 100%;
    max-height: calc(100dvh - 16px);

    padding: 8px;
  }

  .infra-image-modal__close {
    top: 6px;
    right: 6px;
  }
}