/* Songfish website. Brand colours and fonts as in the app (Branding/Brand.swift). */
@font-face { font-family: "Baloo 2"; src: url("/assets/Baloo2-Variable.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/Nunito-Variable.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
:root {
  --cyan: #13bdec; --cyan-dark: #0b8db3; --orange: #ec4213; --orange-dark: #b32f0a;
  --navy: #0a3342; --muted: #4a6a76; --bg: #ffffff; --tint: #e6f7fc; --card: #ffffff; --line: #dce8ec;
}
@media (prefers-color-scheme: dark) {
  :root { --navy: #eaf6fa; --muted: #9db5be; --bg: #0f1b20; --tint: #12303a; --card: #1a2a31; --line: #33474f; --cyan-dark: #4cc9ee; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--navy); font: 600 17px/1.55 "Nunito", system-ui, sans-serif; }
a { color: var(--cyan-dark); font-weight: 800; }
h1, h2, h3, .wordmark { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; line-height: 1.15; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

header.site { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; max-width: 880px; margin: 0 auto; }
header.site nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
header.site nav a { text-decoration: none; }
.wordmark { font-size: 30px; text-decoration: none; color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .fish { color: var(--cyan); }
.wordmark .i { position: relative; }
.wordmark .i::before { content: ""; position: absolute; left: 50%; top: 0.2em; width: 0.26em; height: 0.2em; margin-left: -0.13em;
  background: var(--orange); border-radius: 50%; transform: rotate(-20deg); }

.hero { background: var(--cyan); color: #fff; text-align: center; padding: 36px 20px 0; overflow: hidden; }
.hero img { width: min(300px, 70vw); height: auto; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .hero img { animation: none; } }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 10px auto 8px; max-width: 16em; }
.hero p { margin: 0 auto 22px; max-width: 30em; font-size: 19px; }
.wave { display: block; width: 100%; height: 40px; margin-top: 18px; }
.wave path { fill: var(--bg); }
.badge { display: inline-block; background: var(--orange); color: #fff; font-weight: 800; padding: 12px 22px; border-radius: 18px;
  box-shadow: 0 5px 0 var(--orange-dark); }

section { padding: 34px 0; }
h2 { font-size: 28px; margin: 0 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.card h3 { margin: 0 0 4px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); }
.band { background: var(--tint); }
.note { color: var(--muted); font-size: 15px; }

main.doc { padding: 10px 0 40px; }
main.doc h1 { font-size: clamp(30px, 5vw, 40px); margin: 18px 0 6px; }
main.doc h2 { font-size: 23px; margin: 28px 0 6px; }
main.doc li { margin-bottom: 6px; }
.draft { background: #fff3cd; color: #5c4400; border: 2px solid #e6c65a; border-radius: 14px; padding: 12px 16px; margin: 16px 0; }
.todo { background: #fff3cd; color: #5c4400; padding: 0 4px; border-radius: 4px; }

footer.site { border-top: 2px solid var(--line); padding: 22px 20px 40px; color: var(--muted); font-size: 15px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 0; }
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap; }