:root {
  --blue: #0667f9;
  --blue-dark: #0642aa;
  --cyan: #02d9ff;
  --orange: #ff8500;
  --yellow: #ffd426;
  --green: #13c96f;
  --purple: #7657ff;
  --ink: #10275a;
  --muted: #607094;
  --paper: #f7fbff;
  --white: #ffffff;
  --line: rgba(6, 103, 249, 0.15);
  --shadow: 0 22px 60px rgba(9, 68, 151, 0.14);
  --radius: 18px;
  --container: min(1160px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "Nunito Sans", Arial, sans-serif; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip-link { position: fixed; top: -70px; left: 16px; z-index: 50; padding: 10px 14px; color: var(--white); background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.luma-container { width: var(--container); margin: 0 auto; }
.eyebrow { margin: 0 0 9px; color: var(--blue); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow i { margin-right: 6px; color: var(--orange); }
h1, h2, h3 { margin-top: 0; color: var(--ink); font-family: "Baloo 2", cursive; font-weight: 800; line-height: 1.05; letter-spacing: 0; }
h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 3.55rem); }
h3 { margin-bottom: 8px; font-size: 1.35rem; }

.luma-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); box-shadow: 0 7px 24px rgba(7, 50, 116, 0.07); backdrop-filter: blur(16px); }
.luma-nav { width: var(--container); min-height: 76px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.luma-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.luma-brand img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 7px 18px rgba(18, 84, 181, 0.2); }
.luma-brand strong, .luma-brand small { display: block; }
.luma-brand strong { color: var(--ink); font-family: "Baloo 2", cursive; font-size: 1.2rem; line-height: 1; }
.luma-brand small { margin-top: 3px; color: var(--muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.luma-links { display: flex; align-items: center; gap: 24px; color: var(--ink); font-size: 0.82rem; font-weight: 800; }
.luma-links a:hover { color: var(--blue); }
.back-etw { justify-self: end; display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 0.78rem; font-weight: 900; }

.luma-hero { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 105px) 0 58px; background: linear-gradient(135deg, #e9f9ff, #ffffff 48%, #fff1df); isolation: isolate; }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(370px, 1.05fr); align-items: center; gap: clamp(36px, 8vw, 110px); }
.hero-shapes span { position: absolute; z-index: -1; display: block; border-radius: 50%; opacity: 0.6; }
.hero-shapes span:nth-child(1) { left: -76px; top: 12%; width: 160px; height: 160px; background: rgba(2, 217, 255, 0.18); }
.hero-shapes span:nth-child(2) { right: -82px; top: 8%; width: 250px; height: 250px; background: rgba(255, 133, 0, 0.16); }
.hero-shapes span:nth-child(3) { left: 34%; bottom: -70px; width: 150px; height: 150px; background: rgba(118, 87, 255, 0.12); }
.hero-shapes span:nth-child(4) { right: 34%; bottom: 10%; width: 18px; height: 18px; background: var(--yellow); box-shadow: 45px 70px 0 var(--green), -48px 32px 0 var(--orange); }
.launch-badge { width: fit-content; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 19px; padding: 8px 12px; border: 1px solid rgba(6, 103, 249, 0.17); border-radius: 999px; color: var(--blue-dark); background: rgba(255, 255, 255, 0.84); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.launch-badge span { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 133, 0, 0.14); }
.hero-copy h1 { margin-bottom: 18px; font-size: clamp(3.3rem, 7vw, 6.6rem); }
.hero-copy h1 em { color: var(--orange); font-style: normal; }
.hero-text { max-width: 580px; margin-bottom: 24px; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.24rem); }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.google-coming { display: inline-flex; align-items: center; gap: 10px; min-height: 53px; padding: 9px 16px; border: 0; border-radius: 9px; color: #ffffff; background: #0c2149; box-shadow: 0 13px 26px rgba(9, 39, 91, 0.22); text-align: left; cursor: not-allowed; }
.google-coming > i { color: var(--green); font-size: 1.85rem; }
.google-coming small, .google-coming strong { display: block; line-height: 1.2; }
.google-coming small { color: rgba(255, 255, 255, 0.69); font-size: 0.62rem; }
.google-coming strong { font-size: 1.05rem; }
.hero-secondary { display: inline-flex; align-items: center; gap: 8px; min-height: 53px; padding: 12px 17px; border: 1px solid rgba(6, 103, 249, 0.2); border-radius: 9px; color: var(--blue); background: rgba(255, 255, 255, 0.78); font-weight: 900; }
.hero-values { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 25px; color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.hero-values span { display: inline-flex; align-items: center; gap: 6px; }
.hero-values i { color: var(--green); font-size: 1rem; }

.hero-art { position: relative; min-height: 500px; display: grid; place-items: center; }
.hero-sun { position: absolute; top: 4%; right: 11%; width: 86px; height: 86px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 15px rgba(255, 212, 38, 0.13); }
.cloud { position: absolute; width: 94px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 28px -14px 0 2px rgba(255, 255, 255, 0.88), 58px 0 0 -4px rgba(255, 255, 255, 0.88); }
.cloud-one { top: 21%; left: 7%; }
.cloud-two { right: 5%; bottom: 19%; transform: scale(0.72); }
.rainbow { position: absolute; right: 4%; top: 12%; width: 210px; height: 108px; overflow: hidden; }
.rainbow span { position: absolute; left: 50%; bottom: -168px; border-radius: 50%; transform: translateX(-50%); }
.rainbow span:nth-child(1) { width: 300px; height: 300px; border: 20px solid rgba(255, 133, 0, 0.58); }
.rainbow span:nth-child(2) { width: 252px; height: 252px; border: 19px solid rgba(2, 217, 255, 0.64); }
.rainbow span:nth-child(3) { width: 206px; height: 206px; border: 18px solid rgba(118, 87, 255, 0.57); }
.hero-map-card { position: absolute; z-index: 1; width: min(400px, 84%); aspect-ratio: 1.18; overflow: hidden; border: 8px solid #ffffff; border-radius: 34px; background: var(--cyan); box-shadow: 0 25px 54px rgba(11, 79, 160, 0.2); transform: rotate(-5deg); }
.hero-map-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-luma { position: absolute; z-index: 3; right: 3%; bottom: 0; width: min(360px, 72%); filter: drop-shadow(0 20px 20px rgba(2, 70, 123, 0.19)); }
.little-badge { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid #ffffff; border-radius: 999px; color: var(--ink); background: #ffffff; box-shadow: 0 13px 22px rgba(9, 65, 142, 0.16); font-size: 0.78rem; font-weight: 900; }
.little-badge i { color: var(--orange); font-size: 1.15rem; }
.badge-one { left: 0; top: 23%; }
.badge-two { right: 2%; bottom: 14%; }
.badge-two i { color: var(--purple); }
.hero-wave { position: absolute; left: -3%; right: -3%; bottom: -1px; height: 70px; border-radius: 51% 49% 0 0 / 100% 100% 0 0; background: var(--paper); }

.luma-section { padding: clamp(72px, 8vw, 112px) 0; }
.intro-section { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(245px, 0.6fr); align-items: center; gap: clamp(25px, 5vw, 64px); }
.intro-icon { width: 146px; height: 146px; padding: 8px; border-radius: 35px; background: linear-gradient(145deg, var(--blue), var(--cyan)); box-shadow: var(--shadow); transform: rotate(-5deg); }
.intro-icon img { width: 100%; height: 100%; border: 4px solid #ffffff; border-radius: 27px; object-fit: cover; }
.intro-grid > div:nth-child(2) > p:not(.eyebrow) { max-width: 610px; color: var(--muted); }
.luma-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow); }
.luma-numbers > div { padding: 16px 7px; background: #ffffff; text-align: center; }
.luma-numbers strong, .luma-numbers span { display: block; }
.luma-numbers strong { color: var(--blue); font-family: "Baloo 2", cursive; font-size: 1.5rem; line-height: 1; }
.luma-numbers span { margin-top: 4px; color: var(--muted); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }

.ages-section { position: relative; overflow: hidden; background: #ffffff; }
.ages-section::before { content: ""; position: absolute; left: -70px; bottom: -100px; width: 260px; height: 260px; border: 38px solid rgba(2, 217, 255, 0.1); border-radius: 50%; }
.heading-center { max-width: 740px; margin: 0 auto 38px; text-align: center; }
.heading-center > p:not(.eyebrow) { color: var(--muted); }
.age-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.age-card { --age-color: var(--blue); position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 17px; align-items: center; min-height: 160px; padding: 20px; border: 1px solid var(--line); border-left: 7px solid var(--age-color); border-radius: var(--radius); background: #ffffff; box-shadow: 0 14px 33px rgba(10, 72, 154, 0.08); }
.age-orange { --age-color: var(--orange); }.age-green { --age-color: var(--green); }.age-purple { --age-color: var(--purple); }
.age-number { color: var(--age-color); text-align: center; }
.age-number strong, .age-number span { display: block; }
.age-number strong { font-family: "Baloo 2", cursive; font-size: 2rem; line-height: 0.92; }.age-number span { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.age-card h3 { font-size: 1.2rem; }.age-card p { margin: 0; color: var(--muted); font-size: 0.88rem; }

.worlds-section { background: linear-gradient(180deg, var(--paper), #ffffff); }
.heading-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.6fr); align-items: end; gap: 54px; margin-bottom: 37px; }.heading-row h2 { margin-bottom: 0; }.heading-row > p { margin-bottom: 6px; color: var(--muted); }
.world-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.world-card { position: relative; min-height: 286px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: var(--radius); color: #ffffff; background: linear-gradient(145deg, var(--blue-dark), var(--blue)); box-shadow: 0 16px 38px rgba(9, 68, 151, 0.13); transition: transform .25s ease, box-shadow .25s ease; }
.world-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }.world-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.world-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 60, 0.91), rgba(7, 26, 60, 0.05) 72%); }.world-card > div { position: relative; z-index: 2; padding: 19px; }.world-card span { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--yellow); font-size: .68rem; font-weight: 900; text-transform: uppercase; }.world-card h3 { margin-bottom: 6px; color: #ffffff; font-size: 1.2rem; }.world-card p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .78rem; line-height: 1.45; }
.world-card.garden, .world-card.english { align-items: center; justify-content: center; padding: 22px; text-align: center; }.world-card.garden { background: linear-gradient(145deg, #087744, var(--green)); }.world-card.english { background: linear-gradient(145deg, #4e36bf, var(--purple)); }.world-card.garden > i, .world-card.english > i { position: absolute; top: 21px; z-index: 1; color: rgba(255, 255, 255, .19); font-size: 7rem; }.world-card.garden > div, .world-card.english > div { z-index: 2; padding: 0; }.world-card.garden span, .world-card.english span { color: #ffffff; }.world-card.garden::after, .world-card.english::after { display: none; }
.world-card.world-summary { align-items: center; justify-content: center; padding: 24px; text-align: center; background: linear-gradient(145deg, #082e72, #087fc0); }
.world-card.world-summary::after { display: none; }
.world-card.world-summary > i { position: absolute; right: -18px; top: -18px; color: rgba(255,255,255,.12); font-size: 9rem; }
.world-card.world-summary > div { z-index: 2; padding: 0; }
.world-card.world-summary span { color: var(--cyan); }
.world-card.world-summary p { margin: 9px 0; color: #ffffff; font-size: .83rem; }
.world-card.world-summary small { display: block; color: rgba(255,255,255,.75); font-size: .73rem; line-height: 1.45; }

.learning-section { background: #ffffff; }.learning-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 8vw, 110px); }.learning-art { position: relative; min-height: 460px; display: grid; place-items: end center; }.learning-blob { position: absolute; inset: 5% 7% 0; border-radius: 45% 55% 38% 62% / 50% 38% 62% 50%; background: linear-gradient(145deg, #d5f7ff, #ffe4bb); }.learning-art img { position: relative; z-index: 2; width: min(360px, 76%); filter: drop-shadow(0 22px 22px rgba(12, 76, 151, .2)); }.learning-art span { position: absolute; z-index: 3; padding: 10px 14px; border-radius: 999px; color: var(--ink); background: #ffffff; box-shadow: 0 12px 24px rgba(12, 68, 140, .13); font-weight: 900; }.bubble-one { top: 14%; left: 5%; color: var(--blue)!important; }.bubble-two { right: 0; top: 37%; color: var(--orange)!important; }.bubble-three { bottom: 13%; left: 1%; color: var(--green)!important; }.learning-copy > p:not(.eyebrow) { color: var(--muted); }.learning-list { display: grid; gap: 12px; margin-top: 26px; }.learning-list > div { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }.learning-list i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #ffffff; background: var(--blue); font-size: 1.2rem; }.learning-list > div:nth-child(2) i { background: var(--orange); }.learning-list > div:nth-child(3) i { background: var(--green); }.learning-list strong { display: block; color: var(--ink); }.learning-list span { color: var(--muted); font-size: .82rem; }

.family-band { padding: clamp(72px, 8vw, 105px) 0; color: #ffffff; background: linear-gradient(135deg, #071d46, var(--blue-dark) 56%, #0b97d4); }.family-band .eyebrow { color: var(--cyan); }.family-band h2 { color: #ffffff; }.family-band p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }.family-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr); gap: clamp(35px, 8vw, 100px); align-items: center; }.family-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.family-points span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 74px; padding: 13px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 13px; background: rgba(255, 255, 255, .1); }.family-points i { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); background: var(--yellow); }.family-points strong { font-size: .78rem; line-height: 1.25; }

.final-section { background: var(--paper); }.final-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 25px; align-items: center; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; box-shadow: var(--shadow); }.final-card > img { width: 100px; border-radius: 25px; box-shadow: 0 13px 26px rgba(10, 70, 160, .18); }.final-card h2 { margin-bottom: 8px; font-size: clamp(1.7rem, 3vw, 2.5rem); }.final-card p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }.final-actions { display: grid; justify-items: end; gap: 13px; }.final-actions > a { color: var(--blue); font-size: .8rem; font-weight: 900; }.final-actions > a i { margin-left: 5px; }

.luma-footer { padding: 34px 0; border-top: 1px solid var(--line); background: #ffffff; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .75rem; }.footer-app { display: flex; align-items: center; gap: 10px; }.footer-app img { width: 45px; border-radius: 13px; }.footer-app strong, .footer-app small { display: block; }.footer-app strong { color: var(--ink); font-family: "Baloo 2", cursive; font-size: 1rem; line-height: 1; }.footer-app small { margin-top: 2px; font-size: .64rem; font-weight: 800; text-transform: uppercase; }.footer-inner > a { color: var(--blue); font-weight: 800; }

@media (max-width: 980px) { .luma-nav { grid-template-columns: 1fr auto; }.luma-links { display: none; }.hero-layout, .learning-grid, .family-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.launch-badge { margin-left: auto; margin-right: auto; }.hero-buttons, .hero-values { justify-content: center; }.hero-art { width: min(630px, 100%); margin: 0 auto; }.intro-grid { grid-template-columns: auto 1fr; }.luma-numbers { grid-column: 1 / -1; }.world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.learning-art { width: min(520px, 100%); margin: 0 auto; }.final-card { grid-template-columns: auto 1fr; }.final-actions { grid-column: 1 / -1; justify-items: start; } }
@media (max-width: 650px) { :root { --container: min(100% - 28px, 1160px); }.luma-nav { min-height: 70px; }.luma-brand img { width: 44px; height: 44px; }.luma-brand strong { font-size: 1rem; }.back-etw { font-size: 0; }.back-etw i { font-size: 1.12rem; }.luma-hero { padding-top: 56px; }.hero-copy h1 { font-size: clamp(2.9rem, 15vw, 4.8rem); }.hero-buttons { display: grid; }.hero-buttons > * { width: 100%; justify-content: center; }.hero-values { gap: 10px; }.hero-art { min-height: 390px; }.hero-map-card { width: 76%; border-width: 6px; }.hero-luma { width: 66%; }.little-badge { padding: 8px 10px; font-size: .67rem; }.badge-one { top: 12%; }.badge-two { right: 0; bottom: 9%; }.rainbow { transform: scale(.75); transform-origin: top right; }.intro-grid, .age-grid, .heading-row, .family-grid { grid-template-columns: 1fr; }.intro-icon { width: 122px; height: 122px; margin: 0 auto; }.intro-grid { text-align: center; }.luma-numbers { grid-column: auto; }.age-card { grid-template-columns: 66px 1fr; }.world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.world-card { min-height: 250px; }.world-card h3 { font-size: 1.08rem; }.world-card p { font-size: .7rem; }.learning-art { min-height: 375px; }.family-points { grid-template-columns: 1fr; }.final-card { grid-template-columns: 1fr; text-align: center; }.final-card > img { margin: 0 auto; }.final-actions { grid-column: auto; justify-items: center; }.footer-inner { flex-direction: column; text-align: center; }.footer-app { text-align: left; } }
@media (max-width: 390px) { .world-grid { grid-template-columns: 1fr; }.hero-values { display: grid; justify-content: start; text-align: left; }.luma-numbers strong { font-size: 1.24rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }

.back-etw { min-height: 46px; padding: 10px 16px; gap: 10px; border: 1px solid rgba(6,103,249,.22); border-radius: 8px; color: #ffffff; background: linear-gradient(135deg, var(--blue-dark), var(--blue)); box-shadow: 0 10px 24px rgba(6,103,249,.18); font-size: .84rem; transition: transform .2s ease, box-shadow .2s ease; }
.back-etw i { font-size: 1.05rem; }.back-etw:hover { color: #ffffff; transform: translateX(-3px); box-shadow: 0 14px 28px rgba(6,103,249,.27); }
@media (max-width: 650px) { .back-etw { min-width: 48px; padding: 10px 13px; font-size: .72rem; }.back-etw span { display: inline; }.back-etw i { font-size: 1rem; } }
@media (max-width: 440px) { .back-etw span { display: none; }.back-etw i { font-size: 1.1rem; } }

.google-coming > i.bi-apple { color: #ffffff; }