:root {
  color-scheme: dark;
  --bg: #000;
  --text: #f4f4f4;
  --muted: #c9c9c9;
  --gold: #dca52e;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.home-shell {
  min-height: 100svh;
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 68px) clamp(20px, 5vw, 76px) 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-block { text-align: center; }
.wordmark {
  display: block;
  width: min(78vw, 1129px);
  height: auto;
  margin: 0 auto clamp(18px, 2.2vh, 28px);
}
.tagline-art {
  display: block;
  width: min(76vw, 1089px);
  height: auto;
  margin: 0 auto;
}

.apps {
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  align-items: start;
  gap: clamp(10px, 1.4vw, 22px);
  margin: clamp(34px, 5vh, 62px) auto clamp(34px, 4vh, 52px);
  width: 100%;
}

.app {
  color: inherit;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  outline-offset: 8px;
  transition: transform .18s ease, filter .18s ease;
}
.app:hover, .app:focus-visible {
  transform: translateY(-7px) scale(1.035);
  filter: brightness(1.08);
}
.app img {
  width: min(100%, 154px);
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 21%;
  margin-bottom: 18px;
}
.app-title {
  font-size: clamp(14px, 1.15vw, 20px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: .015em;
}
.app-subtitle {
  color: var(--muted);
  font-size: clamp(11px, .85vw, 15px);
  line-height: 1.25;
  margin-top: 12px;
  white-space: nowrap;
}
.app-anglers .app-title, .app-arrows .app-title, .app-jigsaw .app-title, .app-stillwater .app-title { color: #19c8d2; }
.app-sherpa .app-title { color: #8fa54e; }
.app-hand .app-title { color: #72bd20; }
.app-mint .app-title { color: #f2b434; }
.app-hair .app-title { color: #ff6727; }

.trust-row {
  width: min(100%, 1025px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 140px minmax(420px, 653px) 193px;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.5vw, 50px);
}
.trust-row img { display: block; max-width: 100%; height: auto; }
.platform { justify-self: center; }
.veteran { width: 100%; }

footer {
  margin-top: clamp(25px, 3vh, 40px);
  text-align: center;
  color: var(--gold);
  font-size: clamp(14px, 1.2vw, 19px);
  letter-spacing: .02em;
  font-weight: 500;
}

@media (max-width: 1050px) {
  .home-shell { justify-content: flex-start; }
  .apps { grid-template-columns: repeat(8, minmax(78px, 1fr)); gap: 10px; }
  .app img { margin-bottom: 13px; }
  .trust-row { grid-template-columns: 110px minmax(350px, 560px) 150px; gap: 22px; }
}

@media (max-width: 760px) {
  .home-shell { padding: 30px 18px 22px; }
  .wordmark { width: min(94vw, 650px); }
  .tagline-art { width: min(96vw, 700px); }
  .apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
    max-width: 620px;
  }
  .app img { width: min(100%, 210px); }
  .app-title { font-size: 17px; }
  .app-subtitle { white-space: normal; font-size: 13px; }
  .trust-row {
    grid-template-columns: 1fr 1fr;
    gap: 24px 26px;
    max-width: 620px;
  }
  .veteran { grid-column: 1 / -1; grid-row: 1; width: min(100%, 540px); justify-self: center; }
  .ios { justify-self: end; }
  .android { justify-self: start; }
}

@media (max-width: 430px) {
  .apps { gap: 24px 14px; }
  .app img { border-radius: 19%; }
  .trust-row { gap: 20px 18px; }
  footer { margin-top: 26px; }
}


/* Compact desktop/tablet presentation: preserves the approved phone layout. */
@media (min-width: 761px) {
  .home-shell {
    padding-top: clamp(20px, 2.8vh, 36px);
    padding-bottom: 16px;
  }

  .wordmark {
    width: min(65vw, 900px);
    margin-bottom: clamp(12px, 1.5vh, 18px);
  }

  .tagline-art {
    width: min(66vw, 920px);
  }

  .apps {
    gap: clamp(9px, 1.1vw, 17px);
    margin-top: clamp(24px, 3vh, 36px);
    margin-bottom: clamp(22px, 2.8vh, 34px);
  }

  .app img {
    width: min(100%, 132px);
    margin-bottom: 12px;
  }

  .app-title {
    font-size: clamp(13px, 1vw, 18px);
  }

  .app-subtitle {
    margin-top: 8px;
    font-size: clamp(10px, .72vw, 13px);
  }

  .trust-row {
    width: min(100%, 880px);
    grid-template-columns: 112px minmax(360px, 560px) 154px;
    gap: clamp(22px, 2.8vw, 38px);
  }

  footer {
    margin-top: clamp(14px, 1.8vh, 24px);
    font-size: clamp(13px, 1vw, 16px);
  }
}