:root {
  --bg: #030716;
  --bg-2: #07123a;
  --panel: rgba(12, 20, 54, 0.82);
  --panel-2: rgba(18, 27, 73, 0.78);
  --line: rgba(145, 190, 255, 0.22);
  --text: #ffffff;
  --muted: #a9b8dd;
  --cyan: #22d7ff;
  --blue: #3f7dff;
  --purple: #8d47ff;
  --pink: #ff55d6;
  --green: #33e191;
  --gold: #ffc75a;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 65, 255, 0.24), transparent 34rem),
    linear-gradient(180deg, #020611 0%, #061030 44%, #050918 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(34, 215, 255, 0.35) 0 1px, transparent 1.5px);
  background-position: 20px 40px, 80px 120px;
  background-size: 140px 140px, 220px 220px;
  opacity: 0.2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 34%, rgba(34, 215, 255, 0.12), transparent 20rem),
    radial-gradient(circle at 88% 28%, rgba(255, 85, 214, 0.12), transparent 22rem),
    radial-gradient(circle at 52% 76%, rgba(141, 71, 255, 0.12), transparent 24rem);
  opacity: 0.8;
  animation: atmosphereShift 18s ease-in-out infinite alternate;
}

.universe-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.micro-field,
.galaxy-field,
.ambient-fog,
.ambient-object,
.section-magic,
.mini-world,
.magic-streak {
  pointer-events: none;
  user-select: none;
}

.micro-field {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(34, 215, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 199, 90, 0.55) 0 1px, transparent 1.6px);
  background-position: 0 0, 48px 92px, 160px 40px;
  background-size: 180px 180px, 260px 260px, 340px 340px;
  opacity: 0.17;
  animation: particleDrift 32s linear infinite;
}

.field-two {
  opacity: 0.12;
  filter: blur(0.4px);
  transform: scale(1.2);
  animation-duration: 46s;
  animation-direction: reverse;
}

.galaxy-field {
  position: absolute;
  width: clamp(260px, 34vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(0.8px) saturate(1.2);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 50%, rgba(34, 215, 255, 0.28) 0 5%, transparent 18%),
    conic-gradient(
      from 18deg,
      transparent 0deg,
      rgba(34, 215, 255, 0.06) 38deg,
      rgba(141, 71, 255, 0.2) 76deg,
      rgba(255, 85, 214, 0.08) 112deg,
      transparent 158deg,
      rgba(34, 215, 255, 0.1) 214deg,
      rgba(141, 71, 255, 0.18) 266deg,
      transparent 360deg
    );
  mask-image: radial-gradient(ellipse at center, #000 0 8%, rgba(0, 0, 0, 0.72) 18%, transparent 67%);
  transform: rotate(var(--galaxy-rotation, 0deg)) scaleX(1.7) scaleY(0.58);
  animation: galaxyBreathe 20s ease-in-out infinite alternate, galaxySpin 70s linear infinite;
}

.galaxy-field::before,
.galaxy-field::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(147, 240, 255, 0.58) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 199, 90, 0.38) 0 1px, transparent 1.5px);
  background-position: 12px 20px, 76px 44px, 136px 88px;
  background-size: 72px 72px, 118px 118px, 166px 166px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, #000 0 10%, rgba(0, 0, 0, 0.58) 36%, transparent 72%);
}

.galaxy-field::after {
  inset: 24%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.52), rgba(34, 215, 255, 0.18) 18%, transparent 56%);
  filter: blur(10px);
  opacity: 0.8;
}

.galaxy-one {
  --galaxy-rotation: -18deg;
  top: 5%;
  left: 4%;
}

.galaxy-two {
  --galaxy-rotation: 24deg;
  top: 28%;
  right: -8%;
  width: clamp(320px, 40vw, 760px);
  opacity: 0.13;
  animation-delay: -8s, -18s;
}

.galaxy-three {
  --galaxy-rotation: -34deg;
  top: 55%;
  left: -10%;
  width: clamp(300px, 38vw, 700px);
  opacity: 0.12;
  animation-delay: -12s, -32s;
}

.galaxy-four {
  --galaxy-rotation: 12deg;
  bottom: 5%;
  right: 8%;
  width: clamp(260px, 32vw, 620px);
  opacity: 0.11;
  animation-delay: -4s, -46s;
}

.ambient-fog {
  position: absolute;
  width: min(660px, 62vw);
  opacity: 0.26;
  filter: blur(8px) saturate(1.18);
  mix-blend-mode: screen;
  animation: fogFloat 16s ease-in-out infinite alternate;
}

.fog-one {
  top: 14%;
  left: -12%;
}

.fog-two {
  right: -15%;
  top: 46%;
  animation-delay: -5s;
}

.ambient-object {
  position: absolute;
  width: clamp(48px, 7vw, 112px);
  opacity: 0.5;
  filter: drop-shadow(0 0 22px rgba(34, 215, 255, 0.28));
  animation: objectFloat 8s ease-in-out infinite alternate;
}

.object-crystal {
  left: 4%;
  top: 28%;
}

.object-coin {
  right: 6%;
  top: 20%;
  animation-delay: -2s;
}

.object-comet {
  right: 8%;
  bottom: 14%;
  width: clamp(88px, 14vw, 220px);
  opacity: 0.36;
  animation-delay: -4s;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.home-header,
.hero,
.home-section,
.cta-band,
.home-footer {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  backdrop-filter: blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.45rem;
  font-weight: 900;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pink), var(--purple) 48%, var(--cyan));
  box-shadow: 0 0 28px rgba(141, 71, 255, 0.6);
  transform: rotate(45deg);
}

.brand-mark span {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--bg);
}

.desktop-nav,
.header-actions,
.hero-actions,
.trust-row,
.section-title.split,
.carousel-controls,
.billing-toggle {
  display: flex;
  align-items: center;
}

.desktop-nav {
  justify-content: center;
  gap: 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
}

.desktop-nav a:hover,
.home-footer a:hover {
  color: var(--cyan);
}

.header-actions,
.hero-actions {
  gap: 12px;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 20px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  filter: saturate(1.12);
}

.button.primary {
  border: 0;
  background: linear-gradient(135deg, var(--purple), var(--blue) 52%, var(--cyan));
  box-shadow: 0 16px 36px rgba(63, 125, 255, 0.34), 0 0 24px rgba(141, 71, 255, 0.26);
}

.button.ghost,
.button.dark {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.055);
}

.button.large {
  min-height: 62px;
  padding-inline: 28px;
  font-size: 1rem;
}

.play-dot {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.menu-toggle,
.hamburger,
.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(320px, 0.74fr) minmax(520px, 1.26fr);
  gap: 28px;
  align-items: center;
  min-height: 620px;
  padding: 56px 0 38px;
}

.hero::before,
.home-section::before,
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(980px, 86vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(34, 215, 255, 0.72), rgba(141, 71, 255, 0.78), rgba(255, 85, 214, 0.48), transparent);
  box-shadow: 0 0 22px rgba(34, 215, 255, 0.28), 0 0 46px rgba(141, 71, 255, 0.18);
  transform: translateX(-50%);
  opacity: 0.62;
}

.section-magic {
  position: absolute;
  inset: -70px -42px;
  z-index: 0;
  overflow: hidden;
}

.hero-copy,
.hero-art,
.section-title,
.path-grid,
.flow-track,
.tool-strip,
.world-grid,
.safety-copy,
.safety-grid,
.pricing-layout {
  position: relative;
  z-index: 1;
}

.mini-world,
.magic-streak {
  position: absolute;
  object-fit: contain;
  opacity: 0.62;
  filter: drop-shadow(0 0 28px rgba(34, 215, 255, 0.28));
  animation: objectFloat 7s ease-in-out infinite alternate;
}

.magic-streak {
  opacity: 0.4;
  mix-blend-mode: screen;
  animation: streakDrift 8s ease-in-out infinite alternate;
}

.hero-streak-one {
  width: min(340px, 32vw);
  top: 10%;
  right: 6%;
}

.hero-streak-two {
  width: min(260px, 24vw);
  bottom: 10%;
  left: 35%;
  animation-delay: -3s;
}

.mini-world-island {
  width: min(180px, 16vw);
  right: 0;
  bottom: 2%;
}

.mini-world-stars {
  width: min(220px, 22vw);
  left: 46%;
  top: 6%;
  opacity: 0.38;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.pill,
.eyebrow {
  margin-bottom: 16px;
  color: #93f0ff;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(34, 215, 255, 0.28);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(34, 215, 255, 0.11);
}

h1 {
  max-width: 560px;
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 5.2vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(100deg, var(--cyan), var(--blue) 42%, var(--purple));
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-text {
  max-width: 520px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.24rem;
  line-height: 1.55;
}

.trust-row {
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  font-weight: 800;
}

.trust-row span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.trust-row span:nth-child(1)::before {
  border-radius: 4px;
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(51, 225, 145, 0.36);
}

.trust-row span:nth-child(2)::before {
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(34, 215, 255, 0.34);
}

.trust-row span:nth-child(3)::before {
  border-radius: 3px;
  transform: rotate(45deg);
  border-color: var(--purple);
  box-shadow: 0 0 14px rgba(141, 71, 255, 0.42);
}

.trust-row span:nth-child(4)::before {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 199, 90, 0.36);
}

.image-slot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(34, 215, 255, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(18, 31, 85, 0.62), rgba(6, 12, 34, 0.9));
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 90px rgba(0, 0, 0, 0.3);
}

.image-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-120%);
  animation: slotSheen 5.8s ease-in-out infinite;
}

.image-slot span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.image-slot-hero {
  min-height: 560px;
  border-radius: 30px;
}

.image-slot.filled {
  background-position: center;
  background-size: cover;
}

.image-slot.filled::before {
  display: none;
}

.hero-world-art {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 22, 0.12), transparent 42%),
    url("/assets/homepage/hero/main-hero-world.png?v=2");
}

.hero-world-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 22, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(3, 7, 22, 0.08), transparent 30%, rgba(3, 7, 22, 0.16));
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.path-roblox {
  background-image: linear-gradient(180deg, transparent 48%, rgba(3, 7, 22, 0.74)), url("/assets/homepage/cards/roblox-worlds.png?v=2");
}

.path-story {
  background-image: linear-gradient(180deg, transparent 48%, rgba(3, 7, 22, 0.74)), url("/assets/homepage/cards/story-games.png?v=2");
}

.path-music {
  background-image: linear-gradient(180deg, transparent 48%, rgba(3, 7, 22, 0.74)), url("/assets/homepage/cards/music-sound.png?v=2");
}

.path-movies {
  background-image: linear-gradient(180deg, transparent 48%, rgba(3, 7, 22, 0.74)), url("/assets/homepage/cards/ai-movies.png?v=2");
}

.path-art {
  background-image: linear-gradient(180deg, transparent 48%, rgba(3, 7, 22, 0.74)), url("/assets/homepage/cards/art-studio.png?v=2");
}

.world-lava {
  background-image: linear-gradient(180deg, transparent 58%, rgba(3, 7, 22, 0.5)), url("/assets/homepage/thumbnails/lava-escape.png?v=2");
}

.world-pets {
  background-image: linear-gradient(180deg, transparent 58%, rgba(3, 7, 22, 0.5)), url("/assets/homepage/thumbnails/fantasy-story.png");
}

.world-haunted {
  background-image: linear-gradient(180deg, transparent 58%, rgba(3, 7, 22, 0.55)), url("/assets/homepage/thumbnails/neon-beat.png");
}

.world-space {
  background-image: linear-gradient(180deg, transparent 58%, rgba(3, 7, 22, 0.5)), url("/assets/homepage/thumbnails/space-adventure.png");
}

.world-dragon {
  background-image: linear-gradient(180deg, transparent 58%, rgba(3, 7, 22, 0.5)), url("/assets/homepage/thumbnails/dragon-quest.png");
}

.home-section {
  padding: 34px 0 48px;
  border-top: 1px solid rgba(145, 190, 255, 0.16);
}

.section-title {
  margin-bottom: 22px;
}

.section-title.split {
  justify-content: space-between;
  gap: 20px;
}

.section-title.center {
  text-align: center;
}

.section-title h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.04;
}

.carousel-controls {
  gap: 10px;
}

.carousel-controls span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.carousel-controls span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.carousel-controls span:last-child::before {
  transform: rotate(-135deg);
}

.path-grid,
.world-grid,
.safety-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.path-card,
.world-grid article,
.price-card,
.safety-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(14, 24, 66, 0.92), rgba(9, 14, 38, 0.9));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.path-card::after,
.world-grid article::after,
.price-card::after,
.safety-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--spark-x, 78%) var(--spark-y, 18%), rgba(34, 215, 255, 0.22), transparent 7rem),
    radial-gradient(circle at 18% 82%, rgba(141, 71, 255, 0.18), transparent 8rem);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.path-card:hover,
.world-grid article:hover,
.price-card:hover,
.safety-grid article:hover {
  border-color: rgba(34, 215, 255, 0.42);
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.32), 0 0 34px rgba(34, 215, 255, 0.12);
  transform: translateY(-6px);
}

.path-card:hover::after,
.world-grid article:hover::after,
.price-card:hover::after,
.safety-grid article:hover::after {
  opacity: 1;
}

.path-card {
  min-height: 310px;
  padding: 14px;
}

.path-image {
  min-height: 182px;
  margin-bottom: 16px;
  transition: transform 220ms ease, filter 220ms ease;
}

.path-card:hover .path-image {
  filter: saturate(1.12) brightness(1.08);
  transform: scale(1.03);
}

.path-card h3,
.world-grid h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.path-card p,
.world-grid p,
.price-card span,
.price-card li,
.safety-copy p,
.safety-grid p,
.home-footer p,
.home-footer a {
  color: var(--muted);
  line-height: 1.5;
}

.path-card p {
  max-width: 160px;
  margin-bottom: 0;
  font-size: 0.82rem;
}

.mini-link {
  display: block;
  margin-top: 8px;
  color: #93f0ff;
  font-weight: 900;
}

.card-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 0;
  background-color: transparent;
  filter: drop-shadow(0 0 16px rgba(141, 71, 255, 0.58));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 220ms ease, filter 220ms ease;
}

.path-card:hover .card-icon {
  filter: drop-shadow(0 0 24px rgba(34, 215, 255, 0.64));
  transform: translateY(-5px) rotate(-4deg) scale(1.06);
}

.card-icon::before,
.orb::before,
.line-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 8px;
}

.card-icon::before {
  display: none;
}

.gamepad::before {
  width: 30px;
  height: 19px;
  border-radius: 10px;
  box-shadow:
    -9px 5px 0 -6px #fff,
    9px 5px 0 -6px #fff;
}

.book::before {
  width: 24px;
  height: 28px;
  border-radius: 4px;
  box-shadow: inset 10px 0 0 rgba(255, 255, 255, 0.18);
}

.music::before {
  width: 9px;
  height: 28px;
  border-width: 0 4px 4px 0;
  border-radius: 0 0 9px 9px;
  transform: skewY(-12deg);
}

.film::before {
  width: 28px;
  height: 22px;
  border-radius: 5px;
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, 0.18);
}

.palette::before {
  width: 27px;
  height: 22px;
  border-radius: 50% 45% 55% 45%;
  box-shadow:
    -5px -4px 0 -3px #fff,
    5px -5px 0 -3px #fff,
    2px 6px 0 -3px #fff;
}

.gamepad { background-image: url("/assets/homepage/tools/obby-builder.png"); }
.book { background-image: url("/assets/homepage/tools/story-games.png"); }
.music { background-image: url("/assets/homepage/tools/music-studio.png"); }
.film { background-image: url("/assets/homepage/tools/movie-maker.png"); }
.palette { background-image: url("/assets/homepage/tools/ai-magic.png"); }

.path-coin {
  width: clamp(54px, 7vw, 110px);
  top: 0;
  right: 4%;
  animation-delay: -1s;
}

.path-crystal {
  width: clamp(62px, 8vw, 140px);
  left: 2%;
  bottom: 2%;
  opacity: 0.44;
  animation-delay: -3s;
}

.path-streak {
  width: min(360px, 34vw);
  right: 16%;
  bottom: 4%;
  opacity: 0.26;
}

.flow-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px;
  max-width: 900px;
  margin: 34px auto 0;
  text-align: center;
}

.flow-track article {
  position: relative;
  transition: transform 220ms ease;
}

.flow-track article:hover {
  transform: translateY(-6px);
}

.flow-track article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 43px;
  right: -42px;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--green));
  box-shadow: 0 0 16px rgba(34, 215, 255, 0.38);
}

.orb {
  display: grid;
  width: 106px;
  height: 106px;
  place-items: center;
  margin: 0 auto 16px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  filter: drop-shadow(0 0 20px rgba(141, 71, 255, 0.55));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 240ms ease, filter 240ms ease;
}

.flow-track article:hover .orb {
  filter: drop-shadow(0 0 30px rgba(34, 215, 255, 0.58));
  transform: rotate(-4deg) scale(1.08);
}

.orb::before {
  display: none;
}

.orb.lightbulb { background-image: url("/assets/homepage/tools/imagine.png"); }
.orb.cube { background-image: url("/assets/homepage/tools/generate.png"); }
.orb.pencil { background-image: url("/assets/homepage/tools/remix.png"); }
.orb.rocket { background-image: url("/assets/homepage/tools/publish.png"); }

.flow-comet {
  width: min(250px, 26vw);
  top: 2%;
  left: 4%;
  opacity: 0.36;
}

.flow-sparks {
  width: min(360px, 38vw);
  right: 0;
  bottom: 0;
  opacity: 0.26;
}

.describe-anything {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.14fr) minmax(220px, 0.72fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  min-height: 430px;
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(105, 138, 255, 0.24);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(141, 71, 255, 0.32), transparent 34rem),
    radial-gradient(ellipse at 48% 46%, rgba(34, 215, 255, 0.2), transparent 28rem),
    radial-gradient(ellipse at 12% 30%, rgba(255, 85, 214, 0.16), transparent 18rem),
    linear-gradient(145deg, rgba(9, 18, 54, 0.76), rgba(4, 9, 26, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 30px 90px rgba(0, 0, 0, 0.24);
}

.describe-anything::before,
.describe-anything::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(34, 215, 255, 0.52) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 85, 214, 0.34) 0 1px, transparent 1.6px);
  background-size: 120px 120px, 190px 190px, 260px 260px;
  opacity: 0.16;
  animation: particleDrift 42s linear infinite;
}

.describe-anything::after {
  inset: auto 9% -22% 9%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(141, 71, 255, 0.28), transparent 64%);
  filter: blur(14px);
  opacity: 0.72;
  animation: fogFloat 9s ease-in-out infinite alternate;
}

.describe-actions {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 16px;
}

.describe-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 14px 18px;
  border: 1px solid rgba(143, 240, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 50%, rgba(141, 71, 255, 0.22), transparent 7rem),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 42px rgba(0, 0, 0, 0.16);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.describe-card:hover {
  transform: translateX(5px);
  border-color: rgba(34, 215, 255, 0.5);
  background:
    radial-gradient(circle at 14% 50%, rgba(34, 215, 255, 0.24), transparent 7rem),
    rgba(255, 255, 255, 0.085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 22px 54px rgba(0, 0, 0, 0.24), 0 0 28px rgba(34, 215, 255, 0.11);
}

.describe-actions-right .describe-card:hover {
  transform: translateX(-5px);
}

.describe-card::after {
  content: "›";
  justify-self: end;
  color: #93f0ff;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 0 16px rgba(34, 215, 255, 0.56);
}

.describe-card-icon {
  width: 58px;
  aspect-ratio: 1;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.24), transparent 35%),
    linear-gradient(135deg, rgba(34, 215, 255, 0.82), rgba(141, 71, 255, 0.86));
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 24px rgba(141, 71, 255, 0.3);
}

.voice-card .describe-card-icon {
  border-radius: 50%;
  background-image:
    url("/assets/homepage/voice-mic-purple.png"),
    linear-gradient(135deg, rgba(34, 215, 255, 0.82), rgba(141, 71, 255, 0.86));
  background-size: 108%, cover;
  background-position: center;
}

.draw-card .describe-card-icon {
  background-image:
    url("/assets/homepage/writing icon.png"),
    linear-gradient(135deg, rgba(255, 138, 53, 0.2), rgba(141, 71, 255, 0.42));
  background-size: 78%, cover;
}

.type-card .describe-card-icon {
  background-image:
    url("/assets/homepage/tools/code-lab.png"),
    linear-gradient(135deg, rgba(34, 215, 255, 0.2), rgba(141, 71, 255, 0.42));
  background-size: 78%, cover;
}

.mix-card .describe-card-icon {
  background-image:
    url("/assets/cube.png"),
    linear-gradient(135deg, rgba(34, 215, 255, 0.2), rgba(141, 71, 255, 0.42));
  background-size: 84%, cover;
}

.remix-card .describe-card-icon {
  background-image:
    url("/assets/homepage/tools/remix.png"),
    linear-gradient(135deg, rgba(246, 65, 213, 0.18), rgba(141, 71, 255, 0.42));
  background-size: 82%, cover;
}

.inspire-card .describe-card-icon {
  background-image:
    url("/assets/homepage/ai magic icon.png"),
    linear-gradient(135deg, rgba(34, 215, 255, 0.18), rgba(246, 65, 213, 0.34));
  background-size: 82%, cover;
}

.describe-card strong,
.describe-card em {
  display: block;
}

.describe-card strong {
  font-size: 1rem;
}

.describe-card em {
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
}

.describe-orb-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 450px;
  isolation: isolate;
}

.describe-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: min(470px, 82vw);
  aspect-ratio: 1;
  padding: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 7, 20, 0.94) 0 39%, rgba(3, 7, 20, 0.58) 54%, transparent 71%),
    conic-gradient(from 20deg, rgba(34, 215, 255, 0.88), rgba(89, 127, 255, 0.78), rgba(255, 85, 214, 0.84), rgba(141, 71, 255, 0.74), rgba(34, 215, 255, 0.88));
  box-shadow:
    0 0 54px rgba(34, 215, 255, 0.32),
    0 0 150px rgba(141, 71, 255, 0.48),
    inset 0 0 92px rgba(246, 65, 213, 0.16),
    inset 0 0 0 1px rgba(143, 240, 255, 0.28);
  animation: orbPulse 4s ease-in-out infinite alternate;
}

.describe-orb::before,
.describe-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.describe-orb::before {
  inset: -7%;
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 7, 20, 0.02) 0 24%, rgba(3, 7, 20, 0.34) 50%, rgba(3, 7, 20, 0.86) 78%),
    url("/assets/homepage/ChatGPT Image May 28, 2026, 11_21_37 PM.png") center / 154% no-repeat;
  filter: saturate(1.22) contrast(1.08);
  opacity: 0.92;
  animation: portalFloat 9s ease-in-out infinite alternate;
}

.describe-orb::after {
  inset: 24%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9) 0 44%, rgba(0, 0, 0, 0.66) 64%, rgba(0, 0, 0, 0.22) 82%, transparent 100%);
  box-shadow:
    inset 0 0 44px rgba(3, 7, 20, 0.92),
    0 0 38px rgba(34, 215, 255, 0.2);
}

.describe-orb > span,
.describe-orb .portal-ring {
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(143, 240, 255, 0.22);
  border-radius: 50%;
  pointer-events: none;
  animation: orbSpin 14s linear infinite;
}

.describe-orb-content {
  position: relative;
  z-index: 3;
  width: min(290px, 100%);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.describe-orb-content h2 {
  margin: 8px 0 12px;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  text-transform: none;
}

.describe-orb-content p:not(.eyebrow) {
  margin: 0 auto 18px;
  color: rgba(235, 243, 255, 0.76);
  font-weight: 800;
  line-height: 1.5;
}

.describe-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.describe-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(143, 240, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: #eef6ff;
  font-size: 0.82rem;
  font-weight: 900;
}

.describe-mic {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 7, 20, 0.92) 0 43%, transparent 44%),
    linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  box-shadow: 0 18px 46px rgba(141, 71, 255, 0.44), 0 0 34px rgba(34, 215, 255, 0.28);
  transform: translateX(-50%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.describe-mic:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.03);
  box-shadow: 0 22px 56px rgba(141, 71, 255, 0.5), 0 0 42px rgba(34, 215, 255, 0.32);
}

.describe-mic span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 7, 20, 0.02), transparent 66%),
    url("/assets/homepage/voice-mic-purple.png") center / 132% no-repeat;
  box-shadow: inset 0 0 18px rgba(3, 7, 20, 0.28), 0 0 24px rgba(34, 215, 255, 0.44);
}

.describe-caption {
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 4;
  margin: 0;
  color: rgba(235, 243, 255, 0.86);
  font-size: 0.92rem;
  font-weight: 800;
  transform: translateX(-50%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.describe-anything {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: end;
  gap: clamp(14px, 2vw, 22px);
  min-height: auto;
  min-height: clamp(620px, 54vw, 760px);
  padding: clamp(240px, 28vw, 360px) clamp(18px, 4vw, 46px) clamp(30px, 5vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(219, 52, 255, 0.24), transparent 28rem),
    radial-gradient(ellipse at 86% 42%, rgba(33, 181, 255, 0.22), transparent 26rem),
    radial-gradient(circle at 50% 28%, rgba(111, 67, 255, 0.26), transparent 22rem),
    linear-gradient(180deg, rgba(4, 8, 31, 0.9), rgba(2, 6, 22, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 80px rgba(48, 204, 255, 0.06),
    0 34px 90px rgba(0, 0, 0, 0.24);
  isolation: isolate;
}

.describe-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.88;
  filter: saturate(1.08) contrast(1.04);
  pointer-events: none;
}

.describe-anything::before {
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(34, 215, 255, 0.62) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(191, 93, 255, 0.48) 0 1px, transparent 1.6px);
  background-size: 132px 132px, 210px 210px, 290px 290px;
  opacity: 0.16;
  animation: particleDrift 46s linear infinite;
}

.describe-anything::after {
  z-index: 1;
  inset: -22% -8% auto -8%;
  height: 78%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 20% 64%, rgba(255, 72, 218, 0.18), transparent 48%),
    radial-gradient(ellipse at 78% 54%, rgba(30, 180, 255, 0.2), transparent 46%);
  filter: blur(6px);
  opacity: 0.72;
  animation: fogFloat 10s ease-in-out infinite alternate;
}

.describe-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 24%, rgba(255, 82, 221, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 78%, rgba(95, 187, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 14%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 28%, rgba(137, 89, 255, 0.84) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 82%, rgba(34, 215, 255, 0.76) 0 1px, transparent 2px);
  opacity: 0.48;
  animation: microFloat 13s ease-in-out infinite alternate;
}

.describe-mascot-wrap,
.describe-copy,
.describe-prompt,
.describe-tip,
.describe-chips {
  position: relative;
  z-index: 2;
}

.op-icon {
  --icon-url: url("/assets/icons/essential/favorite.svg");
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #8ff0ff 0%, #6d7cff 48%, #f641d5 100%);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(34, 217, 255, 0.35));
  vertical-align: -0.16em;
}

.op-icon-mic { --icon-url: url("/assets/icons/essential/mic.svg"); }
.op-icon-upload { --icon-url: url("/assets/icons/essential/upload.svg"); }
.op-icon-favorite { --icon-url: url("/assets/icons/essential/favorite.svg"); }
.op-icon-image { --icon-url: url("/assets/icons/essential/image.svg"); }
.op-icon-options,
.op-icon-refresh { --icon-url: url("/assets/icons/essential/options.svg"); }
.op-icon-time { --icon-url: url("/assets/icons/essential/time.svg"); }
.op-icon-dashboard { --icon-url: url("/assets/icons/essential/dashboard.svg"); }
.op-icon-document { --icon-url: url("/assets/icons/essential/document.svg"); }

.describe-mascot-wrap {
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(160px, 17vw, 232px);
  aspect-ratio: 1;
  margin: 0;
  overflow: visible;
  transform: translateX(-50%);
  animation: none;
}

.describe-mascot-glow {
  position: absolute;
  inset: 18% 6% 2%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 215, 255, 0.46), transparent 42%),
    radial-gradient(circle at 50% 66%, rgba(151, 75, 255, 0.42), transparent 56%);
  filter: blur(18px);
}

.describe-mascot {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  max-width: none;
  transform: none;
  clip-path: none;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 28px rgba(34, 215, 255, 0.25));
}

.describe-orbit {
  position: absolute;
  border: 1px solid rgba(66, 192, 255, 0.22);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.describe-orbit-one {
  inset: 18% -10% 8%;
  animation: orbitTurn 18s linear infinite;
}

.describe-orbit-two {
  inset: 9% -18% 0;
  border-color: rgba(155, 88, 255, 0.2);
  animation: orbitTurn 23s linear infinite reverse;
}

.describe-orbit-three {
  inset: 28% 0 15%;
  border-color: rgba(255, 255, 255, 0.14);
  animation: orbitTurn 27s linear infinite;
}

.describe-copy {
  max-width: 980px;
  text-align: center;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.62);
}

.describe-copy .eyebrow {
  margin-bottom: 12px;
  color: #8ff0ff;
  letter-spacing: 0.34em;
}

.describe-copy h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.96;
}

.describe-copy h2 span {
  background: linear-gradient(90deg, #25cfff, #735dff 46%, #d957ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.describe-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px auto 0;
  color: rgba(235, 243, 255, 0.76);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 800;
}

.describe-prompt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  width: min(900px, 100%);
  min-height: clamp(72px, 8vw, 104px);
  padding: clamp(8px, 1.5vw, 16px);
  border: 1px solid rgba(124, 103, 255, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(rgba(9, 17, 45, 0.9), rgba(9, 17, 45, 0.9)) padding-box,
    linear-gradient(92deg, rgba(214, 76, 255, 0.86), rgba(34, 215, 255, 0.88)) border-box;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.035),
    0 0 36px rgba(34, 215, 255, 0.12),
    0 0 56px rgba(141, 71, 255, 0.12);
  transition: box-shadow 180ms ease;
}

.describe-prompt:focus-within {
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.045),
    0 0 44px rgba(34, 215, 255, 0.22),
    0 0 72px rgba(141, 71, 255, 0.22);
}

.describe-prompt input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: clamp(1rem, 2vw, 1.42rem);
  font-weight: 800;
}

.describe-prompt input::placeholder {
  color: rgba(235, 243, 255, 0.58);
}

.describe-prompt-button {
  display: grid;
  place-items: center;
  width: clamp(50px, 6vw, 72px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.describe-prompt-button:focus-visible,
.describe-chips button:focus-visible {
  outline: 3px solid rgba(143, 240, 255, 0.72);
  outline-offset: 4px;
}

.describe-prompt-button:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(143, 240, 255, 0.42);
}

.describe-prompt-button span {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.describe-prompt-button .op-icon {
  width: clamp(22px, 2.2vw, 30px);
  height: clamp(22px, 2.2vw, 30px);
}

.describe-voice-button {
  background: linear-gradient(135deg, #22d7ff, #8d47ff 58%, #e34eff);
  box-shadow: 0 0 26px rgba(141, 71, 255, 0.38), inset 0 0 22px rgba(255, 255, 255, 0.13);
}

.describe-voice-button.is-listening {
  animation: voiceRing 1.2s ease-in-out infinite;
}

.describe-upload-button {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.075);
}

.describe-generate-button {
  background: linear-gradient(135deg, #7b5cff, #28cfff);
  box-shadow: 0 0 32px rgba(34, 215, 255, 0.32);
}

.describe-generate-button:hover {
  animation: sparklePulse 1.2s ease-in-out infinite;
}

.describe-tip {
  margin: -4px 0 0;
  color: rgba(235, 243, 255, 0.76);
  font-weight: 850;
  text-align: center;
}

.describe-tip span {
  color: #35e4ff;
}

.describe-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  padding: 6px 4px 4px;
  scrollbar-width: thin;
}

.describe-chips button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.describe-chips button:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 240, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22), 0 0 28px rgba(34, 215, 255, 0.12);
}

@keyframes mascotFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes orbitTurn {
  to {
    transform: rotate(351deg);
  }
}

@keyframes microFloat {
  from {
    transform: translate3d(-8px, 6px, 0);
  }

  to {
    transform: translate3d(10px, -8px, 0);
  }
}

@keyframes voiceRing {
  0%,
  100% {
    box-shadow: 0 0 26px rgba(141, 71, 255, 0.38), 0 0 0 0 rgba(34, 215, 255, 0.28);
  }

  50% {
    box-shadow: 0 0 32px rgba(141, 71, 255, 0.5), 0 0 0 14px rgba(34, 215, 255, 0);
  }
}

@keyframes sparklePulse {
  0%,
  100% {
    box-shadow: 0 0 32px rgba(34, 215, 255, 0.32);
  }

  50% {
    box-shadow: 0 0 42px rgba(34, 215, 255, 0.44), 0 0 24px rgba(217, 87, 255, 0.28);
  }
}

@keyframes portalFloat {
  from {
    transform: scale(1) rotate(-1deg);
    opacity: 0.82;
  }

  to {
    transform: scale(1.035) rotate(1deg);
    opacity: 0.98;
  }
}

.tool-image-slot.is-asset-icon {
  background:
    radial-gradient(circle at 50% 56%, rgba(34, 215, 255, 0.16), transparent 55%),
    rgba(255, 255, 255, 0.035);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tool-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 20px;
  text-align: center;
}

.tool-image-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin: 0 auto 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.tool-strip article:hover .tool-image-slot {
  filter: saturate(1.14) brightness(1.08) drop-shadow(0 0 28px rgba(34, 215, 255, 0.28));
  transform: translateY(-7px) rotate(2deg) scale(1.05);
}

.tool-strip article:hover .tool-image-slot::before {
  animation: iconPulse 760ms ease-out;
}

.tool-image-slot::before,
.tool-image-slot::after {
  content: "";
  position: absolute;
  display: block;
}

.tool-image-slot::before {
  inset: 13px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.7), transparent 13%),
    linear-gradient(135deg, rgba(34, 215, 255, 0.84), rgba(141, 71, 255, 0.9));
  box-shadow: 0 0 26px rgba(34, 215, 255, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.16);
}

.tool-image-slot::after {
  z-index: 1;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.36);
}

.tool-obby,
.tool-npc,
.tool-terrain,
.tool-music,
.tool-movie,
.tool-assets,
.tool-code {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tool-obby::before,
.tool-obby::after,
.tool-npc::before,
.tool-npc::after,
.tool-terrain::before,
.tool-terrain::after,
.tool-music::before,
.tool-music::after,
.tool-movie::before,
.tool-movie::after,
.tool-assets::before,
.tool-assets::after,
.tool-code::before,
.tool-code::after {
  display: none;
}

.tool-obby { background-image: url("/assets/homepage/tools/obby-builder.png"); }
.tool-npc { background-image: url("/assets/homepage/tools/npc-creator.png"); }
.tool-terrain { background-image: url("/assets/homepage/tools/terrain-generator.png"); }
.tool-music { background-image: url("/assets/homepage/tools/music-studio.png"); }
.tool-movie { background-image: url("/assets/homepage/tools/movie-maker.png"); }
.tool-assets { background-image: url("/assets/homepage/tools/asset-library.png"); }
.tool-code { background-image: url("/assets/homepage/tools/code-lab.png"); }

.tools-streak {
  width: min(430px, 42vw);
  top: 2%;
  right: 4%;
  opacity: 0.3;
}

.tools-cloud {
  width: min(160px, 18vw);
  left: 2%;
  bottom: 4%;
  opacity: 0.34;
}

.tool-strip h3 {
  font-size: 0.92rem;
}

.world-grid article {
  padding: 10px;
}

.world-image {
  min-height: 160px;
  margin-bottom: 12px;
}

.world-grid article div:last-child {
  display: flex;
  gap: 16px;
  color: #9bdcff;
  font-size: 0.82rem;
  font-weight: 900;
}

.worlds-portal {
  width: min(130px, 12vw);
  top: 2%;
  right: 2%;
  opacity: 0.5;
}

.worlds-streak {
  width: min(410px, 40vw);
  left: 10%;
  bottom: 2%;
  opacity: 0.28;
}

.safety-section {
  display: grid;
  grid-template-columns: 0.82fr 1.8fr;
  gap: 34px;
  align-items: center;
}

.safety-copy h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

.safety-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.safety-grid article {
  min-height: 230px;
  padding: 24px;
  text-align: center;
}

.line-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--cyan);
  border: 1px solid rgba(34, 215, 255, 0.24);
  border-radius: 18px;
  background-color: rgba(34, 215, 255, 0.08);
  box-shadow: 0 0 34px rgba(34, 215, 255, 0.16);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 118%;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}

.safety-grid article:hover .line-icon {
  border-color: rgba(51, 225, 145, 0.42);
  box-shadow: 0 0 46px rgba(51, 225, 145, 0.18), 0 0 22px rgba(34, 215, 255, 0.16);
  filter: saturate(1.15) brightness(1.08);
  transform: translateY(-6px) scale(1.05);
}

.line-icon::before {
  display: none;
}

.line-icon.shield { background-image: url("/assets/homepage/safety/child-safe.png"); }
.line-icon.eye,
.line-icon.lock,
.line-icon.sliders,
.line-icon.users {
  background-size: 330%;
}
.line-icon.eye { background-image: url("/assets/homepage/safety/monitored.png"); }
.line-icon.lock { background-image: url("/assets/homepage/safety/no-messaging.png"); }
.line-icon.sliders { background-image: url("/assets/homepage/safety/controls.png"); }
.line-icon.users { background-image: url("/assets/homepage/safety/age-appropriate.png"); }

.safety-shield-glow {
  width: min(140px, 15vw);
  left: 2%;
  bottom: 4%;
  opacity: 0.34;
}

.safety-stars {
  width: min(320px, 32vw);
  right: 0;
  top: 4%;
  opacity: 0.26;
}

.membership-section {
  padding-bottom: 28px;
}

.membership-loot {
  width: min(120px, 12vw);
  right: 4%;
  top: 4%;
  opacity: 0.42;
}

.membership-streak {
  width: min(360px, 36vw);
  left: 8%;
  bottom: 2%;
  opacity: 0.28;
}

.billing-toggle {
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.billing-toggle button,
.billing-toggle strong {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 900;
}

.billing-toggle button {
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.billing-toggle button:hover {
  color: #93f0ff;
  transform: translateY(-1px);
}

.billing-toggle button.is-active {
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 18px rgba(34, 215, 255, 0.12);
}

.billing-toggle strong {
  color: var(--cyan);
}

.pricing-layout {
  display: grid;
  grid-template-columns: 0.75fr repeat(3, minmax(0, 1fr)) 0.7fr;
  gap: 22px;
  align-items: stretch;
  overflow: visible;
}

.review-credit-promo {
  position: relative;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 340px;
  overflow: visible;
}

.review-credit-promo::before {
  content: "";
  position: absolute;
  inset: auto -10% 2% -10%;
  height: 52%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 201, 77, 0.3), transparent 46%),
    radial-gradient(circle at 30% 55%, rgba(34, 215, 255, 0.2), transparent 42%);
  filter: blur(18px);
  z-index: -1;
}

.review-credit-promo::after {
  content: "";
  position: absolute;
  right: -2%;
  top: 4%;
  width: min(150px, 44%);
  aspect-ratio: 1;
  background: url("/assets/homepage/mascot/orbit.png") center / contain no-repeat;
  filter: drop-shadow(0 18px 28px rgba(34, 215, 255, 0.3));
  animation: mascotHover 4.5s ease-in-out infinite alternate;
}

.review-logo {
  width: fit-content;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 201, 77, 0.42);
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 201, 77, 0.22), transparent 42%),
    rgba(7, 14, 42, 0.72);
  box-shadow: 0 18px 44px rgba(255, 201, 77, 0.14);
}

.review-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-stars .op-icon {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffd66d 0%, #ff8a35 46%, #f641d5 100%);
  filter: drop-shadow(0 0 8px rgba(255, 214, 109, 0.4));
}

.review-logo strong {
  font-size: 0.94rem;
}

.review-copy {
  max-width: 260px;
}

.review-copy p {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.review-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 2.7vw, 3.1rem);
  line-height: 0.94;
}

.review-copy span {
  color: #b7c5e8;
  font-weight: 800;
  line-height: 1.5;
}

.mascot-art {
  position: relative;
  min-height: 360px;
  align-self: center;
  background-image: url("/assets/homepage/mascot/orbit.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 24px 34px rgba(32, 213, 255, 0.24)) drop-shadow(0 0 36px rgba(141, 71, 255, 0.34));
  animation: mascotHover 4.5s ease-in-out infinite alternate;
  transform-origin: center bottom;
  pointer-events: none;
}

.mascot-art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 78%;
  height: 34%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(141, 71, 255, 0.36), transparent 68%);
  filter: blur(10px);
  transform: translateX(-50%);
  z-index: -1;
}

.price-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px;
}

.price-card.featured {
  border-color: rgba(141, 71, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(141, 71, 255, 0.26), 0 28px 80px rgba(141, 71, 255, 0.28);
}

.price-card p {
  margin: 0;
  color: #c7d6ff;
  font-weight: 900;
}

.price-card h3 {
  margin: 0;
  font-size: 2.6rem;
  transition: transform 180ms ease, color 180ms ease;
}

.price-card small {
  font-size: 1rem;
}

.price-card.is-yearly h3 {
  color: #93f0ff;
  transform: translateY(-1px);
}

.price-card.is-yearly [data-plan-note] {
  color: #d8f8ff;
}

.price-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.price-card li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--green);
}

.cta-band {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  margin-block: 24px 34px;
  border: 1px solid rgba(141, 71, 255, 0.45);
  border-radius: 24px;
  padding: 26px 34px;
  background:
    radial-gradient(circle at 75% 40%, rgba(34, 215, 255, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(141, 71, 255, 0.82), rgba(38, 69, 185, 0.76));
  box-shadow: 0 22px 70px rgba(141, 71, 255, 0.28);
}

.cta-band h2 {
  margin-bottom: 6px;
  font-size: clamp(2rem, 3vw, 3.4rem);
}

.cta-band p,
.cta-band span {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.cta-art {
  min-height: 120px;
  border-radius: 18px;
  background-image:
    linear-gradient(90deg, rgba(3, 7, 22, 0.1), rgba(3, 7, 22, 0.46)),
    url("/assets/homepage/cta/creator-world-banner.png");
  background-position: center;
}

.home-footer {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  padding: 28px 0 48px;
}

.home-footer nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.home-footer strong {
  margin-bottom: 6px;
}

.social-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-row a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(109, 236, 255, 0.28);
  border-radius: 11px;
  color: #94f2ff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 90, 246, 0.32), transparent 36%),
    rgba(34, 215, 255, 0.12);
  box-shadow: 0 12px 28px rgba(20, 177, 255, 0.12);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.social-row a:hover {
  transform: translateY(-2px);
  border-color: rgba(133, 92, 255, 0.82);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(125, 72, 255, 0.28);
}

.social-row svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@keyframes slotSheen {
  0%, 60%, 100% {
    transform: translateX(-120%);
  }
  76% {
    transform: translateX(120%);
  }
}

@keyframes atmosphereShift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@keyframes particleDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-120px, 160px, 0);
  }
}

@keyframes galaxyBreathe {
  from {
    opacity: 0.08;
    filter: blur(1.4px) saturate(1.05);
  }
  to {
    opacity: 0.18;
    filter: blur(0.5px) saturate(1.35);
  }
}

@keyframes galaxySpin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes mascotHover {
  from {
    transform: translateY(8px) rotate(-1deg);
  }
  to {
    transform: translateY(-12px) rotate(1.2deg);
  }
}

@keyframes fogFloat {
  from {
    transform: translate3d(-12px, -8px, 0) scale(1);
  }
  to {
    transform: translate3d(18px, 16px, 0) scale(1.08);
  }
}

@keyframes objectFloat {
  from {
    transform: translate3d(0, -10px, 0) rotate(-3deg);
  }
  to {
    transform: translate3d(0, 14px, 0) rotate(4deg);
  }
}

@keyframes streakDrift {
  from {
    transform: translate3d(-10px, 0, 0) rotate(-2deg) scale(1);
  }
  to {
    transform: translate3d(16px, 10px, 0) rotate(3deg) scale(1.04);
  }
}

@keyframes iconPulse {
  0% {
    transform: scale(0.94);
    opacity: 0.65;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

@keyframes orbPulse {
  from {
    filter: saturate(1.02) brightness(0.96);
    transform: scale(0.985);
  }
  to {
    filter: saturate(1.22) brightness(1.08);
    transform: scale(1.015);
  }
}

@keyframes orbSpin {
  from {
    transform: rotate(0deg) scaleX(1.05);
  }
  to {
    transform: rotate(360deg) scaleX(1.05);
  }
}

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

@media (max-width: 1160px) {
  .desktop-nav {
    display: none;
  }

  .hero,
  .safety-section,
  .pricing-layout,
  .cta-band,
  .home-footer {
    grid-template-columns: 1fr;
  }

  .path-grid,
  .world-grid,
  .safety-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .describe-anything {
    grid-template-columns: 1fr;
  }

  .describe-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .describe-actions-left {
    order: 2;
  }

  .describe-orb-wrap {
    order: 1;
  }

  .describe-actions-right {
    order: 3;
  }

  .describe-card,
  .describe-card:hover,
  .describe-actions-right .describe-card:hover {
    transform: none;
  }

  .tool-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-track article::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .home-header,
  .hero,
  .home-section,
  .cta-band,
  .home-footer {
    width: min(100% - 24px, 1440px);
  }

  .home-header {
    display: grid;
    grid-template-columns: 1fr 48px;
  }

  .header-actions {
    display: none;
  }

  .hamburger {
    display: grid;
    justify-self: end;
    place-items: center;
    gap: 5px;
    width: 46px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
  }

  .hamburger span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .mobile-nav {
    grid-column: 1 / -1;
    display: none;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: rgba(6, 12, 34, 0.96);
  }

  .mobile-nav a:not(.button) {
    display: block;
    padding: 13px 8px;
    color: var(--muted);
    font-weight: 900;
  }

  .mobile-nav .button {
    width: 100%;
    margin-top: 8px;
  }

  .menu-toggle:checked ~ .mobile-nav {
    display: block;
  }

  h1 {
    font-size: 3.05rem;
  }

  .hero {
    min-height: auto;
    padding-top: 28px;
  }

  .image-slot-hero {
    min-height: 340px;
  }

  .section-title.split,
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .path-grid,
  .world-grid,
  .safety-grid,
  .describe-actions,
  .tool-strip,
  .flow-track {
    grid-template-columns: 1fr;
  }

  .describe-anything {
    min-height: auto;
    padding: 16px;
    border-radius: 20px;
  }

  .describe-orb-wrap {
    min-height: 370px;
  }

  .describe-orb {
    width: min(350px, 80vw);
    padding: 34px;
  }

  .describe-orb-content {
    width: min(230px, 100%);
  }

  .describe-orb-content h2 {
    font-size: 1.35rem;
  }

  .describe-card {
    min-height: 82px;
    grid-template-columns: 58px minmax(0, 1fr) 18px;
  }

  .describe-mic {
    bottom: 0;
    width: 88px;
  }

  .describe-caption {
    position: static;
    transform: none;
    margin-top: -8px;
  }

  .billing-toggle {
    align-self: stretch;
    overflow-x: auto;
  }
}

@media (max-width: 960px) {
  .describe-anything {
    min-height: 620px;
    padding: 260px 18px 34px;
  }

  .describe-copy h2 {
    font-size: clamp(2.6rem, 11vw, 4.8rem);
  }

  .describe-chips {
    justify-content: flex-start;
    padding-inline: 2px;
  }
}

@media (max-width: 620px) {
  .describe-anything {
    border-radius: 22px;
    min-height: 590px;
    padding: 230px 14px 28px;
  }

  .describe-hero-art {
    object-position: center top;
  }

  .describe-copy .eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.7rem;
  }

  .describe-copy h2 {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
  }

  .describe-copy > p:not(.eyebrow) {
    font-size: 0.98rem;
  }

  .describe-prompt {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 8px;
  }

  .describe-upload-button {
    display: none;
  }

  .describe-prompt-button {
    width: 48px;
  }

  .describe-chips button {
    min-height: 46px;
    padding-inline: 14px;
  }
}