:root {
  --ink: #27194e;
  --muted: #625c7d;
  --purple: #7a3ee8;
  --pink: #ff4fa3;
  --blue: #3ea9f5;
  --yellow: #ffd84d;
  --green: #75c85c;
  --surface: rgba(255,255,255,.78);
  --line: rgba(94,64,148,.11);
  --shadow: 0 22px 70px rgba(97, 61, 151, .15);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,190,227,.46), transparent 25rem),
    radial-gradient(circle at 88% 8%, rgba(180,235,255,.45), transparent 26rem),
    linear-gradient(180deg,#fffafe 0%,#f8fbff 42%,#fffaf4 100%);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height:auto; display:block; }
button, select { font: inherit; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline:auto; }
.ambient { position: fixed; z-index:-1; filter: blur(70px); border-radius:50%; opacity:.28; pointer-events:none; }
.ambient-a { width:360px;height:360px;background:#fbb9df;left:-120px;top:35vh; }
.ambient-b { width:420px;height:420px;background:#aeeaff;right:-150px;top:60vh; }

.site-header {
  width: min(1220px, calc(100% - 32px));
  margin: 16px auto 0;
  min-height: 74px;
  padding: 12px 16px 12px 22px;
  display:flex;align-items:center;gap:26px;
  position: sticky;top:12px;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(145%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 35px rgba(80,50,130,.1);
  border-radius:28px;
}
.brand { display:grid;grid-template-columns:auto auto;align-items:center;line-height:1;min-width:max-content; }
.brand-word { font-size:26px;font-weight:950;letter-spacing:-1.5px;background:linear-gradient(90deg,#8b38dd,#ee4ba6 35%,#238be6 75%,#12afe8);-webkit-background-clip:text;background-clip:text;color:transparent; }
.brand-star { color:#ffd331;font-size:17px;margin-left:2px;filter:drop-shadow(0 2px 3px #ffca38); }
.brand-tagline { grid-column:1/3;font-size:10px;font-weight:800;color:#66558b;letter-spacing:.06em;margin-top:5px; }
.nav { display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:780;color:#574873; }
.nav a { transition:.2s ease; }
.nav a:hover { color:var(--purple);transform:translateY(-1px); }
.header-actions { display:flex;align-items:center;gap:10px; }
.language-switcher { display:flex;align-items:center;gap:3px;padding:4px;background:rgba(244,238,252,.86);border:1px solid var(--line);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.language-switcher a { border:0;background:transparent;color:#6e6384;border-radius:11px;padding:7px 8px;font-size:11px;font-weight:900;cursor:pointer;transition:.18s ease; }
.language-switcher a:hover { color:#6f39ca;background:rgba(255,255,255,.65); }
.language-switcher a.active { color:white;background:linear-gradient(135deg,#8e49e8,#f252a9);box-shadow:0 5px 12px rgba(130,67,206,.2); }
.button { display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:18px;font-weight:850;transition:.2s ease;white-space:nowrap; }
.button:hover { transform:translateY(-2px); }
.button-small { color:white;background:linear-gradient(135deg,#ff5daa,#863ceb);padding:12px 17px;box-shadow:0 9px 20px rgba(224,67,166,.22);font-size:13px; }

.hero { min-height:720px;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:28px;padding:70px 0 35px; }
.hero-copy { position:relative;z-index:2;padding-left:14px;min-width:0;overflow:visible; }
.eyebrow,.kicker { display:inline-flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#8c56cc; }
.eyebrow span:first-child { color:#ffc92e;font-size:18px; }
.hero h1 { font-size:clamp(48px,5.2vw,78px);line-height:.98;letter-spacing:-3.4px;margin:18px 0 22px;max-width:100%;padding-right:.18em;padding-bottom:.08em;overflow:visible;text-wrap:balance;background:linear-gradient(155deg,#6330c7 5%,#8d3fe6 35%,#ff4fa5 72%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.hero h1 > span { display:block;max-width:100%;overflow:visible; }
.hero-title-accent { color:inherit; }
.hero-lead { font-size:19px;line-height:1.65;color:var(--muted);max-width:560px;margin:0; }
.hero-actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:30px; }
.button-primary { color:white;background:linear-gradient(135deg,#ff5faa,#8a3beb);padding:16px 22px;box-shadow:0 16px 30px rgba(219,72,174,.24); }
.button-secondary { background:rgba(255,255,255,.72);border:1px solid rgba(111,71,168,.2);padding:15px 20px;color:#5f3c9d; }
.apple { font-size:21px;line-height:1; }
.trust-row { display:flex;gap:9px;flex-wrap:wrap;margin-top:28px; }
.trust-row > span { background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:0 10px 22px rgba(95,68,133,.06);border-radius:999px;padding:9px 13px;color:#6a607e;font-size:12px;font-weight:750; }
.trust-row b { color:#7d44d7;font-size:14px;margin-right:3px; }

.hero-stage { height:610px;position:relative;isolation:isolate; }
.hero-stage:before { content:"";position:absolute;inset:60px 5px 20px 10px;background:radial-gradient(circle at 55% 42%,rgba(255,255,255,.95),rgba(255,216,243,.62) 42%,rgba(197,231,255,.45) 73%,transparent 74%);border-radius:50%;filter:drop-shadow(0 30px 50px rgba(100,69,152,.14));z-index:-2; }
.hero-stage:after { content:"";position:absolute;width:82%;height:130px;left:9%;bottom:20px;background:rgba(153,102,190,.12);filter:blur(35px);border-radius:50%;z-index:-3; }
.hero-mascot { position:absolute;z-index:3;filter:drop-shadow(0 22px 24px rgba(70,39,120,.13));animation:float 5s ease-in-out infinite; }
.hero-liv { width:285px;left:-10px;top:77px;transform:rotate(-5deg); }
.hero-ivy { width:265px;right:15px;top:61px;animation-delay:-2.2s; }
.hero-rex { width:250px;left:8px;bottom:18px;animation-delay:-3.1s; }
.hero-bolt { width:245px;right:-9px;bottom:10px;animation-delay:-1.1s; }
.device-stack { position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:300px;height:545px;z-index:4; }
.phone-frame { position:absolute;background:#181226;padding:9px;border-radius:38px;box-shadow:0 30px 55px rgba(57,31,101,.34),inset 0 0 0 1px rgba(255,255,255,.13);overflow:hidden; }
.phone-frame:before { content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:50px;height:8px;border-radius:999px;background:#17121f;z-index:2; }
.phone-frame img { width:100%;height:100%;object-fit:cover;border-radius:30px; }
.phone-front { width:210px;height:456px;right:8px;top:45px;transform:rotate(3deg); }
.phone-back { width:172px;height:372px;left:-9px;top:111px;transform:rotate(-8deg);opacity:.94; }
.float-pill { position:absolute;z-index:6;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);padding:11px 14px;border-radius:999px;box-shadow:0 13px 24px rgba(80,47,121,.14);font-size:12px;font-weight:900; }
.float-pill span:first-child { color:#ffc62f;margin-right:4px; }
.float-pill-a { left:36%;bottom:69px; }
.float-pill-b { right:18%;top:21px; }
.sparkle { position:absolute;z-index:1;color:#ffd139;text-shadow:0 3px 7px rgba(255,196,0,.24);animation:twinkle 2.2s ease-in-out infinite; }
.s1{left:23%;top:56px;font-size:24px}.s2{right:9%;top:32%;font-size:19px;animation-delay:-.7s}.s3{left:3%;top:45%;font-size:22px;animation-delay:-1.2s}.s4{right:38%;bottom:21px;font-size:17px;animation-delay:-1.7s}
@keyframes float { 0%,100%{margin-top:0}50%{margin-top:-10px} }
@keyframes twinkle { 0%,100%{transform:scale(.75) rotate(0);opacity:.65}50%{transform:scale(1.18) rotate(12deg);opacity:1} }

.feature-strip { display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:15px 0 95px; }
.feature-card { background:var(--surface);border:1px solid rgba(255,255,255,.95);border-radius:25px;padding:21px 17px;box-shadow:0 15px 35px rgba(80,50,128,.08);min-height:185px;transition:.25s ease; }
.feature-card:hover { transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow); }
.feature-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#fff,#f0e8ff);font-size:22px;margin-bottom:15px;box-shadow:inset 0 0 0 1px rgba(107,72,154,.07); }
.feature-card h3 { margin:0 0 8px;font-size:15px;letter-spacing:-.2px; }
.feature-card p { margin:0;color:#766e88;font-size:12px;line-height:1.5; }

.section-heading { text-align:center;max-width:770px;margin:0 auto 38px; }
.section-heading h2,.learn h2,.parents h2,.cta h2 { font-size:clamp(36px,4.4vw,58px);line-height:1.02;letter-spacing:-2.8px;margin:11px 0 15px; }
.section-heading p,.learn-copy>p,.parents-copy>p { color:var(--muted);font-size:17px;line-height:1.65;margin:0; }
.how { padding:35px 0 115px; }
.how-grid { display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:center; }
.how-card { position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);border-radius:34px;min-height:350px;padding:25px 26px 28px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end; }
.how-card:before { content:"";position:absolute;width:230px;height:230px;border-radius:50%;left:50%;top:10px;transform:translateX(-50%);background:radial-gradient(circle,#fbeaff 0,#edf4ff 70%,transparent 71%); }
.how-card img { position:absolute;width:205px;height:215px;object-fit:contain;left:50%;top:6px;transform:translateX(-50%);z-index:1; }
.how-card h3 { margin:0 0 6px;font-size:24px; }
.how-card p { margin:0;color:#706780;font-size:14px;line-height:1.55; }
.step { position:absolute;left:20px;top:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#8b48e8;color:white;font-weight:950;box-shadow:0 7px 14px rgba(126,61,211,.25);z-index:2; }
.step.pink{background:#f354a8}.step.blue{background:#3ca7f1}.flow-arrow{text-align:center;color:#9c70de;font-size:35px;font-weight:900;}

.learn { padding:30px 0 120px; }
.learn-panel { min-height:620px;display:grid;grid-template-columns:1.05fr .95fr;gap:35px;align-items:center;background:linear-gradient(135deg,rgba(253,238,255,.9),rgba(237,249,255,.88) 52%,rgba(255,247,224,.84));border:1px solid rgba(255,255,255,.95);border-radius:46px;padding:54px 58px;box-shadow:var(--shadow);overflow:hidden;position:relative; }
.learn-panel:before { content:"";position:absolute;right:-130px;top:-160px;width:450px;height:450px;border-radius:50%;background:rgba(255,201,235,.32);filter:blur(6px); }
.subject-chips { display:flex;flex-wrap:wrap;gap:10px;margin-top:28px; }
.subject-chips span { background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:10px 13px;font-size:13px;font-weight:850;box-shadow:0 7px 16px rgba(100,75,140,.06); }
.screen-showcase { position:relative;height:520px; }
.showcase-phone { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(3deg);width:238px;height:515px;background:#191425;padding:9px;border-radius:40px;box-shadow:0 34px 60px rgba(70,41,110,.3);overflow:hidden; }
.showcase-phone img { width:100%;height:100%;object-fit:cover;border-radius:31px; }
.mini-note { position:absolute;background:#fff;border-radius:999px;padding:12px 16px;font-size:13px;font-weight:900;box-shadow:0 14px 24px rgba(89,60,126,.13);z-index:3; }
.note-a { left:4%;top:25%;transform:rotate(-5deg); }
.note-b { right:0;bottom:22%;transform:rotate(5deg); }

.friends { padding:15px 0 120px; }
.animation-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }
.animation-card { border-radius:32px;padding:14px 14px 18px;background:rgba(255,255,255,.82);box-shadow:0 18px 38px rgba(75,46,114,.1);border:1px solid rgba(255,255,255,.95);transition:.25s ease; }
.animation-card:hover { transform:translateY(-6px); }
.animation-stage { aspect-ratio:1/1;border-radius:24px;display:grid;place-items:center;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 42%,#fff 0,#f8efff 58%,#eaf7ff 100%);box-shadow:inset 0 0 0 1px rgba(108,68,165,.08);clip-path:inset(0 round 24px);contain:paint;isolation:isolate; }
.animation-stage:before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(174,117,255,.12),transparent 60%);pointer-events:none;z-index:1; }
.animation-stage:after { content:"";position:absolute;left:12%;right:12%;bottom:5%;height:18px;background:rgba(129,79,195,.12);filter:blur(12px);border-radius:50%;z-index:2;pointer-events:none; }
.animation-stage video,.animation-stage img { width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:1;background:transparent; }
.mascot-video { display:block;background:transparent;transform:translateZ(0); }
.live-badge { position:absolute;left:12px;bottom:12px;z-index:4;color:white;background:rgba(35,22,56,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.2); }
.liv-card .animation-stage{box-shadow:inset 0 0 0 1px rgba(255,114,203,.16)}
.ivy-card .animation-stage{box-shadow:inset 0 0 0 1px rgba(184,105,255,.16)}
.rex-card .animation-stage{box-shadow:inset 0 0 0 1px rgba(181,237,101,.16)}
.bolt-card .animation-stage{box-shadow:inset 0 0 0 1px rgba(82,177,255,.18)}
.animation-card h3 { margin:14px 5px 2px;font-size:21px; }
.animation-card p { margin:0 5px;color:#756c85;font-size:13px; }

.parents { padding:20px 0 125px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:80px; }
.parents-visual { min-height:570px;position:relative; }
.parents-visual:before { content:"";position:absolute;width:470px;height:470px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,#ffe7f5,#e7f4ff);box-shadow:var(--shadow); }
.parents-phone { width:210px;height:456px;left:47%;top:48%;transform:translate(-50%,-50%) rotate(-4deg);z-index:2; }
.parents-icon { position:absolute;width:155px;right:7%;bottom:7%;z-index:3;filter:drop-shadow(0 20px 24px rgba(98,54,132,.18));border-radius:34px; }
.check-list { list-style:none;padding:0;margin:27px 0 0;display:grid;gap:13px; }
.check-list li { position:relative;padding-left:34px;color:#5f5570;font-weight:750;line-height:1.45; }
.check-list li:before { content:"✓";position:absolute;left:0;top:-2px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#e5f9db;color:#3f9b37;font-weight:950;font-size:12px; }

.cta { min-height:360px;position:relative;overflow:hidden;border-radius:46px;padding:62px clamp(250px,25vw,300px);margin-bottom:55px;text-align:center;color:white;background:radial-gradient(circle at 50% -50%,#da75ff 0,transparent 55%),linear-gradient(135deg,#6c34cf,#8f46e8 45%,#4d8ee7);box-shadow:0 30px 65px rgba(86,47,152,.25); }
.cta:before { content:"✦   ★   ✧   ★   ✦";position:absolute;inset:30px 0 auto;color:rgba(255,255,255,.46);font-size:20px;letter-spacing:42px;white-space:nowrap; }
.cta-copy { position:relative;z-index:3;max-width:580px;margin-inline:auto; }
.cta h2 { margin-top:9px;color:#fff; }
.cta p { max-width:540px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.84);line-height:1.6; }
.light { color:#ffe179; }
.button-light { background:white;color:#5f3fb0;padding:14px 20px;box-shadow:0 12px 23px rgba(48,24,99,.2); }
.cta-actions { display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px; }
.coming-soon { font-size:12px;font-weight:850;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:12px 15px;border-radius:16px; }
.cta img { position:absolute;z-index:2;filter:drop-shadow(0 22px 20px rgba(46,22,90,.2)); }
.cta-liv{width:240px;left:-10px;bottom:-18px;transform:rotate(-6deg)}.cta-rex{width:210px;left:160px;bottom:-14px}.cta-ivy{width:220px;right:155px;bottom:-14px}.cta-bolt{width:225px;right:-15px;bottom:-16px;transform:rotate(4deg)}

.footer { padding:12px 0 45px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;color:#766a87;font-size:12px; }
.footer-brand { display:flex;align-items:center;gap:3px;font-weight:950; }
.footer-brand .brand-word { font-size:22px; }
.footer-brand span:last-child { color:#ffd335; }
.footer-links { display:flex;gap:18px;flex-wrap:wrap; }
.footer-links a:hover { color:var(--purple); }
.copyright { margin:0; }

.reveal { opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1;transform:none; }

@media (max-width:1050px) {
  .nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-copy { text-align:center;max-width:760px;margin:auto;padding:0; }
  .hero h1,.hero-lead { margin-left:auto;margin-right:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-stage { max-width:760px;width:100%;margin:auto; }
  .feature-strip { grid-template-columns:repeat(3,1fr); }
  .how-grid { grid-template-columns:1fr;gap:16px; }
  .flow-arrow { transform:rotate(90deg);height:30px; }
  .how-card { min-height:270px;padding-left:43%; }
  .how-card:before { left:20%;top:20px;transform:translateX(-50%); }
  .how-card img { left:20%;top:22px;width:190px;height:210px; }
  .learn-panel { grid-template-columns:1fr; }
  .animation-grid { grid-template-columns:repeat(2,1fr); }
  .parents { gap:35px; }
  .cta { padding-inline:25%;padding-top:55px; }
  .cta-rex,.cta-ivy { display:none; }
}

@media (max-width:720px) {
  .section-shell { width:min(100% - 24px,1180px); }
  .site-header { width:calc(100% - 16px);margin-top:8px;top:7px;border-radius:22px;padding:10px 11px 10px 14px; }
  .brand-word { font-size:22px; }
  .brand-tagline { display:none; }
  .button-small { display:none; }
  .site-header { flex-wrap:wrap; }
  .header-actions { margin-left:auto; }
  .language-switcher { order:2;gap:2px;padding:3px; }
  .language-switcher a { padding:6px 6px;font-size:10px; }
  .hero { min-height:auto;padding-top:48px; }
  .hero h1 { font-size:50px;letter-spacing:-2.7px;padding-right:0; }
  .hero-lead { font-size:16px; }
  .hero-stage { height:500px;margin-top:5px; }
  .hero-liv { width:205px;left:-45px;top:70px; }
  .hero-ivy { width:190px;right:-40px;top:70px; }
  .hero-rex { width:180px;left:-30px;bottom:20px; }
  .hero-bolt { width:180px;right:-35px;bottom:20px; }
  .device-stack { width:240px;height:450px; }
  .phone-front { width:180px;height:391px;right:0; }
  .phone-back { width:142px;height:310px;left:0;top:105px; }
  .float-pill { display:none; }
  .feature-strip { grid-template-columns:repeat(2,1fr);padding-bottom:80px; }
  .feature-card { min-height:166px; }
  .how-card { padding-left:30px;padding-top:210px;min-height:390px; }
  .how-card:before { left:50%; }
  .how-card img { left:50%; }
  .learn-panel { padding:38px 22px;border-radius:32px; }
  .section-heading h2,.learn h2,.parents h2,.cta h2 { font-size:38px;letter-spacing:-2px; }
  .animation-grid { grid-template-columns:1fr 1fr;gap:10px; }
  .animation-card { padding:9px 9px 14px;border-radius:24px; }
  .animation-stage { border-radius:19px; }
  .parents { grid-template-columns:1fr;gap:15px;padding-bottom:90px; }
  .parents-visual { min-height:500px;order:2; }
  .cta { padding:52px 21px 230px;min-height:560px;border-radius:34px; }
  .cta-liv{width:190px;left:-16px}.cta-bolt{width:185px;right:-20px}.cta-ivy{display:block;width:168px;right:50%;transform:translateX(50%);bottom:-18px}.cta-rex{display:none}
  .footer { grid-template-columns:1fr;text-align:center;justify-items:center; }
  .footer-links { justify-content:center; }
}

@media (max-width:430px) {
  .site-header { gap:8px; }
  .header-actions { width:100%;justify-content:flex-end; }
  .language-switcher { width:100%;justify-content:space-between; }
  .language-switcher a { flex:1;text-align:center; }
  .hero h1 { font-size:44px;letter-spacing:-2.3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .reveal { opacity:1;transform:none; }
}