:root {
  --ink: #123c3a;
  --muted: #547472;
  --teal-1: #75ebe5;
  --teal-2: #2fc4bd;
  --teal-3: #12988f;
  --teal-4: #075f5a;
  --line: rgba(17, 118, 111, .15);
  --white: rgba(255, 255, 255, .92);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 35%, rgba(117, 235, 229, .22), transparent 29rem),
    linear-gradient(145deg, #f8ffff 0%, #eefcfb 48%, #ffffff 100%);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .33;
  background-image:
    linear-gradient(rgba(8, 124, 117, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 124, 117, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.page-shell {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 28px;
  isolation: isolate;
}

.welcome {
  width: min(760px, 100%);
  text-align: center;
  animation: appear 900ms cubic-bezier(.2,.75,.15,1) both;
}

.orb-stage {
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
}

.hero-orb {
  position: relative;
  z-index: 3;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.76), transparent 9%),
    radial-gradient(circle at 37% 29%, var(--teal-1), transparent 28%),
    linear-gradient(145deg, var(--teal-2), var(--teal-4));
  border: 7px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 3px #dce6e7,
    0 0 0 6px rgba(255,255,255,.88),
    0 25px 55px rgba(7, 95, 90, .25),
    inset -16px -20px 30px rgba(0, 70, 66, .23),
    inset 13px 15px 25px rgba(255,255,255,.19);
  animation: float 5s ease-in-out infinite;
}

.hero-orb::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.28);
}

.shine {
  position: absolute;
  top: 15%;
  left: 23%;
  width: 34%;
  height: 15%;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  filter: blur(5px);
  transform: rotate(-24deg);
}

.monogram {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 15vw, 8rem);
  line-height: .8;
  font-weight: 700;
  transform: translateY(-2%);
  text-shadow: 0 8px 18px rgba(0, 77, 73, .2);
}

.orbit {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(15, 143, 133, .18);
  border-radius: 50%;
}

.orbit-a { animation: spin 18s linear infinite; }
.orbit-b {
  inset: 20%;
  border-style: dashed;
  border-color: rgba(15, 143, 133, .22);
  animation: spin-reverse 13s linear infinite;
}

.mini-orb {
  position: absolute;
  z-index: 4;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 5px;
  background: rgba(255,255,255,.9);
  border: 2px solid #dfe8e8;
  box-shadow: 0 12px 25px rgba(20, 108, 102, .14);
}

.mini-orb i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(145deg, #62ded8, #0b756f);
  box-shadow: inset 5px 6px 9px rgba(255,255,255,.25);
}

.mini-one { top: 13%; left: 8%; animation: drift-one 6.2s ease-in-out infinite; }
.mini-two { right: 4%; top: 34%; width: 11%; animation: drift-two 5.5s ease-in-out infinite; }
.mini-three { bottom: 8%; left: 20%; width: 9%; animation: drift-three 7s ease-in-out infinite; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--teal-3);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .28em;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.055em;
  color: #153f3c;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 10px 16px;
  color: var(--muted);
  font-size: clamp(.9rem, 2vw, 1rem);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(26, 109, 103, .08);
  backdrop-filter: blur(10px);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22b99f;
  box-shadow: 0 0 0 5px rgba(34,185,159,.12);
  animation: pulse 2s ease-in-out infinite;
}

footer {
  align-self: end;
  padding-top: 24px;
  color: rgba(18,60,58,.42);
  font-size: .78rem;
  letter-spacing: .12em;
}

.ambient {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .7;
}

.ambient-one {
  width: 24vw;
  height: 24vw;
  min-width: 180px;
  min-height: 180px;
  left: -9vw;
  top: 4vh;
  background: radial-gradient(circle at 65% 65%, rgba(75,211,202,.18), rgba(255,255,255,0) 68%);
}

.ambient-two {
  width: 31vw;
  height: 31vw;
  min-width: 220px;
  min-height: 220px;
  right: -13vw;
  bottom: -7vh;
  background: radial-gradient(circle at 30% 30%, rgba(23,153,143,.17), rgba(255,255,255,0) 69%);
}

.ambient-three {
  width: 110px;
  height: 110px;
  right: 11vw;
  top: 13vh;
  border: 1px solid rgba(18,151,142,.12);
}

@keyframes appear {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes drift-one { 50% { transform: translate(-7px, 9px); } }
@keyframes drift-two { 50% { transform: translate(8px, -6px); } }
@keyframes drift-three { 50% { transform: translate(-4px, -9px); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(34,185,159,0); } }

@media (max-height: 660px) and (min-width: 560px) {
  .orb-stage { width: 260px; margin-bottom: 14px; }
  h1 { font-size: 3.6rem; }
  .status { margin-top: 18px; }
}

@media (max-width: 520px) {
  .page-shell { padding: 20px; }
  .orb-stage { width: min(300px, 82vw); }
  .monogram { font-size: 5.2rem; }
  .eyebrow { letter-spacing: .22em; }
  h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}