/* Company homepage. The company stays quiet (ink and paper), colour belongs to the products */

:root {
  --ink: #15212B;
  --paper: #F2F3EF;
  --surface: #FFFFFF;
  --line: #D3D7D0;
  --muted: #5A6670;

  --travel-bg: #1B2733;
  --travel: #FF8800;
  --trip-scene: #FEF0DD;
  --trip-ink: #3D3D3D;
  --trip-coral: #F2714B;
  --trip-teal: #1FA9A8;

  --display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --door-pad: clamp(28px, 3.4vw, 48px);
  /* Never wider than a narrowed door (0.85 of 2 shares), so text doesn't rewrap while the doors
     animate and their height stays put. 16px covers the scrollbar inside 100vw */
  --door-text: calc((min(100vw, 1280px) - 2 * var(--gutter) - 12px) * 0.425 - 2 * var(--door-pad) - 16px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Masthead */

.masthead { border-bottom: 1px solid var(--line); }

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.wordmark {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.masthead__nav { display: flex; gap: 28px; }

.masthead__nav a {
  font-size: 16px;
  text-decoration: none;
  color: var(--muted);
}

.masthead__nav a:hover { color: var(--ink); }

.masthead__end { display: flex; align-items: center; gap: 28px; }

/* Language picker: <details> so it works without JS */

.langs { position: relative; }

.langs summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.langs summary::-webkit-details-marker { display: none; }

.langs summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.langs summary:hover,
.langs[open] summary { color: var(--ink); }

.langs__list {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 10;
  min-width: 190px;
  max-height: 70vh;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(21, 33, 43, .12);
}

.langs__list a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
}

.langs__list a:hover { background: var(--paper); }

.langs__list a[aria-current] { font-weight: 600; }

/* Intro */

.intro { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(32px, 4vw, 56px); }

.intro__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* Fork: one door per product, each in its product's own colours */

.fork {
  position: relative;
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: 12px;
}

.door {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 600px;
  padding: var(--door-pad);
  border-radius: 28px;
  text-decoration: none;
  overflow: hidden;
  transition: flex-grow 600ms cubic-bezier(.2, .7, .2, 1);
}

/* Hover widens the chosen door (1.15) and narrows the other (0.85) */
.fork:hover .door,
.fork:focus-within .door { flex-grow: 0.85; }

.fork .door:hover,
.fork .door:focus-visible { flex-grow: 1.15; }

.door__name,
.door__points { max-width: var(--door-text); }

.door:focus-visible { outline-offset: 4px; }

.door__for {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.door__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.door__pitch {
  max-width: min(34ch, var(--door-text));
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.45;
}

.door__points {
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.door__points li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid;
}

.door__points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.door__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 22px;
  border-radius: 32px;
  font-size: 17px;
  font-weight: 600;
}

.door__arrow { transition: transform 300ms ease; }

.door:hover .door__arrow,
.door:focus-visible .door__arrow { transform: translateX(4px); }

/* Travel: the platform's own orange "Y!" on a night-blue ground */

.door--travel {
  background: var(--travel-bg);
  color: #F4F1EC;
}

.door--travel .door__for { color: var(--travel); }

/* The source PNG has a white square around the circle, so crop to the circle */
.door__mark {
  width: 96px;
  height: 96px;
  margin-top: 28px;
  border-radius: 50%;
  overflow: hidden;
}

.door__mark img { width: 100%; height: 100%; transform: scale(1.26); }

.door--travel .door__pitch { color: #C9CFD6; }

.door--travel .door__points { color: #E3E6EA; }

.door--travel .door__points li { border-color: rgba(255, 255, 255, .12); }

.door--travel .door__points li::before { background: var(--travel); }

.door--travel .door__cta { background: var(--travel); color: #1B1B1B; }

/* Trip: the app's cream scene with dunes, same as its join page */

.door--trip {
  background: var(--trip-scene) url('/images/trip/background.svg') center bottom / cover no-repeat;
  color: var(--trip-ink);
}

.door--trip .door__for { color: #A0610D; }

.door__logo { width: 172px; margin-top: 20px; }

.door--trip .door__pitch { color: #5E5E5E; }

.door--trip .door__points li { border-color: rgba(61, 61, 61, .14); }

.door--trip .door__points li:nth-child(odd)::before { background: var(--trip-coral); }

.door--trip .door__points li:nth-child(even)::before { background: var(--trip-teal); }

.door--trip .door__cta { background: var(--trip-ink); color: #FFFFFF; }

.door__badge {
  padding: 5px 12px;
  border: 1px solid #A0610D;
  border-radius: 32px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A0610D;
}

/* The seam between the two doors */

.fork__or {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 6px solid var(--paper);
  border-radius: 50%;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.fork:hover .fork__or,
.fork:focus-within .fork__or { opacity: 0; }

/* About */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
}

.about__text p { max-width: 56ch; margin: 0 0 16px; }

.registry {
  align-self: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.registry__name {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.registry__list { margin: 0; }

.registry__list div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.registry__list dt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.registry__list dd { margin: 0; font-family: var(--mono); font-size: 15px; }

.registry__coords {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* Contact */

.contact {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--line);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
}

.contact__intro p { max-width: 38ch; margin: 0; color: var(--muted); }

.form { display: grid; gap: 20px; }

.form__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__topics legend,
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.topic { position: relative; }

.topic input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.topic span {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
}

.topic input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

.topic--travel input:checked + span { background: var(--travel-bg); border-color: var(--travel-bg); color: var(--travel); }

.topic--trip input:checked + span { background: var(--trip-scene); border-color: #A0610D; color: var(--trip-ink); }

.topic input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

.field textarea { resize: vertical; min-height: 140px; }

.field input:focus,
.field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }

.field [aria-invalid="true"] { border-color: #B3261E; }

.field__optional { font-weight: 400; color: var(--muted); }

.field__error { margin: 6px 0 0; font-size: 15px; color: #B3261E; }

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.button {
  padding: 15px 28px;
  border: 0;
  border-radius: 32px;
  background: var(--ink);
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button:disabled { opacity: .55; cursor: progress; }

.form__result {
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 16px;
}

.form__result--ok { background: #E3F1E6; color: #1D5B2C; }

.form__result--error { background: #FBE7E5; color: #8C1D18; }

/* Footer */

.footer { background: var(--ink); color: #C9CFD6; font-size: 15px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
}

.footer__bar p { margin: 0; }

.footer__nav { display: flex; gap: 24px; }

.footer__nav a { text-decoration: none; }

.footer__nav a:hover { color: #FFFFFF; }

/* Small screens: doors stack, seam sits between them */

@media (max-width: 860px) {
  .fork { flex-direction: column; gap: 12px; }

  .door { flex: none; min-height: 0; }

  .fork:hover .door,
  .fork:focus-within .door,
  .fork .door:hover,
  .fork .door:focus-visible { flex-grow: 0; }

  .door__name,
  .door__pitch,
  .door__points { max-width: none; }

  .fork:hover .fork__or,
  .fork:focus-within .fork__or { opacity: 1; }

  .fork__or { position: relative; top: auto; left: auto; align-self: center; margin: -38px 0; }

  .about,
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .masthead__end { gap: 16px; }

  .masthead__nav { gap: 16px; }

  .masthead__nav a { font-size: 15px; }

  .masthead__nav a[href="#produkty"] { display: none; }

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

  .registry__list div { grid-template-columns: 1fr; gap: 2px; }
}

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

  .door,
  .door__arrow,
  .fork__or { transition: none; }

  .fork:hover .door,
  .fork:focus-within .door,
  .fork .door:hover,
  .fork .door:focus-visible { flex-grow: 1; }

  .door:hover .door__arrow,
  .door:focus-visible .door__arrow { transform: none; }
}