/* GymXP site — shared shell. Page-specific styles stay inline in each page.
   Tokens mirror the app's GymColors. Served must-revalidate (see netlify.toml). */
:root {
  --bg: #0F0F0F;
  --card: #1C1C1E;
  --border: #2C2C2E;
  --text: #ffffff;
  --body: #cccccc;
  --muted: #8E8E93;
  --dim: #6E6E73;
  --accent: #C8FF47;
  --gold: #FFD60A;
  --green: #30D158;
  --blue: #4DB8FF;
  --purple: #9B59B6;
  --red: #EF5350;
  --orange: #FFA726;
  --w-narrow: 520px;
  --w-wide: 680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

/* ── Top nav (every page) ─────────────────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.top-nav .inner {
  max-width: var(--w-wide); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; height: 52px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.top-nav .inner::-webkit-scrollbar { display: none; }
.top-nav .home { color: var(--accent); font-weight: 900; font-size: 14px; letter-spacing: 2px; text-decoration: none; margin-right: auto; }
.top-nav a:not(.home) { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.top-nav a:not(.home):hover, .top-nav a[aria-current="page"] { color: var(--text); }
.top-nav a.get { color: var(--bg); background: var(--accent); padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.top-nav a.get:hover { color: var(--bg); background: #d9ff7a; }
@media (max-width: 520px) {
  .top-nav .inner { gap: 14px; padding: 0 16px; }
  .top-nav a[href="/gamified-workout-app.html"] { display: none; }
}

/* In-page section anchors (guide + SEO page): second row under the top nav */
.sub-nav {
  position: sticky; top: 52px; z-index: 40;
  background: rgba(15, 15, 15, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.sub-nav .inner {
  max-width: 960px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 18px; height: 40px; align-items: center;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.sub-nav .inner::-webkit-scrollbar { display: none; }
.sub-nav a { color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.sub-nav a:hover { color: var(--text); }

/* ── Store buttons ────────────────────────────────────────────────────── */
.download-wrap { display: flex; flex-direction: column; gap: 14px; }
.download-btn {
  display: flex; align-items: center; gap: 12px;
  background: #fff; color: var(--bg); text-decoration: none;
  font-weight: 700; font-size: 1rem; padding: 16px 28px; border-radius: 12px;
  transition: background .15s, transform .15s;
}
.download-btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); }
.download-btn .icon { width: 26px; height: 26px; flex: 0 0 26px; }
.download-btn .icon svg { width: 100%; height: 100%; display: block; }
.download-btn .label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.download-btn .label small { font-size: .7rem; font-weight: 400; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 600px) { .download-wrap.row { flex-direction: row; justify-content: center; } }

/* ── Phone bezel for real device captures (1080×2400 = 9:20) ──────────── */
.phone {
  width: 250px; aspect-ratio: 9 / 20; flex: 0 0 250px;
  border-radius: 34px; border: 1.5px solid #3A3A3C; overflow: hidden;
  background: var(--bg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.phone img, .phone picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone.lg { width: 300px; flex-basis: 300px; border-radius: 40px; }

/* ── Cookie consent ───────────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  max-width: 560px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; display: none; gap: 12px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  font-size: .85rem; color: var(--body); line-height: 1.45;
}
.cookie-bar.show { display: flex; }
.cookie-bar p { margin: 0; flex: 1 1 260px; }
.cookie-bar .actions { display: flex; gap: 8px; }
.cookie-bar button {
  font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  padding: 9px 14px; border-radius: 9px; border: 1px solid var(--border);
  background: transparent; color: var(--text);
}
.cookie-bar button.accept { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ── Footer (every page) ──────────────────────────────────────────────── */
.site-footer {
  max-width: var(--w-wide); margin: 56px auto 0; padding: 24px 20px 40px;
  border-top: 1px solid var(--border);
  color: var(--dim); font-size: .8rem; text-align: center; line-height: 1.9;
}
.site-footer a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--accent); }
.site-footer .links a { margin: 0 4px; }
.site-footer .socials { display: flex; justify-content: center; gap: 20px; margin: 12px 0 6px; }
.site-footer .socials a { color: #555; text-decoration: none; }
.site-footer .socials a:hover { color: var(--accent); }
.site-footer .socials svg { width: 20px; height: 20px; fill: currentColor; }