.hero { text-align: center; padding: 56px 0 24px; }
.hero .ball {
    width: 120px; height: 120px; margin: 0 auto 22px; object-fit: contain;
    filter: drop-shadow(0 14px 40px rgba(0,0,0,.45));
}
.hero h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.12; margin: 0 0 22px; }
.hero .tagline { font-size: clamp(16px, 3.5vw, 20px); color: var(--muted); margin: 0 auto; max-width: 820px; }

.cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin: 34px 0 8px; }
.cta a { display: inline-block; transition: transform .15s ease, opacity .15s ease; }
.cta a:hover { transform: translateY(-2px); }
.cta img { height: 48px; width: auto; display: block; }
/* Google's badge ships with built-in padding, so it looks smaller at an
   equal height; enlarge it to match Apple's badge visually. */
#playBadge { height: 68px; }
.store-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 46px 0 10px; }
.feature { background: var(--card); border: 1px solid #232323; border-radius: 14px; padding: 18px 18px 16px; }
.feature .ic { font-size: 22px; margin-bottom: 6px; }
.feature h3 { margin: 0 0 4px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.faq { margin: 56px 0 10px; scroll-margin-top: 24px; }
/* Focused only by the footer link, to carry keyboard focus; not a control. */
.faq h2:focus { outline: none; }
.faq h2 { font-size: clamp(22px, 4.5vw, 28px); text-align: center; margin: 0 0 20px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
/* index.js tweens the height; overflow keeps the answer inside the card meanwhile. */
.faq details {
    background: var(--card); border: 1px solid #232323; border-radius: 14px;
    overflow: hidden; transition: border-color .3s ease;
}
.faq details.is-open { border-color: #2f4a2f; }
.faq summary {
    list-style: none; cursor: pointer; padding: 14px 48px 14px 18px;
    position: relative; font-weight: 600; font-size: 15px;
    transition: color .2s ease;
}
.faq summary:hover { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
/* A plus drawn with two bars: opening turns the vertical one flat, leaving a minus. */
.faq summary::before,
.faq summary::after {
    content: ""; position: absolute; right: 20px; top: 50%;
    width: 14px; height: 2px; margin-top: -1px; border-radius: 1px;
    background: var(--green);
    transition: transform .35s cubic-bezier(.22, .8, .24, 1);
}
.faq summary::after { transform: rotate(90deg); }
.faq details.is-open summary::after { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 14px; }
.faq-body { padding: 0 18px 16px; }
.faq-body p { margin: 0; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
    .faq details, .faq summary, .faq summary::before, .faq summary::after { transition: none; }
}

.offline { margin-top: 30px; text-align: center; color: var(--muted); background: var(--card); border: 1px solid #232323; border-radius: 14px; padding: 16px; }