/* Olive accents and architectural illustrations from the main home page. */
nav { padding-inline: max(48px, calc((100% - 1140px) / 2)); }
.band, .tour-step { scroll-margin-top: 88px; }
.hero::before {
  background:
    radial-gradient(ellipse at 67% 48%, rgba(111,128,88,.15), transparent 38%),
    radial-gradient(ellipse at 28% 45%, rgba(234,228,216,.55), transparent 50%),
    radial-gradient(ellipse at 54% 80%, rgba(196,168,130,.12), transparent 48%);
}
.hero-title b { color: var(--vivid); }
.hero-label, .band .section-label { color: var(--vivid); }
.hero-points li::before { background-color: var(--vivid); }
.hd-stage::before {
  inset: 7% -2% 13%; background: rgba(234,228,216,.68);
  border-radius: 44% 56% 47% 53% / 55% 42% 58% 45%;
  transform: rotate(-8deg);
}
.hd-stage::after { opacity: .13; }
.hd-report .hd-doc-body { padding: 3% 8%; }
.hd-report h3 { margin: .35em 0 .6em; }
.hd-report .hd-official-band { margin-top: .55em; padding: .3em 0; line-height: 1.2; }
.hd-report p { margin-top: .6em; line-height: 1.5; }
.hd-report .hd-equation { margin-top: .6em; padding: .5em .7em; }

/* Preizkusi: the footer sits at the bottom of the screen when the form is shorter than it. */
.form-body { min-height: 100vh; display: flex; flex-direction: column; }
.form-body .form-page { flex: 1 0 auto; }
/* Preizkusi: the form page wears the hero's olive wash, numbered steps and card. */
.form-page {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(234,228,216,.6), transparent 46%),
    radial-gradient(ellipse at 76% 42%, rgba(111,128,88,.13), transparent 40%),
    radial-gradient(ellipse at 50% 92%, rgba(196,168,130,.10), transparent 46%),
    #faf9f5;
}
.form-page .done-steps li::before { background: var(--vivid); color: var(--white); }
.form-page .done-icon { background: rgba(111,128,88,.14); }
.form-page .signup {
  border: 1px solid #e4dfd3; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(31,45,37,.08);
}
.form-page .signup form { gap: 22px; }
.form-page .field-row { gap: 16px; }
.form-page .field { gap: 8px; }
.form-page .pill input:checked + span { background: var(--vivid); border-color: var(--vivid); }
#kako-deluje { background: #f3f4ee; }
/* Tour steps: a big light numeral behind the heading, like a line number on a metro sign. */
.tour-step { position: relative; isolation: isolate; }
#kako-deluje .tour-step .step-num {
  position: absolute; left: -10px; top: calc(26vh - 76px); z-index: -1;
  width: auto; height: auto; margin: 0; border-radius: 0; background: none;
  font-size: 204px; font-weight: 800; line-height: 1; letter-spacing: -8px;
  color: rgba(111,128,88,.16); pointer-events: none; user-select: none;
}
#kako-deluje .tour-step:first-child .step-num { top: calc(8vh - 76px); }
.illustrated-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center; gap: 48px;
}
.architect-illustration { width: 100%; max-width: 280px; color: var(--navy); }
.architect-illustration svg { display: block; width: 100%; height: auto; }
.architect-illustration .fw-soft { fill: rgba(234,228,216,.62); }
.architect-illustration .fw-accent { fill: rgba(111,128,88,.12); }
.architect-illustration .fw-sand { fill: rgba(196,168,130,.25); }
.architect-illustration .fw-line,
.architect-illustration .fw-line-soft,
.architect-illustration .fw-green {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.architect-illustration .fw-line-soft { stroke: rgba(28,43,58,.38); stroke-width: 1.8; }
.architect-illustration .fw-green { stroke: var(--vivid); }

.time-big {
  padding: 28px 32px; background: #f5f1e8;
  border: 1px solid #e4dfd3;
  border-radius: 24px 20px 26px 21px / 19px 26px 20px 24px;
}
.time-after { color: var(--navy); }
.time-arrow { color: var(--accent); }
.compare-head { background: #f7f5f0; }
.compare-row > :last-child { background: rgba(28,43,58,.04); border-radius: 8px; }
.compare-after { padding: 10px 12px 10px 36px; margin: -10px -12px -10px 0; }
.compare-after::before { left: 10px; top: 13px; }
.compare-head span:last-child { color: var(--navy); padding: 5px 12px; margin: -5px -12px -5px 0; }
.form-chip b { color: var(--vivid); }
.form-chip:nth-child(4n + 1) { background: #f0f2e9; border-color: #dbe0d1; }

/* Evidence and experience, paired with the technical explanation. */
.technology { background: #f3f4ee; }
.technology-layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  grid-template-areas: 'copy proof' 'methods proof';
  align-items: center; gap: 28px 80px;
}
.technology-copy { grid-area: copy; }
.technology-methods { grid-area: methods; display: grid; gap: 20px; }
.technology-methods > div { padding-left: 18px; border-left: 2px solid #c6cfb8; }
.technology-methods dt { font-size: 15px; font-weight: 600; color: var(--navy); }
.technology-methods dd { margin-top: 5px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.technology-proof {
  grid-area: proof;
  background: #fff; border: 1px solid #dfe3d6; padding: 32px;
  border-radius: 24px 20px 26px 21px / 19px 26px 20px 24px;
  box-shadow: 0 12px 36px rgba(31,45,37,.04);
}
.technology-metric > strong {
  display: block; font-size: clamp(64px, 7vw, 92px); font-weight: 600;
  letter-spacing: -.055em; line-height: 1; color: var(--vivid);
}
.technology-metric > strong span { font-size: .5em; margin-left: 5px; }
.technology-metric h3 { margin-top: 16px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.technology-metric p { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.technology-experience { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.technology-experience strong { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--navy); }
.technology-experience strong span { font-size: 22px; letter-spacing: 0; font-weight: 400; }
.technology-experience p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ZAPS identity and typography match the home page's partner treatment. */
.collaboration { background: #faf9f5; border-bottom: 1px solid var(--line); }
.collaboration-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 64px;
}
.collaboration .section-title { font-size: clamp(26px, 2.7vw, 34px); }
.collaboration .section-desc { max-width: 560px; }
.partner-zaps { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.partner-zaps-logo { display: block; width: 64px; height: 64px; flex-shrink: 0; }
.partners { display: flex; flex-direction: column; gap: 28px; }
.partner-dupps-logo {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0;
  background: #c8102e; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.partner-zaps-text { display: flex; flex-direction: column; gap: 3px; }
.partner-zaps-title { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--navy); }
.partner-zaps-name { font-size: 13px; line-height: 1.5; color: var(--muted); }
.partner-zaps:hover .partner-zaps-title { color: var(--vivid); }
.partner-zaps:focus-visible { outline: 2px solid var(--vivid); outline-offset: 8px; border-radius: 4px; }

.faq-layout {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 80px; align-items: start;
}
.faq-heading .section-title { max-width: 380px; }
.faq { margin-top: 0; max-width: none; }
.faq summary { font-size: 16px; line-height: 1.5; }
.faq summary::after { flex-shrink: 0; color: var(--vivid); }
.faq details[open] summary { color: #52643e; }
.faq a { text-underline-offset: 3px; }
.closing {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(234,228,216,.7), transparent 48%),
    radial-gradient(ellipse at 85% 65%, rgba(111,128,88,.12), transparent 42%),
    #faf9f5;
}
footer {
  padding-inline: max(48px, calc((100% - 1140px) / 2));
  background: var(--navy);
}
.footer-links { gap: 14px 24px; }
.footer-links a { color: rgba(249,247,244,.78); }
.footer-copy { color: rgba(249,247,244,.64); }
:where(.nav-links a, .btn-cta, .closing-cta, .link-more, .footer-links a, .faq summary):focus-visible {
  outline: 2px solid var(--vivid); outline-offset: 5px;
}

@media (max-width: 980px) {
  .nav-links { gap: 20px; }
  .technology-layout { gap: 28px 40px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .collaboration-inner { gap: 32px; }
  .illustrated-heading { grid-template-columns: minmax(0, 1fr) 190px; gap: 28px; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-heading .section-title { max-width: 720px; }
  .tour { gap: 32px; }
}
@media (max-width: 900px) {
  #kako-deluje .tour-step .step-num, #kako-deluje .tour-step:first-child .step-num { top: -72px; font-size: 150px; }
  .tour-step h3 { padding-top: 8px; }
}
@media (max-width: 720px) {
  nav, footer { padding-inline: 16px; }
  .technology-layout, .collaboration-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .technology-layout { grid-template-areas: 'copy' 'proof' 'methods'; }
  .technology-proof { padding: 28px; }
  .illustrated-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .architect-illustration { width: 180px; grid-row: 1; }
  .time-big { padding: 24px 20px; }
  .compare-after { margin: 0; }
  .footer-links { width: 100%; gap: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}