:root {
  --navy: #07152f;
  --navy-2: #0d234b;
  --blue: #245dff;
  --blue-soft: #dfe8ff;
  --mint: #67e7c3;
  --yellow: #9ec636;
  --coral: #ff6b6b;
  --ink: #10182b;
  --muted: #63708a;
  --paper: #f6f8fc;
  --white: #fff;
  --line: #dfe5ef;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header { position: sticky; top: 0; z-index: 20; max-width: 1240px; margin: 16px auto 0; padding: 12px 16px 12px 22px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.88); border: 1px solid rgba(216,224,237,.9); border-radius: 18px; backdrop-filter: blur(18px); box-shadow: 0 12px 45px rgba(12,30,65,.08); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 32px; height: 32px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 6px; border-radius: 10px; background: var(--navy); }
.brand-mark i { display: block; border-radius: 4px; background: var(--yellow); }
.brand-mark i:nth-child(1) { height: 45%; }.brand-mark i:nth-child(2) { height: 100%; background: var(--mint); }.brand-mark i:nth-child(3) { height: 70%; background: var(--coral); }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: .92rem; font-weight: 700; }
.site-nav a { color: #35415a; }
.site-nav a:hover { color: var(--blue); }
.nav-cta { padding: 10px 15px; color: white !important; background: var(--navy); border-radius: 12px; }
.menu-button { display: none; border: 0; background: var(--navy); color: white; padding: 9px 13px; border-radius: 10px; font: inherit; font-weight: 700; }
.hero { max-width: 1240px; min-height: 700px; margin: 18px auto 0; padding: 78px 72px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; overflow: hidden; border-radius: 34px; background: var(--navy); color: white; position: relative; }
.hero::before { content: ""; position: absolute; width: 500px; height: 500px; right: -160px; top: -180px; border-radius: 50%; background: rgba(36,93,255,.27); filter: blur(10px); }
.eyebrow { margin: 0 0 14px; color: var(--blue); text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 800; }
.hero .eyebrow { color: var(--mint); }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 25px; max-width: 680px; font-size: clamp(3.6rem, 7vw, 6.6rem); line-height: .93; letter-spacing: -.075em; }
h1 span { color: var(--yellow); }
.hero-text { max-width: 610px; color: #bac7df; font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 52px; padding: 13px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--blue); color: white; box-shadow: 0 12px 30px rgba(36,93,255,.28); }
.button.secondary { background: white; color: var(--navy); }
.hero-stats { margin-top: 58px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hero-stats strong,.hero-stats span { display: block; }
.hero-stats strong { font-size: 1.1rem; color: white; }.hero-stats span { color: #8494b2; font-size: .75rem; }
.hero-art { min-height: 500px; position: relative; display: grid; place-items: center; }
.phone { width: 265px; height: 520px; padding: 32px 20px; position: relative; z-index: 3; border: 8px solid #1a3260; border-radius: 42px; background: #f5f7fd; box-shadow: 0 35px 80px rgba(0,0,0,.38); transform: rotate(6deg); }
.phone-speaker { width: 65px; height: 7px; margin: -14px auto 28px; border-radius: 10px; background: #c6cee0; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { aspect-ratio: 1; display: grid; place-items: center; border-radius: 22px; color: white; font-size: 2rem; font-weight: 800; box-shadow: inset 0 -8px rgba(0,0,0,.08); }
.tile-flag { background: #245dff; }.tile-sound { background: #ff6b6b; }.tile-pop { background: #8d63ff; }.tile-duck { background: #ffbe2e; }.tile-phone { background: #57d5ac; }.tile-learn { background: #193d7a; }
.phone-home { width: 45px; height: 5px; margin: 28px auto 0; border-radius: 5px; background: #ced5e4; }
.orbit { position: absolute; border: 1px solid rgba(103,231,195,.3); border-radius: 50%; }.orbit-one { width: 410px; height: 410px; }.orbit-two { width: 520px; height: 520px; border-color: rgba(158,198,54,.18); }
.floating-chip { position: absolute; z-index: 4; padding: 11px 15px; background: white; color: var(--navy); border-radius: 13px; font-size: .78rem; font-weight: 800; box-shadow: 0 16px 38px rgba(0,0,0,.25); }.chip-one { top: 90px; left: 0; transform: rotate(-5deg); }.chip-two { right: -10px; bottom: 105px; transform: rotate(4deg); }
.section { max-width: 1240px; margin: 0 auto; padding: 110px 30px; }
.section-heading { margin-bottom: 42px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
h2 { margin-bottom: 0; max-width: 760px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.055em; }
.text-link { padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-weight: 800; white-space: nowrap; }
.app-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.app-card { min-height: 260px; padding: 28px; display: grid; grid-template-columns: 130px 1fr; gap: 26px; align-items: center; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.app-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(13,35,75,.11); }
.app-card.featured { grid-column: 1 / -1; background: #e9efff; border-color: #cddaff; }
.app-icon { width: 126px; height: 126px; display: block; object-fit: cover; overflow: hidden; border-radius: 28px; box-shadow: 0 16px 25px rgba(20,38,76,.16); background: #eef2f8; }
.icon-world { background: #245dff; color: #9ec636; }.icon-world::before,.icon-world::after { content:""; position:absolute; border:3px solid rgba(255,255,255,.75); border-radius:50%; }.icon-world::before { width:82px;height:82px; }.icon-world::after { width:30px;height:100px; border-top:0;border-bottom:0; }
.icon-sounds { background:#0d234b; }.icon-sounds span { width:54px;height:54px;border-radius:50%;background:#ff5b51;border:7px solid white;box-shadow:0 0 0 10px rgba(255,91,81,.22); }.icon-sounds i,.icon-sounds b { position:absolute;width:18px;height:60px;border:5px solid #67e7c3;border-top:0;border-bottom:0;border-radius:50%; }.icon-sounds i{left:13px}.icon-sounds b{right:13px}
.icon-pop { background:#6751e7; }.icon-pop span { position:absolute; width:45px;height:55px;border-radius:50%; }.icon-pop span:nth-child(1){background:#ff6b6b;left:15px;top:17px}.icon-pop span:nth-child(2){background:#9ec636;right:16px;top:24px}.icon-pop span:nth-child(3){background:#67e7c3;bottom:13px;left:42px}
.icon-baby { background:#fff3c4;color:#245dff }.icon-baby span,.icon-baby i,.icon-baby b { position:absolute;font-style:normal;font-size:2.3rem }.icon-baby span{top:7px;left:18px;color:#ff6b6b}.icon-baby i{right:22px;top:20px;color:#245dff}.icon-baby b{bottom:11px;left:44px;color:#57b995}
.icon-phone { background:#67e7c3;color:#0d234b }.icon-phone::after{content:"";position:absolute;width:70px;height:96px;border:5px solid white;border-radius:16px}.icon-phone span{z-index:2}
.icon-duck { background:#5ec9ff;color:#9ec636 }.icon-duck span{font-size:4.5rem;transform:rotate(45deg)}.icon-duck i{position:absolute;bottom:5px;font-style:normal;color:white;font-size:3rem}
.tag { display:inline-flex; margin-bottom:10px; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.app-content h3 { margin-bottom: 8px; font-size: 1.35rem; letter-spacing: -.03em; }.app-content p { margin-bottom: 17px; color: var(--muted); font-size: .91rem; }.app-content a { color: var(--navy); font-size: .88rem; font-weight: 800; }
.install-counter { margin-top: 38px; padding: 48px 30px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: var(--navy); color: white; overflow: hidden; position: relative; }
.install-counter::before { content: ""; position: absolute; inset: auto -80px -130px auto; width: 300px; height: 300px; border-radius: 50%; background: rgba(158,198,54,.16); }
.install-counter .eyebrow { color: var(--yellow); margin-bottom: 4px; }
.install-counter strong { display: block; position: relative; font-size: clamp(3.3rem, 8vw, 6.8rem); line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.install-counter span { display: block; position: relative; margin-top: 12px; color: #aebbd2; font-size: 1rem; font-weight: 700; }
.about-section { padding-top: 30px; }
.about-panel { padding: 70px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; border-radius: 30px; background: var(--yellow); }
.about-panel .eyebrow { color: #785c00; }.about-copy { font-size: 1.08rem; }.about-copy p:last-child { margin-bottom:0; }
.support-section { padding-top: 10px; }
.support-card { padding: 60px 65px; display:flex;align-items:center;justify-content:space-between;gap:50px;border-radius:30px;background:var(--navy);color:white }.support-card p{max-width:650px;color:#aebbd2}.support-card .eyebrow{color:var(--mint)}.support-actions{display:flex;flex-direction:column;gap:12px;min-width:210px}
footer { max-width: 1180px; margin: 0 auto; padding: 32px 0 45px; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 24px; align-items: center; color: var(--muted); border-top: 1px solid var(--line); font-size: .86rem; }.footer-links{display:flex;gap:22px}.copyright{text-align:right;margin:0}.footer-brand{color:var(--ink)}footer>p{margin:0}
.privacy-page { max-width: 850px; margin: 80px auto; padding: 0 24px; }.privacy-page h1 { color:var(--navy); font-size:clamp(2.8rem,7vw,5rem); }.privacy-page h2 { margin:45px 0 14px;font-size:1.65rem; }.privacy-page p,.privacy-page li{color:#4f5d76}.privacy-page .back-link{display:inline-block;margin-bottom:40px;font-weight:800;color:var(--blue)}
@media (max-width: 900px) {
  .site-header { margin: 10px; }.menu-button{display:block}.site-nav{display:none;position:absolute;left:0;right:0;top:66px;margin:0 10px;padding:18px;flex-direction:column;align-items:stretch;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(12,30,65,.15)}.site-nav.open{display:flex}.site-nav a{text-align:center}
  .hero{margin:10px;min-height:auto;padding:65px 30px;grid-template-columns:1fr}.hero-art{min-height:480px}.hero-stats{grid-template-columns:1fr 1fr 1fr}
  .section{padding:80px 20px}.section-heading{align-items:flex-start;flex-direction:column}.app-grid{grid-template-columns:1fr}.app-card.featured{grid-column:auto}.about-panel{padding:45px 30px;grid-template-columns:1fr;gap:25px}.support-card{padding:45px 30px;align-items:flex-start;flex-direction:column}.support-actions{width:100%}footer{margin:0 20px;grid-template-columns:1fr;text-align:left}.copyright{text-align:left}
}
@media (max-width: 570px) {
  h1{font-size:3.4rem}.hero{padding:55px 22px}.hero-actions{flex-direction:column}.button{width:100%}.hero-stats{grid-template-columns:1fr 1fr}.hero-art{min-height:400px}.phone{width:210px;height:410px;padding:30px 15px}.tile{border-radius:16px}.floating-chip{font-size:.68rem}.chip-one{left:-10px}.chip-two{right:-12px}.app-card{grid-template-columns:1fr;padding:24px}.app-icon{width:105px;height:105px;border-radius:24px}.section{padding:70px 16px}.about-panel,.support-card{border-radius:24px}footer{margin:0 16px}.footer-links{flex-wrap:wrap}
}