:root{--blue:#1746d1;--yellow:#ffc83d;--cream:#fffaf0;--ink:#12204b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}header{height:76px;max-width:1280px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:23px;font-weight:900}.brand b{display:grid;place-items:center;width:38px;height:38px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);transform:rotate(-5deg);font-size:18px}.hero{min-height:720px;padding:72px max(40px,calc((100vw - 1200px)/2)) 62px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;overflow:hidden}.copy small{display:inline-block;padding:9px 14px;background:#fff;border:2px solid var(--ink);border-radius:99px;box-shadow:3px 3px var(--ink);font-weight:900}.copy h1{margin:25px 0 20px;font-size:clamp(60px,6vw,92px);line-height:.92;letter-spacing:-5px}.copy em{color:var(--blue);font-style:normal}.copy>p{max-width:590px;font-size:20px;line-height:1.55;color:#435079}.copy button,.intro button,.result button{border:3px solid var(--ink);border-radius:14px;padding:18px 25px;background:var(--yellow);color:var(--ink);font-weight:900;font-size:19px;box-shadow:7px 7px var(--ink);cursor:pointer}.proof{margin-top:25px;color:#526083;font-size:13px;font-weight:700}.visual{min-height:520px;display:grid;place-items:center;position:relative}.blob{position:absolute;width:510px;height:450px;background:var(--blue);border-radius:42% 58% 64% 36%/46% 39% 61% 54%;transform:rotate(6deg)}.card{width:min(440px,92vw);min-height:415px;background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:12px 12px var(--ink);padding:28px;z-index:2;transform:rotate(-1deg)}.intro,.result{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.intro i{display:grid;place-items:center;width:72px;height:72px;border:3px solid var(--ink);border-radius:22px;background:var(--yellow);box-shadow:5px 5px var(--ink);font-size:38px;font-weight:900}.intro p{font-size:13px;font-weight:900;color:#657197}.intro h2{margin:5px 0 24px;font-size:34px}.intro span,.result small{margin-top:16px;color:#7e88a5;font-size:12px}.qhead{display:flex;justify-content:space-between;font-size:13px;font-weight:900}.progress{height:8px;background:#e9edff;border-radius:9px;margin:16px 0 35px;overflow:hidden}.progress i{display:block;height:100%;background:var(--blue)}.label{color:#657197;font-weight:700}.question h2{font-size:29px}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.answer{min-height:66px;border:2px solid var(--ink);border-radius:12px;background:#f8f6ef;color:var(--ink);font-size:18px;font-weight:900;box-shadow:3px 3px var(--ink);cursor:pointer}.answer.good{background:#8ce79a}.answer.bad{background:#ffaaa7}.hint{text-align:center;color:#7e88a5;font-size:12px}.result h2{font-size:31px}.result p{color:#657197;line-height:1.5}.result button{background:var(--blue);color:#fff;font-size:16px;padding:13px 20px}.how{padding:48px max(40px,calc((100vw - 1200px)/2));background:#fff;border-block:3px solid var(--ink)}.how h3{text-align:center;color:var(--blue);font-size:13px;letter-spacing:1.5px}.how>div{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.how article{display:flex;align-items:center;gap:18px}.how article>b{display:grid;place-items:center;min-width:50px;height:50px;background:var(--yellow);border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px var(--ink)}.how p{color:#697595;font-size:14px;line-height:1.5}.how strong{color:var(--ink);font-size:17px}footer{max-width:1200px;margin:auto;padding:28px 40px;display:flex;justify-content:space-between;color:#68728f;font-size:12px}@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center;padding-top:40px}.copy{display:flex;flex-direction:column;align-items:center}.visual{min-height:500px}.how>div{grid-template-columns:1fr;max-width:460px;margin:auto}}@media(max-width:560px){header{padding:0 20px}.hero{padding:30px 18px 45px;gap:25px}.copy h1{font-size:55px;letter-spacing:-3px}.copy>p{font-size:17px}.copy button{width:100%}.blob{width:360px;height:390px}.card{padding:22px}.how{padding:40px 24px}footer{align-items:center;flex-direction:column;gap:14px}.answers{gap:7px}}
