/* ------------------------------------------------------------------
   Requr Apps — site stylesheet
   Styled to match the REQUR house style (gym.requr.nl):
   Inter, amber brand #fbb034, ink #262626, paper #fafafa,
   buttons r=.625rem, cards r=1.25rem, container 76rem
------------------------------------------------------------------- */

:root {
  --brand:      #fbb034;
  --brand-50:   #fef6e7;
  --brand-600:  #b0700a;
  --brand-700:  #8a5707;
  --ink:        #262626;
  --ink-soft:   #3a3a3a;
  --ink-muted:  #6b6b6b;
  --paper:      #fafafa;
  --paper-soft: #f2f2f2;
  --line:       #e7e5e0;
  --white:      #ffffff;
  --r-btn:  .625rem;
  --r-card: 1.25rem;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand); color: var(--ink); }

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

a { color: inherit; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }

/* --- skip link ---------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: .5rem 1rem; z-index: 10; border-radius: 0 0 var(--r-btn) 0;
}
.skip:focus { left: 0; }

/* --- header ------------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--white); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 1rem; flex-wrap: wrap;
}
.wordmark {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark .tick { color: var(--brand); font-style: normal; }
.site-nav { display: flex; gap: 1.7rem; flex-wrap: wrap; align-items: center; }
.site-nav a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink-muted);
  padding-bottom: .15rem; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

/* --- hero --------------------------------------------------------- */
.hero { padding: 4.5rem 0 4rem; }
.hero h1 {
  font-weight: 600; font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.3; letter-spacing: -0.01em; max-width: 26em;
}
.hero .lede {
  margin-top: 1.2rem; max-width: 38em; font-size: 1.08rem; color: var(--ink-muted);
}
.hero .cta-row { margin-top: 2.2rem; display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }

/* --- kicker / section labels -------------------------------------- */
.kicker { font-size: .95rem; font-weight: 500; color: var(--brand-700); }
.hero .kicker { margin-bottom: .9rem; }

.section { padding: 4.2rem 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem; flex-wrap: wrap;
}
.section-head h2 {
  font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em;
}
.section-head .count, .count { font-size: .92rem; color: var(--ink-muted); }

/* --- buttons / text links ----------------------------------------- */
.btn {
  display: inline-block; font-size: .95rem; font-weight: 600;
  color: var(--ink); background: var(--brand);
  padding: .8rem 1.4rem; text-decoration: none;
  border: none; border-radius: var(--r-btn);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover, .btn:focus { background: #eaa129; transform: translateY(-1px); }
.textlink {
  font-size: .95rem; font-weight: 600; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--brand); padding-bottom: .2rem;
}
.textlink:hover, .textlink:focus { color: var(--brand-600); }

/* --- app catalog -------------------------------------------------- */
.catalog {
  list-style: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.catalog li + li { border-top: 1px solid var(--line); }
.catalog a {
  display: grid; text-decoration: none;
  grid-template-columns: 3rem 3.4rem 1fr auto 2rem;
  gap: 1.4rem; align-items: center; padding: 1.3rem 1.5rem;
  transition: background .15s ease;
}
.catalog a:hover, .catalog a:focus { background: var(--paper); }
.catalog .no { font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.monogram {
  width: 3.1rem; height: 3.1rem; display: grid; place-items: center;
  background: var(--brand-50); border-radius: .75rem;
  font-weight: 700; font-size: 1.05rem; color: var(--brand-700);
}
.catalog h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.catalog .desc { color: var(--ink-muted); font-size: .95rem; }
.catalog .cat {
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  background: var(--paper-soft); border-radius: 999px;
  padding: .35rem .85rem; white-space: nowrap;
}
.catalog .arrow { color: var(--brand-600); font-size: 1.2rem; text-align: right; }

/* --- principles --------------------------------------------------- */
.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem; list-style: none;
}
.principles h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .45rem; }
.principles p { color: var(--ink-muted); font-size: .95rem; }

/* --- closing note ------------------------------------------------- */
.band { border-top: 1px solid var(--line); padding: 3.6rem 0 4.2rem; }
.band h2 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.band p { margin-top: .8rem; color: var(--ink-muted); max-width: 40em; }
.band .textlink { margin-top: 1.4rem; display: inline-block; }

/* --- article / prose pages ---------------------------------------- */
.page-head { padding: 4.2rem 0 2.8rem; }
.page-head h1 {
  font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  letter-spacing: -0.015em; max-width: 22em; line-height: 1.25;
}
.page-head .kicker { margin-bottom: 1.3rem; }
.page-head .lede { margin-top: 1.1rem; max-width: 36em; font-size: 1.12rem; color: var(--ink-muted); }

.prose { max-width: 44em; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 1.1rem; }
.prose h2 { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; margin: 2.2rem 0 .7rem; }
.prose a { color: var(--brand-600); text-decoration-color: var(--brand); text-underline-offset: 3px; }

.two-col { display: grid; grid-template-columns: 1.7fr 1fr; gap: 3.5rem; }
.facts {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 1.8rem; align-self: start;
}
.facts dt {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 1.1rem;
}
.facts dd { font-size: 1rem; font-weight: 500; margin-top: .1rem; }
.facts dt:first-child { margin-top: 0; }
.facts a { color: var(--brand-600); text-underline-offset: 3px; }

/* --- app detail --------------------------------------------------- */
.app-hero { padding: 4.2rem 0 3.4rem; }
.app-hero .wrap { display: flex; gap: 2rem; align-items: flex-start; }
.app-hero .monogram { width: 4.6rem; height: 4.6rem; font-size: 1.6rem; border-radius: 1rem; flex-shrink: 0; }
.app-hero h1 {
  font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  letter-spacing: -0.015em; margin-top: .6rem;
}
.app-hero .lede { margin-top: .8rem; max-width: 34em; font-size: 1.12rem; color: var(--ink-muted); }
.app-hero .cta-row { margin-top: 1.6rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.features {
  list-style: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; max-width: 44em;
}
.features li {
  padding: 1.05rem 1.4rem;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: baseline;
  color: var(--ink-soft);
}
.features li + li { border-top: 1px solid var(--line); }
.features .fno { font-size: .78rem; font-weight: 700; color: var(--brand-600); }

/* --- contact ------------------------------------------------------ */
.contact-card {
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--r-card); padding: 2.2rem; max-width: 32em;
}
.contact-card .label {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.contact-card .big {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em;
  margin-top: .3rem; display: inline-block;
  text-decoration-color: var(--brand); text-underline-offset: 5px;
}
.contact-card p { margin-top: 1.1rem; color: var(--ink-muted); font-size: .95rem; }

/* --- footer ------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); background: var(--white); padding: 3rem 0 3.2rem; }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.site-foot .colophon { color: var(--ink-muted); font-size: .92rem; max-width: 28em; margin-top: .8rem; }
.site-foot h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .9rem;
}
.site-foot ul { list-style: none; }
.site-foot li + li { margin-top: .5rem; }
.site-foot a { text-decoration: none; font-size: .95rem; color: var(--ink-soft); }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.site-foot .fine {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 800px) {
  .principles { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 2.2rem; }
  .catalog a { grid-template-columns: 3.4rem 1fr 2rem; padding: 1.1rem 1.1rem; }
  .catalog .no, .catalog .cat { display: none; }
  .site-foot .cols { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding: 3.5rem 0 3.2rem; }
  .app-hero .wrap { flex-direction: column; }
}