.circular-morph-page {
  background:
    radial-gradient(circle at 24% 12%, rgba(111, 195, 203, 0.18), transparent 0 24%),
    radial-gradient(circle at 78% 16%, rgba(111, 195, 203, 0.08), transparent 0 22%),
    linear-gradient(180deg, #001735 0%, #07182b 52%, #0a2034 100%);
  color: var(--text-primary);
}

.circular-morph-page .site-header {
  display: none;
}

.circular-morph-page main > section:first-child {
  padding-top: 0 !important;
}

.circular-morph-hero {
  --morph-progress: 0;
  --mouse-x: 0px;
  --mouse-y: 0px;
  --core-left: 75%;
  --core-top: 50%;
  min-height: 320svh;
  position: relative;
}

.circular-morph-stage {
  background:
    radial-gradient(ellipse at 52% 44%, rgba(95, 183, 210, 0.18), transparent 0 34%),
    radial-gradient(ellipse at 18% 32%, rgba(11, 49, 95, 0.48), transparent 0 38%),
    radial-gradient(ellipse at 88% 72%, rgba(0, 9, 20, 0.72), transparent 0 46%),
    linear-gradient(90deg, rgba(221, 242, 249, 0.044) 1px, transparent 1px),
    linear-gradient(rgba(221, 242, 249, 0.034) 1px, transparent 1px),
    linear-gradient(112deg, #06224a 0%, #001939 48%, #001735 100%);
  background-size: auto, auto, auto, 58px 58px, 58px 58px, auto;
  height: 100svh;
  min-height: 43rem;
  overflow: hidden;
  position: sticky;
  top: 0;
  isolation: isolate;
}

.circular-morph-backdrop,
.circular-morph-backdrop::before,
.circular-morph-backdrop::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.circular-morph-backdrop {
  z-index: 0;
}

.circular-morph-backdrop::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(223, 252, 255, 0.12), transparent 0 26%),
    radial-gradient(ellipse at 50% 64%, rgba(111, 195, 203, 0.07), transparent 0 26%),
    linear-gradient(100deg, rgba(0, 23, 53, 0.74), rgba(0, 25, 57, 0.14) 52%, rgba(0, 12, 28, 0.4));
}

.circular-morph-backdrop::after {
  background:
    linear-gradient(90deg, transparent, rgba(223, 252, 255, 0.08), transparent),
    radial-gradient(circle at 50% 50%, rgba(223, 252, 255, 0.16), transparent 0 18%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.circular-grid {
  border: 1px solid rgba(223, 252, 255, 0.12);
  border-radius: 50%;
  filter: drop-shadow(0 0 20px rgba(111, 195, 203, 0.12));
  height: min(76vw, 46rem);
  left: 50%;
  opacity: 0.42;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(76vw, 46rem);
}

.circular-grid::before,
.circular-grid::after {
  background: rgba(223, 252, 255, 0.1);
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circular-grid::before {
  height: 1px;
  width: 120%;
}

.circular-grid::after {
  height: 120%;
  width: 1px;
}

.circular-grid-b {
  height: min(54vw, 31rem);
  opacity: 0.28;
  width: min(54vw, 31rem);
}

.circular-scanline {
  background: linear-gradient(90deg, transparent, rgba(141, 222, 231, 0.18), transparent);
  height: 1px;
  left: 8vw;
  opacity: 0.52;
  position: absolute;
  right: 8vw;
  top: 62%;
}

.circular-morph-content {
  left: clamp(1.4rem, 5vw, 5.7rem);
  max-width: min(42rem, 46vw);
  opacity: calc(1 - (var(--morph-progress) * 0.78));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
}

.circular-kicker,
.circular-stage-notes span,
.circular-logo-caption,
.circular-actions a,
.circular-proof-grid span {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.circular-kicker {
  color: var(--accent-teal-strong);
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  margin-bottom: 1rem;
}

.circular-morph-content h1 {
  color: #f7fbff;
  font-size: clamp(3.5rem, 8.5vw, 8.6rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.88;
  margin: 0;
  max-width: 9ch;
  text-wrap: balance;
}

.circular-lead {
  color: rgba(241, 245, 248, 0.76);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.58;
  margin: clamp(1.1rem, 2.4vw, 2rem) 0 0;
  max-width: 36rem;
}

.circular-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.circular-actions a {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(223, 252, 255, 0.16), rgba(111, 195, 203, 0.06)),
    rgba(8, 35, 62, 0.68);
  border: 1px solid rgba(141, 222, 231, 0.42);
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
  display: inline-flex;
  font-size: 0.7rem;
  min-height: 2.8rem;
  padding: 0 1rem;
  text-decoration: none;
}

.circular-orbit-shell {
  height: 100%;
  inset: 0;
  position: absolute;
  transform: translate3d(var(--mouse-x), var(--mouse-y), 0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  z-index: 4;
}

.circular-orbit-ring {
  border: 1px solid rgba(141, 222, 231, 0.18);
  border-radius: 50%;
  box-shadow:
    inset 0 0 38px rgba(111, 195, 203, 0.05),
    0 0 60px rgba(111, 195, 203, 0.06);
  height: min(46vw, 29rem);
  left: var(--core-left);
  opacity: calc(0.7 - (var(--morph-progress) * 0.38));
  position: absolute;
  top: var(--core-top);
  transform: translate(-50%, -50%);
  width: min(46vw, 29rem);
}

.circular-orbit-ring-b {
  height: min(63vw, 40rem);
  opacity: calc(0.36 - (var(--morph-progress) * 0.2));
  width: min(63vw, 40rem);
}

.circular-logo-core {
  align-items: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.78), rgba(229, 246, 251, 0.58) 40%, rgba(122, 178, 196, 0.2) 100%),
    rgba(232, 247, 252, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow:
    0 34px 96px rgba(0, 5, 12, 0.44),
    0 0 0 1.05rem rgba(141, 222, 231, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  height: clamp(10.8rem, 17vw, 16.8rem);
  justify-content: center;
  left: var(--core-left);
  padding: clamp(1.45rem, 2vw, 2.3rem);
  position: absolute;
  top: var(--core-top);
  transform: translate(-50%, -50%) scale(calc(1 - (var(--morph-progress) * 0.06)));
  width: clamp(10.8rem, 17vw, 16.8rem);
  z-index: 8;
}

.circular-logo-core img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(29%) saturate(1322%) hue-rotate(164deg) brightness(91%) contrast(94%);
  width: min(82%, 12.5rem);
}

.circular-logo-caption {
  color: rgba(2, 27, 45, 0.72);
  font-size: clamp(0.48rem, 0.68vw, 0.65rem);
  text-align: center;
}

.circular-logo-halo {
  border: 1px solid rgba(0, 35, 64, 0.12);
  border-radius: 50%;
  inset: 0.74rem;
  pointer-events: none;
  position: absolute;
}

.circular-infinity-guide {
  height: min(31vw, 22rem);
  left: var(--core-left);
  opacity: calc(var(--morph-progress) * 0.4);
  pointer-events: none;
  position: absolute;
  top: var(--core-top);
  transform: translate(-50%, -50%);
  transition:
    left 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  width: min(68vw, 58rem);
  z-index: 3;
}

.circular-infinity-guide::before,
.circular-infinity-guide::after {
  border: 1px solid rgba(141, 222, 231, 0.22);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgba(111, 195, 203, 0.04),
    0 0 42px rgba(111, 195, 203, 0.05);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 54%;
}

.circular-infinity-guide::before {
  left: 0;
  transform: rotate(23deg);
}

.circular-infinity-guide::after {
  right: 0;
  transform: rotate(-23deg);
}

.circular-card-field {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.circular-card {
  border: 0;
  background: transparent;
  cursor: pointer;
  height: var(--card-h, 6.5rem);
  left: 0;
  opacity: 0;
  padding: 0;
  perspective: 900px;
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  width: var(--card-w, 6.5rem);
  z-index: 6;
}

.circular-card-inner {
  display: block;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.circular-card:hover .circular-card-inner,
.circular-card:focus-visible .circular-card-inner {
  transform: rotateY(180deg);
}

.circular-card-face {
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(223, 252, 255, 0.18), transparent 0 42%),
    linear-gradient(180deg, rgba(47, 103, 139, 0.48), rgba(8, 35, 62, 0.78)),
    rgba(7, 17, 27, 0.9);
  border: 1px solid rgba(170, 233, 239, 0.42);
  border-radius: 0.38rem;
  box-shadow:
    0 22px 54px rgba(0, 5, 12, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: block;
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.circular-card-face img {
  filter: saturate(1.06) contrast(1.2) brightness(1.14);
  height: 100%;
  object-fit: cover;
  opacity: 1;
  padding: 0;
  width: 100%;
}

.circular-card-front {
  background:
    linear-gradient(180deg, rgba(223, 252, 255, 0.02), rgba(0, 17, 39, 0.04)),
    var(--plate-src),
    radial-gradient(circle at 50% 22%, rgba(223, 252, 255, 0.12), transparent 0 42%),
    linear-gradient(180deg, rgba(47, 103, 139, 0.48), rgba(8, 35, 62, 0.78)),
    rgba(7, 17, 27, 0.9);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto, cover, auto, auto, auto;
}

.circular-card-face::after {
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 17, 39, 0.24)),
    radial-gradient(circle at 50% 18%, rgba(223, 252, 255, 0.12), transparent 0 30%);
  content: "";
  inset: 0;
  opacity: 0.24;
  pointer-events: none;
  position: absolute;
}

.circular-card-back {
  align-items: flex-start;
  background:
    radial-gradient(circle at 22% 8%, rgba(141, 222, 231, 0.2), transparent 0 34%),
    linear-gradient(150deg, rgba(6, 49, 92, 0.96), rgba(0, 23, 53, 0.94));
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
  justify-content: flex-end;
  padding: 0.7rem;
  transform: rotateY(180deg);
}

.circular-card-back span {
  color: var(--accent-teal-strong);
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.circular-card-back strong {
  color: #f7fbff;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.16;
  text-align: left;
}

.circular-card-back em {
  color: rgba(241, 245, 248, 0.64);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}

.circular-stage-notes {
  bottom: clamp(1rem, 2vw, 1.6rem);
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  left: clamp(1.2rem, 3vw, 3rem);
  pointer-events: none;
  position: absolute;
  right: clamp(1.2rem, 3vw, 3rem);
  z-index: 9;
}

.circular-stage-notes span {
  background: rgba(0, 23, 53, 0.56);
  border: 1px solid rgba(141, 222, 231, 0.22);
  border-radius: var(--radius-sm);
  color: rgba(223, 252, 255, 0.68);
  font-size: 0.58rem;
  padding: 0.58rem 0.72rem;
}

.circular-proof-section {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.circular-proof-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.circular-proof-grid article {
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 195, 203, 0.16), transparent 0 32%),
    linear-gradient(160deg, rgba(24, 79, 119, 0.72), rgba(8, 35, 62, 0.86));
  border: 1px solid rgba(170, 233, 239, 0.24);
  border-radius: var(--radius-lg);
  min-height: 18rem;
  padding: clamp(1.2rem, 2vw, 1.8rem);
}

.circular-proof-grid span {
  color: var(--accent-teal-strong);
  display: block;
  font-size: 0.72rem;
  margin-bottom: 1rem;
}

.circular-proof-grid h2 {
  color: #f7fbff;
  font-size: clamp(1.45rem, 2.5vw, 2.55rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.circular-proof-grid p {
  color: rgba(241, 245, 248, 0.72);
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
}

@media (max-width: 1040px) {
  .circular-morph-hero {
    --core-left: 50%;
    --core-top: 64%;
  }

  .circular-morph-stage {
    min-height: 44rem;
  }

  .circular-morph-content {
    left: 1.35rem;
    max-width: calc(100% - 2.7rem);
    top: 15%;
    transform: none;
  }

  .circular-morph-content h1 {
    font-size: clamp(2.65rem, 12vw, 5.2rem);
    max-width: 10ch;
  }

  .circular-lead {
    max-width: 29rem;
  }

  .circular-proof-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .circular-morph-hero {
    --core-left: 50%;
    --core-top: 72%;
  }

  .circular-morph-stage {
    min-height: 42rem;
  }

  .circular-morph-content {
    top: 3.1rem;
  }

  .circular-morph-content h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.4rem);
    line-height: 0.94;
    max-width: 9.4ch;
  }

  .circular-lead {
    font-size: 0.94rem;
    line-height: 1.5;
    max-width: 20rem;
  }

  .circular-actions {
    display: none;
  }

  .circular-logo-core {
    height: 9.6rem;
    width: 9.6rem;
  }

  .circular-card {
    --card-h: 4rem;
    --card-w: 4rem;
  }

  .circular-infinity-guide {
    height: 12.8rem;
    width: 92vw;
  }

  .circular-stage-notes {
    display: none;
  }

  .circular-proof-section {
    padding-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circular-card,
  .circular-card-inner,
  .circular-orbit-shell {
    transition: none;
  }
}