@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root { --ink:#24223f; --orange:#ff713f; --cream:#fff9f1; --yellow:#ffc92d; --green:#4ead59; --blue:#348fdf; --purple:#8a36bb; --teal:#04a6b4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:Nunito,Arial,sans-serif; background:var(--cream); line-height:1.55; } img { max-width:100%; display:block; } a { color:inherit; } .container { width:min(1120px, calc(100% - 40px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,249,241,.87); border-bottom:1px solid rgba(36,34,63,.08); backdrop-filter:blur(16px); } .nav { min-height:82px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:14px 0; } .brand { display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif; font-size:1.7rem; line-height:1; font-weight:800; text-decoration:none; color:#ff6637; flex-shrink:0; } .brand img { width:47px; height:47px; border-radius:14px; box-shadow:0 5px 14px rgba(187,83,18,.18); } .nav-links { display:flex; gap:26px; justify-content:center; font-weight:800; font-size:.92rem; } .nav-links a { text-decoration:none; transition:color .2s; } .nav-links a:hover { color:var(--orange); } .nav-actions { display:flex; gap:14px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; min-width:max-content; } .language-switch { display:flex; padding:3px; border:1px solid rgba(36,34,63,.12); border-radius:99px; background:rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 18px rgba(78,63,53,.08); } .language { border:0; padding:5px 8px; border-radius:99px; font:800 .72rem Nunito; color:#6b6880; background:transparent; cursor:pointer; } .language.active { background:#fff; color:var(--orange); box-shadow:0 2px 6px #35233b1f; } .nav-store-links { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-end; }
.button { display:inline-block; padding:14px 23px; border-radius:14px; background:var(--orange); box-shadow:0 8px 0 #d6512b, 0 12px 22px rgba(224,92,48,.23); color:white; font-weight:900; text-decoration:none; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-3px); box-shadow:0 11px 0 #d6512b,0 17px 25px rgba(224,92,48,.22); } .button-small { padding:10px 15px; box-shadow:0 5px 0 #d6512b; border-radius:12px; font-size:.84rem; }
.hero { overflow:hidden; position:relative; padding:80px 0 65px; background:linear-gradient(120deg,#fff9ee 0%,#fff0dd 100%); } .hero-grid { position:relative; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:40px; } .hero-copy { position:relative; z-index:1; } .eyebrow { color:#e35c32; margin:0 0 13px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; font-size:.73rem; } .eyebrow span:first-child { color:#ffb60b; font-size:1.1rem; vertical-align:-1px; } h1,h2,h3 { margin:0; font-family:'Baloo 2',Nunito,sans-serif; line-height:1.04; } h1 { max-width:650px; font-size:clamp(3.3rem,6vw,5.7rem); letter-spacing:-.04em; font-weight:800; } h1 em { color:var(--orange); font-style:normal; } .hero-intro { margin:24px 0; max-width:555px; font-size:1.13rem; color:#56536c; } .hero-actions { display:flex; align-items:center; gap:20px 28px; flex-wrap:wrap; } .hero-store-badges { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .text-link { display:inline-flex; align-items:center; gap:8px; font-weight:900; text-decoration:none; font-size:1.02rem; line-height:1.2; white-space:nowrap; } .text-link span:last-child { color:var(--orange); font-size:1.35rem; margin-left:0; } .trust-list { list-style:none; padding:0; margin:32px 0 0; display:flex; gap:20px; font-weight:800; font-size:.84rem; } .trust-list li { display:flex; align-items:center; gap:7px; } .trust-list li span:first-child { display:grid; place-items:center; height:19px; width:19px; border-radius:50%; color:#fff; background:#65ba69; font-size:.72rem; }
.hero-visual { min-height:570px; position:relative; display:grid; place-items:center; } .phone { overflow:hidden; background:#fff; border:7px solid #fff; box-shadow:0 30px 45px rgba(101,58,35,.2); } .phone-hero { position:relative; z-index:2; width:min(320px,75%); border-radius:36px; transform:rotate(4deg); } .phone img { width:100%; height:100%; object-fit:cover; } .hero-spark { position:absolute; z-index:3; font-size:2rem; color:#fdb811; } .spark-a { top:12%; left:7%; } .spark-b { top:35%; right:2%; color:#5bbf71; font-size:1rem; } .spark-c { right:15%; bottom:14%; color:#e765a7; } .mini-card { position:absolute; z-index:4; width:170px; padding:13px 14px; border-radius:15px; background:rgba(255,255,255,.96); box-shadow:0 12px 25px rgba(96,52,33,.14); display:flex; gap:9px; align-items:center; font-size:.72rem; line-height:1.2; } .mini-card span { font-size:1.1rem; color:#ffb610; letter-spacing:-2px; white-space:nowrap; } .card-stars { left:0; bottom:23%; } .card-heart { right:-2%; top:22%; } .card-heart span { color:#e95f7e; letter-spacing:0; font-size:1.5rem; } .hero-orb { position:absolute; border-radius:50%; } .orb-one { width:420px; height:420px; right:-120px; top:-145px; background:#ffd78e80; } .orb-two { height:250px; width:250px; bottom:-145px; left:-80px; background:#cfeecb; }
.intro-section,.moments-section { padding:102px 0; background:#fffdfa; } .centered { text-align:center; } h2 { font-size:clamp(2.5rem,4vw,3.8rem); font-weight:800; letter-spacing:-.035em; } .intro-section h2,.moments-section h2 { text-align:center; } .section-intro { max-width:580px; text-align:center; margin:15px auto 44px; color:#656177; font-size:1.05rem; } .activity-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; } .activity { min-height:215px; padding:22px 16px; color:#fff; border-radius:24px; box-shadow:inset 0 1px #ffffff45,0 12px 20px #4c384315; } .activity:nth-child(5) { grid-column:2/5; min-height:156px; } .activity-icon { display:block; font:800 2.2rem 'Baloo 2'; line-height:1.2; margin-bottom:18px; } .activity h3 { font-size:1.5rem; } .activity p { margin:4px 0 0; font-size:.84rem; line-height:1.35; font-weight:700; } .activity-orange{background:linear-gradient(145deg,#ff8d55,#ff643c)} .activity-blue{background:linear-gradient(145deg,#56afea,#2374d1)} .activity-green{background:linear-gradient(145deg,#75c977,#318b3c)} .activity-purple{background:linear-gradient(145deg,#ae55cb,#7021a1)} .activity-teal{background:linear-gradient(145deg,#22c7d2,#008692)}
.feature { overflow:hidden; padding:86px 0; } .feature-lilac { background:#f3e5f9; } .feature-blue { background:#e0f2fc; } .feature-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; } .feature-copy p:not(.eyebrow) { max-width:470px; margin:20px 0; color:#58556d; font-size:1.06rem; } .feature-copy ul { padding:0; margin:0; list-style:none; } .feature-copy li { padding:8px 0 8px 28px; position:relative; font-weight:800; } .feature-copy li:before { content:'✓'; position:absolute; left:0; color:#57aa5f; } .phone-feature { width:min(330px,80%); border-radius:33px; justify-self:center; } .tilt-right { transform:rotate(3deg); } .tilt-left { transform:rotate(-3deg); }
.parent-section { padding:108px 0; background:#fff7e6; } .parent-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:82px; align-items:start; } .parent-grid > div > p:not(.eyebrow) { color:#5d596c; font-size:1.05rem; } .parent-points { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .parent-points > div { padding:23px; background:#fffdf9; border:1px solid #f4dfc3; border-radius:20px; } .parent-points span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#ffe49e; color:#d08200; font-size:1.25rem; } .parent-points h3 { margin:14px 0 5px; font-size:1.32rem; } .parent-points p { margin:0; font-size:.85rem; color:#696579; font-weight:700; }
.moments-section { padding-bottom:120px; } .gallery { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:18px; } .gallery figure { margin:0; position:relative; overflow:hidden; border-radius:22px; box-shadow:0 16px 30px #4736451c; } .gallery figure:nth-child(2),.gallery figure:nth-child(4) { transform:translateY(35px); } .gallery img { aspect-ratio:.49; width:100%; object-fit:cover; object-position:top; } figcaption { position:absolute; bottom:0; left:0; right:0; padding:19px 12px; background:linear-gradient(transparent,rgba(30,24,35,.78)); color:#fff; text-align:center; font:800 1.15rem 'Baloo 2'; }
.download-section { padding:0 0 86px; background:#fffdfa; } .download-card { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:55px 65px; border-radius:32px; background:linear-gradient(135deg,#fa7744,#ffad42); color:#fff; overflow:hidden; position:relative; } .download-card:after { content:'✦'; position:absolute; color:#ffffff38; font-size:18rem; right:25px; top:-90px; } .download-card .eyebrow { color:#fff6d3; } .download-card .eyebrow span:first-child { color:#fff; } .download-card h2 { max-width:650px; font-size:clamp(2.2rem,3.5vw,3.4rem); } .download-card p:not(.eyebrow) { margin:12px 0 0; font-weight:700; } .download-action { text-align:center; z-index:1; flex-shrink:0; } .store-badges { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .store-badge { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .2s,filter .2s,box-shadow .2s; } .store-badge:hover { transform:translateY(-2px); filter:drop-shadow(0 10px 18px rgba(47,32,18,.18)); } .store-badge img { display:block; width:auto; height:auto; max-width:100%; } .store-badge-official { padding:0; border:0; border-radius:14px; background:transparent; box-shadow:none; overflow:hidden; } .store-badge-compact img { height:44px; } .hero-store-badges .store-badge-official img,.store-badges .store-badge-official img { height:56px; } .download-note { display:block; margin-top:18px; font-weight:800; font-size:.75rem; color:#fff8e7; }
footer { padding:30px 0; background:#292640; color:#e8e6ee; } .footer-content { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:.8rem; font-weight:700; } footer .brand { font-size:1.4rem; color:#fff; } footer .brand img { width:36px; height:36px; border-radius:10px; } footer a:not(.brand) { color:#ffcf76; text-decoration:none; }
@media(max-width:800px) { .nav { min-height:70px; grid-template-columns:1fr; justify-items:center; } .nav-links { display:none; } .nav-actions { width:100%; justify-content:center; flex-wrap:wrap; gap:10px; } .nav-store-links { width:100%; justify-content:center; flex-wrap:wrap; } .store-badge-compact { flex:0 1 auto; } .store-badge-compact img { height:40px; } .button-small { display:none; } .hero { padding:57px 0 32px; } .hero-grid,.feature-grid,.parent-grid { grid-template-columns:1fr; } .hero-copy { text-align:center; } .hero-intro { margin-inline:auto; } .hero-actions,.trust-list,.hero-store-badges { justify-content:center; } .text-link { white-space:normal; } .hero-visual { min-height:475px; margin-top:6px; } .phone-hero { width:260px; } .card-stars { left:1%; bottom:18%; } .card-heart { right:1%; top:20%; } .activity-grid { grid-template-columns:1fr 1fr; } .activity:nth-child(5) { grid-column:auto; } .feature { padding:65px 0; } .feature-grid { gap:42px; } .feature.reverse .phone { grid-row:2; } .feature-copy { text-align:center; } .feature-copy ul { display:inline-block; text-align:left; } .parent-section,.intro-section,.moments-section { padding:70px 0; } .parent-grid { gap:35px; } .parent-grid > div:first-child { text-align:center; } .gallery { grid-template-columns:1fr 1fr; } .gallery figure:nth-child(2),.gallery figure:nth-child(4) { transform:translateY(0); } .download-card { padding:42px 28px; display:block; text-align:center; } .download-action { margin-top:30px; } .hero-store-badges .store-badge-official img,.store-badges .store-badge-official img { height:52px; } .footer-content { flex-wrap:wrap; justify-content:center; text-align:center; } }
@media(max-width:430px) { .container { width:min(100% - 28px,1120px); } .nav { justify-content:center; } .brand { width:100%; justify-content:center; } .nav-actions { width:100%; justify-content:center; } h1 { font-size:3.25rem; } .hero-intro { font-size:1rem; } .hero-actions { gap:18px; flex-wrap:wrap; } .trust-list { gap:10px; font-size:.76rem; } .mini-card { width:135px; font-size:.63rem; padding:10px; } .card-heart { right:-9px; } .card-stars { left:-9px; } .activity { min-height:190px; } .parent-points { grid-template-columns:1fr; } .gallery { gap:12px; } .store-badges { flex-direction:column; align-items:center; } .store-badge { justify-content:center; } .store-badge-compact { width:auto; } .store-badge-compact img { height:36px; } .hero-store-badges .store-badge-official img,.store-badges .store-badge-official img { height:48px; } }
.download-action .app-store { order:-1; }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}