:root {
  --text: #1a2240;
  --accent-1: #ff7a2f;
  --accent-2: #ff4f9f;
  --line: rgba(26, 34, 64, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, #ffe88f, transparent 35%),
    radial-gradient(circle at 82% 16%, #b0f0ff, transparent 30%),
    linear-gradient(165deg, #fffaf0, #ecf5ff 60%, #f6edff);
  min-height: 100vh;
  overflow-x: hidden;
}

.cloud,
.bubble {
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

.cloud {
  width: 220px;
  height: 72px;
  background: rgba(255,255,255,.64);
  border-radius: 999px;
  filter: blur(1px);
  animation: drift 16s linear infinite;
}

.cloud-a { top: 80px; left: -240px; }
.cloud-b { top: 180px; left: -300px; animation-delay: -8s; }

.bubble {
  border-radius: 50%;
  filter: blur(4px);
  animation: float 8s ease-in-out infinite;
}

.bubble-a { width: 180px; height: 180px; background: rgba(255, 176, 107, .45); right: -40px; top: 40%; }
.bubble-b { width: 150px; height: 150px; background: rgba(156, 212, 255, .45); left: -50px; bottom: 40px; animation-delay: -2.5s; }

.container,
.header {
  width: min(1080px, calc(100% - 30px));
  margin: 0 auto;
}

.header {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: sticky;
  top: 10px;
  z-index: 10;
}

.logo {
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
}

nav { display: flex; gap: 16px; }
nav a { text-decoration: none; color: var(--text); font-weight: 700; opacity: .85; }

.switch {
  text-decoration: none;
  color: white;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

.hero {
  margin-top: 34px;
}

.label {
  display: inline-block;
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
}

h1 {
  margin: 14px 0 12px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  max-width: 13ch;
}

h2 {
  margin: 0 0 18px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.4rem, 3.6vw, 2.4rem);
}

.hero p { max-width: 58ch; font-size: clamp(1rem, 1.8vw, 1.18rem); }

.actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-badges {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-badges span {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 800;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.95);
  animation: bob 3.3s ease-in-out infinite;
}

.hero-badges span:nth-child(2) {
  animation-delay: -.8s;
}

.hero-badges span:nth-child(3) {
  animation-delay: -1.6s;
}

.hero-stage {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.54);
}

.btn {
  border: 0;
  text-decoration: none;
  color: white;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 12px 24px rgba(255, 79, 159, .24);
}

.link {
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
}

.cards {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(8px);
}

.fun-zone {
  margin-top: 46px;
}

.fun-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fun-item {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.86);
  background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
}

.fun-item .emoji {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(255,255,255,.8);
  animation: bounce 2.7s ease-in-out infinite;
}

.fun-item:nth-child(2) .emoji { animation-delay: -.8s; }
.fun-item:nth-child(3) .emoji { animation-delay: -1.2s; }
.fun-item:nth-child(4) .emoji { animation-delay: -1.8s; }

.program {
  margin-top: 48px;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.program-grid div {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
}

.program-grid span {
  font-family: "Unbounded", sans-serif;
  color: #ff6447;
  font-size: .92rem;
}

.progress {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 12px;
}

.progress-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.58);
}

.meter {
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(26, 34, 64, 0.08);
  overflow: hidden;
}

.meter span {
  display: block;
  width: var(--w);
  min-width: 180px;
  padding: 10px 12px;
  color: white;
  font-size: .86rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  animation: fillin 1.2s ease both;
}

.stickers {
  display: grid;
  gap: 10px;
}

.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 800;
  border: 1px dashed rgba(26, 34, 64, 0.25);
  background: rgba(255,255,255,.58);
  transform: rotate(-1.5deg);
}

.sticker.s2 { transform: rotate(1.8deg); }
.sticker.s3 { transform: rotate(-2.2deg); }

.reviews {
  margin-top: 48px;
}

.reviews-track {
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding-bottom: 4px;
}

.review {
  flex: 0 0 300px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.62);
  animation: marquee 17s linear infinite;
}

.review:nth-child(2) { animation-delay: -4s; }
.review:nth-child(3) { animation-delay: -8s; }
.review:nth-child(4) { animation-delay: -12s; }

.speech-lab,
.numbers,
.formats,
.weekplan,
.faq,
.achievements,
.route,
.games,
.team,
.memo,
.animal-letters,
.paw-route,
.letter-rain,
.zoo-facts,
.sound-battle,
.planet-sounds,
.treasure-map,
.mood-meter,
.voice-wave,
.star-board,
.letter-galaxy,
.sound-portal,
.sun-speech {
  margin-top: 48px;
}

.lab-grid,
.numbers-grid,
.formats-grid,
.week-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lab-item,
.numbers-grid article,
.format-card,
.week-item {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.6);
}

.lab-item {
  position: relative;
  overflow: hidden;
}

.lab-item::after {
  content: "";
  position: absolute;
  inset: auto -20% -50% -20%;
  height: 80px;
  background: linear-gradient(90deg, rgba(255,122,47,.22), rgba(255,79,159,.22));
  border-radius: 100%;
  animation: wave 3s linear infinite;
}

.numbers-grid strong {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 8px;
}

.numbers-grid p {
  margin: 0;
}

.format-card {
  position: relative;
}

.format-card span {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}

.week-item {
  display: grid;
  gap: 8px;
  align-content: start;
}

.week-item b {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2));
  color: #fff;
  animation: pulse-soft 2.2s ease-in-out infinite;
}

.week-item:nth-child(2) b {
  animation-delay: -.7s;
}

.week-item:nth-child(3) b {
  animation-delay: -1.3s;
}

.week-item p {
  margin: 0;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px;
  font: inherit;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.faq-a p {
  margin: 0;
  padding: 0 14px 14px;
}

.faq-item.active .faq-a {
  max-height: 120px;
}

.achievements-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ach-item {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.62);
  animation: rise 3s ease-in-out infinite;
}

.ach-item:nth-child(2) { animation-delay: -.6s; }
.ach-item:nth-child(3) { animation-delay: -1.2s; }
.ach-item:nth-child(4) { animation-delay: -1.8s; }

.ach-item strong {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.ach-item p {
  margin: 0;
}

.route-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 30px;
}

.route-line::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

.route-dot {
  position: absolute;
  top: 9px;
  left: 6%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--accent-1);
  animation: travel 5.5s ease-in-out infinite;
}

.route-line article {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.62);
  text-align: center;
  font-weight: 800;
}

.games-tape {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.game {
  flex: 0 0 220px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(120deg, rgba(255,255,255,.75), rgba(255,255,255,.5));
  font-weight: 800;
  animation: slideX 14s linear infinite;
}

.game:nth-child(2) { animation-delay: -2s; }
.game:nth-child(3) { animation-delay: -4s; }
.game:nth-child(4) { animation-delay: -6s; }
.game:nth-child(5) { animation-delay: -8s; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.team-card {
  perspective: 1000px;
}

.team-inner {
  position: relative;
  min-height: 170px;
  transition: transform .6s ease;
  transform-style: preserve-3d;
}

.team-card:hover .team-inner {
  transform: rotateY(180deg);
}

.team-front,
.team-back {
  position: absolute;
  inset: 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.65);
  backface-visibility: hidden;
}

.team-front p {
  margin: 8px 0 0;
}

.team-back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  text-align: center;
}

.team-back p {
  margin: 0;
}

.memo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.memo-grid article {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(26, 34, 64, 0.2);
  background: rgba(255,255,255,.62);
}

.memo-grid span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2));
  margin-bottom: 8px;
}

.memo-grid p {
  margin: 0;
}

.animal-grid,
.zoo-grid,
.battle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.animal-card {
  position: relative;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.66);
  overflow: hidden;
}

.animal-face {
  font-size: 2rem;
  animation: bob 2.9s ease-in-out infinite;
}

.letter-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2));
  animation: pulse-soft 2s ease-in-out infinite;
}

.paw-line {
  position: relative;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.62);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.paw-line span {
  text-align: center;
  font-weight: 800;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.74);
}

.paw-runner {
  position: absolute;
  top: -12px;
  left: 8px;
  font-style: normal;
  font-size: 1.4rem;
  animation: pawrun 6s linear infinite;
}

.letters-cloud {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.62);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.letters-cloud span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", sans-serif;
  background: linear-gradient(140deg, rgba(255,122,47,.18), rgba(255,79,159,.2));
  border: 1px solid rgba(255,255,255,.95);
  animation: float-letter 3.2s ease-in-out infinite;
}

.letters-cloud span:nth-child(2n) { animation-delay: -.7s; }
.letters-cloud span:nth-child(3n) { animation-delay: -1.4s; }

.zoo-grid article {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
  animation: rise 3.2s ease-in-out infinite;
}

.zoo-grid article:nth-child(2) { animation-delay: -.8s; }
.zoo-grid article:nth-child(3) { animation-delay: -1.6s; }

.zoo-grid p {
  margin: 0;
}

.battle-card,
.battle-vs {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
  min-height: 140px;
  display: grid;
  place-items: center;
  text-align: center;
}

.battle-card b {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: #ff6447;
  animation: flick 1.8s ease-in-out infinite;
}

.battle-card p {
  margin: 6px 0 0;
}

.battle-vs {
  font-family: "Unbounded", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .08em;
  animation: pulse-soft 2s ease-in-out infinite;
}

.planet-track,
.map-path,
.mood-grid,
.star-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.planet {
  position: relative;
  min-height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.45));
  display: grid;
  place-items: center;
  text-align: center;
  animation: orbit 5.5s ease-in-out infinite;
}

.planet b {
  font-family: "Unbounded", sans-serif;
  font-size: 1.5rem;
  display: block;
}

.planet p {
  margin: 6px 0 0;
  font-weight: 700;
}

.p2 { animation-delay: -.9s; }
.p3 { animation-delay: -1.8s; }
.p4 { animation-delay: -2.7s; }

.map-path {
  position: relative;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.62);
}

.map-path::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 2px;
  border-top: 2px dashed rgba(255,122,47,.75);
  transform: translateY(-50%);
}

.map-path article {
  position: relative;
  z-index: 1;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  background: rgba(255,255,255,.84);
  animation: hop 3.2s ease-in-out infinite;
}

.map-path article:nth-child(2) { animation-delay: -.5s; }
.map-path article:nth-child(3) { animation-delay: -1s; }
.map-path article:nth-child(4) { animation-delay: -1.5s; }
.map-path article:nth-child(5) { animation-delay: -2s; }

.mood-grid article,
.star-grid article {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
  text-align: center;
}

.mood-grid span {
  display: block;
  font-size: 1.8rem;
  animation: moodpop 2.4s ease-in-out infinite;
}

.mood-grid article:nth-child(2) span { animation-delay: -.5s; }
.mood-grid article:nth-child(3) span { animation-delay: -1s; }
.mood-grid article:nth-child(4) span { animation-delay: -1.5s; }

.mood-grid p {
  margin: 6px 0 0;
  font-weight: 700;
}

.wave-bars {
  min-height: 120px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  align-items: end;
  padding: 16px;
}

.wave-bars i {
  display: block;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-1));
  animation: equalize 1.1s ease-in-out infinite;
}

.wave-bars i:nth-child(2) { animation-delay: -.1s; }
.wave-bars i:nth-child(3) { animation-delay: -.2s; }
.wave-bars i:nth-child(4) { animation-delay: -.3s; }
.wave-bars i:nth-child(5) { animation-delay: -.4s; }
.wave-bars i:nth-child(6) { animation-delay: -.5s; }
.wave-bars i:nth-child(7) { animation-delay: -.6s; }
.wave-bars i:nth-child(8) { animation-delay: -.7s; }

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

.star-grid b {
  display: block;
  font-size: 1.8rem;
  animation: twinkle 2.3s ease-in-out infinite;
}

.star-grid article:nth-child(2) b { animation-delay: -.7s; }
.star-grid article:nth-child(3) b { animation-delay: -1.4s; }

.star-grid p {
  margin: 6px 0 0;
  font-weight: 700;
}

.letter-galaxy {
  perspective: 1000px;
}

.galaxy-scene {
  position: relative;
  min-height: 320px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,.35)),
    linear-gradient(135deg, rgba(255,122,47,.2), rgba(255,79,159,.18));
  overflow: hidden;
  transform-style: preserve-3d;
}

.letter-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.letter-ring span {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", sans-serif;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 14px rgba(26,34,64,.12);
}

.ring-a { animation: spin3d 10s linear infinite; }
.ring-b { animation: spin3d-rev 12s linear infinite; }

.ring-a span:nth-child(1), .ring-b span:nth-child(1) { transform: translate(0px, -118px); }
.ring-a span:nth-child(2), .ring-b span:nth-child(2) { transform: translate(104px, -58px); }
.ring-a span:nth-child(3), .ring-b span:nth-child(3) { transform: translate(104px, 58px); }
.ring-a span:nth-child(4), .ring-b span:nth-child(4) { transform: translate(0px, 118px); }
.ring-a span:nth-child(5), .ring-b span:nth-child(5) { transform: translate(-104px, 58px); }
.ring-a span:nth-child(6), .ring-b span:nth-child(6) { transform: translate(-104px, -58px); }

.galaxy-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: radial-gradient(circle, #fff, #ffd8c0 60%, #ff8ea0);
  box-shadow: 0 0 0 12px rgba(255,255,255,.35), 0 0 42px rgba(255,122,47,.45);
  animation: corePulse 2.4s ease-in-out infinite;
}

.galaxy-note {
  margin: 10px 0 0;
}

.portal-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.portal {
  position: relative;
  min-height: 300px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.58);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.portal-layer {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255,122,47,.45);
  animation: portalSpin 8s linear infinite;
}

.layer-1 { width: 210px; height: 210px; }
.layer-2 { width: 160px; height: 160px; animation-direction: reverse; animation-duration: 6s; border-color: rgba(255,79,159,.5); }
.layer-3 { width: 110px; height: 110px; animation-duration: 4.5s; border-color: rgba(255,173,64,.62); }

.portal-center {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: "Unbounded", sans-serif;
  font-size: .9rem;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 0 0 10px rgba(255,255,255,.4);
  animation: portalPulse 2s ease-in-out infinite;
}

.portal-info {
  display: grid;
  gap: 10px;
}

.portal-info article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.64);
}

.portal-info b {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(100deg, var(--accent-1), var(--accent-2));
}

.portal-info p {
  margin: 0;
}

.sun-stage {
  position: relative;
  min-height: 360px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 225, 133, .42), rgba(255,255,255,.35) 40%, rgba(255,255,255,.2) 72%),
    linear-gradient(140deg, rgba(255,193,84,.24), rgba(255,128,114,.18));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.sun-core {
  position: relative;
  z-index: 3;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle, #fff8d7, #ffd060 55%, #ff9947 88%);
  box-shadow: 0 0 0 12px rgba(255,255,255,.36), 0 0 60px rgba(255,179,67,.56);
  animation: sunPulse 2.6s ease-in-out infinite;
}

.sun-face {
  font-size: 2rem;
  line-height: 1;
}

.sun-core p {
  margin: 4px 0 0;
  font-family: "Unbounded", sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
}

.sun-rays {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,183,66,.85) 0deg 12deg,
      transparent 12deg 24deg,
      rgba(255,129,102,.75) 24deg 36deg,
      transparent 36deg 48deg,
      rgba(255,183,66,.85) 48deg 60deg,
      transparent 60deg 72deg,
      rgba(255,129,102,.75) 72deg 84deg,
      transparent 84deg 96deg,
      rgba(255,183,66,.85) 96deg 108deg,
      transparent 108deg 120deg,
      rgba(255,129,102,.75) 120deg 132deg,
      transparent 132deg 144deg,
      rgba(255,183,66,.85) 144deg 156deg,
      transparent 156deg 168deg,
      rgba(255,129,102,.75) 168deg 180deg,
      transparent 180deg 192deg,
      rgba(255,183,66,.85) 192deg 204deg,
      transparent 204deg 216deg,
      rgba(255,129,102,.75) 216deg 228deg,
      transparent 228deg 240deg,
      rgba(255,183,66,.85) 240deg 252deg,
      transparent 252deg 264deg,
      rgba(255,129,102,.75) 264deg 276deg,
      transparent 276deg 288deg,
      rgba(255,183,66,.85) 288deg 300deg,
      transparent 300deg 312deg,
      rgba(255,129,102,.75) 312deg 324deg,
      transparent 324deg 336deg,
      rgba(255,183,66,.85) 336deg 348deg,
      transparent 348deg 360deg);
  filter: blur(.2px);
  animation: raySpin 15s linear infinite;
}

.sun-orbit {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(255,154,89,.62);
  animation: orbitRing 10s linear infinite;
}

.sun-orbit span {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", sans-serif;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 14px rgba(26,34,64,.12);
}

.sun-orbit span:nth-child(1) { left: 50%; top: -20px; margin-left: -21px; }
.sun-orbit span:nth-child(2) { right: 28px; top: 44px; }
.sun-orbit span:nth-child(3) { right: -8px; top: 128px; }
.sun-orbit span:nth-child(4) { left: 50%; bottom: -20px; margin-left: -21px; }
.sun-orbit span:nth-child(5) { left: -8px; top: 128px; }
.sun-orbit span:nth-child(6) { left: 28px; top: 44px; }

.sun-planets {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  z-index: 4;
}

.sun-planets article {
  padding: 10px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.72);
  font-weight: 800;
  animation: floatPlanet 3.4s ease-in-out infinite;
}

.sun-planets article:nth-child(2) { animation-delay: -.9s; }
.sun-planets article:nth-child(3) { animation-delay: -1.8s; }

.cta {
  margin: 52px 0 28px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.58);
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
}

input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
}

.reveal {
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .7s ease, transform .8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 360px)); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-24px); }
}

@keyframes fillin {
  0% { width: 0; }
}

@keyframes wave {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(30%); }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes travel {
  0% { left: 6%; }
  50% { left: 50%; }
  100% { left: calc(94% - 18px); }
}

@keyframes slideX {
  0% { transform: translateX(0); }
  100% { transform: translateX(-32px); }
}

@keyframes pawrun {
  0% { left: 8px; }
  100% { left: calc(100% - 34px); }
}

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

@keyframes flick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}

@keyframes orbit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes moodpop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

@keyframes equalize {
  0%, 100% { height: 24px; }
  50% { height: 84px; }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .75; }
}

@keyframes spin3d {
  0% { transform: rotateX(70deg) rotateZ(0deg); }
  100% { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes spin3d-rev {
  0% { transform: rotateX(70deg) rotateZ(360deg); }
  100% { transform: rotateX(70deg) rotateZ(0deg); }
}

@keyframes corePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes portalSpin {
  0% { transform: rotate(0deg) scale(1); opacity: .8; }
  50% { transform: rotate(180deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: .8; }
}

@keyframes portalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes raySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbitRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes floatPlanet {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 880px) {
  nav { display: none; }
  .hero-stage,
  .cards,
  .fun-grid,
  .program-grid,
  .progress,
  .lab-grid,
  .numbers-grid,
  .formats-grid,
  .week-track,
  .achievements-row,
  .team-grid,
  .memo-grid,
  .animal-grid,
  .zoo-grid,
  .battle-grid,
  .planet-track,
  .map-path,
  .mood-grid,
  .star-grid,
  .portal-wrap,
  .cta-form { grid-template-columns: 1fr; }

  .review {
    animation: none;
    flex-basis: auto;
  }

  .reviews-track {
    display: grid;
    grid-template-columns: 1fr;
  }

  .game {
    animation: none;
    flex-basis: auto;
  }

  .games-tape {
    display: grid;
    grid-template-columns: 1fr;
  }

  .route-line {
    padding-top: 0;
  }

  .route-line::before,
  .route-dot {
    display: none;
  }

  .paw-line {
    grid-template-columns: 1fr;
  }

  .paw-runner {
    display: none;
  }

  .sun-stage {
    min-height: 430px;
  }

  .sun-planets {
    grid-template-columns: 1fr;
    inset: auto 12px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}