:root { color-scheme: dark; --bg:#101a2c; --text:#f7f8ff; --muted:#aab8d0; --yellow:#ffd45a; --line:rgba(255,255,255,.1); }
* { box-sizing: border-box; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; color:var(--text);
  background:radial-gradient(ellipse at 50% -10%, #2a4265 0, #17253c 42%, var(--bg) 80%);
  font-family:Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.hidden { display:none !important; }

.start { width:min(100%, 400px); text-align:center;
  padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.start-parade { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; max-width:320px; margin:0 auto 22px; min-height:116px; }
.start-parade img { width:100%; aspect-ratio:1; display:block; animation:hop 2.4s ease-in-out infinite; animation-delay:calc(var(--i) * .12s); }
@keyframes hop { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
.start-title { font-size:46px; line-height:1; letter-spacing:-1.6px; font-weight:900; margin:0 0 10px; }
.start-title span { color:var(--yellow); }
.start-tagline { color:var(--muted); font-size:15px; font-weight:700; line-height:1.4; margin:0 0 26px; }
.start-actions { display:grid; gap:10px; }
.primary-button { display:block; width:100%; border:0; border-radius:13px; padding:16px 18px; text-align:center; text-decoration:none;
  color:#263047; background:linear-gradient(180deg,#ffe37b,#ffc83e); font-size:20px; font-weight:900; box-shadow:0 4px 0 #b98424; cursor:pointer; }
.primary-button:active { transform:translateY(2px); box-shadow:0 2px 0 #b98424; }
.secondary-button { min-height:44px; border:1px solid var(--line); color:#edf3ff; background:#273b59; border-radius:11px; padding:8px 14px; font-size:13px; font-weight:900; }
.how-to { margin:18px 0 0; padding:14px 16px 14px 34px; text-align:left; color:#d8e3f4; font-size:14px; line-height:1.5; border:1px solid var(--line); border-radius:15px; background:rgba(26,41,65,.75); }
.how-to li + li { margin-top:6px; }
.start-best { min-height:1.2em; margin:18px 0 0; color:var(--yellow); font-size:14px; font-weight:900; }
footer { display:flex; justify-content:space-between; gap:10px; color:#8fa1bd; font-size:11px; margin-top:26px; padding:0 3px; }
footer span:first-child { color:#c9d6e9; font-weight:900; }
@media (prefers-reduced-motion: reduce) { .start-parade img { animation:none; } }

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  font-size: 14px;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}


/* Footer */
footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 12px 20px;
  font-size: 13px;
  color: #91a8c9;
}

.footer-brand {
  font-weight: 800;
  color: #fff;
}

.footer-tagline {
  text-align: right;
}

.footer-links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-links a {
  color: #91a8c9;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffd34f;
}

@media (max-width: 480px) {
  footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-links {
    width: 100%;
    gap: 12px 20px;
  }
}