:root { font-family: 'Baloo 2', system-ui, sans-serif; color: #103766; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; background: #64b8f5 url('assets/images/sky.webp') center top / cover fixed no-repeat; }
.landing { width: min(100%, 1100px); min-height: 100svh; margin: 0 auto; padding: clamp(20px, 3vw, 46px) 18px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero { width: 100%; }
.hero-art { position: relative; width: min(65%, 585px); height: clamp(198px, 30.5vw, 348px); margin: 0 auto; isolation: isolate; }
.hero-art img { display: block; position: absolute; height: auto; object-fit: contain; }
.brand-logo { z-index: 2; width: 64%; left: 18%; top: 0; filter: drop-shadow(0 10px 13px rgb(10 60 113 / .16)); animation: arrive-logo .8s cubic-bezier(.2,.7,.2,1) both; }
.explorer-logo { z-index: 5; width: 49%; left: 25.5%; bottom: 2%; filter: drop-shadow(0 8px 8px rgb(9 47 89 / .16)); animation: arrive-title .7s .35s cubic-bezier(.2,.7,.2,1) both; }
.character { z-index: 3; bottom: 6%; width: 16.2%; filter: drop-shadow(0 11px 9px rgb(10 66 102 / .18)); }
.character-boy { left: 12%; animation: arrive-boy .85s .24s cubic-bezier(.2,.8,.2,1) both; }
.character-girl { right: 12%; animation: arrive-girl .85s .36s cubic-bezier(.2,.8,.2,1) both; }
.download { text-align: center; width: min(100%, 780px); margin: 10px auto 0; }
.download p { margin: 0 auto 22px; max-width: 740px; font-size: clamp(1.32rem, 2.5vw, 1.9rem); font-weight: 700; line-height: 1.25; text-wrap: balance; text-shadow: 0 1px 1px rgb(255 255 255 / .65); }
.store-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; }
.store-link { display: inline-flex; padding: 0; border: 0; background: transparent; border-radius: 11px; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.store-link:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 6px rgb(10 49 87 / .23)); }
.store-link:focus-visible { outline: 3px solid #062d60; outline-offset: 5px; }
.store-link img { display: block; width: clamp(150px, 22vw, 180px); height: auto; }
.ios-modal { width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 3px solid #fff; border-radius: 24px; padding: 35px 25px 26px; background: #eaf8ff; color: #103766; box-shadow: 0 20px 70px rgb(5 41 88 / .35); font-family: 'Baloo 2', system-ui, sans-serif; text-align: center; }
.ios-modal::backdrop { background: rgb(8 35 75 / .58); }
.ios-modal form { margin: 0; }
.ios-modal p { margin: 12px 0 24px; font-size: clamp(1.3rem, 5vw, 1.65rem); font-weight: 700; line-height: 1.25; }
.modal-close { position: absolute; top: 7px; right: 14px; border: 0; background: none; color: #103766; font: 700 2rem/1 'Baloo 2', sans-serif; cursor: pointer; }
.modal-ok { padding: 8px 28px; border: 0; border-radius: 14px; background: #124b95; color: #fff; font: 700 1.1rem 'Baloo 2', sans-serif; cursor: pointer; }
.modal-close:focus-visible, .modal-ok:focus-visible { outline: 3px solid #f6b900; outline-offset: 3px; }
@keyframes arrive-logo { from { opacity: 0; transform: translateY(-22px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes arrive-title { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes arrive-boy { from { opacity: 0; transform: translateX(-75px) rotate(-4deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes arrive-girl { from { opacity: 0; transform: translateX(75px) rotate(4deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@media (max-width: 600px) {
  body { background-attachment: scroll; background-position: center top; }
  .landing { justify-content: flex-start; padding: clamp(36px, 8vh, 78px) 12px 34px; }
  .hero-art { width: min(65vw, 286px); height: clamp(202px, 59vw, 260px); }
  .brand-logo { width: 78%; left: 11%; top: 7%; }
  .explorer-logo { width: 68%; left: 16%; bottom: 7%; }
  .character { width: 21%; bottom: 14%; }
  .character-boy { left: 5%; }
  .character-girl { right: 5%; }
  .download { margin-top: 4px; }
  .download p { max-width: 480px; padding: 0 7px; font-size: clamp(1.22rem, 5.4vw, 1.5rem); line-height: 1.22; margin-bottom: 22px; }
  .store-links { gap: 10px; }
}
@media (max-width: 380px) { .hero-art { height: 202px; } .store-link img { width: 146px; } }
@media (prefers-reduced-motion: reduce) { .hero-art img { animation: none; } .store-link { transition: none; } }