:root { --ink:#3d2b1f; --muted:#7e5b4d; --peach:#e8855a; --cream:#fffaf3; --paper:#fff3e4; --line:#efbe9a; --lilac:#ede5f8; --blue:#dfeefa; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Nunito,Arial,sans-serif; } .container { width:min(1120px,calc(100% - 48px)); margin:auto; } h1,h2,h3,p { margin-top:0; } h1,h2,h3,.button,.brand { font-family:Fredoka,Arial,sans-serif; } h1 { font-size:clamp(3.6rem,6.3vw,6.5rem); line-height:.97; letter-spacing:-.06em; margin:20px 0 26px; } h2 { font-size:clamp(2.45rem,4.5vw,4.6rem); line-height:1.04; letter-spacing:-.045em; margin-bottom:23px; } h3 { font-size:1.38rem; margin:12px 0 8px; } em { color:var(--peach); font-style:normal; } .eyebrow { display:flex; align-items:center; gap:8px; color:var(--peach); font-weight:900; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; } .eyebrow span { font-size:1rem; } .hero { min-height:780px; position:relative; overflow:hidden; background:radial-gradient(circle at 90% 15%,#ffe0c5 0 10%,transparent 30%),linear-gradient(135deg,#fff7ed 0%,#fff0df 100%); } .hero:after { content:""; position:absolute; inset:auto -5% -80px; height:180px; background:var(--cream); border-radius:50% 50% 0 0/35% 35% 0 0; } .nav { height:104px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; } .brand { text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:9px; font-size:1.06rem; line-height:.88; letter-spacing:-.035em; } .brand-mark { display:grid; place-items:center; width:40px; height:40px; color:#fff; border-radius:14px 14px 17px 17px; background:var(--peach); font-family:Arial; font-size:21px; transform:rotate(-8deg); box-shadow:0 4px 0 #cb714d; } .nav-links { display:flex; gap:36px; margin-left:auto; margin-right:34px; } .nav-links a,.text-link { color:var(--muted); text-decoration:none; font-weight:800; font-size:.95rem; } .nav-links a:hover,.text-link:hover { color:var(--peach); } .button { background:var(--peach); color:#fff; display:inline-flex; align-items:center; gap:12px; padding:15px 21px; border-radius:14px; box-shadow:0 5px 0 #ca704d; text-decoration:none; font-size:1rem; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(2px); box-shadow:0 3px 0 #ca704d; } .button-small { padding:11px 15px; border-radius:12px; font-size:.88rem; box-shadow:0 4px 0 #ca704d; } .hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; min-height:650px; position:relative; z-index:1; } .hero-copy { padding:55px 0 100px; } .hero-text { width:min(440px,100%); color:var(--muted); font-size:1.08rem; line-height:1.7; } .hero-actions { display:flex; align-items:center; gap:26px; margin-top:29px; } .text-link { display:inline-flex; gap:9px; align-items:center; } .friend-note { display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--muted); font-weight:800; margin-top:46px; line-height:1.25; } .mini-paw { width:31px; height:31px; background:#f5c1a8; display:grid; place-items:center; color:#fff; border-radius:48% 48% 44% 44%; } .hero-visual { position:relative; min-height:600px; } .phone { position:absolute; z-index:2; width:288px; height:584px; top:16px; left:50%; transform:translateX(-43%) rotate(3deg); border:9px solid #3e2e2a; border-radius:42px; padding:7px; background:#3e2e2a; box-shadow:0 24px 24px #b9775638; } .phone-screen { width:100%; height:100%; padding:18px 14px 13px; overflow:hidden; border-radius:28px; background:linear-gradient(150deg,#fff9f0,#ffebdc); } .phone-notch { position:absolute; background:#3e2e2a; width:94px; height:19px; border-radius:0 0 12px 12px; left:50%; top:0; transform:translateX(-50%); z-index:4; }.app-status { font-weight:900; font-size:.65rem; display:flex; justify-content:space-between; padding:0 4px 15px; }.app-kicker { color:#a47966; font-size:.57rem; font-weight:800; margin-bottom:5px; }.phone h2 { font-family:Fredoka; font-size:1.48rem; letter-spacing:-.04em; margin:0 0 13px; }.phone h2 span { color:#efac55; font-size:1rem; }.streak-card { display:flex; align-items:center; gap:7px; border:1.5px solid #eea77c; background:#fff7eb; padding:9px; border-radius:12px; }.flame { background:#ffd4b8; padding:5px; border-radius:9px; font-size:17px; }.streak-card strong,.habit-row strong { display:block; font-size:.66rem; }.streak-card small,.habit-row small { color:#986f5f; font-size:.55rem; font-weight:700; }.streak-score { margin-left:auto; color:var(--peach); font-family:Fredoka; font-size:1.35rem; }.today-label { font-weight:900; font-size:.52rem; letter-spacing:.08em; color:#a27768; margin:17px 0 7px; }.habit-row { height:52px; margin-bottom:6px; padding:6px 7px; display:flex; align-items:center; gap:7px; background:#fffdf8; border:1px solid #f2d8c5; border-radius:11px; }.habit-icon { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:17px; font-weight:900; }.peach { background:#ffe2d0;color:#e88657; }.blue { background:#e0eff7;color:#65a3bd; }.lilac { background:#eae2fa;color:#8b70c3; }.done,.add { margin-left:auto; width:24px;height:24px;border:0;border-radius:50%;color:#fff;font-weight:900;font-size:14px; }.done { background:#85c987; }.add { background:#f0b394; }.count { margin-left:auto; font-weight:900; font-size:.7rem; color:#5d918c; }.count small { color:#afc8c2; }.app-nav { margin-top:9px; padding-top:7px; border-top:1px solid #f2d7c4; display:flex; justify-content:space-between; color:#b99c8d; font-size:13px; text-align:center; }.app-nav span { display:grid; gap:0; }.app-nav small { font-size:.43rem; font-weight:800; }.app-nav .active { color:var(--peach); }.mascot-card { position:absolute; z-index:3; top:327px; left:5%; width:157px; height:157px; border-radius:35px; background:#f7c29d; transform:rotate(-10deg); box-shadow:0 14px 0 #eaa67b; overflow:hidden; }.mascot-card img { width:100%; height:100%; object-fit:contain; transform:scale(1.15) translateY(10px); }.bubble { position:absolute; z-index:4; background:#fffdf8; color:#8c5d4c; padding:10px 13px; border-radius:13px; font-size:.74rem; font-weight:900; box-shadow:0 7px 15px #be795a24; }.bubble-top { top:97px; right:2%; transform:rotate(4deg); }.bubble-top span { color:#ed9c82; margin-left:5px; }.bubble-bottom { bottom:72px; right:13%; transform:rotate(-4deg); }.bubble-bottom span { color:#e8ae4f; }.hero-sparkle { position:absolute; z-index:1; width:92px; bottom:55px; left:13%; transform:rotate(-18deg); opacity:.9; }.star { position:absolute; color:#efb44f; z-index:1; }.star-one { font-size:25px; top:90px; left:19%; }.star-two { font-size:14px; bottom:135px; right:8%; }.cloud { position:absolute; bottom:0; width:205px;height:48px; background:#fffaf3; border-radius:60px 60px 0 0; z-index:0; }.cloud:before,.cloud:after { content:""; position:absolute; background:#fffaf3; border-radius:50%; bottom:0; }.cloud:before { width:110px;height:110px;left:35px; }.cloud:after { width:75px;height:75px;left:125px; }.cloud-left { left:-50px; }.cloud-right { right:-70px; transform:scale(.68); bottom:30px; }
.intro { padding:120px 0; background:var(--cream); }.intro-grid,.rewards-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; }.intro-illustration { position:relative; height:420px; display:grid; place-items:center; background:#f7d5c0; border-radius:43% 57% 54% 46%/48% 38% 62% 52%; overflow:hidden; }.intro-illustration img { width:95%; max-width:400px; object-fit:contain; transform:translateY(28px); }.sun { position:absolute; right:58px; top:44px; font-size:42px; color:#f1b65d; }.tiny-heart { position:absolute; left:52px; top:125px; font-size:24px; color:#e98573; }.intro-copy>p:not(.eyebrow),.reward-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.7; font-size:1.02rem; }.reasons { display:grid; gap:12px; margin-top:28px; }.reasons span { display:flex; align-items:center; gap:13px; color:var(--ink); font-weight:900; }.reasons b { color:var(--peach); font-family:Fredoka; font-size:.85rem; }.features { padding:104px 0 118px; background:#fff0e1; position:relative; }.section-heading { text-align:center; }.section-heading .eyebrow { justify-content:center; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }.feature-card { min-height:430px; border:1px solid #edc5ad; border-radius:22px; overflow:hidden; background:#fffaf4; display:flex; flex-direction:column; }.feature-art { height:218px; overflow:hidden; display:flex; justify-content:center; align-items:flex-end; }.feature-art img { width:190px; object-fit:contain; transform:translateY(27px); }.card-peach .feature-art { background:#f9cfb5; }.card-lilac .feature-art { background:#e7def5; }.card-blue .feature-art { background:#d5eaf2; }.feature-card>div:last-child { padding:22px 24px 25px; }.feature-number { color:var(--peach); font-family:Fredoka; font-size:.8rem; }.feature-card p { color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:0; }.rewards { padding:130px 0; background:var(--cream); }.stamp-display { min-height:390px; position:relative; border-radius:39% 61% 43% 57%/51% 46% 54% 49%; background:#e8dcf8; }.stamp { position:absolute; width:165px; filter:drop-shadow(0 8px 4px #755a8c22); }.stamp-one { top:37px; left:18%; transform:rotate(-14deg); }.stamp-two { right:16%; top:72px; transform:rotate(13deg); }.stamp-three { bottom:13px; left:35%; transform:rotate(-3deg); }.sticker-word { position:absolute; color:#fffaf3; background:#e8855a; padding:8px 12px; font-family:Fredoka; border-radius:7px; bottom:50px; right:19%; font-size:1.3rem; transform:rotate(10deg); box-shadow:0 4px 0 #c86f4d; }.download { padding:98px 0 102px; background:linear-gradient(145deg,#fbdac5,#f6c6aa); text-align:center; position:relative; overflow:hidden; }.download-inner { position:relative; }.download .eyebrow { justify-content:center; }.download h2 { margin-bottom:14px; }.download h2 em { color:#d86f4f; }.download p:not(.eyebrow) { color:var(--muted); font-weight:800; }.app-store { display:inline-flex; align-items:center; gap:10px; margin-top:16px; background:#38271f; border-radius:12px; padding:9px 16px; color:#fff; text-decoration:none; text-align:left; line-height:1.05; }.app-store small,.app-store strong { display:block; }.app-store small { font-size:.6rem; }.app-store strong { font-size:1.22rem; }.apple { font-size:27px; }.available { display:block; margin-top:15px; color:#8d5f4b; font-weight:800; }.download-sparkle,.download-paw { position:absolute; color:#fff9ee; }.download-sparkle { left:15%; top:16%; font-size:37px; }.download-paw { right:17%; bottom:15%; font-size:33px; transform:rotate(25deg); } footer { padding:30px 0; background:#fffaf3; }.footer-inner { display:flex; align-items:center; justify-content:space-between; color:#987663; font-size:.77rem; font-weight:800; }.footer-inner>span { color:#be9784; }
@media (max-width:800px) { .nav-links { display:none; }.hero { min-height:1000px; }.hero-grid,.intro-grid,.rewards-grid { grid-template-columns:1fr; gap:30px; }.hero-copy { padding:45px 0 0; text-align:center; }.eyebrow { justify-content:center; }.hero-text { margin-inline:auto; }.hero-actions { justify-content:center; }.friend-note { justify-content:center; margin-top:32px; }.hero-visual { min-height:590px; transform:scale(.9); transform-origin:top center; margin-bottom:-35px; }.intro { padding:80px 0; }.intro-illustration { height:350px; order:2; }.intro-copy { text-align:center; }.reasons { text-align:left; width:max-content; margin:28px auto 0; }.feature-grid { grid-template-columns:1fr; max-width:410px; margin-inline:auto; }.feature-card { min-height:0; }.rewards { padding:82px 0; }.reward-copy { text-align:center; }.stamp-display { max-width:480px; width:100%; margin:auto; }.footer-inner { flex-wrap:wrap; gap:17px; }.footer-inner p { order:3; width:100%; margin:0; text-align:center; } }
@media (max-width:460px) { .container { width:min(100% - 32px,1120px); }.nav { height:82px; }.nav .button { padding:10px 11px; font-size:.75rem; }.brand { font-size:.9rem; }.brand-mark { width:35px;height:35px;font-size:18px; }.hero { min-height:920px; }.hero-copy { padding-top:27px; }.hero-actions { flex-direction:column; gap:23px; }.hero-visual { transform:scale(.75); margin:-35px -60px -115px; }.intro-illustration { height:300px; }.feature-grid { margin-top:31px; }.download { padding:77px 0; }.download-sparkle { left:3%; }.download-paw { right:4%; } }

/* Real in-app captures */
.phone-screen { padding:0; background:#f4eefb; }
.app-capture { display:block; width:100%; height:100%; object-fit:contain; object-position:top center; }
.phone-screen > :not(.app-capture) { display:none; }
.brand-mark { overflow:hidden; transform:rotate(-8deg); }
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; transform:rotate(8deg) scale(1.12); }
.app-gallery { padding:108px 0 120px; background:#f5effc; }
.gallery-grid { display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:21px; margin-top:48px; align-items:end; }
.gallery-card { margin:0; overflow:hidden; border:1px solid #dfd2ef; border-radius:22px; background:#fffaf3; box-shadow:0 11px 24px #6b4d8c12; }
.gallery-card img { display:block; width:100%; }
.gallery-home img { height:430px; object-fit:cover; object-position:top center; }
.gallery-overview img,.gallery-achievement img { height:275px; object-fit:cover; object-position:top center; }
.gallery-card figcaption { display:flex; align-items:center; gap:10px; padding:16px 18px; color:var(--ink); }
.gallery-card figcaption span { color:var(--peach); font-family:Fredoka,Arial,sans-serif; font-size:.76rem; }
.gallery-card figcaption strong { font-size:.87rem; }
.gallery-achievement { position:relative; }
.certificate-copy { position:absolute; inset:17px 8% 55px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#74513d; }
.certificate-copy p { margin:0 0 7px; color:#e1845f; font:700 .57rem/1 Fredoka,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.certificate-copy strong { max-width:210px; font:700 1.22rem/1.1 Fredoka,Arial,sans-serif; }
.certificate-copy span { max-width:220px; margin:9px 0 12px; font-size:.66rem; font-weight:800; line-height:1.3; color:#9a7562; }
.certificate-copy div { display:flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:#fff9ecaa; }
.certificate-copy b { color:#e8855a; font:700 1.3rem/1 Fredoka,Arial,sans-serif; }
.certificate-copy small { color:#8a634e; font-size:.54rem; font-weight:900; letter-spacing:.05em; }
.hero-achievement-stamp { position:absolute; z-index:4; top:488px; left:4%; width:75px; transform:rotate(-12deg); filter:drop-shadow(0 7px 4px #b16b4a33); }
.sticker-collection { padding:115px 0 125px; background:#fff0e1; }
.sticker-collection .section-heading > p:not(.eyebrow) { max-width:490px; margin:0 auto; color:var(--muted); line-height:1.65; }
.sticker-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:45px; }
.sticker-grid article { min-height:164px; padding:14px; border:1px solid #efcbb5; border-radius:18px; background:#fffaf3; display:flex; align-items:center; gap:8px; }
.sticker-grid img { width:73px; height:73px; object-fit:contain; flex:none; }
.sticker-grid h3 { margin:0 0 4px; font-size:.94rem; line-height:1.05; }
.sticker-grid p { margin:0; color:var(--muted); font-size:.69rem; font-weight:800; line-height:1.35; }
@media (max-width:800px) { .sticker-collection { padding:78px 0; }.sticker-grid { grid-template-columns:repeat(2,1fr); max-width:560px; margin:35px auto 0; }.hero-achievement-stamp { left:8%; } }
@media (max-width:460px) { .sticker-grid { grid-template-columns:1fr; }.sticker-grid article { min-height:125px; }.hero-achievement-stamp { top:473px; left:13%; width:65px; } }

.footer-links { display:flex; gap:17px; }
.footer-links a,.back-link { color:#8d6d5d; text-decoration:none; font-size:.77rem; font-weight:900; }
.footer-links a:hover,.back-link:hover { color:var(--peach); }
.legal-page { min-height:100vh; background:#fffaf3; }
.legal-header { border-bottom:1px solid #f1d3be; background:#fff3e4; }
.legal-header .container { min-height:86px; display:flex; align-items:center; justify-content:space-between; }
.legal-main { max-width:820px; padding:88px 0 108px; }
.legal-main h1 { font-size:clamp(3rem,6vw,5.2rem); margin-bottom:12px; }
.legal-date { margin-bottom:48px; color:#9a7562; font-weight:800; }
.legal-content { padding:clamp(25px,5vw,54px); border:1px solid #efcbb5; border-radius:26px; background:#fff; box-shadow:0 15px 34px #b7785b14; }
.legal-content h2 { margin:38px 0 11px; color:var(--ink); font-size:1.52rem; letter-spacing:-.03em; }
.legal-content h2:first-of-type { margin-top:0; }
.legal-content p { margin-bottom:17px; color:#674d40; font-size:1rem; line-height:1.75; }
.legal-page footer { margin-top:auto; }
@media (max-width:800px) { .footer-links { order:3; }.footer-inner .footer-links + span { order:4; width:100%; text-align:center; }.legal-main { padding:65px 0 78px; }.legal-content { padding:26px; } }
@media (max-width:800px) { .app-gallery { padding:78px 0; }.gallery-grid { grid-template-columns:1fr; max-width:470px; margin:34px auto 0; }.gallery-home img,.gallery-overview img,.gallery-achievement img { height:340px; } }