/*
 * vanek.pro - Dark Monolith Forest, v1
 * Cil: co nejverneji zachovat puvodni vizualni koncept.
 * Zadny JavaScript, fonty z CDN ani externi zavislosti.
 */
:root {
  color-scheme: dark;
  --bg: #050e0b;
  --fg: #eeefed;
  --muted: #8b9791;
  --green: #74af95;
  --line: rgba(143, 174, 155, .13);
  --content: 1308px;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--fg); background: #030b08; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.site { width: 100%; overflow: hidden; }
.hero { position: relative; min-height: 647px; isolation: isolate; background: #04110d; }
.hero-forest {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  background: url("assets/forest.webp") no-repeat center center / cover;
  z-index: -2;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #04100d 0%, #04100d 34%, rgba(4, 16, 13, .97) 42%, rgba(4, 16, 13, .77) 52%, rgba(4, 16, 13, .09) 77%, rgba(4, 16, 13, .03) 100%),
    linear-gradient(0deg, rgba(3, 11, 8, .35), transparent 35%);
}
.hero-inner { max-width: 1448px; margin: 0 auto; padding: 0 5.3%; }
.site-header { padding-top: 27px; height: 119px; }
.brand { display: inline-flex; align-items: baseline; font-size: 21px; font-weight: 700; letter-spacing: .035em; color: #f0f2ef; }
.brand-dot { color: #edf0ed; }
.brand-cursor { width: 10px; height: 2px; margin-left: 13px; background: #58c596; align-self: flex-end; transform: translateY(-1px); }
.hero-copy { padding-top: 18px; max-width: 900px; }
.eyebrow { margin: 0 0 23px; display: flex; align-items: center; gap: 20px; text-transform: uppercase; font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 12px; letter-spacing: .25em; color: #8e9b95; }
.eyebrow-line { display: inline-block; width: 40px; height: 2px; background: #53c898; }
h1 { margin: 0; font-size: clamp(65px, 7.2vw, 110px); font-weight: 740; line-height: 1.08; letter-spacing: -.048em; }
.headline-suffix { color: #70887c; }
.hero-tagline { margin: 31px 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 3.6vw, 51px); line-height: 1.24; letter-spacing: -.022em; white-space: nowrap; }
.hero-description { max-width: 570px; margin: 0; font: 16px/1.7 "DejaVu Sans Mono", "Liberation Mono", monospace; color: #a4aaa6; }
.hero-description span { color: #a3ada7; }

.areas { border-top: 1px solid var(--line); padding: 26px 0 30px; background: #030d09; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px; max-width: 1308px; margin: 0 auto; }
.area { position: relative; min-height: 251px; padding: 25px 28px 31px; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(8,24,18,.7), rgba(3,12,8,.76)); }
.area-number { position: absolute; top: 24px; right: 25px; font: 13px "DejaVu Sans Mono", "Liberation Mono", monospace; color: #747e79; }
.area-icon { display: block; width: 47px; height: 47px; margin: 0 0 25px; color: #7fae99; opacity: .90; }
.area h2 { margin: 0 0 13px; font: 700 20px/1.25 "DejaVu Sans Mono", "Liberation Mono", monospace; letter-spacing: -.05em; color: #f0f2ef; }
.area p { max-width: 310px; margin: 0; font: 14px/1.6 "DejaVu Sans Mono", "Liberation Mono", monospace; color: #95a19a; }

.site-footer { border-top: 1px solid var(--line); background: #020a07; }
.footer-inner { max-width: 1308px; min-height: 77px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 25px; font: 12px/1.5 "DejaVu Sans Mono", "Liberation Mono", monospace; color: #7d8a82; }
.footer-left, .footer-right { display: inline-flex; align-items: center; gap: 19px; }
.footer-chevron { font: 34px/1 Arial, sans-serif; color: #53c896; transform: translateY(-2px); }
.footer-led { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: #51ba87; }

@media (max-width: 1420px) {
  .area-grid, .footer-inner { margin-left: 5%; margin-right: 5%; }
}
@media (max-width: 900px) {
  .hero { min-height: 610px; }
  .hero-forest { width: 80%; }
  .hero-shade { background: linear-gradient(90deg, #04100d 0%, rgba(4,16,13,.97) 32%, rgba(4,16,13,.75) 67%, rgba(4,16,13,.25) 100%); }
  .hero-tagline { white-space: normal; max-width: 720px; }
  .area-grid { gap: 14px; }
  .area { padding: 22px 20px; min-height: 245px; }
}
@media (max-width: 650px) {
  .hero { min-height: 565px; }
  .hero-forest { width: 100%; opacity: .7; }
  .hero-shade { background: linear-gradient(90deg, rgba(4,16,13,.98) 0%, rgba(4,16,13,.87) 65%, rgba(4,16,13,.54) 100%), linear-gradient(0deg, #04100d 0%, transparent 42%); }
  .hero-inner { padding: 0 7%; }
  .site-header { height: 126px; padding-top: 26px; }
  .brand { font-size: 19px; }
  .hero-copy { padding-top: 0; }
  .eyebrow { font-size: 10px; letter-spacing: .14em; gap: 10px; margin-bottom: 27px; }
  .eyebrow-line { width: 26px; }
  h1 { font-size: clamp(52px, 12vw, 72px); }
  .hero-tagline { font-size: clamp(29px, 7vw, 38px); line-height: 1.25; margin-top: 29px; }
  .hero-description { font-size: 12px; line-height: 1.8; }
  .hero-description br { display: none; }
  .area-grid { grid-template-columns: 1fr; margin: 0 6%; gap: 13px; }
  .area { min-height: 175px; padding: 23px; }
  .area-icon { width: 34px; height: 34px; margin-bottom: 13px; }
  .area h2 { font-size: 18px; margin-bottom: 8px; }
  .area p { max-width: unset; font-size: 13px; }
  .footer-inner { min-height: 100px; margin: 0 6%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; font-size: 10px; }
  .footer-left { gap: 12px; }
  .footer-right { padding-left: 25px; gap: 11px; }
}

/*
 * Desktop vizitka: cely obsah se musi vejit do vysky viewportu.
 * Nemaskujeme scrollbar ani neschovavame obsah pomoci overflow-y: hidden.
 * Na mobilu zustava prirozene vertikalni scrollovani.
 */
@media (min-width: 901px) {
  .site {
    display: flex;
    flex-direction: column;
    height: 100vh;   /* Fallback pro starsi prohlizece. */
    height: 100dvh;  /* Skutecna dostupna vyska okna. */
  }
  .hero {
    flex: 1 1 auto;
    min-height: 0;
  }
  .areas {
    flex: 0 0 auto;
    padding: clamp(12px, 1.8dvh, 26px) 0;
  }
  .area {
    min-height: clamp(180px, 19dvh, 236px);
    padding-top: clamp(17px, 2dvh, 25px);
    padding-bottom: clamp(17px, 2dvh, 25px);
  }
  .area-icon {
    width: clamp(34px, 4.5dvh, 47px);
    height: clamp(34px, 4.5dvh, 47px);
    margin-bottom: clamp(10px, 2dvh, 25px);
  }
  .site-footer { flex: 0 0 auto; }
  .footer-inner { min-height: clamp(44px, 5.6dvh, 70px); }
}

/* Nizka desktopova okna: zmensit jen vertikalni rytmus. */
@media (min-width: 901px) and (max-height: 800px) {
  .site-header { height: 94px; padding-top: 22px; }
  .hero-copy { padding-top: 8px; }
  .eyebrow { margin-bottom: 14px; }
  h1 { font-size: clamp(63px, 6.2vw, 92px); }
  .hero-tagline {
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: clamp(29px, 3.2vw, 43px);
  }
  .hero-description { font-size: 14px; line-height: 1.55; }
}

/* Extremne nizka okna a vyssi zoom: uprednostnit citelnost pred fixni vyskou. */
@media (min-width: 901px) and (max-height: 700px) {
  .site { height: auto; min-height: 100dvh; }
  .hero { min-height: 440px; }
}