/* Zaklad prevzaty z awesomic.com. Hodnoty jsou z jejich stylesheetu,
   prepsane do nasich nazvu, aby sla sekce vzit a vlozit do Clean&Play
   bez prestylovavani. Pismo je DM Sans, jejich Cosmica je licencovana. */
:root{
  --zinc-0:#ffffff; --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-150:#ececee;
  --zinc-200:#e4e4e7; --zinc-300:#d4d4d8; --zinc-400:#a1a1aa; --zinc-500:#71717a;
  --zinc-600:#52525b; --zinc-700:#3f3f46; --zinc-800:#27272a; --zinc-900:#18181b;
  --zinc-950:#09090b;
  --white-10:rgba(255,255,255,.1); --white-20:rgba(255,255,255,.2);
  --white-40:rgba(255,255,255,.4); --white-60:rgba(255,255,255,.6);
  --white-80:rgba(255,255,255,.8); --white-90:rgba(255,255,255,.9);

  --r-chip:12px; --r-button:14px; --r-inner:28px; --r-card:36px;
  --r-icon:40px; --r-media:48px; --r-pill:10000px;

  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-36:36px; --sp-40:40px;
  --sp-48:48px; --sp-64:64px; --sp-68:68px; --sp-80:80px; --sp-120:120px;

  --container:1200px; --container-1280:1280px; --container-1344:1344px;
  --gutter:80px;

  --fs-10:10px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-32:32px; --fs-40:40px;
  --fs-56:56px; --fs-64:64px;
  --lh-125:1.25; --lh-128:1.28; --lh-135:1.35; --lh-145:1.45; --lh-148:1.48;
  --lh-150:1.5; --lh-155:1.55; --lh-156:1.56; --lh-164:1.64; --lh-168:1.68; --lh-180:1.8;

  /* Prstenec je zamerne stejny jako vypln (--zinc-950). V predloze byl seda
     rgb(44,46,52), protoze tam tlacitka sedi na sedych a tmavych plochach a
     prstenec tam splyne s pozadim. U nas sedi na bilych kartach, kde seda
     obruba kolem cerneho tvaru cetla jako druhy odlepeny obrys.
     Prvni dva radky jsou vnitrni svetlo shora, posledni je vrzeny stin. */
  --shadow-cta:inset 0 .5px 0 0 rgba(255,255,255,.5),
               inset 0 9px 14px -5px rgba(117,123,133,.4),
               0 0 0 1.5px var(--zinc-950),
               0 4px 6px 0 rgba(0,0,0,.14);
  --shadow-card:0 4px 12px 0 rgba(0,0,0,.04);
  --shadow-inset-top:inset 0 1px 0 0 rgb(228,228,231);
  --shadow-inset-hair:inset 0 .5px 0 0 #ffffff;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--zinc-0); color:var(--zinc-950);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-optical-sizing:none;
  font-size:var(--fs-15); line-height:var(--lh-145);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.container{ width:100%; max-width:calc(var(--container) + 2*var(--gutter));
  margin-inline:auto; padding-inline:var(--gutter); }
.container-1280{ max-width:calc(1280px + 2*var(--gutter)); }

/* Sekce se na sebe nasouvaji se zaoblenymi hornimi rohy, presne jak to delaji oni */
.section{ position:relative; padding-block:var(--sp-80); }
.section-radius{ border-start-start-radius:48px; border-start-end-radius:48px;
  /* Bez tohoto prekryvu odkryva zakulaceny roh pozadi body, tedy bilou,
     i tam, kde je predchozi sekce seda. Prekryv zaridi, ze roh odkryva
     skutecne to, co je nad nim. Obsah se nehne, odsazeni prekryv vyrovna. */
  position:relative; margin-block-start:-48px; padding-block-start:48px; }
.section-move-top{ margin-block-start:-48px; }
.bg-white{ background:var(--zinc-0); }
.bg-gray-100{ background:var(--zinc-100); }
.bg-dark{ background:var(--zinc-900); color:var(--zinc-0); }

/* Komponenty s jejich namerenymi hodnotami */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; text-decoration:none;
  border-radius:var(--r-button); padding:12px 16px;
  font-size:var(--fs-14); line-height:var(--lh-145); }
.btn--primary{ background:var(--zinc-950); color:var(--zinc-0);
  /* Obruba drzi presne rozmery z predlohy, ale barvu ma stejnou jako vypln.
     Puvodni bila white-20 delila vypln od sedeho prstence. Kdyz je prstenec
     stejny jako vypln, zbyla by z ni jen svetla linka obtazena kolem dokola,
     tedy zase druhy obrys. Plasticitu drzi vnitrni svetlo shora v --shadow-cta. */
  border:.5px solid var(--zinc-950);
  font-size:var(--fs-13); font-weight:500; line-height:1.25;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-cta); }
.btn--white{ background:var(--zinc-50); color:var(--zinc-900);
  border:1px solid var(--zinc-0); }
.btn--white:hover{ background:var(--zinc-0); }
.btn--large{ border-radius:16px; padding:14px 18px; font-size:var(--fs-15); line-height:var(--lh-135); }
.btn--glass{ background:var(--white-10); backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px); color:var(--zinc-0);
  box-shadow:var(--shadow-inset-hair); }
.btn--glass:hover{ background:var(--white-20); }
.btn--pill{ border-radius:var(--r-pill); min-height:44px; }

.card{ background:var(--zinc-0); border:1px solid var(--zinc-150);
  border-radius:var(--r-card); padding:var(--sp-28); }
.chip{ display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--zinc-150); border-radius:var(--r-chip);
  padding:4px 8px; font-size:var(--fs-13); color:var(--zinc-900); }
.chip--filled{ background:var(--zinc-700); color:var(--zinc-50); border-color:transparent; }
.input{ border:1px solid var(--zinc-100); border-radius:var(--r-button);
  height:46px; padding:12px 16px; font-size:var(--fs-15); line-height:var(--lh-135);
  transition:.25s; width:100%; }
.input::placeholder{ color:var(--zinc-500); }
.form-label{ color:var(--zinc-900); font-size:var(--fs-13); font-weight:600; }

.t-display{ font-size:var(--fs-64); line-height:1.12; font-weight:600; }
.t-h1{ font-size:var(--fs-56); line-height:var(--lh-128); font-weight:600; }
.t-h2{ font-size:var(--fs-40); line-height:var(--lh-128); font-weight:600; }
.t-h3{ font-size:var(--fs-32); line-height:var(--lh-150); font-weight:600; }
.t-sub{ font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; }
.t-body-lg{ font-size:var(--fs-18); line-height:var(--lh-145); }
.t-body{ font-size:var(--fs-15); line-height:var(--lh-145); }
.t-ui{ font-size:var(--fs-14); line-height:var(--lh-145); }
.t-meta{ font-size:var(--fs-13); line-height:var(--lh-164); color:var(--zinc-500); }
.t-caption{ font-size:var(--fs-12); line-height:var(--lh-164); color:var(--zinc-500); }