/* =========================================================
   skopilabs — landing_page
   Rozměry a souřadnice odpovídají 1:1 Figmě (šířka 996px).
   ========================================================= */

:root {
  --accent: #f59d00;
  --dark: #0f0b0a;
  --gray: #5a5a5c;
  --bg: #f8fbf8;
  --border: #dde2dd;
  --teal: #00a896;

  /* výška navbaru včetně dělící linky (Figma: linka na y 103) */
  --header-h: 103px;

  --grad-hover-kontakt: linear-gradient(0.265deg, #d77f00 0.6555%, #ffb52a 99.345%);
  --grad-hover-portfolio: linear-gradient(-0.651deg, #d77f00 1.8457%, #ffb52a 96.742%);
  --grad-click: linear-gradient(179.589deg, #5a3700 2.1845%, #241600 97.816%);
}

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

html {
  scroll-behavior: smooth;
}

body {
  width: 996px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 15px;
  letter-spacing: 0.15px;
  color: var(--dark);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Figma zarovnává textové rámce na výšku verzálek (cap height).
   U flexových kontejnerů se trim uplatní až na vnořeném spanu. */
h1, h2, h3, h4, p, li, .btn__label, .nav-link,
.dec > span, .swatch > span {
  text-box: trim-both cap alphabetic;
}

/* Zlomy řádků v textech jsou přebrané z Figmy */
h1, h2, h3, h4, p {
  white-space: pre-line;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.page {
  position: relative;
}

/* ===== Textové styly z Figmy ===== */
.h1 {
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 93px;
  line-height: 93px;
  letter-spacing: -1.86px;
  font-variation-settings: "wdth" 100;
}

.h2 {
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 58px;
  line-height: 58px;
  letter-spacing: -0.58px;
  font-variation-settings: "wdth" 100;
}

.h4 {
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 33px;
  line-height: 33px;
  letter-spacing: 0.33px;
  font-variation-settings: "wdth" 100;
}

.h5 {
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 23px;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
}

.subtitle {
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.32px;
  font-variation-settings: "wdth" 100;
}

.caption {
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.6px;
  white-space: pre-wrap;
}

.accent {
  color: var(--accent);
}

/* ===== Tlačítka ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s linear, color 0.18s linear, border-color 0.18s linear;
}

.btn__label {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn__arrow {
  width: 22px;
  height: 11px;
  flex: none;
}

/* zobrazit portfolio */
.btn--portfolio {
  background: var(--dark);
  color: var(--bg);
}

.btn--portfolio:hover,
.btn--portfolio.is-hover {
  background: var(--grad-hover-portfolio);
  color: var(--bg);
}

.btn--portfolio:active,
.btn--portfolio.is-click {
  background: var(--grad-click);
  color: var(--bg);
}

/* kontakt — světlá varianta (sekce o mně) */
.btn--kontakt {
  background: var(--bg);
  color: var(--dark);
}

/* kontakt — tmavá varianta (navbar) */
.btn--kontakt-dark {
  background: var(--dark);
  color: var(--bg);
}

/* kontakt — světlá s ohraničením (ukázka stavů) */
.btn--kontakt-outline {
  background: var(--bg);
  color: var(--dark);
  border: 1px solid var(--dark);
}

.btn--kontakt:hover,
.btn--kontakt-dark:hover,
.btn--kontakt-outline:hover,
.btn--kontakt.is-hover,
.btn--kontakt-dark.is-hover,
.btn--kontakt-outline.is-hover {
  background: var(--grad-hover-kontakt);
  color: var(--dark);
  border-color: transparent;
}

.btn--kontakt:active,
.btn--kontakt-dark:active,
.btn--kontakt-outline:active,
.btn--kontakt.is-click,
.btn--kontakt-dark.is-click,
.btn--kontakt-outline.is-click {
  background: var(--grad-click);
  color: var(--bg);
  border-color: transparent;
}

/* ukázky stavů v sekci workflow nejsou interaktivní */
.btn--static {
  pointer-events: none;
  cursor: default;
}

/* =========================================================
   NAVBAR  (frame 276:83 — x 233, y 35, 698×33)
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg);
}

.header__inner {
  position: relative;
  width: 996px;
  height: var(--header-h);
}

.navbar {
  position: absolute;
  left: 233px;
  top: 35px;
  height: 33px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav-link {
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link--active {
  color: var(--dark);
}

.nav-link--muted {
  cursor: default;
}

/* šířky textů jsou převzaté z Figmy, aby rozestupy v navbaru sedly na pixel */
.nav-link[data-nav="uvod"]      { width: 46px; }
.nav-link--muted                { width: 90px; }
.nav-link[data-nav="workflow"]  { width: 91px; }
.nav-link[data-nav="portfolio"] { width: 86px; }
.nav-link[data-nav="o-mne"]     { width: 50px; }

/* podtržítko aktivní sekce (Line 21 — y 65, výška textu) */
.nav-underline {
  position: absolute;
  top: 30px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gray);
  transition: left 0.25s ease, width 0.25s ease;
  pointer-events: none;
}

/* Line 19 — dělící linka pod navbarem */
.header__line {
  position: absolute;
  left: 0;
  top: 102px;
  width: 996px;
  height: 1px;
  background: var(--border);
}

/* ===== Sekce ===== */
.frame {
  position: relative;
  width: 996px;
  /* aby sekci při skoku z navbaru nepřekryl sticky navbar */
  scroll-margin-top: var(--header-h);
}

/* =========================================================
   ÚVOD  (frame 357:103 — 996×498)
   ========================================================= */
.uvod {
  height: 498px;
  overflow: hidden;
}

.uvod__content {
  position: absolute;
  left: 60px;
  top: 60px;
  width: 445px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

.uvod__text {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 445px;
}

.uvod__title,
.uvod__desc {
  width: 445px;
}

.uvod__image {
  position: absolute;
  left: 681px;
  top: 60px;
  width: 255px;
  height: 378px;
  border-radius: 16px;
  object-fit: cover;
}

/* =========================================================
   WORKFLOW  (frame 284:223 — 996×5367)
   ========================================================= */
.workflow {
  height: 5367px;
  overflow: hidden;
}

.wf__label {
  position: absolute;
  left: 60px;
  top: 60px;
  color: var(--gray);
}

.wf__stack-32 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wf__stack-56 {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* — intro (357:107) — */
.wf__intro {
  position: absolute;
  left: 492px;
  top: 60px;
  width: 444px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  text-align: right;
}

.wf__intro > * {
  width: 100%;
}

/* — 01 BRIEF (347:12) — */
.wf__brief {
  position: absolute;
  left: 60px;
  top: 139px;
  width: 256px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

/* — citát „Dobrý design začíná…" (222:1355) — */
.wf__quote-1 {
  position: absolute;
  left: 371px;
  top: 336px;
  width: 565px;
  text-align: right;
}

/* — poznámka (220:1322) — */
.wf__note {
  position: absolute;
  left: 681px;
  top: 875px;
  width: 255px;
  text-align: right;
  text-transform: uppercase;
  color: var(--gray);
}

/* — 02 WIREFRAME (342:473) — */
.wf__wireframe {
  position: absolute;
  left: 60px;
  top: 1154px;
  width: 294px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.wf__wireframe-desc {
  width: 252px;
}

.wf__wireframe-inner {
  width: 284px;
}

.wf__wireframe-inner .wf__stack-32 {
  width: 255px;
}

.wf__issue-2 {
  width: 258px;
}

/* — cesta zákazníka (341:472) — */
.wf__journey {
  position: absolute;
  left: 439px;
  top: 1490px;
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.journey__step {
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.journey__label {
  font-weight: 700;
}

.journey__quote {
  font-style: italic;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.6px;
}

.journey__arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.journey__arrow svg {
  width: 25px;
  height: 14.7279px;
  transform: rotate(90deg);
}

.journey__box {
  padding: 12px;
  border-radius: 8px;
  background: var(--teal);
  white-space: nowrap;
}

.journey__box--wide {
  width: 118px;
  text-align: center;
}

/* — citát „Každá sekce…" (282:145) — */
.wf__quote-2 {
  position: absolute;
  left: 681px;
  top: 1854px;
  transform: translateY(-50%);
  width: 255px;
}

/* — 03 DESIGN (357:109) — */
.wf__banner {
  position: absolute;
  left: 0;
  top: 2336px;
  width: 799.5px;
  height: 472px;
}

.wf__banner-title {
  position: absolute;
  left: 73px;
  top: 2395.5px;
  transform: translateY(-50%);
  color: var(--bg);
  white-space: nowrap;
}

.wf__banner-quote {
  position: absolute;
  left: 73px;
  top: 2618px;
  transform: translateY(-50%);
  width: 457px;
  color: var(--bg);
}

.wf__type-label {
  position: absolute;
  left: 785px;
  top: 2429px;
  transform: translateY(-50%);
  color: var(--teal);
  white-space: nowrap;
}

.wf__type {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* popisky jsou jednořádkové; lokální Poppins je o ~2px širší než ve Figmě */
.wf__type .caption {
  white-space: pre;
}

.wf__type--1 { left: 618px; top: 2492px; width: 318px; }
.wf__type--2 { left: 530px; top: 2606px; width: 314px; }
.wf__type--3 { left: 445px; top: 2695px; width: 306px; }
.wf__type--4 { left: 364px; top: 2774px; width: 269px; }

/* — citát „Z wireframu vytvořím…" (291:239) — */
.wf__quote-3 {
  position: absolute;
  left: 681px;
  top: 3150.5px;
  transform: translateY(-50%);
  width: 253px;
}

/* — Barvy — */
.wf__label-barvy {
  position: absolute;
  left: 60px;
  top: 2895px;
  transform: translateY(-50%);
  color: var(--teal);
}

.wf__colors-a {
  position: absolute;
  left: 60px;
  top: 2955px;
  width: 255px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.wf__colors-b {
  position: absolute;
  left: 373px;
  top: 2955px;
  width: 254px;
  height: 444px;
}

.color-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.color-card--b1,
.color-card--b2,
.color-card--b3 {
  position: absolute;
  left: 0;
  width: 254px;
}

.color-card--b1 { top: 0; }
.color-card--b2 { top: 162px; }
.color-card--b3 { top: 339px; }

.swatch {
  width: 254px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.32px;
  font-variation-settings: "wdth" 100;
  text-transform: uppercase;
}

.swatch--primary { background: var(--accent); color: var(--dark); }
.swatch--dark    { background: var(--dark);   color: var(--bg); }
.swatch--gray    { background: var(--gray);   color: var(--bg); }
.swatch--bg      { background: var(--bg);     color: var(--dark); border: 1px solid var(--dark); }
.swatch--border  { background: var(--border); color: var(--dark); }
.swatch--teal    { background: var(--teal);   color: var(--bg); }

.color-card ul {
  list-style: disc;
  padding-left: 22.5px;
}

/* — Spacing — */
.wf__label-spacing {
  position: absolute;
  left: 60px;
  top: 3500px;
  transform: translateY(-50%);
  color: var(--teal);
}

.wf__spacing-values {
  position: absolute;
  left: 74px;
  top: 3547px;
  width: 26px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.wf__spacing-img {
  position: absolute;
  left: 138px;
  top: 3552px;
  width: 177px;
  height: 252px;
}

/* — Tlačítka (ukázka stavů) — */
.wf__label-tlacitka {
  position: absolute;
  left: 373px;
  top: 3500px;
  transform: translateY(-50%);
  color: var(--teal);
}

.wf__btn-demo {
  position: absolute;
  top: 3547px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wf__btn-demo--a { left: 373px; width: 225px; }
.wf__btn-demo--b { left: 681px; width: 97px; }

.btn-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.btn-demo .btn {
  width: 100%;
}

/* — rozhodnutí — */
.wf__dec-intro {
  position: absolute;
  left: 60px;
  top: 3963px;
  transform: translateY(-50%);
  width: 358px;
  text-transform: uppercase;
}

.wf__dec-list {
  position: absolute;
  left: 525px;
  top: 3935px;
  width: 411px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.dec {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: "League Gothic", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.32px;
  font-variation-settings: "wdth" 100;
  text-transform: uppercase;
  white-space: nowrap;
}

.dec__num {
  color: var(--accent);
}

.wf__dec-d {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
}

.wf__dec-d--1 { left: 569px; top: 3986px; }
.wf__dec-d--2 { left: 572px; top: 4081px; }
.wf__dec-d--3 { left: 572px; top: 4176px; }
.wf__dec-d--4 { left: 573px; top: 4271px; }
.wf__dec-d--5 { left: 573px; top: 4365.5px; width: 212px; }

.wf__dec-foot {
  position: absolute;
  left: 60px;
  top: 4326px;
  transform: translateY(-50%);
  width: 324px;
  text-transform: uppercase;
}

/* — 04 DEVELOPMENT — */
.wf__dev {
  position: absolute;
  left: 60px;
  top: 4494px;
  width: 273px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wf__dev-desc {
  width: 255px;
}

.wf__monitor {
  position: absolute;
  left: 518px;
  top: 4516px;
  width: 492px;
  height: 369px;
}

.wf__mobil {
  position: absolute;
  left: 342px;
  top: 4811px;
  width: 114px;
  height: 146px;
}

.wf__tablet {
  position: absolute;
  left: 699px;
  top: 5076px;
  width: 193px;
  height: 251px;
}

.wf__quote-4 {
  position: absolute;
  left: 60px;
  top: 5179px;
  transform: translateY(-50%);
  width: 565px;
}

/* =========================================================
   PORTFOLIO  (frame 125:755 — 996×1227)
   ========================================================= */
.portfolio {
  height: 1227px;
}

.pf__label {
  position: absolute;
  left: 60px;
  top: 60px;
  color: var(--gray);
}

.pf__title {
  position: absolute;
  left: 60px;
  top: 155px;
  width: 444px;
}

.pf__aside {
  position: absolute;
  left: 625px;
  top: 173px;
  width: 303px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pf__aside-title {
  text-transform: uppercase;
}

.pf__aside-desc {
  color: var(--gray);
}

.pf__project {
  position: absolute;
  top: 458px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.pf__project--1 { left: 60px;  width: 255px; }
.pf__project--2 { left: 371px; width: 254px; }
.pf__project--3 { left: 681px; width: 255px; }

.pf__body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pf__img {
  width: 100%;
  height: 322px;
  border-radius: 16px;
  object-fit: cover;
}

/* =========================================================
   KONTAKT  (frame 310:131 — 996×613)
   ========================================================= */
.kontakt {
  height: 613px;
  overflow: hidden;
}

.kt__label {
  position: absolute;
  left: 60px;
  top: 60px;
  color: var(--gray);
}

.kt__head {
  position: absolute;
  left: 60px;
  top: 204px;
  width: 271px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.kt__desc {
  width: 255px;
}

.kt__line {
  position: absolute;
  left: 60px;
  top: 450px;
  width: 160px;
  height: 1px;
  background: var(--gray);
}

.kt__info {
  position: absolute;
  left: 60px;
  top: 489px;
  width: 234px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* šířka rámce ve Figmě je 234px = přesná šířka e-mailu, nesmí se zalomit */
.kt__info p {
  white-space: nowrap;
}

.kt__image {
  position: absolute;
  left: 681px;
  top: 60px;
  width: 255px;
  height: 493px;
  border-radius: 16px;
  object-fit: cover;
}

/* =========================================================
   O MNĚ  (frame 167:971 — 996×1211)
   ========================================================= */
.o-mne {
  height: 1211px;
  overflow: hidden;
}

.om__label {
  position: absolute;
  left: 60px;
  top: 60px;
  color: var(--gray);
}

.om__panel {
  position: absolute;
  left: 149px;
  top: 156px;
  width: 319px;
  height: 1055px;
  background: var(--dark);
}

.om__side {
  position: absolute;
  left: 15px;
  top: 156px;
  width: 119px;
}

.om__photo {
  position: absolute;
  left: 468px;
  top: 156px;
  width: 528px;
  height: 1055px;
  object-fit: cover;
}

.om__content {
  position: absolute;
  left: 179px;
  top: 204px;
  width: 265px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: var(--bg);
}

.om__btn {
  position: absolute;
  left: 179px;
  top: 1117px;
}

.om__footer {
  position: absolute;
  left: 15px;
  top: 1077px;
  width: 99px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.om__social {
  width: 67px;
  height: 17px;
}