/* ============================================================================
   Zadanie & onboarding — Zuzka Václavová · bolebruch.teesys.sk štýl
   Vizuálna identita prevzatá 1:1 z „Pravá ruka — Odvážny" smeru.
   ========================================================================== */

:root {
  --soil:        #1b1714;  /* základné pozadie (pôda) */
  --soil-2:      #15120f;  /* tmavšie sekcie */
  --card:        #23201c;  /* karty */
  --paper:       #EAE7DF;  /* text */
  --moss:        #9DC3A6;  /* zelený akcent (poriadok / korene) */
  --amber:       #C08A2D;  /* primárny CTA */
  --amber-bright:#D8A23E;  /* iskra v texte */
  --line:        rgba(234,231,223,.10);
  --line-2:      rgba(234,231,223,.12);
  --line-3:      rgba(234,231,223,.16);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --px: 26px;            /* horizontálny padding sekcií (mobil) */
  --maxw: 1280px;
}

@media (min-width: 768px) { :root { --px: 56px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }
body {
  background: var(--soil);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
::selection { background: var(--amber-bright); color: var(--soil); }

a { color: inherit; }
img { display: block; max-width: 100%; }

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

/* ── helpers ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; }
.inner { max-width: 1000px; margin: 0 auto; }
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--moss);
}
@media (max-width: 767px) { .mono { font-size: 10px; } }
.eyebrow { margin-bottom: 22px; }
.amber { color: var(--amber-bright); }
.moss { color: var(--moss); }
.section { padding: clamp(34px, 6vw, 90px) var(--px); border-top: 1px solid var(--line-2); }
.section--dark { background: var(--soil-2); }
.section--card { background: var(--card); }

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--px);
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,18,15,.62) 0%, rgba(21,18,15,.28) 55%, rgba(21,18,15,0) 100%);
  opacity: 1; transition: opacity .3s ease;
}
.nav.is-solid {
  background: rgba(27,23,20,.85); backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav.is-solid::before { opacity: 0; }
.nav__brand { display: flex; align-items: baseline; gap: 10px; }
.nav__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.nav__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(234,231,223,.45); }
.nav__right { display: flex; align-items: center; gap: 26px; }
.nav__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
@media (max-width: 600px) { .nav__tag { display: none; } }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  background: var(--amber); color: var(--soil);
  border: 0; padding: 16px 32px; border-radius: 50px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(192,138,45,.28); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(234,231,223,.28); font-weight: 500; font-size: 13px; padding: 9px 18px;
}
.btn--ghost:hover { background: rgba(234,231,223,.06); border-color: rgba(234,231,223,.5); box-shadow: none; }

/* ── HERO (bez fotky — pôda + mycélium) ─────────────────────────────── */
.hero { position: relative; overflow: hidden; min-height: 560px; }
@media (min-width: 768px) { .hero { min-height: 660px; } }
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(157,195,166,.10) 0%, rgba(157,195,166,0) 55%),
    radial-gradient(ellipse 70% 60% at 20% 90%, rgba(216,162,62,.08) 0%, rgba(216,162,62,0) 60%),
    linear-gradient(180deg, #15120f 0%, #1b1714 100%);
}
.hero__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,18,15,.4) 0%, rgba(21,18,15,0) 30%, rgba(21,18,15,0) 62%, rgba(21,18,15,.92) 100%); }
.myc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .myc { opacity: .55; }
.hero__content {
  position: relative; z-index: 2;
  padding: 96px var(--px) 44px; min-height: 560px;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: 820px;
}
@media (min-width: 768px) {
  .hero__content { padding: 120px var(--px) 80px; min-height: 660px; justify-content: center; }
}
.hero__badge { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 14px var(--amber-bright); }
.hero__badge .mono { color: var(--amber-bright); margin: 0; letter-spacing: .18em; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 8.5vw, 84px); line-height: .96; letter-spacing: -.035em;
  margin: 0 0 22px;
}
.hero__lead { margin: 0 0 16px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: rgba(234,231,223,.86); max-width: 620px; }
.hero__gravity {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.4; color: var(--amber-bright);
  margin: 0 0 30px; max-width: 560px;
}
.hero__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(234,231,223,.5); }

/* ── TYPO BLOKY ──────────────────────────────────────────────────────── */
.lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 4.2vw, 42px); line-height: 1.16; letter-spacing: -.02em;
  margin: 0 0 32px; max-width: 880px;
}
.h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -.02em; margin: 0; max-width: 720px; }
.prose { font-size: 15px; line-height: 1.6; color: rgba(234,231,223,.82); max-width: 840px; margin: 0; }
@media (min-width: 768px) { .prose { font-size: 18px; } }
.big-p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: rgba(234,231,223,.82); max-width: 880px; }
@media (min-width: 768px) { .big-p { font-size: 19px; margin-bottom: 50px; } }
.big-p strong { font-weight: 600; color: var(--paper); }
.pullquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 34px); line-height: 1.24; letter-spacing: -.02em; margin: 0;
}
.split { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } }

/* ── KARTY ───────────────────────────────────────────────────────────── */
.cards2 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
@media (min-width: 768px) { .cards2 { grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px; } }
.card { padding: 18px; background: var(--card); border: 1px solid rgba(234,231,223,.09); border-radius: 12px; }
@media (min-width: 768px) { .card { padding: 30px; } }
.card--amber { border-color: rgba(216,162,62,.35); }
.card__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); margin-bottom: 8px; }
.card--amber .card__kicker { color: var(--amber-bright); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 22px); margin-bottom: 8px; }
.card__text { font-size: 15px; line-height: 1.6; color: rgba(234,231,223,.74); }
@media (min-width: 768px) { .card__text { font-size: 16px; } }
.card__text a { color: var(--moss); text-decoration-color: rgba(157,195,166,.5); text-underline-offset: 3px; }
.card__text a:hover { color: var(--paper); }

/* zoznamy v kartách a sekciách */
.list { margin: 14px 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: rgba(234,231,223,.78); }
@media (min-width: 768px) { .list li { font-size: 15.5px; } }
.list li::before { content: ''; position: absolute; left: 0; top: .58em; width: 8px; height: 2px; background: var(--moss); border-radius: 2px; }
.list--amber li::before { background: var(--amber-bright); }
.list strong { color: rgba(234,231,223,.94); font-weight: 600; }

/* chips (grant radar územie) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  color: rgba(234,231,223,.72); background: rgba(234,231,223,.05);
  border: 1px solid var(--line-3); border-radius: 50px; padding: 6px 12px; white-space: nowrap;
}

/* ── MYCÉLIUM STAGE + PROJEKTY ───────────────────────────────────────── */
.myc-stage { position: relative; height: 330px; margin: 18px 0; }
@media (min-width: 768px) { .myc-stage { height: 440px; margin: 10px 0 36px; } }
.projects { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
@media (min-width: 600px) { .projects { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 980px) { .projects { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 32px; } }
.project { padding-top: 14px; border-top: 2px solid var(--moss); }
.project--amber { border-top-color: var(--amber-bright); }
.project__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 20px); color: var(--moss); margin-bottom: 7px; }
.project--amber .project__name { color: var(--amber-bright); }
.project__text { font-size: 14px; line-height: 1.55; color: rgba(234,231,223,.68); }
@media (min-width: 768px) { .project__text { font-size: 15px; } }
.project__you { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--amber-bright); }
.more { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: rgba(234,231,223,.62); max-width: 880px; }
.more strong { font-weight: 600; color: rgba(234,231,223,.9); }
@media (min-width: 768px) { .more { font-size: 15px; } }

/* ── TIMELINE (30/60/90 · merania) ───────────────────────────────────── */
.timeline { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 24px; border-left: 2px solid rgba(157,195,166,.4); padding-left: 18px; }
@media (min-width: 768px) {
  .timeline { grid-template-columns: 1fr 1fr 1fr; border-left: 0; border-top: 1px solid var(--line-3); padding-left: 0; margin-bottom: 50px; }
}
.timeline__item { padding: 0 0 22px; position: relative; }
@media (min-width: 768px) { .timeline__item { padding: 24px 28px 0 0; } .timeline__item + .timeline__item { padding-left: 28px; } }
.timeline__dot { display: none; }
@media (min-width: 768px) {
  .timeline__dot { display: block; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--moss); }
  .timeline__dot--amber { background: var(--amber-bright); }
}
.timeline__when { font-family: var(--font-mono); font-size: 12px; color: var(--amber-bright); margin: 0 0 6px; }
@media (max-width: 767px) { .timeline__when { font-size: 11px; margin-bottom: 4px; } }
.timeline__what { font-size: 15px; line-height: 1.45; color: rgba(234,231,223,.84); }
@media (min-width: 768px) { .timeline__what { font-size: 17px; } }

/* ── HIGHLIGHT (bezpečnosť / scenár) ─────────────────────────────────── */
.callout {
  margin-top: 26px; padding: 20px 22px; border-radius: 12px;
  background: rgba(216,162,62,.07); border: 1px solid rgba(216,162,62,.3);
}
@media (min-width: 768px) { .callout { padding: 26px 30px; } }
.callout__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-bright); margin-bottom: 10px; }
.callout__text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(234,231,223,.85); }
@media (min-width: 768px) { .callout__text { font-size: 16.5px; } }
.callout--moss { background: rgba(157,195,166,.06); border-color: rgba(157,195,166,.32); }
.callout--moss .callout__kicker { color: var(--moss); }

/* ── PRVÉ KROKY (číslovaný zoznam) ───────────────────────────────────── */
.steps { margin: 0 0 30px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: krok; }
.step {
  counter-increment: krok; display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px; background: var(--card); border: 1px solid rgba(234,231,223,.09); border-radius: 12px;
}
@media (min-width: 768px) { .step { padding: 24px 28px; } }
.step::before {
  content: counter(krok, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 13px; color: var(--amber-bright);
  border: 1px solid rgba(216,162,62,.4); border-radius: 50%;
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
}
.step__body { padding-top: 2px; }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 4px; }
@media (min-width: 768px) { .step__title { font-size: 19px; } }
.step__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(234,231,223,.74); }
@media (min-width: 768px) { .step__text { font-size: 15.5px; } }

/* podpis */
.sign { margin-top: 34px; }
.sign__text { font-size: 16px; line-height: 1.6; color: rgba(234,231,223,.82); max-width: 640px; margin: 0 0 14px; }
.sign__name { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--amber-bright); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.footer {
  padding: 24px var(--px); background: var(--soil-2); border-top: 1px solid rgba(234,231,223,.08);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: rgba(234,231,223,.42);
}
@media (max-width: 767px) { .footer { justify-content: center; text-align: center; } }

/* ── REVEAL ──────────────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }