:root {
  --ink: #2f3154;
  --ink-soft: #5f6480;
  --honey: #ffca2b;
  --honey-deep: #f4a916;
  --purple: #7e53d0;
  --purple-dark: #503096;
  --sky: #42b7ee;
  --pink: #f46b8e;
  --paper: #fffdf7;
  --cream: #fff8df;
  --leaf: #8bcc46;
  --line: rgba(47, 49, 84, .13);
  --display: "Baloo 2", sans-serif;
  --body: "Nunito", sans-serif;
  --wrap: 1180px;
  --shadow: 0 18px 50px rgba(75, 61, 38, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.skip-link { position: fixed; z-index: 200; top: -60px; left: 16px; padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--purple-dark); text-decoration: none; transition: top .2s ease; }
.skip-link:focus { top: 16px; }
.wrap { width: min(calc(100% - 48px), var(--wrap)); margin: 0 auto; }
.section { padding: 116px 0; }
.section-kicker, .eyebrow, .footer-label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--purple); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; line-height: .95; }
h2 { margin-bottom: 22px; font-size: clamp(2.8rem, 5.4vw, 5.1rem); font-weight: 800; }
h2 span { color: var(--purple); }

.site-header { position: absolute; z-index: 50; top: 0; right: 0; left: 0; padding: 22px 0; transition: background .25s ease, box-shadow .25s ease, padding .25s ease; }
.site-header.is-stuck { position: fixed; padding: 12px 0; background: rgba(255, 253, 247, .93); box-shadow: 0 5px 24px rgba(47, 49, 84, .08); backdrop-filter: blur(16px); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.68rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; text-decoration: none; }
.brand img { width: 39px; height: 39px; border: 2px solid #fff; border-radius: 13px; object-fit: cover; box-shadow: 0 3px 8px rgba(47, 49, 84, .14); }
.nav-menu { display: flex; align-items: center; gap: 28px; font-weight: 800; font-size: .9rem; }
.nav-menu > a:not(.nav-cta) { text-decoration: none; transition: color .2s ease; }
.nav-menu > a:not(.nav-cta):hover { color: var(--purple); }
.nav-cta { padding: 10px 17px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.nav-cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.menu-toggle { display: none; padding: 8px 0 8px 12px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }

.hero { position: relative; min-height: 760px; padding: 170px 0 72px; overflow: hidden; background: linear-gradient(127deg, #fff9df 0%, #fff9df 43%, #d7f1a0 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .8), transparent 25%), radial-gradient(circle at 15% 92%, rgba(255, 224, 101, .33), transparent 26%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px, .87fr) minmax(470px, 1.13fr); align-items: center; gap: 30px; }
.hero-copy { padding-top: 20px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--purple-dark); }
.eyebrow span { font-size: 1rem; color: var(--honey-deep); }
h1 { max-width: 650px; margin-bottom: 26px; font-size: clamp(3.45rem, 5vw, 5.8rem); font-weight: 800; }
h1 em { font-style: normal; color: var(--purple); }
.hero-lead { max-width: 500px; margin-bottom: 31px; color: var(--ink-soft); font-size: 1.13rem; font-weight: 600; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 13px 23px; border: 2px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button-primary { color: var(--ink); background: var(--honey); box-shadow: 4px 5px 0 var(--ink); }
.button-primary:hover { transform: translate(2px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--purple-dark); font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-notes { display: flex; align-items: center; gap: 12px; margin-top: 39px; color: var(--ink-soft); font-size: .8rem; font-weight: 800; }
.hero-notes i { width: 4px; height: 4px; border-radius: 50%; background: var(--honey-deep); }
.hero-art { position: relative; align-self: stretch; min-height: 515px; }
.sun-shape { position: absolute; top: 22px; right: -42px; width: 470px; height: 470px; border-radius: 50%; background: #ffdc40; }
.art-frame { position: absolute; z-index: 2; right: 34px; bottom: 1px; width: min(100%, 462px); aspect-ratio: 1; overflow: hidden; border: 9px solid #fff; border-radius: 36% 42% 35% 40%; box-shadow: var(--shadow); transform: rotate(4deg); }
.art-frame img { width: 100%; height: 100%; object-fit: cover; }
.floating-card { position: absolute; z-index: 3; display: grid; grid-template-columns: 19px auto; column-gap: 8px; align-items: center; padding: 12px 17px 11px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 4px 4px 0 var(--ink); font-family: var(--display); line-height: 1; transform: rotate(-7deg); }
.floating-card strong { font-size: 1rem; letter-spacing: .03em; }
.floating-card small { grid-column: 2; margin-top: 3px; color: var(--ink-soft); font-family: var(--body); font-size: .66rem; font-weight: 800; letter-spacing: .04em; }
.mini-dot { width: 17px; height: 17px; border: 2px solid var(--ink); border-radius: 4px; }
.mini-dot.blue { background: #46b8ed; }.mini-dot.pink { background: var(--pink); }
.card-blue { top: 86px; left: 14px; }.card-pink { right: 0; bottom: 97px; transform: rotate(6deg); }
.bee-flight { position: absolute; z-index: 4; top: 22px; right: 60px; color: #fff; font-size: 1.7rem; text-shadow: 1px 2px 0 var(--honey-deep); transform: rotate(25deg); }
.honey-left, .honey-right { position: absolute; z-index: 0; width: 190px; height: 190px; opacity: .35; background-image: linear-gradient(30deg, transparent 12%, rgba(126, 83, 208, .22) 12.5%, rgba(126, 83, 208, .22) 87%, transparent 87.5%), linear-gradient(150deg, transparent 12%, rgba(126, 83, 208, .22) 12.5%, rgba(126, 83, 208, .22) 87%, transparent 87.5%), linear-gradient(30deg, transparent 12%, rgba(126, 83, 208, .22) 12.5%, rgba(126, 83, 208, .22) 87%, transparent 87.5%), linear-gradient(150deg, transparent 12%, rgba(126, 83, 208, .22) 12.5%, rgba(126, 83, 208, .22) 87%, transparent 87.5%); background-size: 48px 84px; background-position: 0 0, 0 0, 24px 42px, 24px 42px; }
.honey-left { left: -92px; bottom: 88px; transform: rotate(15deg); }.honey-right { right: -92px; top: 70px; }
.hero-strip { position: absolute; z-index: 4; right: -8px; bottom: 0; left: -8px; padding: 13px 0; color: #fff; background: var(--purple); font-family: var(--display); font-size: .86rem; font-weight: 800; letter-spacing: .11em; overflow: hidden; white-space: nowrap; transform: rotate(-1.5deg) translateY(8px); }
.hero-strip div { width: max-content; animation: ticker 22s linear infinite; }.hero-strip span { color: var(--honey); padding: 0 10px; }

.intro-section { position: relative; overflow: hidden; background: #fff; }.intro-section::after { content: ""; position: absolute; top: -44px; right: 7%; width: 120px; height: 120px; border: 17px solid #f7e685; border-radius: 50%; opacity: .5; }
.intro-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 2.2fr 1.15fr; gap: 45px; align-items: start; }
.intro-copy h2 { max-width: 690px; }.intro-copy p { max-width: 618px; margin-bottom: 16px; color: var(--ink-soft); font-size: 1.06rem; font-weight: 600; }
.quote-card { position: relative; min-height: 210px; padding: 37px 29px 28px; color: #fff; background: var(--purple); border-radius: 21px 45px 24px 48px; box-shadow: 7px 8px 0 #e1d7ff; transform: rotate(2deg); }.quote-card p { position: relative; z-index: 1; margin: 0; font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.15; }.quote-mark { position: absolute; top: 7px; left: 19px; color: #9b7ee0; font-family: Georgia, serif; font-size: 6rem; line-height: 1; }.quote-bee { position: absolute; right: 20px; bottom: 13px; color: var(--honey); font-size: 2rem; }

.how-section { position: relative; background: var(--cream); }.how-section::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 135px; opacity: .34; background: radial-gradient(circle at 10px -4px, transparent 11px, #d9efbb 12px, #d9efbb 17px, transparent 18px) 0 0/45px 45px; }
.section-heading { position: relative; z-index: 1; }.heading-centered { margin-bottom: 70px; text-align: center; }.section-heading h2 { margin-top: 15px; margin-bottom: 10px; }.section-heading > p:last-child { color: var(--ink-soft); font-weight: 700; }
.play-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.play-step { position: relative; display: grid; grid-template-rows: auto auto 1fr; min-height: 620px; padding: 27px 27px 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 23px 23px 0 0; box-shadow: 6px 7px 0 var(--ink); }.play-step::before { content: ""; position: absolute; top: -68px; right: -69px; width: 200px; height: 200px; border-radius: 50%; opacity: .4; background: #fff; }.step-one { background: #9ddc57; }.step-two { background: #f7c750; }.step-three { background: #a683df; }.step-num { position: relative; z-index: 1; margin-bottom: 11px; color: rgba(47, 49, 84, .5); font-family: var(--display); font-size: 1.02rem; font-weight: 800; letter-spacing: .09em; }.step-text { position: relative; z-index: 1; }.step-text h3 { margin-bottom: 9px; font-size: 2rem; }.step-text p { min-height: 68px; margin-bottom: 12px; font-weight: 700; line-height: 1.45; }.step-media { position: relative; align-self: end; margin: 5px auto 0; overflow: hidden; background: #1e3221; }.phone-frame { width: min(100%, 222px); aspect-ratio: 1080 / 2050; border: 5px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 4px 0 0 rgba(255, 255, 255, .37); }.phone-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.worlds-section { position: relative; overflow: hidden; background: #fff; }.worlds-section::before { content: ""; position: absolute; right: -12vw; bottom: -22vw; width: 55vw; height: 55vw; border-radius: 50%; background: #f8f0c6; }.worlds-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .89fr 1.11fr; gap: 72px; align-items: center; }.worlds-copy p:not(.section-kicker) { max-width: 490px; color: var(--ink-soft); font-size: 1.05rem; font-weight: 600; }.feature-list { display: grid; gap: 12px; padding: 0; margin: 31px 0 0; list-style: none; font-weight: 800; }.feature-list span { display: inline-grid; width: 23px; height: 23px; margin-right: 7px; place-items: center; color: var(--purple-dark); background: #e8dcff; border-radius: 50%; }.worlds-visual { position: relative; transform: rotate(2.1deg); }.worlds-visual img { width: 100%; min-height: 380px; object-fit: cover; border: 8px solid #fff; border-radius: 29px; box-shadow: var(--shadow); }.visual-sticker { position: absolute; z-index: 2; display: grid; place-items: center; color: var(--ink); background: var(--honey); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--display); font-weight: 800; line-height: .88; text-align: center; }.sticker-one { top: -18px; left: -26px; width: 86px; height: 86px; border-radius: 50% 45% 50% 35%; transform: rotate(-13deg); }.sticker-two { right: 19px; bottom: -24px; width: 54px; height: 54px; border-radius: 13px; background: var(--pink); transform: rotate(15deg); }

.gallery-section { background: var(--purple-dark); color: #fff; }.gallery-top { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 55px; }.gallery-top .section-kicker { color: #ffdb4b; }.gallery-top h2 { margin: 12px 0 0; }.gallery-top h2 span { color: #ffcf32; }.gallery-top > p { max-width: 310px; margin: 0 0 7px; color: #e4dbf8; font-weight: 700; }.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; }.gallery-card { position: relative; height: 520px; margin: 0; overflow: hidden; border: 5px solid rgba(255,255,255,.92); border-radius: 24px; background: #1d3623; box-shadow: 8px 10px 0 rgba(20, 11, 49, .3); }.gallery-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }.gallery-card:hover img { transform: scale(1.035); }.gallery-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px 20px; color: #fff; background: linear-gradient(transparent, rgba(26,17,60,.8)); font-weight: 800; }

.closing-section { padding: 96px 0; background: #f3be32; }.closing-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 58px 66px; overflow: hidden; border-radius: 27px; color: #fff; background: var(--purple); box-shadow: 10px 11px 0 rgba(83, 48, 148, .25); }.closing-card h2 { margin: 11px 0 0; font-size: clamp(2.8rem, 5vw, 4.8rem); }.closing-card h2 span { color: var(--honey); }.closing-card .section-kicker { color: #d9c9ff; }.button-light { flex: none; color: var(--purple-dark); background: #fff; box-shadow: 4px 5px 0 rgba(47, 49, 84, .55); }.button-light:hover { transform: translate(2px, 3px); box-shadow: 2px 2px 0 rgba(47, 49, 84, .55); }

.site-footer { padding: 70px 0 23px; color: #d9d9e8; background: #29294b; }.footer-main { display: flex; justify-content: space-between; gap: 70px; padding-bottom: 57px; }.footer-brand .brand { color: #fff; }.footer-brand .brand img { border-color: #4c4c7b; }.footer-brand > p { margin: 16px 0 0; color: #b8b8cf; font-size: .91rem; font-weight: 600; }.footer-links { display: flex; gap: 74px; }.footer-links > div { display: grid; align-content: start; gap: 8px; }.footer-label { margin-bottom: 6px; color: #ffdb4b; }.footer-links a { color: #e5e4ec; font-size: .9rem; font-weight: 700; text-decoration: none; }.footer-links a:hover { color: var(--honey); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.13); color: #adadc4; font-size: .76rem; font-weight: 700; }.footer-bottom p { margin: 0; }

.policy-page { min-height: calc(100vh - 102px); padding: 154px 24px 85px; background: linear-gradient(150deg, #fff9dc, #dff4b3); }.policy-card { width: min(100%, 790px); margin: 0 auto; padding: clamp(30px, 6vw, 66px); border: 2px solid var(--ink); border-radius: 25px; background: #fff; box-shadow: 8px 9px 0 var(--ink); }.policy-card > h1 { margin: 10px 0 6px; font-size: clamp(3.2rem, 8vw, 5.8rem); }.policy-date { margin-bottom: 37px; color: var(--ink-soft); font-size: .88rem; font-weight: 800; }.policy-card > p { max-width: 680px; margin-bottom: 23px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }.policy-card h2 { margin: 37px 0 9px; font-size: 2rem; color: var(--purple-dark); }.policy-card a { color: var(--purple-dark); font-weight: 800; }.policy-footer { padding: 23px 0; }.policy-footer a { color: inherit; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes ticker { to { transform: translateX(-33.33%); } }

@media (max-width: 920px) {
  .hero { min-height: auto; padding-top: 145px; }.hero-grid { grid-template-columns: 1fr; gap: 10px; }.hero-copy { max-width: 700px; padding-top: 0; }.hero-art { min-height: 480px; max-width: 630px; width: 100%; margin: 0 auto; }.art-frame { right: 50%; transform: translateX(50%) rotate(4deg); }.sun-shape { right: 50%; transform: translateX(50%); }.card-blue { left: calc(50% - 290px); }.card-pink { right: calc(50% - 290px); }.intro-layout { grid-template-columns: .55fr 2fr; }.quote-card { grid-column: 2; width: min(100%, 305px); }.play-steps { gap: 16px; }.play-step { min-height: 560px; padding: 23px 18px 0; }.step-text h3 { font-size: 1.7rem; }.step-text p { font-size: .9rem; }.phone-frame { width: min(100%, 194px); }.worlds-layout { gap: 39px; }.closing-card { padding: 48px; }.gallery-card { height: 450px; }
}

@media (max-width: 680px) {
  .wrap { width: min(calc(100% - 32px), var(--wrap)); }.section { padding: 78px 0; }.site-header { padding: 14px 0; }.site-header.is-stuck { padding: 9px 0; }.brand { font-size: 1.45rem; }.brand img { width: 35px; height: 35px; }.menu-toggle { z-index: 2; display: inline-flex; align-items: center; gap: 9px; font-weight: 800; cursor: pointer; }.menu-lines { display: grid; gap: 5px; }.menu-lines i { display: block; width: 19px; height: 2px; background: currentColor; transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }.nav-menu { position: absolute; top: 0; right: -16px; left: -16px; display: grid; gap: 0; padding: 77px 27px 22px; border-bottom: 2px solid var(--ink); background: var(--paper); box-shadow: 0 10px 25px rgba(47,49,84,.12); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .2s ease, transform .2s ease; }.nav-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }.nav-menu > a:not(.nav-cta) { padding: 12px 0; border-bottom: 1px solid var(--line); }.nav-cta { display: inline-block; width: max-content; margin-top: 16px; }.hero { padding: 125px 0 61px; }.hero-grid { gap: 9px; } h1 { margin-bottom: 19px; font-size: clamp(3.1rem, 14vw, 4.7rem); }.hero-lead { margin-bottom: 25px; font-size: 1rem; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-notes { flex-wrap: wrap; margin-top: 29px; }.hero-art { min-height: 359px; }.sun-shape { top: 23px; width: 300px; height: 300px; }.art-frame { right: 50%; width: 300px; border-width: 6px; border-radius: 35% 42% 35% 40%; }.card-blue { top: 55px; left: max(0px, calc(50% - 177px)); transform: rotate(-7deg) scale(.78); transform-origin: left top; }.card-pink { right: max(0px, calc(50% - 178px)); bottom: 52px; transform: rotate(6deg) scale(.78); transform-origin: right bottom; }.bee-flight { top: 21px; right: calc(50% - 146px); }.hero-strip { font-size: .72rem; }.intro-layout { display: block; }.intro-layout > .section-kicker { margin-bottom: 31px; }.intro-copy h2 { font-size: 3rem; }.intro-copy p { font-size: 1rem; }.quote-card { width: min(100%, 300px); min-height: 170px; margin: 38px 0 0 auto; padding: 29px 26px; }.how-section { padding-bottom: 78px; }.heading-centered { margin-bottom: 49px; }.section-heading h2 { font-size: 3.1rem; }.play-steps { grid-template-columns: 1fr; gap: 29px; }.play-step { grid-template-columns: 1fr 1.1fr; grid-template-rows: auto 1fr; min-height: 392px; padding: 24px 20px 0; }.step-num { grid-column: 1 / -1; }.step-text { padding-bottom: 14px; }.step-text h3 { font-size: 1.72rem; }.step-text p { min-height: 0; margin: 0; }.step-media { width: min(100%, 184px); margin: 0 0 0 auto; align-self: end; }.worlds-layout { grid-template-columns: 1fr; gap: 45px; }.worlds-copy h2 { font-size: 3rem; }.worlds-visual img { min-height: 232px; }.sticker-one { left: -11px; }.gallery-top { display: block; margin-bottom: 38px; }.gallery-top h2 { font-size: 3rem; }.gallery-top > p { margin-top: 22px; }.gallery-grid { grid-template-columns: 1fr; gap: 19px; }.gallery-card { height: 405px; }.closing-section { padding: 62px 0; }.closing-card { display: block; padding: 37px 28px; }.closing-card h2 { font-size: 3rem; }.button-light { margin-top: 27px; }.footer-main { display: block; padding-bottom: 40px; }.footer-links { gap: 45px; margin-top: 42px; }.footer-bottom { display: block; }.footer-bottom p + p { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }.hero-strip div { animation: none; }.gallery-card img { transition: none; } }