*{box-sizing:border-box}
body{margin:0;background:var(--bg-app);color:var(--fg-1);font-family:var(--font-sans)}
a{color:var(--makau-blue)}a:hover{color:var(--makau-blue-700)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3,p{margin:0;text-wrap:pretty}

.logo{display:block}
.logo img{display:block;height:52px;width:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.hero{background:var(--makau-sky);border-radius:0 0 32px 32px;color:var(--makau-ink)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center;padding:32px 0 56px}
.hero h1{font-size:clamp(34px,5vw,52px);font-weight:900;line-height:1.08}
.hero p{font-size:18px;line-height:1.5;margin-top:16px;max-width:520px;font-weight:600}
.cta-label{margin-top:28px;font-size:16px;font-weight:800}
.hero .cta{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}
.hero .cta .btn{white-space:nowrap}
.hero img.maka{width:100%;height:auto;max-width:380px;justify-self:center}

section.blk{padding:72px 0 0}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--makau-blue)}
.blk h2{font-size:clamp(26px,3.4vw,34px);font-weight:900;margin-top:6px}
.blk .lead{font-size:17px;line-height:1.5;color:var(--fg-2);margin-top:10px;max-width:620px}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.num{width:40px;height:40px;border-radius:50%;background:var(--makau-blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;box-shadow:0 3px 0 var(--makau-blue-700)}
.step h3{font-size:20px;font-weight:800;margin-top:14px}
.step p{font-size:15px;line-height:1.5;color:var(--fg-2);margin-top:6px}
.exams{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.exam{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.exam i{width:10px;height:10px;border-radius:50%;background:var(--makau-lime);flex:none;box-shadow:0 2px 0 var(--makau-lime-700)}

.worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.worlds div{aspect-ratio:16/10;border-radius:24px;background:center/cover;background-color:var(--makau-sky-100);box-shadow:0 4px 0 var(--gray-300)}

.pals{overflow:hidden;margin-top:32px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pals-track{display:flex;gap:32px;width:max-content;animation:palsRoll 28s linear infinite}
.pals:hover .pals-track{animation-play-state:paused}
@keyframes palsRoll{to{transform:translateX(calc(-50% - 16px))}}
@media (prefers-reduced-motion:reduce){.pals-track{animation:none}}
.pal{width:120px;aspect-ratio:1;display:grid;place-items:center;flex:none}
.pal img{width:100%;height:100%;object-fit:contain}

.contact{margin:80px 0 0;background:var(--makau-blue);color:#fff;border-radius:32px 32px 0 0;padding:56px 0}
.contact .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.contact .wrap>div:first-child{flex:1 1 280px}
.contact h2{font-size:32px;font-weight:900}
.contact p{font-size:17px;margin-top:6px;font-weight:600}
.contact p a,.contact p a:hover{color:#fff}
.fcols{display:grid;grid-template-columns:repeat(3,auto);gap:24px 48px}
.fcol{display:flex;flex-direction:column;gap:10px}
.fcol h3{margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--makau-lime);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--makau-lime)}
.fcol a{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.fcol a:hover{color:var(--makau-lime)}
@media (max-width:640px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}}

.foot{background:var(--makau-blue);color:var(--makau-blue-100);font-size:13px;padding:0 0 28px}
.foot .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}

@media (max-width:520px){.nav{padding:14px 0}.logo img{height:38px}.hero-in{padding:8px 0 40px;gap:20px}.hero .cta>*{flex:1 1 0;min-width:0}}
@media (max-width:760px){.hero-in{grid-template-columns:1fr}.hero img.maka{max-width:240px;order:-1}.steps,.worlds{grid-template-columns:1fr}.pal{width:96px}}
/* Short landscape phones: keep the hero side by side so the text isn't pushed below the fold */
@media (max-width:760px) and (max-height:500px) and (orientation:landscape){.hero-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);padding:8px 0 32px}.hero img.maka{max-width:200px;order:0}.steps,.worlds{grid-template-columns:repeat(3,minmax(0,1fr))}}