/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */

/* ---------------------------------------------------------
   HERO — Decorative Orbital Lines
   --------------------------------------------------------- */

.hero-orbit {
  position: absolute;

  border: 1px solid #bfd4ca;
  border-radius: 50%;

  pointer-events: none;
}

.hero-orbit-one {
  width: 440px;
  height: 440px;

  right: 18px;
}

.hero-orbit-two {
  width: 555px;
  height: 555px;

  right: -40px;

  border-style: dashed;
}

/* ---------------------------------------------------------
   DECORATIVE ORBITS
   --------------------------------------------------------- */

.page-orbit {
  position: absolute;

  border: 1px solid #d4e3dc;
  border-radius: 50%;

  pointer-events: none;
}

.page-orbit-one {
  width: 420px;
  height: 420px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) rotate(-12deg);
}

.page-orbit-two {
  width: 535px;
  height: 535px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) rotate(18deg);

  border-style: dashed;
}

/* =========================================================
   MOBILE — ORBIT SCALING
========================================================= */

@media (max-width: 768px) {
  /* -----------------------------------------------------
	   HERO ORBITS
	----------------------------------------------------- */

  .hero-orbit-one {
    width: 105vw;
    height: 105vw;

    right: -20vw;
  }

  .hero-orbit-two {
    width: 132vw;
    height: 132vw;

    right: -34vw;
  }

  /* -----------------------------------------------------
	   PAGE ORBITS
	----------------------------------------------------- */

  .page-orbit-one {
    width: 92vw;
    height: 92vw;
  }

  .page-orbit-two {
    width: 118vw;
    height: 118vw;
  }
}

/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.page-float-card {
  position: absolute;

  z-index: 5;

  display: flex;
  flex-direction: column;

  gap: 5px;

  padding: 11px 14px;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(219, 225, 220, 0.8);

  border-radius: 7px;

  box-shadow: 0 10px 25px rgba(23, 58, 48, 0.08);

  backdrop-filter: blur(8px);

  white-space: nowrap;

  pointer-events: none;
}

/* ---------------------------------------------------------
   Floating Card Typography
   --------------------------------------------------------- */

.page-float-card span {
  color: #7a8983;

  font:
    600 7px "DM Mono",
    monospace;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.page-float-card strong {
  color: var(--ink);

  font-size: 10px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.015em;
}

.page-float-card a {
  color: var(--ink);

  font-size: 10px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.015em;
  text-decoration: none;
}

/* ---------------------------------------------------------
   Floating Card Position Helpers
   --------------------------------------------------------- */

/* TOP LEFT */

.page-float-top-left {
  top: 105px;
  left: 0;

  transform: rotate(2deg);

  animation: pageFloatTopLeft 4s ease-in-out infinite;
}

/* TOP RIGHT */

.page-float-top-right {
  top: 105px;
  right: 0;

  transform: rotate(-2deg);

  animation: pageFloatTopRight 4s ease-in-out infinite;
}

/* BOTTOM LEFT */

.page-float-bottom-left {
  bottom: 105px;
  left: 0;

  transform: rotate(-2deg);

  animation: pageFloatBottomLeft 4.5s ease-in-out infinite;
}

/* BOTTOM RIGHT */

.page-float-bottom-right {
  right: 0;
  bottom: 105px;

  transform: rotate(2deg);

  animation: pageFloatBottomRight 4.5s ease-in-out infinite;
}

/* ---------------------------------------------------------
   Floating Card Animations
   --------------------------------------------------------- */

@keyframes pageFloatTopLeft {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }

  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes pageFloatTopRight {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-7px) rotate(-2deg);
  }
}

@keyframes pageFloatBottomLeft {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(7px) rotate(-2deg);
  }
}

@keyframes pageFloatBottomRight {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }

  50% {
    transform: translateY(7px) rotate(2deg);
  }
}

/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////// */

.eyebrow {
  margin: 0 0 18px;
  color: #567068;
  font:
    500 11px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 9px 1px 1px;
  border-radius: 1px;
  background: var(--coral);
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  .eyebrow {
    font:
      500 8px "DM Mono",
      monospace;
    letter-spacing: 0.07em;
  }

  .eyebrow i {
    width: 7px;
    height: 7px;
    margin-right: 7px;
  }
}