/* osmokids.space: the Osmo marketing site. Same family as the app (app/static/app.css):
   Fredoka for display, Lexend for reading, deep-space violet, sunny yellow wordmark. */
:root {
  --ink: #241a4f;
  --ink-2: #4f4878;
  --muted: #8e88ad;
  --cream: #fff8ef;
  --paper: #fff;
  --line: #efe7f6;
  --violet: #6e4bff;
  --violet-d: #4a2fcf;
  --sun: #ffc233;
  --sun-d: #e09200;
  --mint: #1fbf87;
  --mint-d: #0f9466;
  --coral: #ff5c6c;
  --orange: #ff7f24;
  --space: #170f3d;
  --space-2: #2c1b74;
  --shadow: 0 18px 50px rgba(36, 26, 79, .14);
  --shadow-s: 0 6px 18px rgba(36, 26, 79, .08);
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --read: "Lexend", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.65 var(--read); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--violet); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 10px; z-index: 99; }
.skip:focus { left: 8px; }
.eyebrow { display: inline-block; font: 600 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.dark .eyebrow { color: var(--sun); }
.lead { font-size: 19px; color: var(--ink-2); }
.center { text-align: center; }
.sec { padding: 104px 0; }
.sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sec-head h2 { font-size: clamp(34px, 4.6vw, 52px); margin: 10px 0 14px; }

/* wordmark: the app icon's extruded yellow "osmo" */
.word { font: 700 30px var(--display); color: #ffc93a; letter-spacing: -.03em; line-height: 1;
  text-shadow: 1px 1.5px 0 #3b1aa8, 2px 3px 0 #3b1aa8, 3px 4.5px 0 #3b1aa8; text-decoration: none; }

/* buttons: chunky, "pressable", like the app */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 18px var(--display); text-decoration: none;
  padding: 15px 26px; border-radius: 18px; border: 0; cursor: pointer; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-d); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 5px 0 var(--violet-d); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.btn:hover { transform: translateY(-2px); }
.btn-sun:hover { box-shadow: 0 7px 0 var(--sun-d); }
.btn-violet:hover { box-shadow: 0 7px 0 var(--violet-d); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-d); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s; }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: #e4ddff; text-decoration: none; font: 500 16px var(--display); }
.nav-links a:hover { color: #fff; }
.nav .btn { padding: 10px 18px; font-size: 16px; box-shadow: 0 4px 0 var(--sun-d); }
.nav.scrolled { background: rgba(23, 15, 61, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

/* hero */
.hero { position: relative; color: #fff; padding: 150px 0 0; overflow: hidden;
  background: radial-gradient(1200px 700px at 78% 30%, #5b33e6 0%, transparent 60%),
              radial-gradient(900px 600px at 10% 10%, #3a1fae 0%, transparent 65%),
              linear-gradient(180deg, #1c1150 0%, #170f3d 100%); }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; margin: 18px 0 22px; }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero .lead { color: #d3caf7; max-width: 560px; font-size: 20px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 22px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px 7px 8px; border-radius: 999px; font: 500 15px var(--display); color: #efeaff; }
.pill b { background: var(--mint); color: #fff; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.hero-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #c2b8ef; font-size: 15px; }
.hero-ticks span { display: inline-flex; align-items: center; gap: 7px; }
.hero-ticks svg { width: 18px; height: 18px; color: var(--mint); }

.hero-art { position: relative; height: 640px; }
.hero-art .moon { position: absolute; right: -150px; bottom: -230px; width: 560px; height: 560px; }
.hero-art .moon svg { width: 100%; height: 100%; }
.hero-art .phone { position: absolute; left: 50%; top: 10px; transform: translateX(-58%) rotate(-4deg); }
.hero-art .astro { position: absolute; right: -6px; bottom: 210px; animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.hero-art .fp { position: absolute; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
@keyframes bob { 50% { transform: translateY(-14px); } }
.osmo-wave { transform-origin: 82px 86px; transform-box: view-box; animation: wave 1.4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 60% { transform: rotate(6deg); } }

/* phone frame around real app screenshots */
.phone { width: 290px; aspect-ratio: 600 / 1200; border-radius: 42px; padding: 10px; background: #0d0826;
  box-shadow: 0 40px 80px rgba(8, 3, 30, .55), inset 0 0 0 2px #3a2d78; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 33px; }
.phone.sm { width: 250px; border-radius: 36px; padding: 9px; }
.phone.sm img { border-radius: 28px; }

.hero-wave { display: block; width: 100%; height: 90px; margin-top: -1px; position: relative; }

/* trust strip */
.strip { padding: 34px 0 0; }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.strip li { background: #fff; border-radius: 20px; padding: 18px 14px; text-align: center; box-shadow: var(--shadow-s); font: 600 16px/1.25 var(--display); }
.strip li svg { width: 28px; height: 28px; display: block; margin: 0 auto 8px; }

/* live stories */
.live-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story { background: #fff; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
.story .img { aspect-ratio: 16 / 10; background: #eae4fb center / cover no-repeat; }
.story .body { padding: 34px 22px 22px; position: relative; flex: 1; display: flex; flex-direction: column; }
.story .pl { position: absolute; top: -30px; left: 18px; }
.tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font: 600 14px var(--display); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.story h3 { font-size: 22px; line-height: 1.22; margin-bottom: 10px; }
.story p { color: var(--ink-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story .meta { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 14px; }
.live-note { text-align: center; margin-top: 30px; color: var(--muted); font-size: 15px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); margin-right: 8px; animation: pulse 1.6s infinite; vertical-align: 1px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,92,108,.6); } 100% { box-shadow: 0 0 0 12px rgba(255,92,108,0); } }
.skel .img, .skel h3, .skel p { background: linear-gradient(90deg, #f1ecfb 25%, #f8f5fe 50%, #f1ecfb 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; color: transparent; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* how a story is made */
.how { background: #fff; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: s; position: relative; }
.step { background: var(--cream); border-radius: 26px; padding: 28px 24px; position: relative; }
.step .n { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 700 22px var(--display); color: #fff; margin-bottom: 18px; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--ink-2); }
.levels { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lv { border-radius: 24px; padding: 24px; border: 2px solid var(--line); background: #fff; }
.lv small { font: 600 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lv h4 { font-size: 20px; margin: 4px 0 10px; }
.lv p { font-size: 16px; color: var(--ink-2); }

/* planets */
.planets { background: linear-gradient(180deg, #170f3d, #24166a); color: #fff; position: relative; overflow: hidden; }
.planets .lead { color: #c2b8ef; }
.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.pcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 26px; padding: 22px 16px 20px; text-align: center; transition: transform .2s, background .2s; }
.pcard:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.pcard svg { margin: 0 auto 8px; display: block; }
.pcard h3 { font-size: 19px; margin-bottom: 6px; }
.pcard p { font-size: 13.5px; line-height: 1.5; color: #b9aee8; }

/* feature tour */
.tour { display: grid; gap: 120px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.feat.flip .feat-art { order: 2; }
.feat-art { display: flex; justify-content: center; position: relative; }
.feat-art::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--blob, #ece6ff); }
.feat-art .phone { position: relative; }
.feat-art .phone + .phone { margin-left: -60px; margin-top: 90px; }
.feat h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 10px 0 16px; }
.feat ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.feat li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; }
.feat li svg { flex: none; width: 24px; height: 24px; color: var(--mint); margin-top: 2px; }

/* grown-ups */
.grown { background: #fff; }
.gg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gcard { border-radius: 24px; padding: 26px; background: var(--cream); }
.gcard .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 16px; }
.gcard .ic svg { width: 26px; height: 26px; }
.gcard h3 { font-size: 20px; margin-bottom: 8px; }
.gcard p { font-size: 15.5px; color: var(--ink-2); }
.never { margin-top: 40px; border-radius: 28px; padding: 30px 34px; background: var(--space); color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.never h3 { font-size: 26px; }
.never ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.never li { background: rgba(255,255,255,.08); border-radius: 999px; padding: 7px 15px 7px 11px; font: 500 15px var(--display); display: inline-flex; gap: 7px; align-items: center; }
.never li svg { width: 16px; height: 16px; color: var(--coral); }

/* pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 920px; margin: 0 auto; }
.plan { background: #fff; border-radius: 30px; padding: 34px; box-shadow: var(--shadow); position: relative; }
.plan.plus { background: linear-gradient(160deg, #3a1fae, #170f3d); color: #fff; }
.plan h3 { font-size: 28px; }
.plan .price { font: 700 46px var(--display); margin: 14px 0 2px; }
.plan .price small { font-size: 18px; font-weight: 500; opacity: .75; }
.plan .sub { font-size: 15px; color: var(--muted); }
.plan.plus .sub { color: #c2b8ef; }
.plan ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 16px; }
.plan li svg { flex: none; width: 22px; height: 22px; color: var(--mint); margin-top: 2px; }
.plan.plus li svg { color: var(--sun); }
.badge { position: absolute; top: -14px; right: 26px; background: var(--sun); color: var(--ink); font: 600 14px var(--display); padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--sun-d); }
.fine { text-align: center; color: var(--muted); font-size: 14px; margin-top: 26px; }

/* faq */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 20px; padding: 4px 24px; box-shadow: var(--shadow-s); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font: 600 19px var(--display); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--violet); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; }

/* final CTA */
.final { padding: 40px 0 110px; }
.final-card { position: relative; overflow: hidden; border-radius: 40px; padding: 70px 60px; color: #fff; text-align: center;
  background: radial-gradient(600px 400px at 80% 0%, #6a45ff, transparent 70%), linear-gradient(160deg, #3a1fae, #170f3d); }
.final-card h2 { font-size: clamp(34px, 5vw, 58px); margin: 14px 0; }
.final-card .lead { color: #d3caf7; max-width: 560px; margin: 0 auto; }
.final-card .hero-cta { justify-content: center; }
.final-card .fa { position: absolute; }

/* footer */
.foot { background: var(--space); color: #b9aee8; padding: 64px 0 34px; font-size: 15px; }
.foot .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot p { margin-top: 14px; max-width: 340px; }
.foot h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: #b9aee8; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }

/* play badge */
.play { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; text-decoration: none; padding: 9px 20px 9px 16px; border-radius: 14px; border: 1px solid #555; position: relative; }
.play svg { width: 26px; height: 26px; }
.play span { display: grid; line-height: 1.1; font: 500 11px var(--read); letter-spacing: .02em; text-transform: uppercase; }
.play b { font: 600 20px var(--display); text-transform: none; letter-spacing: 0; }
.play[aria-disabled="true"] { cursor: default; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { height: 560px; }
  .strip ul { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .gg { grid-template-columns: 1fr 1fr; }
  .live-row { grid-template-columns: 1fr 1fr; }
  .foot .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .sec { padding: 76px 0; }
  .sec-head { margin-bottom: 40px; }
  .nav-links, .nav .btn { display: none; }
  .nav-toggle { display: block; }
  .nav.open { background: rgba(23, 15, 61, .97); }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: rgba(23, 15, 61, .97); padding: 10px 16px 24px; gap: 4px; }
  .nav.open .nav-links a { padding: 12px 4px; font-size: 18px; }
  .hero { padding-top: 116px; }
  .hero .lead { font-size: 18px; }
  .hero-art { height: 500px; }
  .hero-art .phone { width: 240px; transform: translateX(-60%) rotate(-4deg); }
  .hero-art .astro svg { width: 120px; height: 120px; }
  .hero-art .moon { width: 420px; height: 420px; right: -170px; bottom: -200px; }
  .strip ul { grid-template-columns: 1fr 1fr; }
  .steps, .levels, .gg, .live-row, .plans { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .feat, .feat.flip { grid-template-columns: 1fr; gap: 40px; }
  .feat.flip .feat-art { order: 0; }
  .feat-art::before { width: 300px; height: 300px; }
  .phone.sm { width: 190px; }
  .feat-art .phone + .phone { margin-left: -50px; margin-top: 60px; }
  .tour { gap: 84px; }
  .never { grid-template-columns: 1fr; padding: 26px 22px; }
  .final-card { padding: 50px 22px; border-radius: 30px; }
  .foot .grid { grid-template-columns: 1fr; gap: 30px; }
}