/* Climb Hub marketing site — dark theme matching the app.
   All tokens pulled from lib/theme/colors.ts (darkColors) + lib/theme/tokens.ts. */

:root {
  /* Surfaces — warm-dark, matches darkColors.* */
  --bg:              #0C0A09;  /* warm950 */
  --surface:         #1C1917;  /* warm900 */
  --surface-elev:    #292524;  /* warm800 */
  --surface-tinted:  #292524;  /* warm800 */
  --surface-active:  #44403C;  /* warm700 */
  --border:          #44403C;  /* warm700 */
  --border-soft:     #292524;  /* warm800 */

  /* Text */
  --text:            #FAFAF9;  /* warm50 */
  --text-secondary:  #D6D3D1;  /* warm300 */
  --text-tertiary:   #A8A29E;  /* warm400 */
  --text-on-primary: #FFFFFF;

  /* Brand */
  --primary:         #5B7BFF;  /* blue400 — lifted for AA on warm950 */
  --primary-strong:  #1D39E2;  /* blue500 — for vivid moments */
  --primary-dim:     #1A2456;  /* blueDarkTint */
  --primary-tint:    rgba(91,123,255,0.12);
  --secondary:       #F5D54A;  /* chalk300 — brighter yellow in dark mode */
  --secondary-strong:#E2C61D;  /* chalk500 */
  --secondary-tint:  rgba(245,213,74,0.12);

  /* Climbing accents — dark-mode brighter variants (300 shades) */
  --accent-coral:  #FDA4AF; --accent-coral-tint:  rgba(253,164,175,0.12); --accent-coral-strong: #F43F5E;
  --accent-teal:   #5EEAD4; --accent-teal-tint:   rgba(94,234,212,0.12);  --accent-teal-strong:  #14B8A6;
  --accent-grip:   #6EE7B7; --accent-grip-tint:   rgba(110,231,183,0.12); --accent-grip-strong:  #10B981;
  --accent-ember:  #FB923C; --accent-ember-tint:  rgba(251,146,60,0.12);  --accent-ember-strong: #F97316;
  --accent-route:  #C4B5FD; --accent-route-tint:  rgba(196,181,253,0.14); --accent-route-strong: #8B5CF6;
  --accent-rose:   #F9A8C2; --accent-rose-tint:   rgba(249,168,194,0.14); --accent-rose-strong:  #EC4899;
  --accent-violet: #D8B4FE; --accent-violet-tint: rgba(216,180,254,0.14); --accent-violet-strong:#A855F7;

  --maxw: 1080px;
  --maxw-content: 920px;
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--secondary); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw-content); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Skip-link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--secondary); color: var(--bg);
  padding: 10px 16px; font-weight: 700;
  border-radius: 0 0 8px 0; z-index: 1000;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 0; top: 0; text-decoration: none;
  outline: 2px solid var(--primary);
}

/* ────────────────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────────────────── */
.site-header {
  padding: 16px 0;
  background: rgba(12,10,9,0.85);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: var(--maxw); }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  font-size: 20px;
  min-height: 44px;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.site-nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  color: var(--text-secondary); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--secondary); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   HERO — centered, climbing background image + dark gradient overlay
   ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  /* Anchor the bg image to the upper-right so the climber (which sits in
     the upper-right of hero-bg.jpg) stays visible at every viewport width.
     `cover` scales the image to fill — without an anchor, `center center`
     crops the climber out on wide screens. */
  background:
    linear-gradient(180deg, rgba(12,10,9,0.55) 0%, rgba(12,10,9,0.85) 100%),
    linear-gradient(135deg, rgba(29,57,226,0.40) 0%, rgba(168,85,247,0.22) 100%),
    url('/assets/hero-bg.jpg') top right / cover no-repeat;
  padding: clamp(80px, 14vw, 160px) 0 clamp(64px, 10vw, 120px);
  text-align: center;
}
.hero-content { max-width: 760px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.05; margin: 0 auto 24px;
  letter-spacing: -0.035em; color: var(--text);
  font-weight: 800;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  max-width: 14ch;
}
.hero h1 .accent       { color: var(--secondary); }
.hero h1 .accent-rose  { color: var(--accent-rose); }
.hero h1 .accent-teal  { color: var(--accent-teal); }
.hero h1 .accent-route { color: var(--accent-route); }
.hero .lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 auto 36px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.hero .stores { justify-content: center; }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text); font-size: 14px;
  min-height: 56px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.store:hover, .store:focus-visible {
  border-color: var(--secondary);
  background: var(--surface-elev);
  text-decoration: none;
  transform: translateY(-2px);
}
.hero .store {
  background: rgba(255,255,255,0.96);
  color: #1C1917;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.hero .store:hover, .hero .store:focus-visible {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.55);
}
.hero .store .label .top { color: #57534E; }
.hero .store .label .bot { color: #1C1917; }
.store .label { display: flex; flex-direction: column; line-height: 1.2; }
.store .label .top { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
.store .label .bot { font-size: 16px; font-weight: 700; color: var(--text); }
.store svg { flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────
   CHIP STRIP — colorful overview right under the hero
   ──────────────────────────────────────────────────────────────── */
.chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: clamp(40px, 6vw, 56px);
  padding-bottom: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--chip-bg, var(--surface));
  color: var(--chip-fg, var(--text));
  border: 1px solid var(--chip-border, var(--border-soft));
  font-size: 14.5px;
  font-weight: 600;
  min-height: 44px;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.chip:hover, .chip:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--chip-fg, var(--primary));
  background: var(--chip-bg-hover, var(--surface-elev));
}
.chip.c-logbook   { --chip-bg: var(--primary-tint);      --chip-fg: var(--primary);      --chip-border: rgba(91,123,255,0.35); }
.chip.c-partner   { --chip-bg: var(--accent-rose-tint);  --chip-fg: var(--accent-rose);  --chip-border: rgba(249,168,194,0.35); }
.chip.c-feed      { --chip-bg: var(--accent-violet-tint);--chip-fg: var(--accent-violet);--chip-border: rgba(216,180,254,0.35); }
.chip.c-messaging { --chip-bg: var(--accent-teal-tint);  --chip-fg: var(--accent-teal);  --chip-border: rgba(94,234,212,0.35); }
.chip.c-beta      { --chip-bg: var(--accent-coral-tint); --chip-fg: var(--accent-coral); --chip-border: rgba(253,164,175,0.35); }
.chip.c-board     { --chip-bg: var(--accent-route-tint); --chip-fg: var(--accent-route); --chip-border: rgba(196,181,253,0.35); }
.chip.c-events    { --chip-bg: var(--accent-ember-tint); --chip-fg: var(--accent-ember); --chip-border: rgba(251,146,60,0.35); }
.chip.c-stats     { --chip-bg: var(--secondary-tint);    --chip-fg: var(--secondary);    --chip-border: rgba(245,213,74,0.35); }
.chip.c-community { --chip-bg: var(--accent-grip-tint);  --chip-fg: var(--accent-grip);  --chip-border: rgba(110,231,183,0.35); }
.chip.c-achievements { --chip-bg: var(--secondary-tint);  --chip-fg: var(--secondary);    --chip-border: rgba(245,213,74,0.35); }

/* ────────────────────────────────────────────────────────────────
   GENERAL SECTIONS
   ──────────────────────────────────────────────────────────────── */
section.wrap, section.wrap-wide { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(8px, 2vw, 16px); }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--secondary);
  margin: 0 0 12px;
  font-weight: 700;
}
h2.section-title {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 32px;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
h2.section-title .accent       { color: var(--secondary); }
h2.section-title .accent-blue  { color: var(--primary); }

/* ────────────────────────────────────────────────────────────────
   FEATURE GRID — colorful cards with tinted backgrounds + accent borders
   ──────────────────────────────────────────────────────────────── */
.features {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .features { grid-template-columns: 1fr 1fr; } }
.feature {
  background:
    linear-gradient(180deg, var(--feature-tint, var(--primary-tint)) 0%, transparent 100%),
    var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--feature-color, var(--primary));
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  transition: transform .12s ease, border-color .15s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--feature-color, var(--primary));
}
.feature h3 {
  margin: 0 0 10px; font-size: 20px; font-weight: 700;
  color: var(--feature-color, var(--text));
}
.feature .icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--feature-tint, var(--primary-tint));
  color: var(--feature-color, var(--primary));
  margin-bottom: 18px; font-size: 26px;
  border: 1px solid var(--border);
}
.feature p { margin: 0; color: var(--text-secondary); font-size: 15.5px; }
.feature p + p { margin-top: 10px; }

.feature.f-logbook       { --feature-color: var(--primary);        --feature-tint: var(--primary-tint); }
.feature.f-partner       { --feature-color: var(--accent-rose);    --feature-tint: var(--accent-rose-tint); }
.feature.f-community     { --feature-color: var(--accent-violet);  --feature-tint: var(--accent-violet-tint); }
.feature.f-messaging     { --feature-color: var(--accent-teal);    --feature-tint: var(--accent-teal-tint); }
.feature.f-beta          { --feature-color: var(--accent-coral);   --feature-tint: var(--accent-coral-tint); }
.feature.f-board         { --feature-color: var(--accent-route);   --feature-tint: var(--accent-route-tint); }
.feature.f-events        { --feature-color: var(--accent-ember);   --feature-tint: var(--accent-ember-tint); }
.feature.f-for-climbers  { --feature-color: var(--accent-grip);    --feature-tint: var(--accent-grip-tint); }
.feature.f-achievements  { --feature-color: var(--secondary);     --feature-tint: var(--secondary-tint); }
.feature.wide { max-width: 720px; }

/* ────────────────────────────────────────────────────────────────
   HOW-TO SECTIONS
   ──────────────────────────────────────────────────────────────── */
.howto-section { margin: 48px 0; scroll-margin-top: 80px; }
.howto-section > h2 {
  font-size: clamp(22px, 3vw, 28px);
  padding: 10px 16px;
  margin: 0 0 24px;
  display: inline-block;
  border-radius: var(--radius-sm);
  font-weight: 800;
  background: var(--primary-tint);
  color: var(--primary);
}
.howto-section > h2 .accent { color: var(--secondary); }
.howto-item {
  margin: 0 0 18px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  scroll-margin-top: 80px;
}
.howto-item h3 { margin: 0 0 8px; font-size: 19px; color: var(--text); font-weight: 700; }
.howto-item .summary { margin: 0 0 12px; color: var(--text-secondary); font-size: 15px; }
.howto-item ol { margin: 0; padding-left: 22px; }
.howto-item ol li { margin: 0 0 6px; color: var(--text-secondary); }
.howto-item ol li::marker { color: var(--primary); font-weight: 700; }

/* Per-section accent */
.howto-section.s-getting-started > h2 { background: var(--primary-tint);      color: var(--primary); }
.howto-section.s-climbs > h2          { background: var(--accent-coral-tint); color: var(--accent-coral); }
.howto-section.s-climbs .howto-item   { border-left-color: var(--accent-coral); }
.howto-section.s-climbs .howto-item ol li::marker { color: var(--accent-coral); }
.howto-section.s-feed > h2            { background: var(--accent-violet-tint); color: var(--accent-violet); }
.howto-section.s-feed .howto-item     { border-left-color: var(--accent-violet); }
.howto-section.s-feed .howto-item ol li::marker { color: var(--accent-violet); }
.howto-section.s-partner > h2         { background: var(--accent-rose-tint);   color: var(--accent-rose); }
.howto-section.s-partner .howto-item  { border-left-color: var(--accent-rose); }
.howto-section.s-partner .howto-item ol li::marker { color: var(--accent-rose); }
.howto-section.s-messaging > h2       { background: var(--accent-teal-tint);   color: var(--accent-teal); }
.howto-section.s-messaging .howto-item { border-left-color: var(--accent-teal); }
.howto-section.s-messaging .howto-item ol li::marker { color: var(--accent-teal); }
.howto-section.s-events > h2          { background: var(--accent-ember-tint);  color: var(--accent-ember); }
.howto-section.s-events .howto-item   { border-left-color: var(--accent-ember); }
.howto-section.s-events .howto-item ol li::marker { color: var(--accent-ember); }
.howto-section.s-gyms > h2            { background: var(--accent-grip-tint);   color: var(--accent-grip); }
.howto-section.s-gyms .howto-item     { border-left-color: var(--accent-grip); }
.howto-section.s-gyms .howto-item ol li::marker { color: var(--accent-grip); }
.howto-section.s-boards > h2          { background: var(--accent-route-tint);  color: var(--accent-route); }
.howto-section.s-boards .howto-item   { border-left-color: var(--accent-route); }
.howto-section.s-boards .howto-item ol li::marker { color: var(--accent-route); }
.howto-section.s-beta > h2            { background: var(--accent-coral-tint);  color: var(--accent-coral); }
.howto-section.s-beta .howto-item     { border-left-color: var(--accent-coral); }
.howto-section.s-beta .howto-item ol li::marker { color: var(--accent-coral); }
.howto-section.s-profile > h2         { background: var(--secondary-tint);     color: var(--secondary); }
.howto-section.s-profile .howto-item  { border-left-color: var(--secondary); }
.howto-section.s-profile .howto-item ol li::marker { color: var(--secondary); }
.howto-section.s-gym-owners > h2      { background: var(--accent-violet-tint); color: var(--accent-violet); }
.howto-section.s-gym-owners .howto-item { border-left-color: var(--accent-violet); }
.howto-section.s-gym-owners .howto-item ol li::marker { color: var(--accent-violet); }
.howto-section.s-feedback > h2        { background: var(--accent-teal-tint);   color: var(--accent-teal); }
.howto-section.s-feedback .howto-item { border-left-color: var(--accent-teal); }
.howto-section.s-feedback .howto-item ol li::marker { color: var(--accent-teal); }

/* TOC */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
}
.toc h2 {
  margin: 0 0 14px; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-tertiary); font-weight: 700;
}
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
@media (max-width: 600px) { .toc ul { columns: 1; } }
.toc ul li { margin: 0 0 4px; break-inside: avoid; }
.toc ul li a {
  color: var(--text); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 0;
}
.toc ul li a:hover { color: var(--secondary); }

/* ────────────────────────────────────────────────────────────────
   DOWNLOAD / QR
   ──────────────────────────────────────────────────────────────── */
.qr-grid {
  display: grid; gap: 24px; grid-template-columns: 1fr; margin: 32px 0;
}
@media (min-width: 720px) { .qr-grid { grid-template-columns: 1fr 1fr; } }
.qr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.qr-card.q-ios   { border-top: 4px solid var(--primary); }
.qr-card.q-droid { border-top: 4px solid var(--accent-grip); }
.qr-card h3 { margin: 0 0 16px; color: var(--text); font-size: 20px; font-weight: 700; }
.qr-card img.qr {
  width: 220px; max-width: 100%;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  margin: 0 auto 18px;
}
.qr-card .store-link {
  display: inline-block; margin-top: 8px;
  overflow-wrap: anywhere;
  min-height: 44px; padding: 10px 4px;
  font-size: 13px; color: var(--text-tertiary);
}
.qr-card .store-link:hover { color: var(--secondary); }

/* Breadcrumbs */
.crumbs { color: var(--text-tertiary); font-size: 14px; margin: 0 0 20px; }
.crumbs a {
  color: var(--text-tertiary);
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
}
.crumbs a:hover { color: var(--secondary); }
.crumbs .sep { margin: 0 6px; color: var(--border); }

/* ────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: clamp(56px, 8vw, 96px);
  padding: 36px 0 48px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: 14px;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between; align-items: center;
}
.site-footer a {
  color: var(--text-secondary);
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 6px;
}
.site-footer a:hover { color: var(--secondary); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer-brand-line {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.footer-brand-line .copy { color: var(--text); font-weight: 700; }
.footer-brand-line .sep {
  display: inline-block; width: 1px; height: 14px;
  background: var(--border); margin: 0 2px;
}
.footer-brand-line .by-kikr { color: var(--text-tertiary); font-size: 13px; }
.footer-brand-line .by-kikr a {
  color: var(--text); font-weight: 700;
  min-height: auto; padding: 0;
  border-bottom: 1px solid var(--secondary);
}
.footer-brand-line .by-kikr a:hover {
  color: var(--secondary);
  border-bottom-color: var(--secondary);
  text-decoration: none;
}

/* ────────────────────────────────────────────────────────────────
   PAGE CONTENT UTILITIES
   ──────────────────────────────────────────────────────────────── */
.page-h1 {
  font-size: clamp(32px, 5vw, 46px);
  letter-spacing: -0.025em;
  margin: 0 0 14px; color: var(--text); font-weight: 800;
}
.page-lede {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 65ch;
  margin: 0 0 24px;
  line-height: 1.6;
}
.page-lede.tight { margin: 0 0 12px; }
.note-muted {
  margin: 24px 0 0;
  color: var(--text-tertiary);
  font-size: 14px;
}
.note-muted.tight { margin: 0; font-size: 14px; }
.howto-quick {
  font-size: 17px; line-height: 1.9;
  padding-left: 22px;
  color: var(--text-secondary);
}
.howto-quick li { margin-bottom: 8px; }
.howto-quick li::marker { color: var(--secondary); font-weight: 700; }
.help-trailer {
  margin: 48px 0; color: var(--text-secondary); font-size: 15px;
  padding: 22px 24px; background: var(--surface);
  border-radius: var(--radius); border-left: 4px solid var(--secondary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}