/* Nebeský klid — "Rozhledna za úsvitu" */
:root {
  /* sky, top to horizon */
  --night: #17183d;
  --indigo: #23265c;
  --violet: #463c78;
  --plum: #7a4f86;
  --rose: #c07a8c;
  --apricot: #f0a872;
  --sun: #ffd09a;
  --sun-deep: #f6b26f;

  /* ridges, far to near */
  --ridge-1: #8b7fb2;
  --ridge-2: #6c64a0;
  --ridge-3: #514b88;
  --ridge-4: #3b376f;
  --ridge-5: #2a2858;
  --ridge-6: #1e1c44;

  /* ink */
  --ink-light: #fff4ea;
  --ink-soft: #e4d9ee;
  --ink-mute: #bfb3d6;
  --ink-dark: #1b1940;
  --ink-dark-soft: #3d3567;

  --line-light: rgba(255, 244, 234, 0.28);
  --line-dark: rgba(27, 25, 64, 0.22);

  --f-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec-y: clamp(88px, 12vw, 168px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* scroll-driven dawn, 0..1, set by app.js */
  --dawn: 0;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scrollbar-color: var(--ridge-3) var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink-light);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--sun-deep);
}

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

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: var(--ridge-3); border-radius: 99px; border: 3px solid var(--night); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--sun); color: var(--ink-dark); padding: 10px 16px; border-radius: 99px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }

.display-lg { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
.display-md { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: "opsz" 72; }
.big { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.55; max-width: 38ch; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: transparent; --b-fg: var(--ink-light);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.6em;
  border: 0; border-radius: 99px;
  background: var(--b-bg); color: var(--b-fg);
  font: 700 1rem/1 var(--f-body); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.3s;
}
.btn-sun {
  --b-bg: var(--sun); --b-fg: var(--ink-dark);
  box-shadow: 0 8px 20px -10px rgba(10, 8, 30, 0.6), inset 0 -2px 0 rgba(27, 25, 64, 0.12);
}
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(10, 8, 30, 0.7), inset 0 -2px 0 rgba(27, 25, 64, 0.12); }
.btn-sun:active { transform: translateY(0); }
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-light); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-light); }
.btn[disabled], .btn.is-loading { opacity: 0.6; cursor: progress; transform: none; }

/* ---------- header ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 22px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-mark { width: 34px; height: 34px; }
.top-nav { display: flex; gap: clamp(14px, 2.4vw, 32px); margin-left: auto; }
.top-nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out), color 0.3s; }
.top-nav a:hover { color: var(--ink-light); background-size: 100% 1px; }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line-light);
  font-size: 0.85rem; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }

/* ---------- horizon (first viewport) ---------- */
.horizon {
  position: relative;
  min-height: clamp(720px, 100svh, 1040px);
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
}
.sky {
  position: absolute; inset: 0; z-index: -2;
  /* banded atmosphere, not a blob: hard-ish stops read like dawn layers */
  background:
    linear-gradient(180deg,
      var(--night) 0%,
      var(--indigo) 22%,
      var(--violet) 42%,
      var(--plum) 56%,
      var(--rose) 67%,
      var(--apricot) 78%,
      var(--sun) 88%);
}
.sky::after {
  /* the dawn lifts with scroll: lighter wash rises from the horizon */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 208, 154, 0.55) 100%);
  opacity: calc(var(--dawn) * 0.9);
}
.sun {
  position: absolute;
  right: 18%;
  bottom: calc(26% + var(--dawn) * 12%);
  width: clamp(180px, 22vw, 340px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff3dc 0 42%, var(--sun) 60%, rgba(255, 208, 154, 0) 71%);
  filter: blur(0.3px);
}
.sun::before {
  content: ""; position: absolute; inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 208, 154, 0.35) 0%, rgba(255, 208, 154, 0) 60%);
}

.hero-copy {
  align-self: start;
  padding: clamp(112px, 15vh, 170px) var(--gutter) 24px;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  width: 100%; margin-inline: auto;
}
.hero-copy h1 {
  font-size: clamp(3rem, 1.6rem + 6.4vw, 6rem);
  line-height: 0.96; letter-spacing: -0.022em;
  font-weight: 500; font-variation-settings: "opsz" 96;
}
.lede { margin-top: 26px; max-width: 46ch; font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.25rem); color: var(--ink-soft); }

.join { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; }
.join input[type="email"] {
  flex: 1 1 240px; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 99px;
  background: rgba(255, 244, 234, 0.12);
  box-shadow: inset 0 0 0 1px var(--line-light);
  color: var(--ink-light); font: inherit;
  backdrop-filter: blur(6px);
  transition: box-shadow 0.3s, background-color 0.3s;
}
.join input::placeholder { color: var(--ink-mute); }
.join input:focus { outline: none; background: rgba(255, 244, 234, 0.18); box-shadow: inset 0 0 0 1.5px var(--sun); }
.join-note { flex-basis: 100%; font-size: 0.9rem; color: var(--ink-mute); padding-left: 22px; }
.join-note.is-ok { color: var(--sun); }
.join-note.is-err { color: #ffd2c4; }

/* ---------- panorama ---------- */
.panorama { margin: 0; position: relative; min-width: 0; }
.ridges { display: block; width: 100%; height: clamp(230px, 31vh, 380px); overflow: visible; }
.ridge { transition: transform 1.2s var(--ease-out); }

.peak { cursor: pointer; outline: none; }
.peak .leader { stroke: var(--ink-light); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; transition: opacity 0.4s, stroke-dasharray 0.4s; }
.peak .pin { fill: var(--ink-light); transition: r 0.4s var(--ease-out), fill 0.3s; }
.peak .halo { fill: var(--sun); opacity: 0; transition: opacity 0.4s, r 0.5s var(--ease-out); }
.peak text {
  font-family: var(--f-body); font-weight: 500; fill: var(--ink-light);
  letter-spacing: 0.01em;
  transition: fill 0.3s;
}
.peak .plate { fill: rgba(30, 28, 68, 0.42); stroke: none; transition: fill 0.3s, stroke 0.3s; }
.peak:hover .plate, .peak:focus-visible .plate, .peak.is-on .plate { fill: var(--ridge-6); }
.horizon-rule line { stroke: var(--ink-light); stroke-width: 1; opacity: 0.35; vector-effect: non-scaling-stroke; }
.pano-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pano-scroll::-webkit-scrollbar { display: none; }
.peak .hit { fill: transparent; }
.peak:hover .leader, .peak:focus-visible .leader, .peak.is-on .leader { opacity: 1; stroke-dasharray: 0; }
.peak:hover .pin, .peak:focus-visible .pin, .peak.is-on .pin { fill: var(--sun); }
.peak:hover .halo, .peak:focus-visible .halo, .peak.is-on .halo { opacity: 0.35; }
.peak:hover text, .peak:focus-visible text, .peak.is-on text { fill: var(--sun); }

.board { background: var(--ridge-6); border-top: 1px solid rgba(255, 244, 234, 0.12); }
.board-inner {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  padding: 26px var(--gutter) 30px;
}
.board-name { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -0.015em; }
.board-text { margin-top: 6px; max-width: 62ch; color: var(--ink-soft); }
.board-body.is-swap { animation: boardIn 0.6s var(--ease-out); }
@keyframes boardIn { from { opacity: 0.2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- welcome ---------- */
.welcome {
  background: var(--apricot);
  background-image: linear-gradient(180deg, var(--sun) 0%, var(--apricot) 50%, var(--rose) 100%);
  color: var(--ink-dark);
  padding-block: var(--sec-y);
}
.welcome-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.welcome .big { color: var(--ink-dark); max-width: 34ch; }
.vows { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.vows li {
  position: relative; padding: 20px 0 20px 40px;
  border-top: 1px solid var(--line-dark);
  color: #2c2554; max-width: 52ch;
}
.vows li:last-child { border-bottom: 1px solid var(--line-dark); }
.vows strong { color: var(--ink-dark); font-weight: 700; display: block; }
.vow-mark {
  position: absolute; left: 0; top: 26px; width: 22px; height: 12px;
  background:
    radial-gradient(circle at 50% 100%, var(--ink-dark) 0 6px, transparent 6.5px);
}
.vow-mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 1.5px; background: var(--ink-dark); }

/* ---------- build / stairs ---------- */
.build {
  padding-bottom: clamp(64px, 7vw, 96px) !important;
  background: linear-gradient(180deg, #6b4176 0%, #5e4280 45%, var(--ridge-3) 100%);
  padding-block: var(--sec-y);
}
.build-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.build-head .big { color: var(--ink-light); }

.stairs {
  list-style: none; padding: 0; margin: clamp(56px, 8vw, 104px) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 0;
}
.stair { position: relative; display: flex; flex-direction: column; }
.stair:nth-child(1) { --h: 0; }
.stair:nth-child(2) { --h: 1; }
.stair:nth-child(3) { --h: 2; }
.stair:nth-child(4) { --h: 3; }
.stair-body { padding: 0 22px 26px 0; margin-bottom: calc(var(--h) * 34px); }
.stair-step {
  order: 2; padding: 10px 14px 0;
  height: calc(28px + var(--h) * 34px);
  background: rgba(23, 24, 61, 0.28);
  border-top: 2px solid rgba(255, 244, 234, 0.7);
  margin-right: -1px;
}
.stair-body { order: 1; }
.stair.is-now .stair-step { background: rgba(23, 24, 61, 0.55); border-top-color: var(--sun); }
.stair-state { font-size: 0.85rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.stair.is-now .stair-state { color: var(--sun); font-weight: 700; }
.here-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); }
.stair h3 { margin-top: 0; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); letter-spacing: -0.015em; }
.stair p:not(.stair-state) { margin-top: 8px; color: var(--ink-soft); font-size: 0.98rem; max-width: 30ch; }


.build-cta { margin-top: clamp(48px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.build-cta p { font-size: 1.1rem; color: var(--ink-light); }

/* ---------- recruit ---------- */
.recruit { background: var(--ridge-3); padding-block: var(--sec-y) calc(var(--sec-y) * 0.6); }
.recruit h2 { max-width: 16ch; }
.recruit-list {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line-light);
}
.role { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line-light); }
.role:nth-child(1), .role:nth-child(2) { grid-column: span 3; }
.role:nth-child(1) h3, .role:nth-child(2) h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.role:nth-child(n+3) { grid-column: span 2; }
.role:nth-child(2), .role:nth-child(4), .role:nth-child(5) { padding-left: 28px; border-left: 1px solid var(--line-light); }
.role h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); letter-spacing: -0.015em; }
.role p { margin-top: 10px; color: var(--ink-soft); max-width: 44ch; }

/* ---------- apply / form ---------- */
.apply { background: linear-gradient(180deg, var(--ridge-3) 0%, var(--ridge-4) 30%, var(--ridge-5) 100%); padding-block: calc(var(--sec-y) * 0.6) var(--sec-y); }
.apply-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.apply-intro { position: sticky; top: 40px; }
.apply-intro .big { margin-top: 22px; color: var(--ink-soft); }
.fine { margin-top: 18px; color: var(--ink-soft); font-size: 0.95rem; max-width: 36ch; }

.climb {
  position: relative;
  background: rgba(23, 24, 61, 0.42);
  border-radius: 28px;
  padding: clamp(24px, 3.5vw, 44px);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 234, 0.12), 0 30px 60px -30px rgba(10, 8, 30, 0.7);
}
.climb-meter { display: flex; align-items: center; }
.climb-line { position: relative; flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 244, 234, 0.16); overflow: hidden; }
.climb-fill { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--sun); border-radius: 99px; transition: width 0.7s var(--ease-out); }
.climb-count { margin-top: 12px; font-size: 0.9rem; color: var(--ink-mute); }

.step { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; display: grid; gap: 22px; }
.step.is-enter { animation: stepIn 0.6s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.field { display: grid; gap: 8px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label, .field-legend { font-weight: 700; font-size: 0.98rem; color: var(--ink-light); padding: 0; }
.field-legend { margin-bottom: -8px; }
.opt { font-weight: 400; color: var(--ink-mute); font-size: 0.85rem; margin-left: 6px; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px;
  padding: 12px 16px;
  background: rgba(255, 244, 234, 0.07);
  border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 234, 0.2);
  color: var(--ink-light); font: inherit; line-height: 1.4;
  transition: box-shadow 0.25s, background-color 0.25s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(191, 179, 214, 0.75); }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(255, 244, 234, 0.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: rgba(255, 244, 234, 0.11); box-shadow: inset 0 0 0 1.5px var(--sun); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23ffd09a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 44px;
}
.field select option { background: var(--ridge-5); color: var(--ink-light); }
.field .is-invalid, .is-invalid { box-shadow: inset 0 0 0 1.5px #ffb3a1 !important; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 234, 0.28);
  font-size: 0.95rem; color: var(--ink-soft);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.chip span::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.chip:hover span { box-shadow: inset 0 0 0 1px var(--ink-light); color: var(--ink-light); }
.chip input:checked + span { background: var(--sun); color: var(--ink-dark); box-shadow: none; font-weight: 700; }
.chip input:checked + span::before { background: var(--ink-dark); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 3px; }
.chips.is-invalid { box-shadow: none !important; }
.chips.is-invalid .chip span { box-shadow: inset 0 0 0 1.5px #ffb3a1; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; color: var(--ink-soft); font-size: 0.97rem; }
.check input {
  appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 234, 0.45);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--ink-dark); border-bottom: 2px solid var(--ink-dark); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.25s var(--ease-out); }
.check input:checked { background: var(--sun); box-shadow: none; }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }

.form-error { min-height: 1.4em; margin-top: 16px; color: #ffcdbf; font-size: 0.95rem; }
.climb-nav { margin-top: 10px; display: flex; gap: 12px; justify-content: flex-end; }
.climb-nav [data-prev] { margin-right: auto; }

.climb-done { text-align: left; padding: 10px 0 4px; outline: none; }
.climb-done:not([hidden]) { animation: stepIn 0.7s var(--ease-out); }
.done-art { width: 120px; height: 60px; display: block; }
.climb-done h2, .climb-done h3 { margin-top: 18px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.02em; }
.climb-done p { margin-top: 10px; color: var(--ink-soft); max-width: 44ch; }

/* ---------- faq ---------- */
.faq { background: var(--ridge-5); padding-block: 0 var(--sec-y); }
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); border-top: 1px solid var(--line-light); padding-top: clamp(56px, 7vw, 96px); }
.faq-list details { border-bottom: 1px solid var(--line-light); }
.faq-list details:first-child { border-top: 1px solid var(--line-light); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-weight: 700; font-size: 1.08rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--sun); border-bottom: 2px solid var(--sun);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.4s var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-list summary:hover { color: var(--sun); }
.faq-list details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 60ch; }

/* ---------- footer ---------- */
.foot { background: var(--ridge-6); padding-block: clamp(64px, 8vw, 112px) 40px; border-top: 1px solid rgba(255, 244, 234, 0.08); }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.foot-line { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink-soft); }
.foot-meta { text-align: right; color: var(--ink-mute); font-size: 0.92rem; }
.foot-meta strong { color: var(--ink-light); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .welcome-grid, .build-head, .apply-grid, .faq-grid { grid-template-columns: 1fr; }
  .apply-intro { position: static; }
  .stairs { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stair:nth-child(odd) { --h: 0; } .stair:nth-child(even) { --h: 1; }
  .recruit-list { grid-template-columns: 1fr 1fr; }
  .role:nth-child(n) { grid-column: span 1; padding-left: 0; border-left: 0; }
  .role:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line-light); }
  .role:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 720px) {
  .top-nav { display: none; }
  .status { margin-left: auto; }
  .hero-copy { padding-top: 112px; }
  .sun { right: -8%; bottom: 30%; }
  .ridges { width: 900px; height: 240px; }
  .field-row { grid-template-columns: 1fr; }
  .stairs { grid-template-columns: 1fr; }
  .stair { --h: 0 !important; }
  .stair-step { order: 0; height: auto; padding: 8px 12px; margin-bottom: 14px; }
  .stair-body { margin-bottom: 0; padding-bottom: 0; }
  .recruit-list { grid-template-columns: 1fr; }
  .role:nth-child(n) { grid-column: span 1; padding-left: 0; border-left: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-meta { text-align: left; }
  .climb-nav .btn { flex: 1; }
  .climb-nav [data-prev] { flex: 0 0 auto; }
  .join-note { padding-left: 0; }
  .join .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* welcome: the lookout tower, a place for everyone */
.welcome-art { display: grid; gap: clamp(32px, 4vw, 56px); }
.tower { width: min(100%, 400px); height: auto; overflow: visible; }
.tower .tw-line { fill: none; stroke: var(--ink-dark); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.tower .tw-deck { fill: none; stroke: var(--ink-dark); stroke-width: 3; stroke-linecap: round; }
.tower .tw-roof { fill: var(--ink-dark); }
.tower .tw-sun { fill: #fff3dc; opacity: 0.7; }
.tower .tw-hill { fill: var(--rose); opacity: 0.35; }
.tower .tw-fig { fill: var(--ink-dark); }
.tower .tw-wheel { fill: none; stroke: var(--ink-dark); stroke-width: 2.2; }
@media (max-width: 980px) { .tower { width: min(70%, 300px); } }

/* ---------- recruiting landing (spoluprace.html) ---------- */
.join-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 15vh, 160px) 0 clamp(140px, 16vw, 240px); }
.join-hero .sky { background: linear-gradient(180deg, var(--night) 0%, var(--indigo) 20%, var(--violet) 40%, var(--plum) 58%, var(--rose) 72%, var(--apricot) 86%, var(--sun) 100%); }
.join-hero .sun { right: 6%; bottom: 14%; }
.join-ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(160px, 22vw, 300px); z-index: -1; }
.join-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.join-intro { position: sticky; top: 40px; }
.join-intro h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -0.025em; font-variation-settings: "opsz" 96; }
.join-intro .big { margin-top: 24px; color: var(--ink-soft); }
.join-roles { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line-light); max-width: 460px; }
.join-roles li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.join-roles strong { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; }
.join-roles span { color: var(--ink-soft); font-size: 0.95rem; }
.join-form .climb { background: rgba(23, 24, 61, 0.72); backdrop-filter: blur(10px); }
.page-join .foot { border-top: 0; }
@media (max-width: 980px) {
  .join-grid { grid-template-columns: 1fr; }
  .join-intro { position: static; }
}
.join-intro .fine { color: var(--ink-light); }

.join-intro { position: static; }
.join-sub { margin-top: 44px; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.join-values, .join-steps { margin: 16px 0 0; padding: 0; list-style: none; max-width: 460px; }
.join-values li { position: relative; padding: 10px 0 10px 22px; color: var(--ink-soft); }
.join-values li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.join-values strong { color: var(--ink-light); }
.join-steps { counter-reset: s; }
.join-steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-light); color: var(--ink-light); }
.join-steps li:first-child { border-top: 1px solid var(--line-light); }
.join-steps li::before { content: counter(s); font-family: var(--f-display); font-size: 1.25rem; color: var(--sun); }
.join-form { position: sticky; top: 32px; }
.join-hero .sky { background: linear-gradient(180deg, var(--night) 0%, var(--indigo) 22%, var(--violet) 45%, var(--plum) 66%, var(--rose) 84%, var(--apricot) 95%, var(--sun) 100%); }
.join-hero .sun { bottom: 6%; }
.join-steps li::before { color: var(--sun); }
@media (max-width: 980px) { .join-form { position: static; } }