/* ============================================================
   inClimb landing — styles
   ============================================================ */

:root {
  --bg: #0b0f14;
  --bg-elev: #10151d;
  --card: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #eaf0f7;
  --muted: #94a1b2;
  --blue: #5b9dff;
  --teal: #45d6be;
  --orange: #ff8a2a;
  --grad: linear-gradient(120deg, var(--teal), var(--blue));
  --radius: 20px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  /* belt and braces: iOS Safari pans horizontally on overflow even with
     body{overflow-x:hidden}; clip forbids scrolling in that axis entirely */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto keeps width/height attributes as aspect-ratio hints only —
   without it the attribute height applies as-is and distorts capped images */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reveal animations translate elements ±44px before they enter the viewport;
   without clipping, those offsets widen the page and phones pan sideways. */
main {
  overflow-x: hidden;
  overflow-x: clip;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- typography ---------- */

h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 750;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 34em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(11, 15, 20, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.brand img { border-radius: 9px; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--text); }

/* ---------- buttons / badges ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 650;
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--grad);
  color: #071018;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(69, 214, 190, 0.35);
}

.btn-sm { padding: 9px 18px; font-size: 0.92rem; }

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.store-badges.center { justify-content: center; }

.store-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.2s var(--ease), border-color 0.2s ease, background 0.2s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.store-badge svg { width: 26px; height: 26px; }

.store-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.store-badge small {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 48px) 0 64px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 420px at 18% 20%, rgba(69, 214, 190, 0.13), transparent 65%),
    radial-gradient(700px 520px at 85% 65%, rgba(91, 157, 255, 0.14), transparent 65%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--muted);
  margin-bottom: 24px;
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
}

.hero-copy h1 { margin-bottom: 22px; }

.hero-meta {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* phone mockup */

.hero-visual { display: flex; justify-content: center; }

.phone-wrap { position: relative; }

.phone {
  width: min(310px, 72vw);
  padding: 10px;
  border-radius: 46px;
  background: #05070a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}

.phone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 24px;
  border-radius: 999px;
  background: #05070a;
  z-index: 2;
}

/* The screen wraps the screenshot at its natural aspect ratio — no
   object-fit cropping, so no UI elements ever get cut at the edges. */
.phone-screen {
  border-radius: 37px;
  overflow: hidden;
  background: #0d1117;
}

.phone-screen img {
  width: 100%;
  height: auto;
}

.phone-sm { width: min(280px, 68vw); }

.phone-wrap .phone { animation: phoneFloat 7s ease-in-out infinite; }

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* floating cards around the hero phone */

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(16, 21, 29, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.float-card svg { width: 16px; height: 16px; }

.fc-grade {
  top: 15%;
  left: -26%;
  color: var(--muted);
  animation: chipFloat 6s ease-in-out infinite;
}

.grade-chip {
  background: #5e24b8;
  color: #fff;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 9px;
  font-size: 0.85rem;
}

.fc-done {
  bottom: 24%;
  right: -13%;
  color: #9ae08a;
  animation: chipFloat 7.5s ease-in-out infinite 1.2s;
}

.fc-reset {
  bottom: 7%;
  left: -12%;
  color: #f2705e;
  animation: chipFloat 6.8s ease-in-out infinite 0.6s;
}

.reset-dots {
  display: inline-flex;
  gap: 2.5px;
  align-items: center;
}

.reset-dots i {
  width: 5px;
  height: 10px;
  border-radius: 3px;
  background: #58332e;
}

.reset-dots i:first-child { background: #f2705e; }

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* scroll hint */

.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  opacity: 0.7;
  animation: hintBounce 2.2s ease-in-out infinite;
}

.scroll-hint svg { width: 26px; height: 26px; }

@keyframes hintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- sections ---------- */

.section { padding: 110px 0; }

.section-alt {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.section-sub { color: var(--muted); margin-top: 16px; }

/* how it works — split layout */

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.qr-figure { margin: 0; }

.qr-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.qr-photo img { width: 100%; }

.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 138, 42, 0) 42%,
    rgba(255, 138, 42, 0.28) 50%,
    rgba(255, 138, 42, 0) 58%,
    transparent 100%
  );
  transform: translateY(-100%);
  animation: scan 3.8s ease-in-out infinite;
}

@keyframes scan {
  0%, 12% { transform: translateY(-100%); }
  55%, 68% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.qr-figure figcaption {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.steps {
  list-style: none;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.steps li { display: flex; gap: 20px; }

.step-num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #071018;
  background: var(--grad);
}

.steps h3 { font-size: 1.15rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* feature rows */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 90px;
}

.feature-row:first-of-type { margin-top: 0; }

.feature-media { display: flex; justify-content: center; }

.row-flip .feature-media { order: 2; }
.row-flip .feature-copy { order: 1; }

.feature-copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.feature-copy p { color: var(--muted); max-width: 30em; }

.ticks {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: 0.98rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="%23071018" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" d="M5 12.5l4.5 4.5L19 7.5"/></svg>')
    center / 13px no-repeat,
    linear-gradient(120deg, var(--teal), var(--blue));
}

/* gyms card grid */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
  /* Icon + title share the top row; description spans full width below. */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--teal);
}

.card-icon svg { width: 23px; height: 23px; }

.card h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.card p { grid-column: 1 / -1; color: var(--muted); font-size: 0.93rem; }

.gym-setup-row {
  margin: 0 0 80px;
}

.gym-cta {
  text-align: center;
  margin-top: 48px;
  color: var(--muted);
}

.gym-cta a {
  color: var(--teal);
  font-weight: 600;
  border-bottom: 1px solid rgba(69, 214, 190, 0.35);
}

/* download */

.download {
  position: relative;
  text-align: center;
  padding: 140px 0;
  overflow: hidden;
}

.download-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px 420px at 50% 68%, rgba(91, 157, 255, 0.14), transparent 70%);
}

.download-inner { position: relative; }

.download-icon {
  margin: 0 auto 26px;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(69, 214, 190, 0.22);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 34px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.footer .brand { font-size: 1rem; }

.footer-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.footer-links a,
.copyright {
  font-size: 0.88rem;
  color: var(--muted);
}

.footer-links a:hover { color: var(--text); }

/* ============================================================
   scroll-reveal animations
   (only active when JS adds .js to <html>; page stays fully
   visible without JavaScript)
   ============================================================ */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  will-change: opacity, transform;
}

html.js [data-reveal="left"] { transform: translateX(-44px); }
html.js [data-reveal="right"] { transform: translateX(44px); }

html.js [data-delay="1"] { transition-delay: 0.1s; }
html.js [data-delay="2"] { transition-delay: 0.2s; }
html.js [data-delay="3"] { transition-delay: 0.3s; }
html.js [data-delay="4"] { transition-delay: 0.4s; }

html.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .hero { min-height: 0; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 72px;
    text-align: center;
  }

  .hero-copy { display: flex; flex-direction: column; align-items: center; }

  /* no side padding: the phone plus padding was the hero grid's min-content
     width, forcing a 409px layout on 390px phones (horizontal panning) */
  .hero-visual { padding: 0; }

  .store-badges { justify-content: center; }

  .fc-grade { left: -4%; }
  .fc-done { right: -4%; }
  .fc-reset { left: -2%; }

  .scroll-hint { display: none; }

  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .qr-figure { max-width: 420px; margin: 0 auto; }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .row-flip .feature-media { order: 0; }

  .feature-copy p { margin: 0 auto; }

  /* Center the list as a block, but keep every row sharing one left
     edge so the checkmarks line up (align-items:center would stagger
     them by each row's width). */
  .ticks {
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .ticks li { text-align: left; }

  /* Stacked on mobile, the 80px desktop gap leaves the (centered) tick
     list floating far from the cards while hugging its paragraph. Tighten
     it so the setup story and the cards read as one block. */
  .gym-setup-row { margin-bottom: 52px; }

  .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .nav-links { display: none; }
  /* With the links hidden, keep the CTA pinned to the right edge
     instead of hugging the logo. */
  .nav-inner { justify-content: space-between; }

  .section { padding: 80px 0; }

  .card-grid { grid-template-columns: 1fr; }

  /* stacked, uniform, centered store badges */
  .store-badges {
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }

  .store-badge {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .footer-inner { justify-content: center; text-align: center; }
  .footer-links { margin-left: 0; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.3rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .phone-wrap .phone,
  .float-card,
  .scanline,
  .scroll-hint {
    animation: none;
  }

  .scanline { display: none; }
}