/* ═══════════════════════════════════════════════════════════
   DOVEZU.CZ — landing page
   Stejný systém jako kurýrní aplikace (app/app.css):
   světlá plocha, černý text, JEDNA zelená jako akcent,
   žádné rámečky kolem karet, jeden řez písma, hodně vzduchu.
   ═══════════════════════════════════════════════════════════ */

:root{
  --green:      #30ab59;   /* plochy a grafika */
  --green-btn:  #137a3f;   /* tlačítka a akcentový text, bílá na tom 5,4:1 */
  --green-deep: #0a3620;   /* tmavé plochy */
  --green-soft: #e8f4ec;

  --ink:      #101010;
  --ink-2:    #3d3d42;
  --muted:    #6b6b74;     /* 4,78:1 i na šedém #f4f4f2 */
  --line:     #ebebe8;
  --bg:       #f4f4f2;
  --surface:  #ffffff;

  --amber:    #ffb627;
  --warn:     #b8331a;

  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r:    16px;
  --r-lg: 24px;
  --wrap: 1240px;
  --pad:  clamp(20px, 4.5vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(15.5px,.35vw + 14.8px,17px);
  line-height:1.5;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; text-wrap:pretty; }

h1,h2,h3{
  margin:0; font-family:var(--body); font-weight:700;
  line-height:1.08; letter-spacing:-.032em; color:var(--ink);
  text-wrap:balance;
}
h1 em,h2 em,h3 em{ font-style:normal; color:var(--green-btn); }

/* dvouřádkový nadpis: první řádek černý, druhý zelený */
.ser,.sans{ display:block; }
.sans{ color:var(--green-btn); }

/* drobné štítky — obyčejný sans, žádný mono */
.mono{
  font-family:var(--body); font-size:.8rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--muted);
}

::selection{ background:var(--green-soft); color:var(--green-deep); }
:focus-visible{ outline:2.5px solid var(--green-btn); outline-offset:3px; border-radius:8px; }
.section--ink :focus-visible,.footer :focus-visible,.cta :focus-visible{ outline-color:#fff; }

.skip-link{
  position:absolute; left:14px; top:-100px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:99px;
  font-weight:600; text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:14px; }

/* ── Layout ────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:840px; }

.section{ padding-block:clamp(64px,8vw,120px); position:relative; }
.section--ink{ background:var(--ink); color:rgba(255,255,255,.72); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#fff; }


.sec-head{ margin-bottom:clamp(32px,4vw,54px); }

.sec-title{ font-size:clamp(2.1rem,5.4vw,3.6rem); max-width:15ch; text-wrap:balance; }
.sec-lead{ margin-top:1em; max-width:52ch; font-size:clamp(1rem,1.3vw,1.08rem); color:var(--muted); }


/* ── Tlačítka ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:16px 28px; border:0; border-radius:14px;
  background:var(--green-btn); color:#fff;
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:background .18s, transform .12s;
}
.btn:hover{ background:var(--green-deep); }
.btn:active{ transform:scale(.985); }
.btn--lg{ padding:18px 32px; font-size:1.04rem; }
.btn--pill{ padding:12px 22px; font-size:.94rem; border-radius:99px; }
.btn--full{ width:100%; }
.btn--ink{ background:#fff; color:var(--ink); }
.btn--ink:hover{ background:var(--bg); }
.btn--outline{ background:var(--line); color:var(--ink); }
.btn--outline:hover{ background:#e0e0dc; }


/* ── Navigace ──────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{ max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad); display:flex; align-items:center; gap:20px; }
.nav__logo img{ width:clamp(118px,15vw,150px); }
.nav__links{ display:none; margin-left:auto; gap:clamp(18px,2.4vw,34px); }
.nav__links a{ font-size:.95rem; font-weight:500; text-decoration:none; color:var(--ink-2); padding:8px 0; transition:color .18s; }
.nav__links a:hover{ color:var(--green-btn); }
.nav__cta{ display:none; }

.nav__burger{
  margin-left:auto; width:44px; height:44px; padding:13px 11px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--surface); border:0; border-radius:99px; cursor:pointer;
}
.nav__burger span{ display:block; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.1px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.1px) rotate(-45deg); }

.nav__mobile{ display:flex; flex-direction:column; padding:6px var(--pad) 24px; background:var(--bg); border-top:1px solid var(--line); }
.nav__mobile[hidden]{ display:none; }
.nav__mobile a{
  display:flex; align-items:center; gap:.7em; padding:15px 2px; text-decoration:none;
  font-weight:600; font-size:1.1rem; color:var(--ink); border-bottom:1px solid var(--line);
}
.nav__mobile i{ font-style:normal; color:var(--muted); font-size:.8rem; }
.nav__mobile-cta{ margin-top:18px; border-bottom:0 !important; justify-content:center; color:#fff !important; }

@media (min-width:1000px){
  .nav__burger,.nav__mobile{ display:none !important; }
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero{ padding-top:clamp(20px,3vw,40px); }
.hero__grid{ display:grid; gap:clamp(32px,5vw,52px); padding-block:clamp(16px,3vw,32px) clamp(48px,6vw,76px); }
.hero__title{ font-size:clamp(2.8rem,8.5vw,5rem); letter-spacing:-.042em; margin-bottom:.45em; }
.hero__lead{ font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--muted); max-width:38ch; }
.hero__lead strong{ color:var(--ink); font-weight:600; }
.hero__lead .u{ background:var(--green-soft); box-shadow:0 0 0 4px var(--green-soft); border-radius:2px; color:var(--green-deep); }

.proof{ display:flex; align-items:center; gap:16px; margin-top:2em; }
.proof__faces{ display:flex; flex:0 0 auto; }
.proof__faces img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--bg); }
.proof__faces img + img{ margin-left:-16px; }
.proof p{ font-size:.92rem; color:var(--muted); line-height:1.45; }
.proof strong{ color:var(--ink); font-weight:600; }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:0; padding-top:1.7em; border-top:1px solid var(--line);
}
.hero__stats dt{ font-size:clamp(1.3rem,3.2vw,1.7rem); font-weight:700; letter-spacing:-.035em; color:var(--ink); line-height:1; }
.hero__stats dd{ margin:.5em 0 0; color:var(--muted); line-height:1.4; font-size:.82rem; }

@media (min-width:900px){
  .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); grid-template-rows:auto 1fr;
    align-items:start; gap:clamp(26px,3.2vw,48px) clamp(30px,4vw,64px); }
  .hero__copy { grid-column:1; grid-row:1; padding-top:clamp(8px,2.5vw,36px); }
  .hero__stats{ grid-column:1; grid-row:2; align-self:start; }
  .hero__form { grid-column:2; grid-row:1 / span 2; }
}

/* ── Formulář ──────────────────────────────────────────── */
.hero__form{ scroll-margin-top:90px; }
.form{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); display:grid; gap:17px; }
.form__head h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); }

.field{ display:grid; gap:6px; border:0; padding:0; margin:0; min-width:0; }
.field > label,.field legend{ font-size:.86rem; font-weight:600; color:var(--ink); padding:0; }
.field .hint{ font-weight:400; color:var(--muted); font-size:.8rem; }
.req{ color:var(--green-btn); }
.field-row{ display:grid; gap:17px; }
@media (min-width:520px){ .field-row{ grid-template-columns:1fr 1fr; } }

.form input[type="text"],.form input[type="tel"],.form input[type="email"],
.form select,.form textarea{
  width:100%; padding:14px 15px;
  background:var(--bg); border:1.5px solid transparent; border-radius:12px;
  font-size:.97rem; color:var(--ink);
  transition:border-color .18s, background .18s;
}
.form textarea{ resize:vertical; min-height:84px; font-family:var(--body); }
.form select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("assets/icons/sipka-dolu.png");
  background-size:17px 17px; background-repeat:no-repeat; background-position:right 14px center;
}
.form input::placeholder,.form textarea::placeholder{ color:#9a9aa0; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:0; background:var(--surface); border-color:var(--green-btn); }
.form [aria-invalid="true"]{ border-color:var(--warn) !important; }
.field__err{ font-size:.8rem; font-weight:500; color:var(--warn); }
.field__err:empty{ display:none; }

.pickers{ display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick span{
  display:inline-flex; align-items:center; gap:.4em;
  padding:10px 15px; border-radius:99px; background:var(--bg);
  font-size:.87rem; font-weight:500; color:var(--ink-2);
  cursor:pointer; user-select:none; transition:all .16s;
}
.pick:hover span{ background:var(--green-soft); }
.pick input:checked + span{ background:var(--green-btn); color:#fff; font-weight:600; }
.pick input:focus-visible + span{ outline:2.5px solid var(--green-btn); outline-offset:2px; }

.more{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.more summary{ list-style:none; cursor:pointer; position:relative; padding:15px 30px 15px 0; font-size:.9rem; font-weight:600; color:var(--ink); }
.more summary::-webkit-details-marker{ display:none; }
.more summary::after{
  content:""; position:absolute; right:2px; top:50%; margin-top:-8px; width:16px; height:16px;
  background:url("assets/icons/plus.png") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.more[open] summary::after{ transform:rotate(135deg); }
.more__body{ display:grid; gap:16px; padding-bottom:18px; }

.check{ display:grid; gap:12px; }
.check__row{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:.87rem; color:var(--muted); line-height:1.5; }
.check__row input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:24px; height:24px; margin-top:1px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:7px; cursor:pointer; transition:all .16s;
}
.check__row input:checked{ background:var(--green-soft) url("assets/icons/fajfka.png") center/15px no-repeat; border-color:var(--green-btn); }
.check__row input:focus-visible{ outline:2.5px solid var(--green-btn); outline-offset:2px; }
.check__row strong{ color:var(--ink); font-weight:600; }
.form__foot{ text-align:center; color:var(--muted); }

.success{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(34px,4.6vw,54px) clamp(24px,3vw,36px); text-align:center; }
.success[hidden]{ display:none; }
.success__mark{ width:68px; height:68px; margin:0 auto 22px; display:grid; place-items:center; background:var(--green-soft); border-radius:50%; }
.success__ico{ width:38px; height:38px; }
.success h2{ font-size:1.8rem; margin-bottom:.4em; }
.success p{ color:var(--muted); }
.success__meta{ margin-top:1em; font-size:.9rem; }
.success__meta a{ color:var(--green-btn); font-weight:600; }
.success .btn{ margin-top:24px; }

/* ── Běžící pás ────────────────────────────────────────── */
.marquee{ background:var(--ink); color:#fff; padding:clamp(14px,1.8vw,20px) 0; overflow:hidden; }
.marquee__track{ display:flex; width:max-content; animation:scroll 46s linear infinite; }
.marquee__group{
  display:flex; align-items:center; gap:clamp(18px,2.6vw,32px);
  padding-right:clamp(18px,2.6vw,32px);
  font-weight:600; font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:-.02em; white-space:nowrap;
}
.marquee__group i{ font-style:normal; display:flex; }
.marquee__group .ico{ width:clamp(15px,2vw,22px); height:auto; }
.marquee__group .is-out{ color:var(--green); }
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── Video ─────────────────────────────────────────────── */
.showreel{ background:var(--bg); padding-block:clamp(56px,7vw,100px) clamp(24px,3vw,48px); }
.showreel__head{ display:grid; justify-items:center; gap:14px; text-align:center; margin-bottom:clamp(28px,3.6vw,46px); }
.showreel__title{ font-size:clamp(2rem,5.4vw,3.4rem); }
.showreel__head p{ max-width:46ch; color:var(--muted); font-size:clamp(.95rem,1.3vw,1.05rem); }

/* Video se při scrollu rozevírá z malého čtverce do plné šířky.
   Řešeno clip-path, ne šířkou — jinak by se každý snímek přepočítával layout.
   Rám je vždy 16:9, takže výřez 22,5 % / 34,55 % dá přesně čtverec.
   Výchozí --p:1 znamená, že bez JS je video rovnou celé. */
.showreel__frame{
  --p:1;
  position:relative; width:calc(100% - 2 * clamp(12px,2.6vw,44px)); max-width:1600px;
  margin-inline:auto; aspect-ratio:16/9; border-radius:clamp(16px,2vw,28px);
  overflow:hidden; background:var(--ink);
  clip-path:inset(
    calc((1 - var(--p)) * 22.5%) calc((1 - var(--p)) * 34.55%)
    round calc(clamp(16px,2vw,28px) + (1 - var(--p)) * 40px)
  );
  will-change:clip-path;
}
/* Dokud je rám malý, ovládání nedává smysl. visibility (ne jen opacity)
   ho zároveň vyřadí z hit-testu, takže na něj nejde omylem kliknout.
   Třídu přidává JS — bez JS zůstane ovládání viditelné. */
.showreel__frame.is-small .showreel__controls{ opacity:0; visibility:hidden; }
.showreel__controls{ transition:opacity .25s; }
.showreel__video{ width:100%; height:100%; object-fit:cover; display:block; }

.showreel__controls{ position:absolute; right:clamp(10px,1.4vw,18px); bottom:clamp(10px,1.4vw,18px);
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.showreel__btn{
  display:inline-flex; align-items:center; gap:.5em; padding:10px 16px 10px 13px;
  background:rgba(16,16,16,.86); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:0; border-radius:99px; cursor:pointer; font-size:.84rem; font-weight:600;
  transition:background .18s;
}
.showreel__btn:hover{ background:var(--ink); }
.showreel__icon,.showreel__speaker{
  width:20px; height:20px; flex:0 0 auto;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}
.showreel__icon{ background-image:url("assets/icons/pozastavit.png"); }
#showreelToggle[aria-pressed="true"] .showreel__icon{ background-image:url("assets/icons/spustit.png"); }
.showreel__speaker{ background-image:url("assets/icons/zvuk-vypnut.png"); }
#showreelSound[aria-pressed="true"] .showreel__speaker{ background-image:url("assets/icons/zvuk-zapnut.png"); }

/* ── Editoriální seznam ────────────────────────────────── */
.list{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden; }
.list__row{ display:grid; gap:6px 24px; padding:clamp(20px,2.6vw,30px) clamp(20px,2.4vw,28px); }
.list__row + .list__row{ border-top:1px solid var(--line); }
.list__num{ color:var(--green-btn); font-weight:700; }
.list__row h3{ display:flex; align-items:center; gap:.45em; font-size:clamp(1.2rem,2.4vw,1.6rem); }
.list__ico{ width:clamp(32px,3.6vw,42px); height:auto; flex:0 0 auto; }
.list__row p{ color:var(--muted); max-width:54ch; font-size:.95rem; }
/* Baseline tu nefunguje: h3 je flex a jeho první položka je obrázek,
   jehož baseline je spodní hrana. Číslo i text se pak propadly pod nadpis. */
@media (min-width:760px){
  .list__row{ grid-template-columns:auto minmax(0,1fr) minmax(0,1fr); align-items:center; }
}

.note{
  display:flex; gap:13px; align-items:center;
  margin-top:12px; padding:18px 22px; background:var(--green-soft);
  border-radius:var(--r); font-size:.94rem; color:var(--green-deep);
}
.note__ico{ width:28px; height:28px; flex:0 0 auto; }
.note strong{ font-weight:700; }

/* ── Kroky ─────────────────────────────────────────────── */
/* Stepper: kolečko s ikonou, číslo jako odznak a spojnice
   mezi kroky, ať je vidět, že jde o postup, ne o čtyři boxy.
   Rozměr kolečka a mezera jsou proměnné, protože z nich počítá
   i poloha spojnice. */
.steps{
  --ik:clamp(52px,5vw,62px);
  --mezera:clamp(26px,3vw,36px);
  display:grid; gap:var(--mezera);
}
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.step{ position:relative; }
.step__ico{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:var(--ik); height:var(--ik); margin-bottom:18px;
  border-radius:50%; background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.step__ico img{ width:54%; height:auto; }
.step__num{
  position:absolute; right:-4px; bottom:-2px;
  min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:99px;
  background:var(--green); color:var(--ink);
  font-size:.68rem; font-weight:700; line-height:1;
}
.step h3{ font-size:clamp(1.15rem,2.2vw,1.4rem); margin-bottom:.45em; }
.step p{ font-size:.92rem; color:rgba(255,255,255,.72); max-width:30ch; }

/* Spojnice: svislá pod sebou na mobilu, vodorovná mezi sloupci.
   Geometrie se nastavuje zvlášť od content, ať poslednímu kroku
   v řádku nezůstane viset prázdný nulový pseudoprvek. */
.step::after{ position:absolute; z-index:0; background:rgba(255,255,255,.18); }

@media (max-width:639px){
  .step:not(:last-child)::after{
    content:"";
    left:calc(var(--ik) / 2 - .5px); width:1px;
    top:var(--ik); bottom:calc(var(--mezera) * -1);
  }
}
@media (min-width:640px){
  .step:not(:last-child)::after{
    top:calc(var(--ik) / 2 - .5px); height:1px;
    left:var(--ik); right:calc(var(--mezera) * -1);
  }
  /* ve dvou sloupcích končí řádek každým sudým krokem */
  .step:not(:nth-child(2n)):not(:last-child)::after{ content:""; }
}
@media (min-width:1000px){
  /* ve čtyřech sloupcích vedou spojnice přes celou řadu */
  .step:not(:last-child)::after{ content:""; }
}

/* ── Pilulky a kdo jezdí ───────────────────────────────── */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pills li{
  display:inline-flex; align-items:center; gap:.45em; padding:12px 20px; border-radius:99px;
  background:var(--surface); font-weight:500; font-size:.95rem; color:var(--ink);
  transition:background .18s;
}
.pills li:hover{ background:var(--green-soft); }
.pills li.is-ghost{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--muted); }


@media (min-width:620px){ .who{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .who{ grid-template-columns:repeat(3,1fr); } }

.who__item .mono{ display:block; color:var(--green-btn); margin-bottom:1.3em; }


/* ── Kalkulačka ────────────────────────────────────────── */
.calc-wrap{ display:grid; gap:clamp(32px,4.5vw,60px); align-items:center; }
@media (min-width:1000px){ .calc-wrap{ grid-template-columns:1fr minmax(0,450px); } }
.calc-copy .sec-head{ margin-bottom:0; }


@media (min-width:430px){ .seg{ grid-template-columns:repeat(3,1fr); } }


/* ── FAQ ───────────────────────────────────────────────── */
.faq{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden; }
.faq__item + .faq__item{ border-top:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:clamp(18px,2.2vw,24px) 56px clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
  font-weight:700; font-size:clamp(1rem,1.8vw,1.2rem); letter-spacing:-.02em; color:var(--ink);
  transition:color .18s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:clamp(18px,2.2vw,26px); top:50%; width:20px; height:20px; margin-top:-10px;
  background:url("assets/icons/plus.png") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item summary:hover{ color:var(--green-btn); }
.faq__body{ padding:0 clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px); }
.faq__body p{ color:var(--muted); max-width:62ch; }

/* ── Závěrečné CTA ─────────────────────────────────────── */
.cta{ background:var(--green-deep); color:rgba(255,255,255,.78); padding-block:clamp(64px,8vw,116px); }
.cta__inner{ display:grid; justify-items:center; gap:22px; text-align:center; }
.cta__title{ font-size:clamp(2.2rem,6vw,4rem); color:#fff; }
.cta__title .sans{ color:var(--green); }
.cta__inner .mono{ color:rgba(255,255,255,.7); }

/* ── Patička ───────────────────────────────────────────── */
.footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-top:clamp(48px,5vw,72px); }
.footer__grid{ display:grid; gap:32px; padding-bottom:clamp(34px,4vw,52px); }
@media (min-width:640px){ .footer__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .footer__grid{ grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; } }
.footer__brand img{ width:160px; margin-bottom:18px; }
.footer__brand p{ font-size:.92rem; max-width:34ch; }
.footer__col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.footer__col h3{ color:var(--green); margin-bottom:5px; font-size:.8rem; font-weight:700; }
.footer__col a{ font-size:.93rem; text-decoration:none; padding-block:3px; transition:color .18s; }
.footer__col a:hover{ color:#fff; }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;
  padding-block:22px; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7);
}
.footer__legal a{ text-decoration:none; display:inline-block; padding-block:5px; }
.footer__legal a:hover{ color:#fff; text-decoration:underline; }

/* ── Ilustrované ikony ─────────────────────────────────── */
.ico{ width:1.45em; height:1.45em; object-fit:contain; flex:0 0 auto; }
.pick span,.seg__opt span,.pills li{ display:inline-flex; align-items:center; gap:.4em; }

/* ── Odhalování při scrollu ────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
.js .pills li.reveal{ transform:translateY(10px); }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee__track{ animation:none !important; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media print{
  .nav,.marquee,.cta,.showreel{ display:none; }
  body{ background:#fff; }
  .section--ink,.footer{ background:#fff !important; color:#000 !important; }
  .section--ink h2{ color:#000 !important; }
}

/* ── Hlavička sekce do dvou sloupců ────────────────────── */
/* ── Mapa s kurýry ─────────────────────────────────────── */
.citymap{ margin-top:clamp(44px,5.5vw,76px); }


/* stejný formát jako video */
.citymap__frame{
  position:relative; overflow:hidden;
  width:calc(100% - 2 * clamp(12px,2.6vw,44px)); max-width:1600px;
  margin-inline:auto; aspect-ratio:16/9;
  border-radius:clamp(16px,2vw,28px); background:var(--line);
}


/* dojezdový okruh — šířka v % rámu, aspect-ratio z něj udělá kruh */
.radius{
  position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  width:26.4%; aspect-ratio:1; border-radius:50%;
  background:rgba(48,171,89,.16);
  box-shadow:inset 0 0 0 2px rgba(19,122,63,.4);
}


/* ── Čím jezdit: lehčí dvousloupcové rozvržení ──────────
   Vlevo malá mapa jako widget, vpravo pro koho to je a čím se jezdí. */
.ride{ display:grid; gap:clamp(24px,3.5vw,44px); align-items:center; }
@media (min-width:900px){ .ride{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }

.ride__map{
  position:relative; overflow:hidden;
  aspect-ratio:400/260; border-radius:var(--r-lg); background:transparent;
}
.ride__map > svg{ width:100%; height:100%; display:block; }

.ride__who{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--ink-2); max-width:46ch; }
.ride__who strong{ color:var(--ink); font-weight:600; }
.ride__pills{ margin-top:clamp(20px,2.6vw,28px); }

/* v malém widgetu drobnější špendlíky a okruhy */
.ride__map .radius{ width:26%; }
.ride__map .driver img{ width:clamp(30px,3.4vw,42px); height:clamp(30px,3.4vw,42px); }
.ride__map .driver__tag{ font-size:.66rem; padding:4px 9px; }


/* ── Kreslená mapa ─────────────────────────────────────
   Vlastní grafika místo dlaždic OpenStreetMap: ulice, bloky,
   park a řeka. Není to reálná mapa, takže odpadá i atribuce. */
.ride__svg{ width:100%; height:100%; display:block; }

/* ── Kurýři na mapě ────────────────────────────────────
   Okruh: šířka v % rámu + aspect-ratio, aby zůstal kruhový
   při každé velikosti. Pozice se zadává přes --x / --y v %. */
.radius{
  position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1; border-radius:50%;
  background:rgba(48,171,89,.16);
  box-shadow:inset 0 0 0 2px rgba(19,122,63,.4);
}
.driver{
  position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  display:grid; justify-items:center; gap:7px;
}
.driver img{
  width:clamp(30px,3.4vw,44px); height:clamp(30px,3.4vw,44px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 4px 12px rgba(16,16,16,.28);
}
.driver__tag{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  background:var(--surface); color:var(--ink);
  padding:4px 10px; border-radius:99px;
  font-size:clamp(.64rem,.85vw,.74rem); font-weight:600;
  box-shadow:0 2px 8px rgba(16,16,16,.16);
}
.driver__dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto; }