html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');

* { box-sizing: border-box; }

:root {
  --ink: #070b24;
  --purple: #9b22ff;
  --pink: #f231a9;
  --yellow: #ffbf00;
  --cream: #fff8e8;
  --page-bg: var(--cream);
  --nav-text: #27314e;
  --magic-btn-bg: #f39bd1;
  --quest-btn-bg: var(--yellow);
  --logo-width: 215px;
  --header-height: 90px;
  --nav-font-size: 16px;
  --hero-title-size: clamp(54px, 6vw, 84px);
  --hero-text-size: 24px;
}

body {
  margin: 0;
  font-family: "Outfit", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(10,14,45,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,14,45,.045) 1px, transparent 1px),
    radial-gradient(circle at 8% 28%, rgba(255,55,170,.16), transparent 22%),
    radial-gradient(circle at 90% 20%, rgba(255,200,0,.22), transparent 24%),
    var(--page-bg);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  overflow-x: hidden;
}

.site-header {
  width: min(1500px, calc(100% - 48px));
  height: var(--header-height);
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { margin-right: auto; }
.brand img { width: var(--logo-width); display: block; }

.nav-links { display: flex; align-items: center; gap: 34px; margin: 0 auto; }
.nav-links a {
  position: relative;
  color: var(--nav-text);
  text-decoration: none;
  font-size: var(--nav-font-size);
  font-weight: 900;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 4px;
  background: var(--yellow);
  border-radius: 999px;
  transition: width .25s ease;
}
.nav-links a:hover { color: var(--purple); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { margin-left: auto; display: flex; gap: 16px; }
.magic-btn,
.quest-btn {
  text-decoration: none;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 15px 24px;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.magic-btn { background: var(--magic-btn-bg); }
.quest-btn { background: var(--quest-btn-bg); }
.blast-icon { display: inline-block; animation: blastPop 1.5s infinite; }
.magic-btn:hover,
.quest-btn:hover,
.primary-btn:hover,
.secondary-btn:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--ink); }
.menu-btn { display: none; }

.hero {
  width: min(1200px, calc(100% - 40px));
  margin: 75px auto 40px;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--purple);
  color: #ffe94c;
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 34px;
}
.rocket-icon { display: inline-block; animation: rocketWiggle 1.6s infinite ease-in-out; }
.hero h1 {
  margin: 0;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: var(--hero-title-size);
  line-height: .95;
  letter-spacing: -4px;
  font-weight: 700;
}
.highlight-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-top: 12px;
  color: var(--purple);
  background: #fff29a;
  border: 5px solid var(--ink);
  border-radius: 18px;
  padding: 8px 28px 13px;
  box-shadow: 7px 7px 0 rgba(7,11,36,.12);
  transform: rotate(-1deg);
}
.title-spark { position: absolute; right: -22px; top: -22px; font-size: 42px; animation: sparkleDance 1.8s infinite ease-in-out; }
.hero p { max-width: 760px; margin: 32px 0 0; color: #303a58; font-size: var(--hero-text-size); line-height: 1.55; font-weight: 800; }
.hero-buttons { display: flex; gap: 22px; margin-top: 36px; }
.primary-btn,
.secondary-btn {
  min-height: 68px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 4px solid var(--ink);
  border-radius: 17px;
  font-weight: 900;
  font-size: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-btn { background: var(--pink); color: white; box-shadow: 6px 6px 0 var(--ink); }
.secondary-btn { background: white; color: var(--ink); box-shadow: 4px 4px 0 rgba(7,11,36,.08); }
.proof-pills { display: flex; gap: 16px; flex-wrap: nowrap; margin-top: 42px; }
.proof-pills span { white-space: nowrap; background: rgba(255,255,255,.78); border: 2px solid rgba(7,11,36,.15); border-radius: 999px; padding: 11px 18px; font-weight: 900; color: #526078; }

.hero-visual-wrap { position: relative; width: 100%; }
.hero-visual-card {
  height: 430px;
  border: 5px solid var(--ink);
  border-radius: 34px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), rgba(255,247,221,.65));
  box-shadow: 0 24px 60px rgba(140,35,255,.20), 9px 9px 0 rgba(7,11,36,.13);
  overflow: hidden;
}
.hero-art { position: absolute; inset: 0; }
.layer { position: absolute; user-select: none; pointer-events: none; will-change: transform; }
.island-main { width: 520px; right: -30px; bottom: -80px; z-index: 3; animation: islandFloat 7s ease-in-out infinite; }
.nova { width: 210px; right: 170px; top: 58px; z-index: 7; animation: novaFloat 4.5s ease-in-out infinite; }
.stars { width: 400px; right: 55px; top: 12px; z-index: 6; animation: twinkle 3s ease-in-out infinite; }
.heart { width: 120px; right: 88px; top: 190px; z-index: 6; animation: heartbeat 2.2s ease-in-out infinite; }
.paint { width: 145px; right: -8px; top: 180px; z-index: 6; animation: paintSwing 3.8s ease-in-out infinite; }
.cloud-left { width: 175px; left: 35px; top: 20px; animation: cloudDriftLeft 9s ease-in-out infinite; }
.cloud-right { width: 150px; right: 22px; top: 48px; animation: cloudDriftRight 11s ease-in-out infinite; }
.island-small { width: 115px; left: 30px; bottom: 105px; animation: smallIslandFloat 6s ease-in-out infinite; }
.level-pill { position: absolute; right: -24px; top: -28px; z-index: 10; background: #fff05c; border: 4px solid var(--ink); border-radius: 999px; padding: 14px 24px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.nova-tag { position: absolute; left: -24px; bottom: -24px; z-index: 10; background: #1fe79c; border: 4px solid var(--ink); border-radius: 14px; padding: 12px 22px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }

.comparison-section { position: relative; overflow: hidden; background: #9b22ff; padding: 110px 24px 130px; color: white; }
.comparison-section::before,
.comparison-section::after { content: ""; position: absolute; left: -5%; width: 110%; height: 70px; background: #fff8e8; }
.comparison-section::before { top: -35px; border-radius: 0 0 50% 50%; }
.comparison-section::after { bottom: -35px; border-radius: 50% 50% 0 0; }
.comparison-inner { width: min(1180px, 100%); margin: 0 auto; position: relative; z-index: 2; }
.comparison-heading { text-align: center; margin-bottom: 70px; }
.comparison-badge { display: inline-block; background: #ffbf00; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 9px 18px; font-size: 12px; font-weight: 900; }
.comparison-heading h2 { margin: 22px 0 12px; font-size: clamp(42px, 5vw, 70px); line-height: .95; font-weight: 900; }
.comparison-heading h2 span { color: #ffea3d; text-decoration: underline wavy #f231a9; }
.comparison-heading p { max-width: 640px; margin: 0 auto; font-size: 18px; font-weight: 800; color: #f3ddff; }
.comparison-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.comparison-card { position: relative; background: #fff8e8; color: var(--ink); border: 5px solid var(--ink); border-radius: 30px; padding: 34px; box-shadow: 8px 8px 0 rgba(7,11,36,.25); }
.active-card { background: #eafff6; }
.comparison-card h3 { margin: 0; font-size: 28px; font-weight: 900; }
.comparison-card small { display: block; margin: 6px 0 30px; font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.comparison-item { display: flex; gap: 14px; align-items: flex-start; background: white; border: 2px solid rgba(7,11,36,.25); border-radius: 14px; padding: 16px; margin-bottom: 18px; font-weight: 900; }
.comparison-item p { margin: 5px 0 0; font-size: 14px; font-weight: 700; color: #526078; }
.recommended-label { position: absolute; right: 24px; top: -20px; background: #f231a9; color: white; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 14px; font-size: 12px; font-weight: 900; transform: rotate(3deg); }
.comparison-outcome { margin-top: 24px; padding-top: 20px; border-top: 2px dashed rgba(7,11,36,.25); text-align: center; font-weight: 900; font-size: 14px; }
.bad { color: #f2315f; }
.good { color: #00a86b; }
.quote-box { max-width: 700px; margin: 55px auto 0; background: #ffdf2e; color: var(--ink); border: 4px solid var(--ink); border-radius: 16px; padding: 24px 32px; text-align: center; font-weight: 900; box-shadow: 6px 6px 0 rgba(7,11,36,.25); transform: rotate(-1deg); }
.quote-box span { display: block; margin-top: 10px; color: #7c1fff; font-size: 12px; }
.comparison-spark { position: absolute; font-size: 54px; opacity: .35; animation: sparkleDance 2s infinite ease-in-out; }
.spark-left { left: 50px; top: 90px; }
.spark-right { right: 60px; bottom: 70px; }

.worlds-section {
  padding: 90px 0 110px;
  background: linear-gradient(180deg, #fff8e8, #f7f2ff);
  position: relative;
}
.worlds-header {
  width: min(1450px, calc(100% - 80px));
  margin: 0 auto 42px;
}
.worlds-header span:first-child { color: var(--purple); font-size: 14px; letter-spacing: 3px; font-weight: 900; }
.worlds-header h2 { margin: 10px 0; font-family: "Space Grotesk", "Outfit", sans-serif; font-size: clamp(42px, 5vw, 62px); font-weight: 700; line-height: 1.05; letter-spacing: -2px; }
.world-highlight { display: inline-block; position: relative; color: var(--purple); }
.world-highlight .title-spark { right: -24px; top: -18px; font-size: 34px; }
.worlds-header p { margin: 0; font-size: 20px; font-weight: 700; color: #56627a; }

.worlds-carousel {
  position: relative;
  width: min(1450px, calc(100% - 100px));
  margin: 0 auto;
}
.worlds-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 120px) / 6);
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  padding: 8px 8px 18px;
  scrollbar-width: none;
}
.worlds-track::-webkit-scrollbar { display: none; }
.world-card {
  background: rgba(255,255,255,.9);
  border: 4px solid rgba(7,11,36,.18);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 6px 8px 0 rgba(7,11,36,.18);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
}
.world-card:hover {
  transform: translateY(-12px) scale(1.04) rotate(-1deg);
  box-shadow: 10px 14px 0 rgba(7,11,36,.22);
  border-color: rgba(155,34,255,.45);
}
.world-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  transition: transform .35s ease;
}
.world-card:hover img { transform: scale(1.08); }
.world-info { padding: 12px 6px 8px; transition: transform .35s ease; }
.world-card:hover .world-info { transform: translateY(-3px); }
.world-info h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.world-info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #303a58;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.world-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: white;
  box-shadow: 4px 4px 0 rgba(7,11,36,.18);
  font-size: 38px;
  font-weight: 900;
  cursor: pointer;
  z-index: 20;
  transition: transform .2s ease, box-shadow .2s ease;
}
.world-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 7px 7px 0 rgba(7,11,36,.22); }
.world-arrow-left { left: -28px; }
.world-arrow-right { right: -28px; }

.fade-pop { opacity: 0; transform: translateY(45px) scale(.96); transition: opacity .7s ease, transform .7s ease; }
.fade-pop.show { opacity: 1; transform: translateY(0) scale(1); }
.confetti-piece { position: fixed; top: -20px; width: 12px; height: 12px; z-index: 9999; pointer-events: none; border-radius: 3px; animation: confettiFall linear forwards; }

@keyframes rocketWiggle { 0%,100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-3px); } }
@keyframes sparkleDance { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(15deg); } }
@keyframes blastPop { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(-12deg); } }
@keyframes novaFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes islandFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes smallIslandFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes cloudDriftLeft { 0%,100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
@keyframes cloudDriftRight { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
@keyframes twinkle { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 35% { transform: scale(1.08); } 55% { transform: scale(.98); } }
@keyframes paintSwing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

@media (max-width: 1100px) {
  .site-header { position: relative; }
  .nav-links, .nav-actions { display: none; }
  .menu-btn { display: block; border: 4px solid var(--ink); background: var(--yellow); border-radius: 12px; padding: 8px 14px; font-size: 24px; font-weight: 900; cursor: pointer; }
  .nav-links { position: absolute; top: 90px; right: 0; width: 260px; background: white; border: 4px solid var(--ink); border-radius: 18px; padding: 18px; z-index: 999; box-shadow: 6px 6px 0 var(--ink); }
  .nav-links.show-mobile { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero { grid-template-columns: 1fr; }
  .comparison-cards { grid-template-columns: 1fr; }
  .worlds-track { grid-auto-columns: calc((100% - 48px) / 3); }
}

@media (max-width: 620px) {
  .site-header { width: calc(100% - 28px); }
  .brand img { width: 170px; }
  .hero { width: calc(100% - 28px); margin-top: 45px; }
  .hero h1 { font-size: 42px; letter-spacing: -2px; }
  .highlight-line { white-space: normal; }
  .hero p { font-size: 19px; }
  .hero-buttons { flex-direction: column; }
  .primary-btn, .secondary-btn { width: 100%; }
  .proof-pills { flex-wrap: wrap; }
  .hero-visual-card { width: 360px; max-width: 100%; height: 470px; margin: 0 auto; }
  .island-main { width: 400px; right: 10px; bottom: -120px; }
  .nova { width: 230px; right: 50px; top: 45px; }
  .level-pill { right: -10px; top: -28px; }
  .nova-tag { left: 0; bottom: 0; }
  .comparison-section { padding: 85px 18px 105px; }
  .comparison-card { padding: 24px; }
  .worlds-section { padding: 70px 0 90px; }
  .worlds-header { width: calc(100% - 28px); margin-bottom: 28px; }
  .worlds-header h2 { font-size: 40px; }
  .worlds-header p { font-size: 18px; }
  .worlds-carousel { width: calc(100% - 28px); overflow: visible; }
  .worlds-track {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    overflow: visible;
    padding: 0;
  }
  .world-arrow { display: none; }
  .world-card { padding: 7px; border-radius: 18px; }
  .world-card img { border-radius: 13px; }
  .world-info { padding: 10px 4px 6px; }
  .world-info h3 { font-size: 14px; }
  .world-info p { font-size: 12px; }
}
/* PASTE STUDIO CSS BELOW THIS LINE */
.studio-section {
  position: relative;
  padding: 90px 24px 110px;
  background: #ffbf00;
  overflow: hidden;
}

.studio-heading {
  text-align: center;
  margin: 0 auto 58px;
}

.studio-kicker {
  display: inline-block;
  background: var(--ink);
  color: #ffdf3c;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 4px 4px 0 rgba(7,11,36,.18);
}

.studio-heading h2 {
  margin: 20px 0 14px;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: clamp(48px, 5vw, 72px);
  line-height: .94;
  letter-spacing: -3px;
  font-weight: 700;
}

.studio-heading h2 b {
  color: var(--purple);
  text-decoration: underline wavy #f231a9;
  text-underline-offset: 8px;
}

.studio-heading p {
  max-width: 700px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
}

.compiler-workspace {
  width: min(1040px, calc(100% - 30px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(255px, 1.1fr) 58px minmax(245px, .95fr) minmax(245px, .95fr);
  gap: 18px;
  align-items: stretch;
}

.brick-panel,
.code-panel,
.simulator-panel {
  min-height: 435px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 7px 7px 0 rgba(7,11,36,.16);
}

.brick-panel {
  background: white;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.panel-title,
.code-panel-head,
.simulator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e6e7ee;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .6px;
}

.panel-title { justify-content: flex-start; gap: 7px; color: var(--purple); }
.panel-title span { color: #526078; }

.control-label {
  display: block;
  margin: 14px 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.studio-input {
  width: 100%;
  padding: 11px 13px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: #f6f0ff;
  color: var(--ink);
  font: 800 13px "Outfit", sans-serif;
  outline: none;
}

.studio-input:focus { box-shadow: 0 0 0 3px rgba(155,34,255,.22); }

.choice-stack { display: grid; gap: 7px; }
.choice-row {
  width: 100%;
  min-height: 35px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #f7f8fc;
  color: var(--ink);
  font: 800 10px "Outfit", sans-serif;
  cursor: pointer;
}
.choice-row.active { background: #ffd64c; transform: scale(1.01); }
.swatch { width: 13px; height: 13px; border: 1px solid var(--ink); border-radius: 50%; }
.swatch.pink { background: #f472b6; }
.swatch.space { background: #312e81; }
.swatch.forest { background: #059669; }

.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sticker-choice {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #f7f8fc;
  cursor: pointer;
}
.sticker-choice strong { font-size: 20px; line-height: 1; }
.sticker-choice span { color: #526078; font-size: 9px; font-weight: 800; }
.sticker-choice.active { background: #dfc6ff; transform: translateY(-2px); }

.border-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.border-choice {
  min-height: 29px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #f7f8fc;
  font: 900 9px "Outfit", sans-serif;
  cursor: pointer;
}
.border-choice.active { background: #a9baff; }

.compiling-note {
  margin-top: auto;
  padding-top: 13px;
  border-top: 2px dashed #d7d9e3;
  color: var(--purple);
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
}

.compile-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 50px;
  font-weight: 900;
  animation: compileNudge 1.8s ease-in-out infinite;
}

.code-panel {
  background: #070b20;
  color: white;
  padding: 19px;
  display: flex;
  flex-direction: column;
}

.code-panel-head { color: #d9dbea; border-color: #222945; }
.code-panel-head small { color: #23e99a; font-size: 8px; }
.code-block-group { margin-bottom: 17px; }
.code-block-group > span {
  display: block;
  margin-bottom: 6px;
  color: #9f7cff;
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
}
.css-code-group > span { color: #f15ac1; }
.code-block-group pre {
  min-height: 96px;
  margin: 0;
  padding: 12px;
  border: 1px solid #28314f;
  border-radius: 9px;
  background: #11182e;
  color: #ffd84e;
  font: 700 10px/1.45 monospace;
  white-space: pre-wrap;
  overflow: auto;
}
.css-code-group pre { color: #57ddff; min-height: 130px; }
.code-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #222945;
  color: #59627e;
  font: 800 7px monospace;
}

.simulator-panel {
  background: white;
  padding: 19px;
  display: flex;
  flex-direction: column;
}
.simulator-head { color: #687189; }
.simulator-head > span { color: #687189; }
.simulator-head > span::first-letter { color: var(--pink); }
.simulator-head small {
  padding: 3px 7px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #20e89a;
  color: var(--ink);
  font-size: 7px;
}
.simulator-stage {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 8px 20px;
}
.compiled-card {
  width: min(210px, 100%);
  min-height: 92px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 5px solid var(--ink);
  border-radius: 21px;
  background: radial-gradient(circle, #fbcfe8, #f472b6);
  color: var(--ink);
  box-shadow: 0 8px 0 rgba(7,11,36,.15);
  transition: all .25s ease;
}
.compiled-icon { font-size: 30px; line-height: 1; }
.compiled-card h3 { margin: 8px 0 0; font-size: 14px; font-weight: 900; }
.simulator-caption {
  margin: 0;
  padding-top: 12px;
  border-top: 2px solid #f0f1f5;
  color: #8b92a4;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
}

@keyframes compileNudge {
  0%, 100% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
}

@media (max-width: 1050px) {
  .compiler-workspace { grid-template-columns: 1fr 44px 1fr 1fr; }
}

@media (max-width: 850px) {
  .compiler-workspace { grid-template-columns: 1fr 1fr; }
  .brick-panel { grid-column: 1 / -1; }
  .compile-arrow { display: none; }
}

@media (max-width: 620px) {
  .studio-section { padding: 70px 14px 85px; }
  .studio-heading h2 { font-size: 42px; letter-spacing: -2px; }
  .studio-heading p { font-size: 16px; }
  .compiler-workspace { width: 100%; grid-template-columns: 1fr; }
  .brick-panel, .code-panel, .simulator-panel { min-height: auto; }
}



/* CREATOR JOURNEY SECTION */
.creator-journey-section {
  position: relative;
  padding: 100px 22px 110px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 14% 18%, rgba(137, 71, 255, .22), transparent 25%),
    radial-gradient(circle at 88% 34%, rgba(255, 52, 172, .16), transparent 24%),
    linear-gradient(180deg, #080b50 0%, #06093d 55%, #05072f 100%);
}
.creator-journey-section::before { content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 74px 74px; }
.journey-inner { position:relative; z-index:2; width:min(1450px, 100%); margin:0 auto; }
.journey-heading { text-align:center; margin:0 auto 62px; }
.journey-kicker { margin:0 0 12px; color:#b79bff; font:900 12px/1 "Outfit",sans-serif; letter-spacing:3px; }
.journey-heading h2 { margin:0; font:700 clamp(40px,4.2vw,68px)/1 "Space Grotesk","Outfit",sans-serif; letter-spacing:-2px; text-transform:uppercase; }
.journey-heading h2 b { color:#ffd64d; text-shadow:0 0 28px rgba(255,214,77,.28); }
.journey-heading h2 span { color:#ffd64d; font-size:.55em; vertical-align:middle; animation:journeyTwinkle 1.8s ease-in-out infinite; }
.journey-heading > p:last-child { max-width:700px; margin:18px auto 0; color:#c9ccef; font-size:18px; font-weight:700; }
.journey-top-grid { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:34px; align-items:center; }
.journey-path { display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr 42px 1fr; align-items:start; }
.journey-step { text-align:center; outline:none; cursor:pointer; transform-origin:center; }
.journey-icon-wrap { width:150px; aspect-ratio:1; margin:0 auto 13px; display:grid; place-items:center; border-radius:50%; position:relative; filter:drop-shadow(0 12px 20px rgba(0,0,0,.28)); animation:journeyFloat 4s ease-in-out infinite; animation-delay:var(--step-delay); }
.journey-icon-wrap::after { content:""; position:absolute; inset:5px; border:2px solid var(--step-color); border-radius:50%; opacity:.72; box-shadow:0 0 0 0 color-mix(in srgb, var(--step-color) 45%, transparent); transition:.3s; }
.journey-icon-wrap img { width:100%; height:100%; object-fit:contain; border-radius:50%; transition:transform .35s ease, filter .35s ease; }
.journey-step h3 { margin:0 0 6px; font-size:18px; font-weight:900; }
.journey-step p { margin:0; color:#c6c9e8; font-size:14px; line-height:1.45; font-weight:700; }
.journey-step:hover .journey-icon-wrap img, .journey-step:focus .journey-icon-wrap img { transform:scale(1.1) rotate(-3deg); filter:brightness(1.12); }
.journey-step:hover .journey-icon-wrap::after, .journey-step:focus .journey-icon-wrap::after { box-shadow:0 0 0 12px transparent, 0 0 25px var(--step-color); }
.journey-connector { padding-top:57px; display:flex; align-items:center; color:#c795ff; opacity:.9; }
.journey-connector span { height:2px; flex:1; background:repeating-linear-gradient(90deg,#b792ff 0 7px,transparent 7px 13px); background-size:26px 2px; animation:connectorFlow 1.2s linear infinite; }
.journey-connector b { margin-left:3px; font-size:20px; animation:arrowPulse 1.2s ease-in-out infinite; }
.six-month-card { min-height:330px; position:relative; display:grid; place-items:center; }
.six-month-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.3)); }
.six-month-copy { position:relative; z-index:2; width:72%; margin-right:18%; margin-top:-2%; color:#21152c; text-align:center; }
.six-month-copy h3 { margin:0; font-size:23px; font-weight:900; }
.six-month-copy > p { margin:2px 0 12px; font-size:13px; font-weight:800; }
.six-month-copy ul { margin:0; padding:0; list-style:none; text-align:left; }
.six-month-copy li { display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13px; line-height:1.2; font-weight:800; opacity:0; transform:translateX(12px); }
.six-month-card.is-visible .six-month-copy li { animation:checkIn .45s ease forwards; }
.six-month-card.is-visible .six-month-copy li:nth-child(2){animation-delay:.12s}.six-month-card.is-visible .six-month-copy li:nth-child(3){animation-delay:.24s}.six-month-card.is-visible .six-month-copy li:nth-child(4){animation-delay:.36s}.six-month-card.is-visible .six-month-copy li:nth-child(5){animation-delay:.48s}
.six-month-copy li img { width:18px; height:18px; object-fit:contain; }
.chest-sparkles i { position:absolute; width:8px; height:8px; background:#fff3a6; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); animation:chestSpark 2.2s ease-in-out infinite; }
.chest-sparkles i:nth-child(1){right:8%;bottom:28%;}.chest-sparkles i:nth-child(2){right:18%;bottom:18%;animation-delay:.5s}.chest-sparkles i:nth-child(3){right:3%;bottom:43%;animation-delay:1s}.chest-sparkles i:nth-child(4){right:26%;bottom:34%;animation-delay:1.4s}
.journey-bottom-grid { margin-top:72px; display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:stretch; }
.included-panel,.projects-panel { position:relative; border:4px solid #7a5cff; border-radius:24px; background:linear-gradient(180deg,rgba(34,37,102,.96),rgba(17,18,68,.97)); box-shadow:0 0 0 5px rgba(236,69,255,.08),0 24px 50px rgba(0,0,0,.28); }
.included-panel { padding:48px 20px 24px; }
.panel-ribbon { position:absolute; left:50%; top:-24px; transform:translateX(-50%); min-width:300px; padding:11px 30px; border:2px solid #835cff; border-radius:13px; background:linear-gradient(180deg,#6d3bd4,#3d1d8c); color:#fff; text-align:center; font-size:24px; font-weight:900; box-shadow:0 8px 20px rgba(0,0,0,.28); }
.panel-ribbon span { color:#ffd64d; animation:journeyTwinkle 1.7s infinite; }
.included-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:22px 12px; }
.included-item { min-width:0; text-align:center; cursor:pointer; opacity:0; transform:translateY(22px) scale(.9); }
.included-panel.is-visible .included-item { animation:itemReveal .55s cubic-bezier(.2,.8,.2,1) forwards; }
.included-panel.is-visible .included-item:nth-child(3n+2){animation-delay:.08s}.included-panel.is-visible .included-item:nth-child(3n){animation-delay:.16s}
.included-item img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)); transition:transform .28s ease,filter .28s ease; }
.included-item span { display:block; margin-top:7px; color:#fff; font-size:12px; line-height:1.15; font-weight:800; }
.included-item:hover img { transform:translateY(-8px) rotate(-5deg) scale(1.12); filter:drop-shadow(0 12px 16px rgba(136,95,255,.55)); }
.projects-panel { padding:16px; }
.projects-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.projects-panel-head h3 { margin:0; font-size:21px; font-weight:900; }
.projects-panel-head a { padding:7px 12px; border:1px solid #8d69ff; border-radius:999px; color:#fff; text-decoration:none; font-size:10px; font-weight:900; transition:.25s; }
.projects-panel-head a:hover { background:#9b22ff; transform:translateY(-2px); box-shadow:0 0 18px rgba(155,34,255,.55); }
.project-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px 8px; }
.project-card { position:relative; min-width:0; text-align:center; outline:none; cursor:pointer; perspective:800px; opacity:0; transform:translateY(20px); }
.projects-panel.is-visible .project-card { animation:itemReveal .5s ease forwards; }
.projects-panel.is-visible .project-card:nth-child(2n){animation-delay:.08s}.projects-panel.is-visible .project-card:nth-child(3n){animation-delay:.14s}
.project-card::after { content:""; position:absolute; inset:0 0 20px; border-radius:12px; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.33) 45%,transparent 65%); transform:translateX(-150%); transition:transform .55s ease; pointer-events:none; }
.project-card:hover::after,.project-card:focus::after { transform:translateX(150%); }
.project-card img { width:100%; aspect-ratio:1.24/1; object-fit:cover; border:2px solid #7c5cff; border-radius:11px; display:block; box-shadow:0 7px 12px rgba(0,0,0,.24); transition:transform .3s ease,box-shadow .3s ease; }
.project-card span { display:block; margin-top:5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9px; font-weight:800; }
.project-card:hover img,.project-card:focus img { transform:translateY(-5px) rotateX(5deg) rotateY(-5deg) scale(1.05); box-shadow:0 14px 22px rgba(123,85,255,.35); }
.journey-stars span { position:absolute; z-index:1; color:#fff; opacity:.6; animation:journeyTwinkle 2.4s ease-in-out infinite; }
.journey-stars span:nth-child(1){left:5%;top:19%}.journey-stars span:nth-child(2){left:28%;top:8%;animation-delay:.6s}.journey-stars span:nth-child(3){right:8%;top:15%;animation-delay:1.1s}.journey-stars span:nth-child(4){right:25%;bottom:8%;animation-delay:.3s}.journey-stars span:nth-child(5){left:11%;bottom:20%;animation-delay:1.5s}
.journey-reveal { opacity:0; transform:translateY(38px) scale(.97); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.journey-reveal.is-visible { opacity:1; transform:none; }
.journey-step.journey-reveal { transition-delay:var(--step-delay); }
.journey-click-spark { position:fixed; z-index:9999; width:10px; height:10px; border-radius:50%; pointer-events:none; background:#ffd84e; box-shadow:0 0 12px #fff; animation:journeyBurst .7s ease-out forwards; }
@keyframes journeyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes connectorFlow{to{background-position:26px 0}}
@keyframes arrowPulse{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes journeyTwinkle{0%,100%{opacity:.5;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(18deg)}}
@keyframes checkIn{to{opacity:1;transform:none}}
@keyframes chestSpark{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.4) rotate(45deg)}}
@keyframes itemReveal{to{opacity:1;transform:none}}
@keyframes journeyBurst{to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
@media(max-width:1180px){.journey-top-grid{grid-template-columns:1fr}.six-month-card{width:min(520px,100%);margin:0 auto}.journey-bottom-grid{grid-template-columns:1fr}.included-grid{grid-template-columns:repeat(9,1fr)}}
@media(max-width:900px){.journey-path{grid-template-columns:1fr 28px 1fr 28px 1fr;row-gap:34px}.journey-path .journey-step:nth-of-type(4),.journey-path .journey-step:nth-of-type(5){grid-row:2}.journey-connector{padding-top:50px}.included-grid{grid-template-columns:repeat(6,1fr)}.project-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.creator-journey-section{padding:75px 14px 85px}.journey-heading{margin-bottom:42px}.journey-heading h2{font-size:38px;line-height:1.08}.journey-heading > p:last-child{font-size:16px}.journey-path{display:grid;grid-template-columns:1fr;gap:24px}.journey-connector{display:none}.journey-icon-wrap{width:118px}.six-month-card{min-height:285px}.six-month-copy{width:71%;margin-right:19%;transform:scale(.86)}.journey-bottom-grid{margin-top:52px}.panel-ribbon{min-width:240px;font-size:19px}.included-grid{grid-template-columns:repeat(3,1fr);gap:22px 10px}.included-item img{width:58px;height:58px}.project-grid{grid-template-columns:repeat(2,1fr)}.project-card span{font-size:10px}.projects-panel-head{align-items:flex-start}.projects-panel-head h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.creator-journey-section *{animation:none!important;transition:none!important}.journey-reveal,.included-item,.project-card,.six-month-copy li{opacity:1!important;transform:none!important}}
/* =========================================
   JOURNEY SECTION - DESKTOP ALIGNMENT FIX
========================================= */

@media (min-width: 1181px) {

  /* Move the whole journey row slightly down */
  .journey-top-grid {
    align-items: center;
    margin-top: 25px;
  }

  /* Move parchment/chest panel down */
  .six-month-card {
    transform: translateY(25px);
  }

  /* Move text to the right and slightly down on parchment */
  .six-month-copy {
    width: 68%;
    margin-right: 8%;
    margin-top: 3%;
    transform: translateX(18px);
  }

  /* Reduce empty gap before bottom panels */
  .journey-bottom-grid {
    margin-top: 60px;
  }
}
/* =========================================
   JOURNEY SECTION - MOBILE FIX
========================================= */

@media (max-width: 620px) {

  .creator-journey-section {
    padding: 64px 12px 72px;
  }

  .journey-inner {
    width: 100%;
  }

  .journey-heading {
    margin-bottom: 34px;
  }

  .journey-kicker {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .journey-heading h2 {
    font-size: 32px;
    line-height: 1.04;
    letter-spacing: -1px;
  }

  .journey-heading > p:last-child {
    width: 92%;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.45;
  }

  .journey-top-grid {
    display: block;
    margin-top: 0;
  }

  .journey-path {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
    align-items: start;
  }

  .journey-step {
    min-width: 0;
  }

  .journey-step:last-of-type {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }

  .journey-icon-wrap {
    width: 112px;
    margin-bottom: 10px;
  }

  .journey-icon-wrap img {
    width: 108%;
    height: 108%;
    max-width: none;
    transform: none;
  }

  .journey-step h3 {
    font-size: 15px;
    line-height: 1.15;
  }

  .journey-step p {
    font-size: 12px;
    line-height: 1.35;
  }

  .journey-connector {
    display: none;
  }

  .six-month-card {
    width: 100%;
    min-height: 310px;
    margin: 34px auto 0;
    transform: none;
  }

  .six-month-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .six-month-copy {
    width: 64%;
    margin: 0 16% 0 0;
    transform: translate(8px, -2px);
  }

  .six-month-copy h3 {
    font-size: 20px;
  }

  .six-month-copy > p {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .six-month-copy li {
    gap: 5px;
    margin: 6px 0;
    font-size: 10px;
    line-height: 1.15;
  }

  .six-month-copy li img {
    width: 14px;
    height: 14px;
  }

  .journey-bottom-grid {
    margin-top: 42px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .included-panel {
    padding: 54px 12px 22px;
  }

  .panel-ribbon {
    top: -22px;
    min-width: 0;
    width: 74%;
    padding: 10px 14px;
    font-size: 18px;
    line-height: 1.1;
  }

  .included-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 8px;
  }

  .included-item img {
    width: 54px;
    height: 54px;
  }

  .included-item span {
    font-size: 10px;
    line-height: 1.15;
  }

  .projects-panel {
    padding: 14px;
  }

  .projects-panel-head {
    align-items: center;
  }

  .projects-panel-head h3 {
    font-size: 17px;
    line-height: 1.1;
  }

  .projects-panel-head a {
    padding: 6px 9px;
    font-size: 8px;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }

  .project-card span {
    font-size: 9px;
  }
}
/* =========================================
   FINAL CREATOR JOURNEY MOBILE FIX
========================================= */

@media screen and (max-width: 620px) {

  .creator-journey-section {
    padding: 64px 12px 75px;
  }

  .journey-heading {
    margin-bottom: 38px;
  }

  .journey-heading h2 {
    font-size: 31px;
    line-height: 1.06;
    letter-spacing: -1px;
  }

  .journey-heading > p:last-child {
    width: 94%;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
  }

  .journey-top-grid {
    display: block !important;
    margin-top: 0 !important;
  }

  /* Force a proper two-column mobile journey */
  .journey-path {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 30px !important;
    align-items: start;
  }

  /* Remove the desktop arrows */
  .journey-connector {
    display: none !important;
  }

  /* Reset older tablet positioning */
  .journey-path .journey-step {
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100%;
  }

  /* Explicitly place each journey step in the correct order */
  .journey-path > .journey-step:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .journey-path > .journey-step:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .journey-path > .journey-step:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
  }

  .journey-path > .journey-step:nth-child(7) {
    grid-column: 2;
    grid-row: 2;
  }

  .journey-path > .journey-step:nth-child(9) {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 50%;
    justify-self: center;
  }

  .journey-icon-wrap {
    width: 108px !important;
    margin: 0 auto 10px;
    overflow: visible;
  }

  .journey-icon-wrap img {
    width: 108% !important;
    height: 108% !important;
    max-width: none;
    object-fit: contain;
    transform: none;
  }

  .journey-step h3 {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.15;
  }

  .journey-step p {
    max-width: 145px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.35;
  }

  /* Six-month parchment */
  .six-month-card {
    width: 100% !important;
    min-height: 285px;
    margin: 34px auto 0 !important;
    transform: none !important;
  }

  .six-month-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .six-month-copy {
    width: 68% !important;
    margin: 0 auto !important;
    transform: translate(-8px, -8px) !important;
    text-align: center;
  }

  .six-month-copy ul {
    width: fit-content;
    margin: 0 auto;
    text-align: left;
  }


  .six-month-copy h3 {
    font-size: 18px;
  }

  .six-month-copy > p {
    margin: 2px 0 8px;
    font-size: 10px;
  }

  .six-month-copy li {
    gap: 5px;
    margin: 5px 0;
    font-size: 9px;
    line-height: 1.15;
  }

  .six-month-copy li img {
    width: 13px;
    height: 13px;
  }

  /* Bottom panels */
  .journey-bottom-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 40px;
    margin-top: 45px !important;
  }

  .included-panel {
    padding: 52px 10px 24px;
  }

  .panel-ribbon {
    top: -22px;
    width: 72%;
    min-width: 0;
    padding: 10px 12px;
    font-size: 18px;
    line-height: 1.1;
  }

  .included-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 23px 8px;
  }

  .included-item img {
    width: 52px;
    height: 52px;
  }

  .included-item span {
    font-size: 10px;
  }

  .projects-panel {
    padding: 14px 10px 18px;
  }

  .projects-panel-head h3 {
    font-size: 17px;
  }

  .projects-panel-head a {
    padding: 6px 8px;
    font-size: 8px;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px 10px;
  }

  .project-card span {
    font-size: 9px;
  }
}

/* PRICING + PARENT TRUST */
.pricing-section{padding:100px 22px 115px;background:linear-gradient(180deg,#fff8e8,#fff3d5);overflow:hidden}.pricing-heading{max-width:760px;margin:0 auto 58px;text-align:center}.pricing-heading>span,.trust-heading>span{color:var(--purple);font-size:12px;letter-spacing:2.5px;font-weight:900}.pricing-heading h2,.trust-heading h2{margin:14px 0;font:700 clamp(42px,5vw,68px)/1 "Space Grotesk","Outfit",sans-serif;letter-spacing:-2px}.pricing-heading h2 b{color:var(--purple)}.pricing-heading p,.trust-heading p{margin:0;color:#56627a;font-size:18px;line-height:1.5;font-weight:700}.pricing-grid{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:center}.price-card{position:relative;padding:34px 30px;border:4px solid var(--ink);border-radius:26px;background:#fff;box-shadow:8px 8px 0 rgba(7,11,36,.15);transition:.3s}.price-card.creator{background:#f2e7ff;transform:translateY(-18px);box-shadow:0 20px 45px rgba(155,34,255,.2),8px 8px 0 var(--ink)}.price-card:hover{transform:translateY(-10px) rotate(-1deg)}.price-card.creator:hover{transform:translateY(-26px) scale(1.02)}.price-card h3{margin:0;font-size:26px}.price{display:flex;align-items:end;gap:7px;margin:20px 0}.price strong{font-size:48px;line-height:1}.price span{color:#687189;font-weight:800}.price-card ul{list-style:none;padding:0;margin:24px 0}.price-card li{margin:14px 0;font-weight:800}.price-card li:before{content:"✓";margin-right:9px;color:#00a86b}.price-card>a{display:flex;min-height:54px;align-items:center;justify-content:center;border:3px solid var(--ink);border-radius:14px;color:var(--ink);text-decoration:none;font-weight:900;box-shadow:4px 4px 0 var(--ink);transition:.25s}.explorer>a{background:#ffcf38}.creator>a{background:#9b22ff;color:#fff}.galactic>a{background:#f231a9;color:#fff}.price-card>a:hover{transform:translateY(-3px);box-shadow:7px 7px 0 var(--ink)}.popular-badge{position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border:3px solid var(--ink);border-radius:999px;background:#ffbf00;font-size:11px;font-weight:900;animation:popularBounce 2s ease-in-out infinite}
.parent-trust-section{padding:105px 22px;background:linear-gradient(135deg,#d9fff0,#bdf8e4);overflow:hidden}.parent-trust-inner{width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.parent-visual img{display:block;width:100%;max-width:500px;margin:auto;filter:drop-shadow(0 25px 30px rgba(7,11,36,.15));animation:parentFloat 5s ease-in-out infinite}.trust-heading h2 b{color:#009f78}.trust-benefits{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.trust-benefit{display:flex;gap:14px;padding:18px;border:3px solid rgba(7,11,36,.15);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:4px 5px 0 rgba(7,11,36,.08);transition:.28s}.trust-benefit:hover{transform:translateY(-6px);border-color:#20c997}.trust-benefit>strong{font-size:28px}.trust-benefit h3{margin:0 0 5px;font-size:17px}.trust-benefit p{margin:0;color:#526078;font-size:13px;line-height:1.4;font-weight:700}.trust-reveal{opacity:0;transform:translateY(35px) scale(.97);transition:opacity .7s ease,transform .7s ease}.trust-reveal.is-visible{opacity:1;transform:none}.price-card.creator.trust-reveal.is-visible{transform:translateY(-18px)}
@keyframes popularBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}@keyframes parentFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:560px}.price-card.creator,.price-card.creator.trust-reveal.is-visible{transform:none}.parent-trust-inner{grid-template-columns:1fr;gap:35px}.parent-visual img{max-width:400px}}
@media(max-width:620px){.pricing-section,.parent-trust-section{padding:75px 14px 85px}.pricing-heading{margin-bottom:42px}.pricing-heading h2,.trust-heading h2{font-size:38px}.pricing-heading p,.trust-heading p{font-size:15px}.pricing-grid{gap:30px}.price-card{padding:30px 22px}.trust-benefits{grid-template-columns:1fr}.parent-visual img{max-width:320px}}
@media(prefers-reduced-motion:reduce){.trust-reveal{opacity:1!important;transform:none!important}.parent-visual img,.popular-badge{animation:none!important}}


/* =========================================
   PARENT SHOWCASE + CTA + FOOTER
========================================= */
.parent-showcase-section{position:relative;padding:96px 24px 88px;overflow:hidden;color:#fff;background:radial-gradient(circle at 78% 25%,rgba(180,77,255,.55),transparent 27%),radial-gradient(circle at 16% 78%,rgba(20,175,255,.25),transparent 25%),linear-gradient(135deg,#07164c 0%,#15105d 48%,#441271 100%)}
.parent-showcase-section:before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);background-size:44px 44px;pointer-events:none}.parent-showcase-inner{position:relative;z-index:2;width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:62px;align-items:center}.parent-showcase-art img{display:block;width:100%;max-width:470px;margin:auto;filter:drop-shadow(0 30px 38px rgba(0,0,0,.35));animation:parentFloat 5s ease-in-out infinite}.parent-showcase-heading>span{color:#72eaff;font-size:13px;letter-spacing:3px;font-weight:900}.parent-showcase-heading h2{margin:13px 0 30px;font:700 clamp(42px,5vw,66px)/1 "Space Grotesk","Outfit",sans-serif;letter-spacing:-2px}.parent-showcase-heading h2 b{color:#ffc72d}.parent-feature-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.parent-feature{min-height:205px;padding:18px 13px;text-align:center;border:1px solid rgba(255,255,255,.17);border-radius:19px;background:rgba(9,18,72,.55);box-shadow:0 16px 30px rgba(0,0,0,.16);backdrop-filter:blur(8px);transition:.28s}.parent-feature:hover{transform:translateY(-8px);background:rgba(36,25,109,.8);border-color:rgba(255,215,82,.7)}.parent-feature strong{display:block;font-size:32px}.parent-feature h3{margin:11px 0 8px;font-size:15px}.parent-feature p{margin:0;color:#cdd7ff;font-size:11px;line-height:1.45;font-weight:700}.parent-quote{margin:30px 0 0;padding:21px 24px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(135deg,rgba(93,46,160,.66),rgba(25,24,94,.66));box-shadow:0 16px 35px rgba(0,0,0,.17)}.parent-quote p{margin:0;font-size:17px;line-height:1.45;font-weight:800}.parent-quote footer{margin-top:10px;color:#ffd85e;font-size:12px;font-weight:900}.creator-cta-section{position:relative;padding:58px 24px;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.2),transparent 22%),linear-gradient(135deg,#7041eb,#d047c7 58%,#ff8a3d)}.creator-cta-section:before,.creator-cta-section:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(4px);opacity:.22}.creator-cta-section:before{left:-90px;bottom:-170px;background:#16e1ff}.creator-cta-section:after{right:-80px;top:-170px;background:#ffe46b}.creator-cta-stars{position:absolute;inset:14px 0 auto;text-align:center;color:#fff6b0;font-size:24px;opacity:.75}.creator-cta-inner{position:relative;z-index:2;width:min(1000px,100%);margin:auto;display:flex;align-items:center;justify-content:center;gap:42px}.creator-cta-nova{width:220px;filter:drop-shadow(0 22px 30px rgba(34,0,80,.32));animation:novaFloat 4.5s ease-in-out infinite}.creator-cta-copy{text-align:center}.creator-cta-copy p{margin:0 0 6px;font-size:clamp(22px,3vw,36px);font-weight:800}.creator-cta-copy h2{margin:0;color:#ffd33f;font:800 clamp(38px,5vw,66px)/1 "Space Grotesk","Outfit",sans-serif;letter-spacing:-2px;text-shadow:0 4px 15px rgba(77,0,93,.22)}.creator-cta-copy a{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;min-height:58px;padding:0 34px;border:3px solid rgba(255,255,255,.75);border-radius:999px;background:#ffd437;color:#17133f;text-decoration:none;font-weight:900;box-shadow:0 10px 28px rgba(82,25,111,.3);transition:.25s}.creator-cta-copy a:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(82,25,111,.38)}.footer-nav{min-height:78px;padding:14px max(24px,calc((100% - 1240px)/2));display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:#10165f;border-bottom:1px solid rgba(255,255,255,.12)}.footer-nav-brand img{display:block;width:165px}.footer-nav-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}.footer-nav a{color:#fff;text-decoration:none;font-weight:800;font-size:13px}.footer-nav-links a:hover{color:#ffd33f}.footer-socials{display:flex;gap:10px}.footer-socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.04)}.site-footer{padding:58px 24px 20px;color:#dbe3ff;background:linear-gradient(180deg,#07102e,#03091d)}.site-footer-grid{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:1.35fr .8fr .95fr 1fr;gap:50px}.site-footer h2{margin:0 0 18px;color:#fff;font-size:25px}.site-footer h3{margin:0 0 18px;color:#ffd33f;font-size:16px}.site-footer section>a{display:block;margin:10px 0;color:#dbe3ff;text-decoration:none;font-size:13px;font-weight:700}.site-footer section>a:hover{color:#72eaff}.footer-about p{max-width:360px;margin:0;color:#b9c7ec;line-height:1.65;font-size:14px;font-weight:700}.footer-safety{display:inline-flex;margin-top:22px;padding:11px 15px;border:1px solid #9f50ff;border-radius:12px;background:rgba(155,34,255,.12);color:#e4c7ff;font-size:12px;font-weight:900}.support-card{padding:18px;border:1px solid rgba(122,170,255,.28);border-radius:18px;background:rgba(26,40,76,.62)}.support-card small{display:block;color:#8eb8ff;font-size:9px;letter-spacing:1px}.support-card strong{display:block;margin:10px 0;color:#fff;font-size:13px;line-height:1.45}.support-card p{margin:0;color:#91a3cb;font-size:11px}.site-footer-bottom{width:min(1240px,100%);margin:42px auto 0;padding-top:20px;display:grid;grid-template-columns:1.3fr 1fr auto;gap:20px;align-items:center;border-top:1px solid rgba(255,255,255,.12);color:#8294bd;font-size:10px;font-weight:700}.site-footer-bottom>span:nth-child(2){text-align:center}.site-footer-bottom div{display:flex;gap:18px}.site-footer-bottom a{color:#a9b8da;text-decoration:none}
@media(max-width:1050px){.parent-showcase-inner{grid-template-columns:1fr}.parent-showcase-art img{max-width:390px}.parent-feature-grid{grid-template-columns:repeat(3,1fr)}.site-footer-grid{grid-template-columns:repeat(2,1fr)}.footer-nav{grid-template-columns:1fr;text-align:center}.footer-nav-brand img{margin:auto}.footer-socials{justify-content:center}.site-footer-bottom{grid-template-columns:1fr;text-align:center}.site-footer-bottom>span:nth-child(2){text-align:center}.site-footer-bottom div{justify-content:center}}
@media(max-width:700px){.parent-showcase-section{padding:72px 14px}.parent-showcase-inner{gap:28px}.parent-showcase-heading{text-align:center}.parent-showcase-heading h2{font-size:38px}.parent-feature-grid{grid-template-columns:1fr 1fr}.parent-feature{min-height:190px}.creator-cta-inner{flex-direction:column;gap:12px}.creator-cta-nova{width:180px}.creator-cta-copy p{font-size:20px}.creator-cta-copy h2{font-size:42px}.creator-cta-copy a{padding:0 22px;font-size:13px}.footer-nav-links{gap:16px}.site-footer-grid{grid-template-columns:1fr}.site-footer{text-align:center}.footer-about p{margin:auto}.site-footer section>a{margin:11px 0}}
@media(max-width:430px){.parent-feature-grid{grid-template-columns:1fr}.parent-feature{min-height:0}.parent-quote p{font-size:14px}.footer-nav-links{display:grid;grid-template-columns:repeat(3,1fr)}}


/* =========================================
   CREATOR TRACKS
   Added directly below the visual-code studio
========================================= */
.creator-tracks-section {
  position: relative;
  padding: 92px 24px 100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 20%, rgba(183, 138, 255, .14), transparent 23%),
    radial-gradient(circle at 92% 76%, rgba(255, 214, 76, .13), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
}

.creator-tracks-section::before,
.creator-tracks-section::after {
  content: "〰";
  position: absolute;
  color: #9b22ff;
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
  opacity: .9;
  transform: rotate(-18deg);
  pointer-events: none;
}

.creator-tracks-section::before {
  left: 6%;
  bottom: 54px;
}

.creator-tracks-section::after {
  right: 7%;
  top: 52px;
  transform: rotate(18deg);
}

.creator-tracks-inner {
  width: min(1450px, 100%);
  margin: 0 auto;
}

.creator-tracks-heading {
  margin: 0 auto 54px;
  text-align: center;
}

.creator-tracks-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7a32ed, #9b4af5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(122, 50, 237, .24);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
}

.creator-tracks-kicker b {
  color: #ffd84e;
  font-size: 15px;
}

.creator-tracks-heading h2 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1;
  letter-spacing: -2.5px;
  font-weight: 700;
}

.creator-tracks-heading h2 strong {
  position: relative;
  display: inline-block;
  color: #7d42ee;
}

.creator-tracks-heading h2 strong::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: -8px;
  height: 8px;
  border-radius: 50%;
  border-top: 4px solid #ffbe29;
  transform: rotate(2deg);
}

.creator-tracks-heading p {
  margin: 0;
  color: #4f5870;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.creator-tracks-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.creator-track-card {
  --track-accent: #7047ef;
  --track-bg: #f5f1ff;
  position: relative;
  min-height: 340px;
  padding: 28px 15px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 3px solid rgba(7, 11, 36, .36);
  border-radius: 23px;
  background: var(--track-bg);
  box-shadow: 0 9px 24px rgba(36, 31, 77, .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.creator-track-card:hover {
  transform: translateY(-10px);
  border-color: var(--track-accent);
  box-shadow: 0 18px 34px rgba(36, 31, 77, .14);
}

.creator-track-card img {
  width: 112px;
  height: 112px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  transition: transform .3s ease;
}

.creator-track-card:hover img {
  transform: scale(1.05) rotate(-1deg);
}

.creator-track-card h3 {
  margin: 16px 0 12px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.08;
  font-weight: 900;
}

.creator-track-card p {
  margin: 0;
  color: #505a72;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 700;
}

.creator-track-card > span {
  margin-top: auto;
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--track-accent);
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--track-accent) 28%, transparent);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .4px;
}

.web-track { --track-accent: #6546ed; --track-bg: #f5f3ff; }
.game-track { --track-accent: #dc3ec5; --track-bg: #fff1fb; }
.ai-track { --track-accent: #28bfc0; --track-bg: #effdfb; }
.design-track { --track-accent: #ed4f91; --track-bg: #fff0ed; }
.character-track { --track-accent: #83be20; --track-bg: #f7fbe8; }
.entrepreneur-track { --track-accent: #ffb400; --track-bg: #fff9e9; }

@media (max-width: 1180px) {
  .creator-tracks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .creator-track-card {
    min-height: 330px;
  }
}

@media (max-width: 700px) {
  .creator-tracks-section {
    padding: 72px 14px 80px;
  }

  .creator-tracks-heading {
    margin-bottom: 38px;
  }

  .creator-tracks-heading h2 {
    font-size: 39px;
  }

  .creator-tracks-heading p {
    font-size: 15px;
  }

  .creator-tracks-heading p br {
    display: none;
  }

  .creator-tracks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .creator-track-card {
    min-height: 300px;
    padding: 20px 10px;
    border-radius: 19px;
  }

  .creator-track-card img {
    width: 92px;
    height: 92px;
  }

  .creator-track-card h3 {
    font-size: 16px;
  }

  .creator-track-card p {
    font-size: 12px;
    line-height: 1.55;
  }

  .creator-track-card > span {
    padding: 5px 10px;
    font-size: 8px;
  }
}

@media (max-width: 420px) {
  .creator-tracks-grid {
    grid-template-columns: 1fr;
  }

  .creator-track-card {
    min-height: 310px;
  }
}

section[id], body[id] { scroll-margin-top: 110px; }