:root { --blue:#168fda; --blue-deep:#086fab; --navy:#0d3e63; --sky:#e4f7ff; --mist:#f4fbff; --line:#cceafa; --yellow:#ffd449; --white:#fff; --muted:#5d7d96; --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--navy); background:var(--mist); font-family:var(--body); font-weight:800; } a { color:inherit; } :focus-visible { outline:3px solid var(--yellow); outline-offset:3px; } .shell { width:min(1160px,calc(100% - 48px)); margin:auto; }.skip-link { position:fixed; z-index:10; top:12px; left:12px; padding:10px 14px; border-radius:12px; color:var(--navy); background:#fff; text-decoration:none; transform:translateY(-160%); }.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:5; top:0; right:0; left:0; color:#fff; }.nav-row,.footer-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }.nav-row { padding:23px 0; }.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; font-family:var(--display); font-size:1.2rem; letter-spacing:-.04em; text-decoration:none; }.brand-mark { display:block; width:41px; height:41px; border:3px solid currentColor; border-radius:15px; background:#62cef2 url("mimic-me-avatar.png") center 24% / 225% auto no-repeat; box-shadow:0 4px 0 rgba(5,79,126,.22); transform:rotate(-7deg); }.header-actions { display:flex; align-items:center; gap:17px; }.text-link { font-size:.82rem; text-decoration:none; }.text-link:hover { text-decoration:underline; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border:2px solid var(--blue); border-radius:14px; color:#fff; background:var(--blue); box-shadow:0 4px 0 var(--blue-deep); font-family:var(--display); font-size:.91rem; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--blue-deep); }.button.light { border-color:#fff; color:#0872ae; background:#fff; box-shadow:0 4px 0 rgba(4,78,125,.24); }.button.outline { border-color:rgba(255,255,255,.85); background:rgba(3,115,181,.16); box-shadow:none; }.button.outline:hover { background:rgba(255,255,255,.14); box-shadow:none; }
.hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#0877be 0%,#159bdd 54%,#5dcff1 100%); }.hero::after { position:absolute; right:-150px; bottom:-215px; width:620px; height:620px; border:44px solid rgba(255,255,255,.12); border-radius:50%; content:""; }.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 355px; align-items:center; justify-content:space-between; gap:40px; min-height:585px; padding:132px 35px 66px; }.eyebrow { display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:7px 11px; border-radius:999px; color:#0872ae; background:#fff; font-size:.72rem; letter-spacing:.035em; }.eyebrow.blue { color:#0872ae; background:#dff5ff; }.eyebrow.gold { color:#7e5a00; background:#fff1a8; }.hero h1,.section-heading h2,.reward-section h2 { margin:0; font-family:var(--display); letter-spacing:-.055em; }.hero h1 { font-size:clamp(3.1rem,5.4vw,5.65rem); line-height:.9; text-shadow:0 5px 0 rgba(4,76,121,.18); }.hero h1 span { color:#e7fbff; }.hero-copy > p:not(.eyebrow) { max-width:580px; margin:19px 0 0; color:rgba(255,255,255,.92); font-size:1rem; line-height:1.57; }.hero-copy strong { color:#fff3a7; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:27px; }.hero-reward { position:relative; padding:26px; overflow:hidden; border:5px solid #fff; border-radius:35px; color:#0a6fa7; background:linear-gradient(145deg,#fff 0%,#e9fbff 100%); box-shadow:0 12px 0 rgba(4,81,130,.2),0 24px 40px rgba(4,84,132,.18); text-align:center; transform:rotate(4deg); }.hero-reward::after { position:absolute; top:-35px; right:-31px; width:105px; height:105px; border:21px solid #d7f6ff; border-radius:50%; content:""; }.reward-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#1789c5; font-family:var(--display); font-size:.72rem; line-height:1.05; letter-spacing:.04em; text-align:left; }.reward-top i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#856000; background:var(--yellow); font-size:1.23rem; }.hero-reward > strong { display:block; margin:25px 0 0; color:#0872ae; font-family:var(--display); font-size:1.6rem; line-height:.85; letter-spacing:-.05em; }.hero-reward em { color:#ec8d1a; font-size:5.35rem; font-style:normal; letter-spacing:-.11em; }.hero-reward p { margin:10px 0 0; color:#5b8098; font-size:.72rem; }.reward-stars { display:flex; justify-content:center; gap:7px; margin-top:17px; color:#f4bd27; font-size:1rem; }.spark { position:absolute; width:15px; height:15px; border-radius:4px; background:#fff3a7; transform:rotate(45deg); }.spark-one { top:38%; left:7%; }.spark-two { top:18%; right:41%; width:10px; height:10px; }
.guide-section { padding:83px 0 91px; background:#fff; }.section-heading { max-width:650px; margin:0 auto 39px; text-align:center; }.section-heading h2 { font-size:clamp(2.35rem,4vw,3.7rem); line-height:.96; }.section-heading > p:last-child { margin:12px 0 0; color:var(--muted); font-size:.91rem; }.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }.step { position:relative; min-height:275px; padding:22px 20px; border:1px solid var(--line); border-radius:23px; background:#f9fdff; box-shadow:0 8px 0 #dff3fc; }.step:nth-child(even) { background:#effaff; }.step-number { position:absolute; top:15px; right:16px; display:grid; width:28px; height:28px; place-items:center; border-radius:9px; color:#fff; background:var(--blue); font-family:var(--display); font-size:.78rem; }.step-icon { display:grid; width:55px; height:55px; place-items:center; border-radius:17px; color:#0872ae; background:#ddf5ff; font-size:1.5rem; }.step-icon.yellow { color:#846000; background:#fff3be; }.step h3 { margin:20px 0 0; font-family:var(--display); font-size:1.34rem; letter-spacing:-.04em; }.step p { margin:9px 0 0; color:var(--muted); font-size:.8rem; line-height:1.5; }.center-action { display:flex; justify-content:center; margin-top:35px; }
.reward-section { padding:80px 0; color:#fff; background:linear-gradient(135deg,#086faa,#1499d5 56%,#48c3e9); }.reward-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.83fr); align-items:center; gap:clamp(35px,7vw,100px); }.reward-section h2 { font-size:clamp(2.45rem,4vw,4rem); line-height:.94; }.reward-section h2 span { color:#fff2a0; }.reward-section > .shell > div > p:not(.eyebrow) { max-width:520px; margin:17px 0 24px; color:rgba(255,255,255,.88); line-height:1.56; }.reward-button { border-color:#fff; color:#0872ae; background:#fff; box-shadow:0 4px 0 rgba(4,74,118,.2); }.reward-rules { padding:25px; border:1px solid rgba(255,255,255,.35); border-radius:25px; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }.reward-rules h3 { margin:0; font-family:var(--display); font-size:1.45rem; letter-spacing:-.04em; }.reward-rules ul { display:grid; gap:13px; margin:19px 0; padding:0; list-style:none; }.reward-rules li { display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.92); font-size:.79rem; line-height:1.45; }.reward-rules li i { display:grid; flex:0 0 21px; width:21px; height:21px; place-items:center; border-radius:7px; color:#43711b; background:#e6fba6; font-size:.66rem; }.reward-note { margin:0; padding-top:15px; border-top:1px solid rgba(255,255,255,.23); color:rgba(255,255,255,.72); font-size:.66rem; line-height:1.5; }
.tips-section { padding:82px 0 93px; }.tips-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }.tips-grid article { padding:24px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 9px 0 #dff3fc; text-align:center; }.tips-grid article > span { display:grid; width:52px; height:52px; place-items:center; margin:auto; border-radius:17px; color:#0872ae; background:#e2f6ff; font-size:1.4rem; }.tips-grid article:nth-child(2) > span { color:#846000; background:#fff3be; }.tips-grid h3 { margin:15px 0 0; font-family:var(--display); font-size:1.35rem; letter-spacing:-.04em; }.tips-grid p { margin:8px auto 0; max-width:230px; color:var(--muted); font-size:.81rem; line-height:1.5; }.site-footer { padding:28px 0; color:#50738d; background:#dff3fc; }.footer-brand { color:#0872ae; font-size:1rem; }.site-footer nav { display:flex; flex-wrap:wrap; gap:10px 16px; }.site-footer nav a { font-size:.74rem; text-decoration:none; }.site-footer nav a:hover { color:var(--blue); }
@media (max-width:900px) { .hero-grid { grid-template-columns:minmax(0,1fr) 285px; gap:25px; padding-right:0; padding-left:0; }.hero-reward { transform:scale(.88) rotate(4deg); }.steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.reward-layout { grid-template-columns:1fr; }.reward-section > .shell > div:first-child { max-width:620px; }.tips-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:650px) { .shell { width:min(calc(100% - 30px),540px); }.nav-row { padding:15px 0; }.brand { font-size:1rem; }.brand-mark { width:35px; height:35px; border-radius:13px; }.header-actions { gap:10px; }.text-link { display:none; }.header-actions .button { min-height:38px; padding:8px 11px; border-radius:12px; font-size:.75rem; }.header-actions .button i { display:none; }.hero-grid { grid-template-columns:1fr; min-height:0; padding:102px 0 28px; text-align:center; }.hero h1 { font-size:clamp(3rem,13vw,4.25rem); }.hero-copy > p:not(.eyebrow) { margin-right:auto; margin-left:auto; font-size:.91rem; }.hero-actions { justify-content:center; }.hero-actions .button { flex:1 1 160px; }.hero-reward { width:min(280px,100%); margin:-7px auto 0; transform:scale(.82) rotate(3deg); transform-origin:top center; }.guide-section,.tips-section { padding:59px 0 65px; }.section-heading { margin-bottom:29px; }.section-heading h2 { font-size:2.38rem; }.steps { grid-template-columns:1fr; }.step { min-height:0; padding:20px 20px 22px 88px; }.step-icon { position:absolute; top:23px; left:20px; width:50px; height:50px; }.step h3 { margin:0; }.reward-section { padding:62px 0; }.reward-section h2 { font-size:2.7rem; }.reward-rules { padding:20px; border-radius:20px; }.tips-grid { grid-template-columns:1fr; }.tips-grid article { padding:21px; }.footer-row { align-items:start; flex-direction:column; }.site-footer nav { gap:9px 14px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }