/* ============================================================
   SVĚTLÁ = výchozí. Tmavá se zapne podle nastavení počítače
   (prefers-color-scheme), nebo ručně přes <html data-theme="dark">.
   Barvy jsou jen tady v tokenech — níže v CSS už žádný hex.
   ============================================================ */
:root{
  --blue:#2B5FC4;
  --bg:#F7FAFF;
  --surface:rgba(255,255,255,.78);
  --well:#EDF2FD;
  --band:rgba(255,255,255,.5);
  --foot:rgba(255,255,255,.7);
  --line:rgba(43,95,196,.15);

  --ink:#101B3D;
  --strong:#0B1430;
  --body:#5B6B91;
  --faint:#8694B5;

  --grid:rgba(43,95,196,.10);
  --glow-1:rgba(77,139,245,.18);
  --glow-2:rgba(43,95,196,.11);
  --glow-3:rgba(31,63,143,.07);

  --shadow-card:0 24px 60px -28px rgba(16,27,61,.40);
  --shadow-media:0 18px 44px -20px rgba(16,27,61,.35);
  --inset:inset 0 0 0 1px rgba(255,255,255,.5);

  --logo-a:#3C7BE8;
  --logo-b:#16265C;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#4D8BF5;
    --bg:#060B1A;
    --surface:rgba(16,26,58,.55);
    --well:#0A1226;
    --band:rgba(10,17,41,.45);
    --foot:rgba(6,11,26,.6);
    --line:rgba(77,139,245,.16);

    --ink:#EAF0FF;
    --strong:#FFFFFF;
    --body:#95A5C8;
    --faint:#6B7CA3;

    --grid:rgba(77,139,245,.11);
    --glow-1:rgba(77,139,245,.20);
    --glow-2:rgba(43,95,196,.13);
    --glow-3:rgba(31,63,143,.10);

    --shadow-card:0 30px 80px -30px rgba(0,0,0,.8);
    --shadow-media:0 20px 50px -22px rgba(0,0,0,.9);
    --inset:inset 0 0 0 1px rgba(255,255,255,.02);

    --logo-a:#8FB4FF;
    --logo-b:#4D8BF5;
  }
}

/* ruční přepnutí — přebije nastavení OS v obou směrech */
:root[data-theme="dark"]{
  --blue:#4D8BF5;
  --bg:#060B1A;
  --surface:rgba(16,26,58,.55);
  --well:#0A1226;
  --band:rgba(10,17,41,.45);
  --foot:rgba(6,11,26,.6);
  --line:rgba(77,139,245,.16);

  --ink:#EAF0FF;
  --strong:#FFFFFF;
  --body:#95A5C8;
  --faint:#6B7CA3;

  --grid:rgba(77,139,245,.11);
  --glow-1:rgba(77,139,245,.20);
  --glow-2:rgba(43,95,196,.13);
  --glow-3:rgba(31,63,143,.10);

  --shadow-card:0 30px 80px -30px rgba(0,0,0,.8);
  --shadow-media:0 20px 50px -22px rgba(0,0,0,.9);
  --inset:inset 0 0 0 1px rgba(255,255,255,.02);

  --logo-a:#8FB4FF;
  --logo-b:#4D8BF5;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---------- POZADÍ: mřížka + záře ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(125% 85% at 14% 2%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%);
          mask-image:radial-gradient(125% 85% at 14% 2%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(65% 50% at 12% 0%,var(--glow-1),transparent 70%),
    radial-gradient(95% 65% at 55% -8%,var(--glow-2),transparent 75%),
    radial-gradient(80% 60% at 50% 115%,var(--glow-3),transparent 70%);
}
section,footer{position:relative;z-index:1}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- HERO ---------- */
.hero{background:transparent;padding:26px 0 60px;text-align:center}
.confirm{font-size:13px;color:var(--body);line-height:1.6;max-width:720px;margin:0 auto 28px}
.confirm strong{color:var(--ink);font-weight:700}
h1{
  font-size:clamp(22px,3.4vw,34px);
  font-weight:800;line-height:1.3;letter-spacing:-.01em;
  max-width:800px;margin:0 auto 20px;text-transform:uppercase;
  color:var(--strong);
}
h1 .accent{color:var(--blue)}
.lede{font-size:14px;line-height:1.75;color:var(--body);max-width:700px;margin:0 auto 36px}

/* ---------- VIDEO ---------- */
.video-card{
  background:var(--surface);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:14px;padding:14px;
  box-shadow:var(--shadow-card),var(--inset);
  max-width:860px;margin:0 auto;
}
/* 4:3 — poměr, který Vimeo hlásí pro tohle video */
/* 16:9 — poměr, který hlásí Wistia embed */
.video-frame{
  position:relative;aspect-ratio:16/9;
  background:#000;border-radius:8px;overflow:hidden;
}
.video-frame iframe,.video-frame video,.video-frame wistia-player{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* než se načte skript přehrávače, drží místo rozmazaný náhled z Wistie */
.video-frame wistia-player[media-id='ficesl2fug']:not(:defined){
  background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/ficesl2fug/swatch');
  filter:blur(5px);
}

/* ---------- VÝSLEDKY ---------- */
.results{
  background:var(--band);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0;
}
h2{font-size:clamp(19px,2.6vw,25px);font-weight:800;text-align:center;margin-bottom:34px;color:var(--strong)}
h2 .accent{color:var(--blue)}
.results-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  align-items:end;max-width:660px;margin:0 auto;
}
.case{display:flex;flex-direction:column;gap:12px;margin:0}
.case-label{font-size:13px;font-weight:700;color:var(--ink);margin:0}
.case-label .hl{color:var(--blue)}

/* 9:16 přehrávač */
.media{
  background:var(--well);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-media);
  aspect-ratio:9/16;width:100%;
}
.media video,.media iframe{
  width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000;
}
.quote{font-size:12px;line-height:1.65;color:var(--body);font-style:italic;margin:0}
.quote cite{display:block;font-style:normal;font-weight:700;color:var(--ink);margin-top:6px}

/* ---------- DŮKAZY (screenshoty) ---------- */
.proof{padding:56px 0 72px}
.proof-stack{
  max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;align-items:stretch;gap:24px;
}
.shot{
  display:block;width:100%;height:auto;
  border-radius:10px;
  box-shadow:var(--shadow-media);
  background:var(--well);
}
/* rozsazení do stran, ať to nestojí v jedné nudné lajně */
.shot--l{align-self:flex-start;max-width:92%}
.shot--r{align-self:flex-end;max-width:88%}

@media(max-width:620px){
  .shot--l,.shot--r{align-self:stretch;max-width:100%}
}

/* ---------- PATIČKA ---------- */
footer{background:var(--foot);border-top:1px solid var(--line);padding:28px 0;text-align:center}
.logo{width:120px;height:auto;margin:0 auto 16px;display:block}
.logo .word-a{stop-color:var(--logo-a)}
.logo .word-b{stop-color:var(--logo-b)}
.foot-links{font-size:11px;margin-bottom:10px}
.foot-links a{color:var(--blue);text-decoration:none;margin:0 8px}
.foot-links a:hover{text-decoration:underline}
.disclaimer{font-size:10px;line-height:1.7;color:var(--faint);max-width:720px;margin:0 auto}

@media(max-width:620px){
  body::before{background-size:48px 48px}
}
/* dva 9:16 vedle sebe fungují i na mobilu; stackujeme až na úzkých telefonech */
@media(max-width:420px){
  .results-grid{grid-template-columns:1fr;max-width:280px}
}

/* ---------- PRÁVNÍ STRÁNKY ---------- */
.legal{padding:40px 0 64px}
.legal .wrap{max-width:760px}
.legal-back{
  display:inline-block;font-size:12px;font-weight:600;
  color:var(--blue);text-decoration:none;margin-bottom:24px;
}
.legal-back:hover{text-decoration:underline}
.legal h1{
  font-size:clamp(22px,3vw,30px);text-transform:none;
  text-align:left;margin:0 0 8px;max-width:none;
}
.legal .updated{font-size:12px;color:var(--faint);margin-bottom:32px}
.legal h2{
  font-size:16px;text-align:left;margin:32px 0 12px;
  color:var(--strong);font-weight:800;
}
.legal h3{font-size:14px;margin:20px 0 8px;color:var(--ink);font-weight:700}
.legal p,.legal li{font-size:14px;line-height:1.75;color:var(--body)}
.legal p{margin-bottom:14px}
.legal ul,.legal ol{margin:0 0 16px 20px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink);font-weight:700}
.legal a{color:var(--blue)}
.legal .box{
  background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:18px 20px;margin-bottom:24px;
}
.legal .box p:last-child{margin-bottom:0}
.legal table{
  width:100%;border-collapse:collapse;margin-bottom:20px;
  font-size:13px;display:block;overflow-x:auto;
}
.legal th,.legal td{
  text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.legal th{color:var(--ink);font-weight:700;white-space:nowrap}
.legal td{color:var(--body)}
.todo{
  background:rgba(255,186,0,.12);border:1px dashed rgba(255,186,0,.5);
  border-radius:6px;padding:2px 7px;font-weight:700;color:var(--ink);
  font-size:.92em;white-space:nowrap;
}