/* =========================================================================
   teenage engineering — base styles
   Tokeny 1:1 z Figmy (bOTVLQhkrSFdkm4TUf8pK6)
   ========================================================================= */

@view-transition { navigation: auto; }

:root {
  /* --- kolory (Figma: White/Black/Grey/Yellow/Orange/Blue/Green) --- */
  --white:      #F9F8F8;
  --black:      #0C0C0C;
  --black-700:  #262625;
  --grey-100:   #DBDBDB;
  --yellow:     #FFBA2B;
  --orange:     #DE531E;
  --blue:       #4073F5;
  --green:      #0F7F5D;

  /* --- typografia ---
     Mono: Input Mono z Adobe Fonts (kit inf6izc) — w miejsce figmowego PP Fraktion Mono.
     Kit daje cztery szerokości: input-mono, -narrow, -condensed, -compressed (400 i 700).
     Tekstowy PP Neue Montreal wciąż zastępuje Inter. */
  --font-mono: 'input-mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  --fs-h1:  clamp(2.8125rem, 2.232rem + 2.381vw, 4.375rem);  /* 45px → 70px */
  --fs-h2:  clamp(1.75rem, 1.494rem + 1.048vw, 2.4375rem);   /* 28px → 39px */
  --fs-h5:  clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem);  /* 19px → 22px */
  --fs-btn: 1rem;     /* 16px */
  --fs-nav: 0.875rem; /* 14px */
  --tracking-display: -0.03em;

  /* Jedna grubość dla całej typografii mono. W Figmie wszystko jest w PP Fraktion
     Mono Bold, ale ten krój ma kreskę 0,114 em — Input Mono 700 to 0,171 em, czyli
     o połowę za grubo. Regular (0,100 em) trafia w referencję i tak zostaje wszędzie.
     Hierarchię niosą teraz wielkość, kolor i kreski, a nie waga. */
  --weight-mono: 400;

  /* --- layout ---
     --inset odpowiada figmowemu calc(8.333% + 35px) = 155px @1440 */
  --pad:   40px;
  --inset: calc(8.3333% + 35px);
  --rule:  90px;

  /* --- ruch --- */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* --- motyw sekcji (nadpisywany przez [data-theme]/[data-accent]) --- */
  --fg:     var(--white);
  --accent: var(--yellow);
}

/* =========================================================================
   reset
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 16px; background: var(--white); color: var(--black);
  font-family: var(--font-mono); font-size: var(--fs-nav); font-weight: var(--weight-mono);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   motywy sekcji
   ========================================================================= */

[data-theme="dark"]  { --fg: var(--white); }
[data-theme="light"] { --fg: var(--black); }

/* Element z własnym motywem wewnątrz sekcji musi też wziąć z niego kolor tekstu.
   Samo ustawienie --fg nie wystarcza, bo `color` dziedziczy się z sekcji wyżej —
   przez to nagłówek i kreska w prawej połówce „set of 2" wychodziły czarne na
   ciemnym zdjęciu, podczas gdy „explore" (jadące na --accent) było białe. */
.section [data-theme] { color: var(--fg); }

[data-accent="yellow"] { --accent: var(--yellow); }
[data-accent="orange"] { --accent: var(--orange); }
[data-accent="blue"]   { --accent: var(--blue); }
[data-accent="green"]  { --accent: var(--green); }
[data-accent="black"]  { --accent: var(--black); }
[data-accent="white"]  { --accent: var(--white); }

/* =========================================================================
   typografia
   ========================================================================= */

.h1, .h2, .display__label, .nav__link, .menu__link, .btn-small, .footer a, .footer__meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--weight-mono);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;   /* zgodnie z Figmą — nagłówki nie łamią się */
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-mono);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.h5 {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.2;
}

/* =========================================================================
   hover etykiet — włosowa kreska
   Zamiast rozjeżdżania liter (co przy monospace psuje siatkę i przesuwa
   sąsiadów) pod etykietą rysuje się kreska 1 px, w tym samym języku co
   pionowe linie w całym layoucie. Zero reflow, bo pseudoelement jest
   pozycjonowany absolutnie.
   ========================================================================= */

.btn-small,
.nav__toggle,
.menu__link,
.footer__col a,
.p-toc a,
.p-video__cta,
.product-card__buy {
  position: relative;
}

.btn-small::before,
.nav__toggle::before,
.menu__link::before,
.footer__col a::before,
.p-toc a::before,
.p-video__cta::before,
.product-card__buy::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.45em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}

.btn-small:hover::before,
.btn-small:focus-visible::before,
.nav__toggle:hover::before,
.nav__toggle:focus-visible::before,
.menu__link:hover::before,
.menu__link:focus-visible::before,
.footer__col a:hover::before,
.footer__col a:focus-visible::before,
.p-toc a:hover::before,
.p-toc a:focus-visible::before,
.p-video__cta:hover::before,
.p-video__cta:focus-visible::before,
.product-card__buy:hover::before,
.product-card__buy:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* =========================================================================
   nawigacja (fixed, kolor dziedziczony z aktywnej sekcji)
   ========================================================================= */

.nav {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--pad);
  color: var(--fg);
  transition: color .5s var(--ease);
  mix-blend-mode: normal;
}

.nav__logo {
  width: 50px; height: 25.108px;
  display: block;
  color: var(--accent);
  transition: color .5s var(--ease), transform .4s var(--ease);
}
.nav__logo:hover { transform: rotate(-8deg) scale(1.06); }
.nav__logo svg,
.menu__logo svg,
.footer__logo svg { width: 100%; height: 100%; }

.nav__stem {
  width: 1px; height: 24px;
  background: currentColor;
  transform-origin: top;
}

.nav__toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  font-weight: var(--weight-mono);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  transition: color .5s var(--ease);
}

/* hamburger — tylko mobile */
.nav__burger { display: none; }

/* =========================================================================
   menu pełnoekranowe
   ========================================================================= */

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 12, 12, .95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s var(--ease), visibility .45s;
}
.menu[data-open="true"] { visibility: visible; opacity: 1; }

.menu__head {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.menu__logo { width: 99.36px; height: 49.9px; color: var(--yellow); }
.menu__wordmark,
.menu__date {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--yellow);
}
.menu__wordmark { font-weight: var(--weight-mono); }
.menu__date { font-weight: 400; }

.menu__stem { width: 1px; height: var(--rule); background: var(--white); transform-origin: top; }

.menu__row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 1.375rem;
  line-height: 1;
}
.menu__row > * { font-family: var(--font-mono); text-transform: uppercase; }
.menu__title { font-weight: var(--weight-mono); color: var(--yellow); }
.menu__link { font-weight: var(--weight-mono); color: var(--white); }

.menu__close {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  font-weight: var(--weight-mono);
  text-transform: uppercase;
}
.menu__close svg { width: 30px; height: 60px; color: var(--white); }
.menu__close:hover svg { color: var(--yellow); }

/* =========================================================================
   sekcje
   ========================================================================= */

.section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--fg);
}

.section__media { position: absolute; inset: 0; overflow: hidden; }
.section__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- blok tekstowy (h1 + h5 + kreska + explore) --- */
.pitch {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* max-content zdejmuje ograniczenie szerokości narzucane przez left/right,
     dzięki czemu nagłówki nie łamią się wbrew Figmie */
  width: max-content;
}
.pitch--center { align-items: center; text-align: center; }
.pitch--end    { align-items: flex-end;   text-align: right; }
.pitch--start  { align-items: flex-start; text-align: left; }

.pitch__rule {
  width: 1px;
  height: var(--rule);
  background: currentColor;
  transform-origin: top;
}

.btn-small {
  font-size: var(--fs-btn);
  font-weight: var(--weight-mono);
  line-height: 1;
  color: var(--accent);
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
/* pomarańczowe „explore" na szarym tle miksera — przyciemniony wariant, patrz product.css */
.mixer .btn-small { color: var(--orange-ink, var(--accent)); }

/* --- hero --- */
.hero { background: var(--black); }
.hero .section__media img {
  object-position: 50% 52%;
  transform: scale(1.08);
  will-change: transform;
}
.hero__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
/* centrowanie przez left/right zamiast translateX — inaczej keyframe
   hero-out (który animuje transform) nadpisywałby przesunięcie */
.hero .pitch { bottom: 72px; left: 0; right: 0; width: auto; padding: 0 16px; }

/* --- field mixer --- */
.mixer { background: var(--grey-100); }
.mixer__product {
  position: absolute;
  left: var(--inset);
  top: calc(50% + 14px);
  transform: translateY(-50%);
  width: 555px;
  max-width: 38.5%;
  height: 740px;
  max-height: 87%;
  overflow: hidden;
}
.mixer__product img { width: 100%; height: 100%; object-fit: cover; }
.mixer .pitch { right: var(--inset); top: calc(50% + 3px); transform: translateY(-50%); }

/* --- OB-4 --- */
.ob4 { background: #000; }
.ob4__media { position: absolute; inset: 0 0 0 auto; width: 58%; overflow: hidden; }
.ob4__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ob4 .pitch { left: var(--inset); top: calc(50% + 3px); transform: translateY(-50%); }

/* --- pocket operator --- */
.po { background: var(--grey-100); }
.po .pitch {
  top: 120px;
  left: calc(54.17% - 33.5px);
  transform: translateX(-50%);
}
.po .pitch__rule { height: min(500px, 58svh); }
.po__strip {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  top: 251px;
  height: 434px;
  max-height: 51%;
  overflow: hidden;
}
.po__strip img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 48%;
  will-change: transform;
}

/* --- set of 2 --- */
.duo { background: var(--grey-100); display: grid; grid-template-columns: 1fr 1fr; }
.duo__half { position: relative; overflow: hidden; min-height: 0; }
/* obraz wyjęty z przepływu — inaczej jego proporcje rozpychały wysokość sekcji */
.duo__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__half--right img { object-position: 50% 57%; }
.duo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 31.647%, rgba(0,0,0,0) 62.235%);
}
.duo .pitch { position: absolute; }
/* pozycje z Figmy przeliczone na szerokość połówki (720px @1440) */
.duo__half--left  .pitch { bottom: var(--pad); left: 57.8%; }
.duo__half--right .pitch { top: var(--pad); right: 30%; }
.duo .pitch__rule { height: 60px; }

/* =========================================================================
   display button (pasek "explore more products")
   ========================================================================= */

.display {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 28px clamp(24px, 10.76vw, 155px);
  background: var(--black-700);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.display__label {
  font-size: var(--fs-h2);
  font-weight: var(--weight-mono);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  transition: transform .5s var(--ease);
}
.display__rule {
  width: 60px; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.display::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease);
}
/* akcent jest jasny (żółty/pomarańcz) — biały tekst dawał na nim ~1.7:1 */
.display:hover { color: var(--black); }
.display:hover::before { transform: scaleY(1); }
.display:hover .display__label { transform: translateX(12px); }
.display:hover .display__rule { transform: scaleX(1.8) translateX(6px); }

/* =========================================================================
   stopka
   ========================================================================= */

.footer {
  position: relative;
  background: var(--black);
  color: var(--white);
  min-height: 320px;
  padding: 72px var(--pad) var(--pad);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 230px)) 1fr;
  column-gap: 0;
  row-gap: 32px;
}

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-nav); font-weight: var(--weight-mono); line-height: 1;
  text-transform: uppercase; color: var(--yellow);
}
.footer__stem { width: 1px; height: 24px; background: var(--white); transform-origin: top; }
.footer__col a {
  font-family: var(--font-mono);
  font-size: var(--fs-nav); font-weight: 400; line-height: 1;
  text-transform: uppercase; color: var(--white);
  transition: color .3s var(--ease);
}
.footer__col a:hover { color: var(--yellow); }

.footer__brand {
  grid-column: 5;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: flex-end;
  gap: 12px;
  max-width: 100%;
  justify-self: end;
}
.footer__logo { width: 185px; max-width: 100%; height: auto; color: var(--yellow); }
.footer__meta {
  display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap;
  font-size: var(--fs-nav); font-weight: var(--weight-mono); line-height: 1;
  text-transform: uppercase; color: var(--yellow);
}
.footer__meta b { font-weight: var(--weight-mono); }
.footer__meta span { font-weight: 400; }

/* =========================================================================
   responsywność (mobile: 390px z Figmy)
   ========================================================================= */

@media (max-width: 900px) {
  :root { --pad: 16px; --inset: 16px; --rule: 90px; }

  .nav { padding: 23px 16px; }
  .nav__stem, .nav__toggle { display: none; }
  .nav__burger {
    position: fixed; top: 23px; right: 16px;
    display: flex; flex-direction: column; gap: 12px;
    width: 32px; padding: 8px 0;
    color: var(--accent);
    transition: color .5s var(--ease);
  }
  .nav__burger i { display: block; height: 1px; width: 100%; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }

  .section { min-height: 100svh; }

  /* na wąskich ekranach bloki rozpinamy na szerokość kadru */
  .pitch { width: auto; }

  /* --- hero --- */
  .hero .pitch { bottom: 56px; }

  /* --- field mixer: produkt u góry, tekst pod spodem --- */
  .mixer__product {
    left: 16px; right: 16px; width: auto; max-width: none;
    top: 12%; transform: none;
    height: 46%; max-height: none;
  }
  .mixer .pitch {
    left: 16px; right: 16px; top: auto; bottom: 8%;
    transform: none;
    align-items: center; text-align: center;
  }

  /* --- OB-4 --- */
  .ob4__media { inset: 0; width: 100%; }
  .ob4__media img { object-position: 50% 30%; }
  .ob4 .pitch {
    left: 16px; right: 16px; top: auto; bottom: 8%;
    transform: none;
    align-items: center; text-align: center;
  }

  /* --- pocket operator --- */
  .po .pitch { left: 16px; right: 16px; top: 64px; transform: none; }
  .po .pitch__rule { height: 320px; max-height: 38vh; }
  .po__strip { top: 34%; height: 28%; }

  /* --- set of 2 --- */
  .duo { grid-template-columns: 1fr; }
  .duo__half { min-height: 70svh; }
  .duo__half--left .pitch,
  .duo__half--right .pitch {
    left: 16px; right: 16px; top: auto; bottom: 32px;
    align-items: flex-start; text-align: left;
  }

  /* --- display --- */
  .display { padding: 22px 16px; }

  /* --- stopka --- */
  .footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 48px 16px 32px;
    gap: 28px 16px;
  }
  .footer__brand { grid-column: 1 / -1; align-items: flex-start; justify-self: start; }
  .footer__meta { justify-content: flex-start; flex-wrap: wrap; }

  /* --- menu --- */
  .menu { gap: 10px; padding: 23px 16px 48px; }
  .menu__head { gap: 16px; align-items: center; }
  .menu__logo { width: 66px; height: 33px; }
  .menu__wordmark, .menu__date { font-size: 1rem; }
  .menu__row { gap: 20px; font-size: 1.125rem; }
  .menu__stem { height: 40px; }
}

@media (max-width: 620px) {
  .h1, .h2, .h5 { white-space: normal; }
}

@media (max-width: 560px) {
  .menu__row { flex-direction: column; gap: 10px; }
  .menu__stem { height: 28px; }
}