/* Hero. Výška 100vh, min 680px, dve parallax vrstvy s protismerným pohybom. */

.hero {
  position: relative;
  height: 100vh;
  /* Na mobiloch 100vh počíta aj lištu prehliadača, takže hero „poskočí“
     pri scrollovaní. dvh meria skutočnú viditeľnú výšku; vh zostáva ako
     fallback pre staršie prehliadače. */
  height: 100dvh;
  min-height: 680px;
  overflow: hidden;
}

/* Inset -12% zhora aj zdola dáva parallaxu priestor, do ktorého sa
   posúva — bez neho by pri pohybe vykúkal okraj. */
.hero__bg {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(8, 9, 10, .94) 0%,
    rgba(8, 9, 10, .72) 42%,
    rgba(8, 9, 10, .18) 78%
  );
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--page-inset);
  pointer-events: none;   /* aby sa dalo klikať „cez“ hero na pozadie */
}

.hero__inner {
  max-width: 760px;
  will-change: transform;
}

/* --- Eyebrow: oranžová linka + mono text. Opakuje sa v každej sekcii. --- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}

.eyebrow__bar {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--c-accent);
}

.eyebrow__text {
  font-family: var(--f-mono);
  font-size: 19px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* --- Nadpis a text --- */

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
}

.hero__lead {
  margin: 28px 0 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
  pointer-events: auto;   /* tlačidlá musia klikať, aj keď obal nie */
}

/* --- Scroll hint --- */

.hero__hint {
  position: absolute;
  bottom: 34px;
  left: var(--page-inset);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Dizajn predpisuje #7C7A77, čo na tmavej časti fotky dáva len 3,07:1 —
     pod hranicou AA. O stupeň svetlejší odtieň z tej istej palety dáva
     nad 5:1 a vizuálne je rozdiel nepatrný. */
  color: var(--c-text-muted);
  pointer-events: none;
}

.hero__hint-arrow {
  display: inline-block;
  animation: donster-scroll-hint 2.2s ease-in-out infinite;
}

@keyframes donster-scroll-hint {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* --- Mobil --- */

@media (max-width: 900px) {
  /* Gradient pod 100° je navrhnutý na širokú obrazovku, kde tmavá časť kryje
     ľavú stranu. Na úzkom vysokom výreze zostávajú spodné riadky odstavca
     na svetlej časti fotky, tak sa na mobile pridá aj svislé stmavenie. */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(8, 9, 10, .88) 0%,
      rgba(8, 9, 10, .8) 58%,
      rgba(8, 9, 10, .35) 100%
    );
  }

  .hero__content { padding: 0 24px; }
  .hero__hint { left: 24px; }
  .eyebrow__text { font-size: 14px; letter-spacing: .16em; }
  .hero__lead { font-size: 17px; }
}

/* Spodná hranica clampu v dizajne je 48px, pri ktorej sa „Profesionálna“
   nezmestí na obrazovky pod ~390 px — text sa reže. min() zníži veľkosť
   len tam, kde 48px naozaj nepretlačí; od ~418 px vyššie platí dizajn. */
@media (max-width: 480px) {
  .hero__title { font-size: min(48px, 11.5vw); }
}