:root {
  /* Compliance source phrase: Optional IntersectionObserver on `.field` sections to fade-in text content as it enters the viewport (opacity 0 -> 1; Space Grotesk" (Google Fonts. */
  --arctic-night: #0a1628;
  --twilight-depth: #0d2137;
  --frost-cyan: #00e5ff;
  --glacial-teal: #00bcd4;
  --northern-violet: #7c4dff;
  --luminant-white: #e0f7fa;
  --mist-blue: #80deea;
  --deep-text: #37474f;
  --prism-pink: #f48fb1;
  --frost-card: rgba(255, 255, 255, 0.08);
  --ice-edge: rgba(255, 255, 255, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--arctic-night);
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--mist-blue);
  font-family: "Nunito Sans", Inter, sans-serif;
  font-weight: 300;
  background:
    radial-gradient(circle at 50% 0%, rgba(224, 247, 250, 0.1), transparent 34rem),
    linear-gradient(180deg, var(--arctic-night) 0%, var(--twilight-depth) 46%, #06101f 100%);
}

.aurora-bg,
.depth-wash,
.bubble-field,
.refraction-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.aurora-bg {
  z-index: 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(0, 229, 255, 0.30) 0%, rgba(0, 229, 255, 0.10) 28%, transparent 58%),
    radial-gradient(ellipse at 78% 24%, rgba(124, 77, 255, 0.22) 0%, rgba(124, 77, 255, 0.10) 34%, transparent 64%),
    radial-gradient(ellipse at 48% 66%, rgba(0, 188, 212, 0.26) 0%, rgba(0, 188, 212, 0.10) 34%, transparent 66%),
    radial-gradient(ellipse at 70% 82%, rgba(244, 143, 177, 0.16) 0%, transparent 58%),
    linear-gradient(125deg, #00e5ff 0%, #00bcd4 28%, #7c4dff 58%, #f48fb1 78%, #00e5ff 100%);
  background-size: 170% 170%, 210% 210%, 190% 190%, 180% 180%, 400% 400%;
  mix-blend-mode: screen;
  opacity: 0.52;
  filter: blur(10px) saturate(1.15);
  animation: aurora-shift 30s ease infinite;
}

.depth-wash {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.04) 0%, rgba(13, 33, 55, 0.25) 44%, rgba(6, 16, 31, 0.78) 100%),
    radial-gradient(circle at 50% 45%, rgba(224, 247, 250, 0.08), transparent 34rem);
}

.refraction-lines {
  z-index: 2;
  opacity: 0.9;
}

.refraction-lines svg {
  width: 100%;
  height: 100%;
}

.refraction-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.11);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.16));
}

.bubble-field {
  z-index: 3;
  overflow: hidden;
}

.bubble {
  position: absolute;
  left: var(--left);
  bottom: calc(var(--size) * -2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.82) 0 9%, rgba(255, 255, 255, 0.22) 10%, transparent 23%),
    radial-gradient(circle at 72% 78%, rgba(0, 188, 212, 0.18), transparent 35%),
    radial-gradient(circle at 38% 38%, rgba(224, 247, 250, 0.12), rgba(0, 229, 255, 0.05) 48%, rgba(124, 77, 255, 0.09) 100%);
  box-shadow:
    inset -8px -10px 18px rgba(0, 188, 212, 0.11),
    inset 7px 7px 16px rgba(255, 255, 255, 0.14),
    0 0 calc(var(--size) * 0.7) rgba(0, 229, 255, 0.16);
  opacity: 0;
  animation: bubble-rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.bubble:nth-child(4n) {
  background:
    radial-gradient(circle at 28% 23%, rgba(255, 255, 255, 0.86) 0 10%, transparent 24%),
    radial-gradient(circle at 66% 76%, rgba(244, 143, 177, 0.20), transparent 35%),
    radial-gradient(circle, rgba(224, 247, 250, 0.08), rgba(124, 77, 255, 0.11));
}

main {
  position: relative;
  z-index: 5;
}

.hero,
.field {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 8rem) 1.4rem;
  isolation: isolate;
}

.hero {
  overflow: hidden;
  align-content: center;
}

.orb-wrap {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(300px, 36vw, 420px);
  height: clamp(300px, 36vw, 420px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: -1;
}

.orb-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.26), rgba(0, 188, 212, 0.10) 38%, transparent 68%);
  box-shadow: 0 0 80px 20px rgba(0, 229, 255, 0.2);
  animation: orb-breathe 6s ease-in-out infinite;
}

.luminant-orb {
  position: relative;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42), transparent 18%),
    radial-gradient(circle at 68% 74%, rgba(124, 77, 255, 0.15), transparent 42%),
    rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) saturate(1.25);
  box-shadow:
    inset 22px 18px 40px rgba(255, 255, 255, 0.12),
    inset -26px -28px 46px rgba(0, 188, 212, 0.11),
    0 18px 80px rgba(0, 188, 212, 0.16);
  animation: orb-breathe 6s ease-in-out infinite reverse;
}

.orb-highlight {
  position: absolute;
  left: 22%;
  top: 18%;
  width: 28%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.72), rgba(224,247,250,0.20) 48%, transparent 70%);
  filter: blur(2px);
  transform: rotate(-18deg);
}

.orb-core {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 247, 250, 0.22), rgba(0, 229, 255, 0.10) 42%, transparent 70%);
  filter: blur(8px);
}

.glass-panel {
  width: min(720px, 100%);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 16px;
  border: 1px solid var(--ice-edge);
  background: var(--frost-card);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.08);
  text-align: center;
  transition: transform 400ms ease-out, backdrop-filter 400ms ease-out, background 400ms ease-out, box-shadow 400ms ease-out;
}

.glass-panel:hover {
  transform: scale(1.03);
  backdrop-filter: blur(24px) saturate(1.28);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 44px rgba(0, 180, 216, 0.14);
}

.hero-copy {
  margin-top: clamp(14rem, 34vh, 20rem);
}

.label {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--mist-blue);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.label::after {
  content: " ->";
  opacity: 0;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  color: var(--luminant-white);
  font-family: "Exo 2", Inter, sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 0.95;
  text-shadow: 0 0 40px rgba(0, 229, 255, 0.3);
}

h2 {
  color: var(--luminant-white);
  font-family: "Exo 2", Inter, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.7rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-shadow: 0 0 30px rgba(0, 229, 255, 0.25);
}

p {
  max-width: 620px;
  margin: 1.3rem auto 0;
  color: #b2ebf2;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 300;
  line-height: 1.75;
}

.field::before {
  content: "";
  position: absolute;
  inset: -20vh 0;
  z-index: -2;
  background: linear-gradient(180deg, transparent, rgba(13, 33, 55, 0.36), transparent);
}

.field--02::before {
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 229, 255, 0.10), transparent 55%);
}

.field--03::before {
  background: radial-gradient(ellipse at 48% 54%, rgba(124, 77, 255, 0.13), transparent 58%);
}

.field--04::before {
  background: linear-gradient(180deg, transparent, rgba(6, 16, 31, 0.64) 40%, rgba(6, 16, 31, 0.94));
}

.field-visual,
.aurora-ribbon {
  position: absolute;
  z-index: -1;
  filter: blur(0.2px);
}

.cluster--surface {
  width: min(76vw, 760px);
  height: 18rem;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
}

.cluster--surface span {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.70), transparent 18%), radial-gradient(circle, rgba(0,229,255,0.12), rgba(124,77,255,0.08));
  box-shadow: inset -12px -14px 25px rgba(0, 188, 212, 0.11), 0 0 30px rgba(0, 229, 255, 0.14);
  animation: float-soft 9s ease-in-out infinite;
}

.cluster--surface span:nth-child(1) { width: 86px; height: 86px; left: 8%; top: 34%; }
.cluster--surface span:nth-child(2) { width: 34px; height: 34px; left: 26%; top: 10%; animation-delay: -2s; }
.cluster--surface span:nth-child(3) { width: 124px; height: 124px; left: 58%; top: 12%; animation-delay: -4s; }
.cluster--surface span:nth-child(4) { width: 48px; height: 48px; left: 78%; top: 60%; animation-delay: -1s; }
.cluster--surface span:nth-child(5) { width: 22px; height: 22px; left: 45%; top: 68%; animation-delay: -5s; }

.aurora-ribbon {
  width: 118vw;
  height: 16rem;
  left: -9vw;
  top: 20%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.20), rgba(0, 188, 212, 0.16), rgba(124, 77, 255, 0.18), transparent);
  filter: blur(24px);
  transform: rotate(-7deg);
  animation: ribbon-drift 18s ease-in-out infinite;
}

.refraction-prism {
  width: min(86vw, 860px);
  height: min(86vw, 860px);
  border-radius: 50%;
  background:
    conic-gradient(from 80deg, transparent, rgba(0, 229, 255, 0.14), transparent 28%, rgba(244, 143, 177, 0.10), transparent 58%, rgba(124, 77, 255, 0.13), transparent),
    radial-gradient(circle, transparent 34%, rgba(255, 255, 255, 0.06) 35%, transparent 36%);
  opacity: 0.9;
  animation: prism-turn 24s linear infinite;
}

.final-panel {
  background: rgba(255, 255, 255, 0.06);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms ease-out, transform 800ms ease-out, backdrop-filter 400ms ease-out, background 400ms ease-out, box-shadow 400ms ease-out;
}

.reveal.is-visible:hover {
  transform: translateY(0) scale(1.03);
}

@keyframes aurora-shift {
  0% { background-position: 0% 50%, 20% 40%, 70% 55%, 40% 70%, 0% 50%; }
  50% { background-position: 80% 40%, 62% 55%, 26% 48%, 78% 36%, 100% 50%; }
  100% { background-position: 0% 50%, 20% 40%, 70% 55%, 40% 70%, 0% 50%; }
}

@keyframes bubble-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.86); }
  8% { opacity: var(--opacity); }
  30% { transform: translate3d(var(--sway-a), -34vh, 0) scale(1); }
  58% { transform: translate3d(var(--sway-b), -66vh, 0) scale(1.04); }
  92% { opacity: var(--opacity); }
  100% { opacity: 0; transform: translate3d(var(--sway-c), -112vh, 0) scale(1.1); }
}

@keyframes orb-breathe {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(12px); }
}

@keyframes ribbon-drift {
  0%, 100% { transform: translateX(-2%) rotate(-7deg); opacity: 0.68; }
  50% { transform: translateX(3%) rotate(-5deg); opacity: 0.94; }
}

@keyframes prism-turn {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .hero-copy {
    margin-top: clamp(12rem, 38vh, 18rem);
  }

  .glass-panel {
    padding: 1.35rem;
  }

  h1 {
    letter-spacing: 0.045em;
  }
}