/* ============================================================
   SNOWFAM — landing page
   Barvy a rozvržení přebrané z docs/design/design-system.html
   (závazný design systém) a docs/design/navrh-aplikace.html.
   Žádný framework, žádný JavaScript — stránka se má načíst
   na horách přes pomalé připojení.
   ============================================================ */

:root {
  --bg:            #EDF2F7;
  --bg-deep:       #DCE6F0;
  --surface:       #FFFFFF;
  --stroke:        rgba(22,32,43,.12);
  --ink:           #16202B;
  --ink-soft:      #5A6B7D;
  --ink-faint:     #92A2B3;
  --accent:        #1E5FA8;
  --accent-soft:   #E3EDF8;
  --warn:          #B8541F;

  /* obtížnost sjezdovek — signature prvek, nemění se s režimem */
  --d-novice:  #2E8B2E;
  --d-easy:    #1565C0;
  --d-inter:   #C62828;
  --d-adv:     #111111;
  --d-unknown: #8A94A0;

  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans:  -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0E1620;
    --bg-deep:     #060B12;
    --surface:     #182534;
    --stroke:      rgba(255,255,255,.14);
    --ink:         #E8EEF4;
    --ink-soft:    #9FB1C4;
    --ink-faint:   #6B7F93;
    --accent:      #6BA6E8;
    --accent-soft: rgba(107,166,232,.16);
    --warn:        #E08A57;
    --d-adv:       #4A4A4A;
    --d-unknown:   #6E7883;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1100px 700px at 15% -10%, var(--bg) 0%, var(--bg-deep) 100%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.wrap { max-width: 920px; margin: 0 auto; padding: 32px 20px 64px; }

.brand-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 600; text-decoration: none; }
.brand svg { display: block; }
.lang-switch { font-size: 13px; color: var(--ink-soft); }
.lang-switch a { text-decoration: none; font-weight: 600; }

header.hero { margin: 28px 0 48px; }
h1 { font-family: var(--serif); margin: .2em 0 0; font-size: clamp(30px, 5.2vw, 48px);
  line-height: 1.06; letter-spacing: -.02em; font-weight: 600; }
.lede { margin: .7em 0 0; max-width: 56ch; color: var(--ink-soft); font-size: 17px; }

.store-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 11px 18px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--stroke); color: var(--ink-soft); font-size: 13.5px;
  font-weight: 560; }
.store-badge b { color: var(--ink); }

section { margin-top: 56px; }
h2.kicker { font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 640; margin: 0 0 20px; }

/* --- snímky obrazovek: napodobenina telefonu, CSS/HTML mockup ---
   Skutečné aplikace ještě nejsou hotové (aplikace se staví až po
   serveru), proto tu jsou zjednodušené kopie obrazovek z návrhu
   docs/design/navrh-aplikace.html. AŽ BUDE APLIKACE HOTOVÁ,
   NAHRAĎ TYTO MOCKUPY SKUTEČNÝMI SNÍMKY OBRAZOVEK. */
.phones { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.phone-unit { text-align: center; }
.phone { width: 100%; max-width: 220px; aspect-ratio: 9/17.5; margin: 0 auto;
  border-radius: 26px; padding: 7px; background: linear-gradient(160deg, #2A3846, #0C131B);
  box-shadow: 0 18px 40px -18px rgba(10,20,30,.4); }
.phone .screen { width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column; padding: 14px 10px; }
.phone .scr-h { font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0 0 8px; }
.phone .mini { background: var(--accent-soft); border-radius: 10px; padding: 8px 9px;
  margin-bottom: 7px; text-align: left; }
.phone .mini b { display: block; font-size: 11px; font-weight: 640; color: var(--ink); }
.phone .mini span { font-size: 9.5px; color: var(--ink-soft); }
.phone .profile { display: flex; height: 5px; border-radius: 99px; overflow: hidden;
  gap: 1px; margin: 6px 0 0; }
.phone .profile span.n { background: var(--d-novice); }
.phone .profile span.e { background: var(--d-easy); }
.phone .profile span.i { background: var(--d-inter); }
.phone .profile span.a { background: var(--d-adv); }
.phone .big { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.phone .row { display: flex; justify-content: space-between; font-size: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--stroke); }
.phone .row:last-child { border: 0; }
.phone .free { color: var(--d-novice); font-weight: 640; }
.phone .cam-strip { height: 46px; border-radius: 10px; margin-bottom: 7px;
  background: linear-gradient(170deg, #8CB2D8, var(--surface)); }
.phone .pin { display: flex; align-items: center; gap: 6px; font-size: 9.5px;
  color: var(--ink-soft); margin-bottom: 6px; }
.phone .pin i { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex: none; }
.phone-cap { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.phone-cap b { display: block; color: var(--ink); font-size: 14px; font-weight: 640; }

/* --- funkce ------------------------------------------------- */
.features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--stroke); border-radius: 18px;
  padding: 20px 20px 18px; }
.feature h3 { font-family: var(--serif); margin: 0 0 8px; font-size: 19px;
  font-weight: 600; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

.note { background: var(--surface); border: 1px solid var(--stroke); border-radius: 16px;
  padding: 16px 18px; font-size: 14px; color: var(--ink-soft); max-width: 74ch; }
.note b { color: var(--ink); }

/* --- patička -------------------------------------------------- */
footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--stroke);
  font-size: 13px; color: var(--ink-faint); }
footer .links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
footer .links a { color: var(--ink-soft); text-decoration: none; font-weight: 560; }
footer .links a:hover { color: var(--accent); }
footer p { margin: 6px 0; max-width: 74ch; }

/* --- právní stránky (privacy/terms) --------------------------- */
.legal h1 { font-size: clamp(26px, 4vw, 34px); }
.legal h2 { font-family: var(--sans); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 640;
  margin: 32px 0 4px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal .updated { font-size: 13px; color: var(--ink-faint); }
.legal .lang-block { margin-top: 8px; }
.legal .lang-jump { display: flex; gap: 14px; margin: 20px 0 8px; font-size: 14px; }
.legal hr.lang-divider { border: 0; border-top: 1px solid var(--stroke); margin: 56px 0 40px; }