/* ==========================================================================
   Exportex — prezentační web
   Design: Claude Design canvas "Exportex.dc.html", varianta accent = #BE2B2B
   ========================================================================== */

/* ---------- 1. Tokeny ---------- */
:root{
  /* plochy */
  --bg-0:#070B16;
  --bg-1:#0B1220;
  --bg-2:#111A2E;

  /* text */
  --tx-1:#F5F7FA;
  --tx-2:#DCE3EF;
  --tx-3:#C8D1E3;
  --tx-4:#9AA6BF;
  --tx-5:#8894AD;
  --tx-6:#8C97AD;               /* 6.2:1 na #0B1220 — mono popisky mají 10 px */
  --tx-7:#7F8899;               /* 5.3:1 na #0B1220 */

  /* linky */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.16);

  /* akcent — firemní červená odečtená přímo z loga (#B0221A).
     Světlé odstíny jsou ručně doladěné, aby na tmavém podkladu zůstaly
     čitelné a červené (čistý mix s bílou dává růžovou). */
  --ac:#B0221A;                 /* logo, plochy, primární tlačítko */
  --ac-l:#E5544A;               /* text a odkazy — kontrast 5.4:1 na #070B16 */
  --ac-ll:#F2867C;              /* hover odkazů */
  --ac-d:#96190F;               /* hover tlačítka */
  --ac-dd:#7A1409;              /* active */
  --ac-soft:rgba(176,34,26,.28);
  --ac-glow:rgba(176,34,26,.26);
  --ac-faint:rgba(176,34,26,.13);
  --ac-line:rgba(176,34,26,.34);

  /* chyba */
  --err:#F87171;

  /* rádiusy */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

  /* liquid glass */
  --g-tint:linear-gradient(152deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 42%,rgba(255,255,255,.022) 100%);
  --g-blur:blur(22px) saturate(165%);
  --g-blur-lite:blur(13px) saturate(150%);
  --g-rim:linear-gradient(152deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.09) 34%,rgba(255,255,255,0) 58%,rgba(255,255,255,.20) 100%);
  --g-inner:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(255,255,255,.04);
  --g-drop:0 18px 44px -26px rgba(0,0,0,.92);
  --g-tile:linear-gradient(152deg,rgba(255,255,255,.085),rgba(255,255,255,.022));
  --g-tile-strong:linear-gradient(152deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
  --g-tile-hover:linear-gradient(152deg,rgba(255,255,255,.15),rgba(229,84,74,.05));
  --g-hover:linear-gradient(152deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  --sep:rgba(255,255,255,.12);          /* mezera v mřížce, čte se jako linka */
  --sheen:rgba(255,255,255,.34);        /* přejezd světla po tlačítku */
  --sheen-hi:rgba(255,255,255,.5);
  --card-hover-shadow:0 26px 52px -26px rgba(0,0,0,.95);

  /* plochy nad fotkami zůstávají tmavé v obou režimech */
  --scrim:rgba(7,11,22,.78);
  --pcard-tint:linear-gradient(180deg,rgba(7,11,22,0) 42%,rgba(7,11,22,.46) 100%);
  --about-veil:linear-gradient(180deg,rgba(7,11,22,0) 42%,rgba(7,11,22,.80) 100%);

  /* formulářová pole */
  --field-bg:rgba(7,11,22,.42);
  --field-bd:rgba(255,255,255,.13);
  --field-bg-focus:rgba(13,21,38,.6);

  /* hlavička, modal, mobilní menu */
  --hdr-bg:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(7,11,22,.62);
  --hdr-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px -24px rgba(0,0,0,.9);
  --modal-bg:linear-gradient(152deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 40%,rgba(11,18,32,.72));
  --modal-head:linear-gradient(180deg,rgba(255,255,255,.10),rgba(11,18,32,.66));
  --modal-veil:rgba(3,6,12,.78);
  --modal-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  --drawer-bg:linear-gradient(152deg,rgba(255,255,255,.09),rgba(7,11,22,.86) 45%,rgba(7,11,22,.94));
  --spec-bg:linear-gradient(152deg,rgba(255,255,255,.07),rgba(7,11,22,.34));

  /* mapa */
  --map-bg:radial-gradient(76% 130% at 42% 46%,rgba(16,25,45,.6),rgba(4,7,14,.78));
  --map-land:rgba(202,216,240,.075);
  --map-land-line:rgba(202,216,240,.13);
  --map-track:rgba(255,255,255,.17);
  --map-dot-ring:rgba(7,11,22,.9);

  /* záře v pozadí sekcí, o které se opírá sklo */
  --glow-a:rgba(176,34,26,.13);
  --glow-b:rgba(176,34,26,.09);
  --glow-c:rgba(90,120,190,.06);
  --hairline:rgba(255,255,255,.07);
  --scanlines:rgba(255,255,255,.03);

  /* motion */
  --e:cubic-bezier(.4,0,.2,1);
  --e-out:cubic-bezier(0,0,.2,1);
  --e-spring:cubic-bezier(.22,1,.36,1);
  --d-fast:150ms;
  --d-norm:220ms;
  --d-slow:340ms;

  /* layout */
  --wrap:1240px;
  --gut:32px;
  --hdr:76px;

  /* fonty */
  --f-sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (max-width:720px){ :root{ --gut:20px; --hdr:64px; } }

/* ==========================================================================
   Světlý režim
   Přepíná se atributem data-theme na <html>; výchozí je tmavý, protože na něm
   stojí identita webu. Mění se jen proměnné, žádná pravidla se nepřepisují.
   ========================================================================== */
:root[data-theme="light"]{
  --bg-0:#F4F6FA;
  --bg-1:#FFFFFF;
  --bg-2:#E6EAF2;

  --tx-1:#0C1220;
  --tx-2:#1A2233;
  --tx-3:#28313F;
  --tx-4:#4C5768;
  --tx-5:#5A6577;
  --tx-6:#5C6678;               /* 4.6:1 i na světle šedých dlaždicích */
  --tx-7:#66717F;               /* 4.6:1 na #F4F6FA */

  --line:rgba(15,23,42,.10);
  --line-2:rgba(15,23,42,.15);
  --line-3:rgba(15,23,42,.20);

  /* na světlém podkladu potřebuje akcent ztmavit, jinak neprojde kontrastem */
  --ac:#B0221A;
  --ac-l:#A31D14;               /* text a odkazy — kontrast 7.0:1 na #F4F6FA */
  --ac-ll:#7C1610;
  --ac-d:#96190F;
  --ac-dd:#7A1409;
  --ac-soft:rgba(176,34,26,.20);
  --ac-glow:rgba(176,34,26,.20);
  --ac-faint:rgba(176,34,26,.10);
  --ac-line:rgba(176,34,26,.30);

  /* sklo: bílé plochy potřebují vlastní obrys, jinak splynou s pozadím */
  --g-tint:linear-gradient(152deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.68) 45%,rgba(255,255,255,.56) 100%);
  --g-rim:linear-gradient(152deg,rgba(255,255,255,1) 0%,rgba(15,23,42,.14) 40%,rgba(15,23,42,.07) 62%,rgba(255,255,255,.9) 100%);
  --g-inner:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(15,23,42,.055);
  --g-drop:0 16px 38px -24px rgba(20,30,60,.30);
  --g-tile:linear-gradient(152deg,rgba(255,255,255,.95),rgba(255,255,255,.74));
  --g-tile-strong:linear-gradient(152deg,rgba(255,255,255,.98),rgba(255,255,255,.80));
  --g-tile-hover:linear-gradient(152deg,#fff,rgba(176,34,26,.07));
  --g-hover:linear-gradient(152deg,#fff,rgba(255,255,255,.86));
  --sep:rgba(15,23,42,.12);
  --sheen:rgba(255,255,255,.55);
  --sheen-hi:rgba(255,255,255,.82);
  --card-hover-shadow:0 26px 48px -26px rgba(20,30,60,.34);

  --field-bg:rgba(255,255,255,.92);
  --field-bd:rgba(15,23,42,.16);
  --field-bg-focus:#FFFFFF;

  --hdr-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
  --hdr-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px -24px rgba(20,30,60,.35);
  --modal-bg:linear-gradient(152deg,#fff,rgba(255,255,255,.92) 40%,rgba(245,247,251,.96));
  --modal-head:linear-gradient(180deg,#fff,rgba(249,250,253,.92));
  --modal-veil:rgba(18,26,44,.42);
  --modal-shadow:0 40px 90px -40px rgba(20,30,60,.45);
  --drawer-bg:linear-gradient(152deg,rgba(255,255,255,.97),rgba(244,246,250,.98));
  --spec-bg:linear-gradient(152deg,#fff,rgba(245,247,251,.86));
  --pcard-tint:linear-gradient(180deg,rgba(15,23,42,0) 55%,rgba(15,23,42,.18) 100%);

  --map-bg:radial-gradient(76% 130% at 42% 46%,rgba(228,234,245,.95),rgba(203,212,230,.95));
  --map-land:rgba(15,23,42,.11);
  --map-land-line:rgba(15,23,42,.18);
  --map-track:rgba(15,23,42,.18);
  --map-dot-ring:rgba(255,255,255,.95);

  --glow-a:rgba(176,34,26,.09);
  --glow-b:rgba(176,34,26,.06);
  --glow-c:rgba(90,120,190,.05);
  --hairline:rgba(15,23,42,.08);
  --scanlines:rgba(255,255,255,.03);
}

/* Hero je fotka — zůstává tmavý v obou režimech. Řeší se lokálním
   přepsáním proměnných, takže dlaždice i text v něm drží tmavou variantu. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] body:not(.is-locked) .hdr:not(.is-stuck){
  --tx-1:#F5F7FA; --tx-2:#DCE3EF; --tx-3:#C8D1E3;
  --tx-4:#9AA6BF; --tx-5:#8894AD; --tx-6:#7C879E;
  --ac-l:#E5544A; --ac-ll:#F2867C;
  --g-tint:linear-gradient(152deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 42%,rgba(255,255,255,.022) 100%);
  --g-rim:linear-gradient(152deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.09) 34%,rgba(255,255,255,0) 58%,rgba(255,255,255,.20) 100%);
  --g-inner:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(255,255,255,.04);
  --g-tile-strong:linear-gradient(152deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
  --g-hover:linear-gradient(152deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  --sep:rgba(255,255,255,.14);
  --sheen:rgba(255,255,255,.34); --sheen-hi:rgba(255,255,255,.5);
  --line-3:rgba(255,255,255,.16);
}

/* přechod při přepnutí — jen plochy, ne rozostření (to by trhalo) */
:root.theme-ready body,
:root.theme-ready .section,
:root.theme-ready .card,
:root.theme-ready .step,
:root.theme-ready .form,
:root.theme-ready .routebox,
:root.theme-ready .map{
  transition:background-color var(--d-slow) var(--e),background-image var(--d-slow) var(--e),color var(--d-slow) var(--e);
}


/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--tx-1);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--ac-l);text-decoration:none;transition:color var(--d-fast) var(--e)}
a:hover{color:var(--ac-ll)}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ac);color:#fff}
:focus-visible{outline:2px solid var(--ac-l);outline-offset:3px;border-radius:2px}

/* ---------- 3. Utility ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Přeskočení na obsah: skryté, dokud na něj uživatel neskočí tabulátorem */
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-160%);
  background:var(--ac);color:#fff;font-size:14px;font-weight:600;
  padding:11px 18px;border-radius:var(--r-md);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transition:transform var(--d-norm) var(--e-spring);
}
.skip:focus{transform:none;color:#fff}

/* Kotvy počítají s pevnou hlavičkou i bez JS */
section[id]{scroll-margin-top:84px}

.eyebrow{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.eyebrow .num{font-family:var(--f-mono);font-size:11px;color:var(--ac-l)}
.eyebrow .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-4)}

.h2{
  font-size:clamp(28px,3.4vw,46px);
  font-weight:700;letter-spacing:-.025em;line-height:1.08;
  color:var(--tx-1);text-wrap:balance;margin:0 0 20px;
}
.lead{font-size:clamp(15px,1.4vw,16px);line-height:1.65;color:var(--tx-4);max-width:58ch;margin:0 0 28px}

.section{padding:clamp(72px,9vw,112px) 0;position:relative}
.section--alt{background:var(--bg-1);border-top:1px solid var(--line)}
.section--base{background:var(--bg-0)}

/* ---------- 3b. Liquid glass ----------
   Průsvitná vrstva + „specular" okraj kreslený gradientem přes mask-composite.
   Rozostření pozadí potřebuje, aby za sklem něco bylo — proto mají sekce
   měkké barevné záře (viz .section::before). */
.glass{
  position:relative;
  background:var(--g-tint);
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  border:0;
  box-shadow:var(--g-inner),var(--g-drop);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.glass--lite{-webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite)}

/* sklo se opírá o barevné záře v pozadí sekcí */
.section::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 46% at 10% -4%,var(--glow-a),transparent 70%),
    radial-gradient(46% 42% at 94% 104%,var(--glow-b),transparent 70%),
    radial-gradient(38% 34% at 76% 12%,var(--glow-c),transparent 72%);
}
.section > .wrap{position:relative;z-index:1}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(18,26,44,.92)}
}

/* ---------- 4. Reveal animace ---------- */
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes zoomin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes kb{0%{transform:scale(1.06)}100%{transform:scale(1.17) translate3d(-1.6%,-1.6%,0)}}
/* Čárkování trasy: perioda vzoru je 2 + 8.5 = 10.5, posun proto musí být
   jejím celým násobkem (42 = 4 × 10.5). Jinak se smyčka na konci cyklu
   viditelně přesmykne. Rychlost 42 / 2.8 s = 15 jednotek za sekundu. */
@keyframes dashflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-42}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.25)}}

[data-rv]{opacity:0}
[data-rv].in{animation:fadeup .78s var(--e-spring) both;animation-delay:var(--rv-d,0ms)}
[data-rv="zoom"].in{animation-name:zoomin}
[data-rv="fade"].in{animation-name:fadein}

/* vstupní animace hero */
.hero [data-en-in]{opacity:0;animation:fadeup .9s var(--e-spring) both;animation-delay:var(--en-d,0ms)}
.loaded .hero [data-en-in]{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1!important}
  .hero [data-en-in]{opacity:1!important}
}

/* ---------- 5. Progress bar ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--ac-dd),var(--ac),var(--ac-l));
  z-index:120;transition:width 60ms linear;will-change:width;
}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:115;
  background:transparent;border-bottom:1px solid transparent;
  transition:border-color var(--d-slow) var(--e),
             backdrop-filter var(--d-slow) var(--e),box-shadow var(--d-slow) var(--e);
}
/* Pozadí hlavičky je gradient a background-image je v CSS diskrétní vlastnost —
   nepřechází se, jen skokem přepne. Leží proto na vlastní vrstvě, u které se
   přelévá průhlednost; rozostření a stín se přechází přímo na .hdr, ty
   interpolovat umí. Vrstva je za obsahem (z-index:-1), ale nad rozostřeným
   pozadím stránky, takže sklo vypadá stejně jako dřív. */
.hdr::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:var(--hdr-bg);
  opacity:0;transition:opacity var(--d-slow) var(--e);
}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--hdr-shadow);
}
/* Světelná linka pod hlavičkou je tu pořád, jen průhledná. Kdyby vznikala až
   s .is-stuck, naskočila by skokem, zatímco pozadí se teprve prolíná — proto
   se místo vzniku prvku přelévá jen průhlednost. */
.hdr::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 22%,rgba(229,84,74,.30) 50%,rgba(255,255,255,.20) 78%,transparent);
  opacity:0;transition:opacity var(--d-slow) var(--e);
}
.hdr.is-stuck::after{opacity:1}
.hdr__in{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--gut);
  min-height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo__mark{
  display:block;width:auto;height:31px;
  transition:opacity var(--d-norm) var(--e),transform var(--d-norm) var(--e);
}
.logo:hover .logo__mark{opacity:.82;transform:translateX(2px)}

.nav{display:flex;align-items:center;gap:26px;min-width:0}
.nav__link{
  position:relative;font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--tx-4);white-space:nowrap;padding:4px 0;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ac-l);transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-norm) var(--e);
}
.nav__link:hover,.nav__link.is-active{color:var(--tx-1)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}

.lang{display:flex;align-items:center;gap:2px;font-family:var(--f-mono);font-size:11px}
.lang__sep{color:#4B5563}
.lang__btn{
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:10px 8px;color:var(--tx-6);transition:color var(--d-fast) var(--e);
  min-height:34px;display:flex;align-items:center;
}
.lang__btn:hover{color:var(--tx-3)}
.lang__btn.is-on{color:var(--ac-l)}

/* přepínač světlého režimu */
.themebtn{
  position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;color:var(--tx-4);
  background:var(--g-tint);box-shadow:var(--g-inner);
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  transition:color var(--d-fast) var(--e),background var(--d-fast) var(--e),transform var(--d-fast) var(--e);
}
.themebtn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.themebtn:hover{color:var(--tx-1);background:var(--g-hover);transform:translateY(-1px)}
.themebtn svg{width:16px;height:16px;display:block;position:absolute;
  transition:opacity var(--d-norm) var(--e),transform var(--d-slow) var(--e-spring)}
.themebtn .i-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
.themebtn .i-moon{opacity:1;transform:none}
:root[data-theme="light"] .themebtn .i-sun{opacity:1;transform:none}
:root[data-theme="light"] .themebtn .i-moon{opacity:0;transform:rotate(70deg) scale(.6)}

/* burger */
.burger{display:none;width:40px;height:40px;position:relative;flex:0 0 auto;border-radius:var(--r-md)}
.burger span{
  position:absolute;left:10px;width:20px;height:1.5px;background:var(--tx-1);border-radius:2px;
  transition:transform var(--d-norm) var(--e),opacity var(--d-fast) var(--e),width var(--d-norm) var(--e);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px;width:14px}
.burger span:nth-child(3){top:25px}
.burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;width:20px}
.burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- 7. Mobilní menu ---------- */
.drawer{
  position:fixed;inset:0;z-index:110;
  background:var(--drawer-bg);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hdr) + 24px) var(--gut) 40px;
  opacity:0;visibility:hidden;transition:opacity var(--d-slow) var(--e),visibility var(--d-slow);
}
.drawer.is-open{opacity:1;visibility:visible}
body.is-locked .hdr.is-stuck{border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.is-locked .hdr.is-stuck::before,
body.is-locked .hdr.is-stuck::after{opacity:0}
.drawer__list{display:flex;flex-direction:column;gap:4px}
.drawer__link{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:clamp(22px,6vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--tx-1);
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__link{animation:fadeup .5s var(--e-spring) both;animation-delay:var(--dr-d,0ms)}
.drawer__link .n{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--ac-l)}
.drawer__foot{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 8. Tlačítka ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-sans);font-weight:600;white-space:nowrap;
  border-radius:var(--r-md);cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--d-fast) var(--e),color var(--d-fast) var(--e),
             border-color var(--d-fast) var(--e),transform var(--d-fast) var(--e),
             box-shadow var(--d-norm) var(--e);
}
.btn:active{transform:translateY(1px)}
.btn--sm{font-size:13px;padding:9px 16px}
.btn--md{font-size:14px;padding:11px 20px}
.btn--lg{font-size:15px;padding:14px 26px}
.btn--block{width:100%}

.btn--primary{background:var(--ac);color:#fff;box-shadow:0 0 0 0 var(--ac-glow)}
.btn--primary:hover{background:var(--ac-d);box-shadow:0 8px 28px -8px var(--ac-glow),0 0 0 1px var(--ac-line)}
.btn--primary:active{background:var(--ac-dd)}

.btn--glass{
  background:var(--g-tint);color:var(--tx-1);border:0;
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  box-shadow:var(--g-inner);
}
.btn--glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.btn--glass:hover{background:var(--g-hover)}

/* jemný lesk na primárním CTA */
/* Světlo přejede tlačítkem při najetí a při odjetí se stejnou cestou vrátí.
   Proto transition na transform, ne keyframes — ty by se nedaly obrátit. */
.btn--primary::after,.btn--glass::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,var(--sheen) 46%,var(--sheen-hi) 52%,transparent);
  transform:translateX(-190%) skewX(-14deg);
  transition:transform .72s var(--e);
}
.btn--glass::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 48%,transparent)}
.btn--primary:hover::after,.btn--glass:hover::after{transform:translateX(320%) skewX(-14deg)}

/* ---------- 9. Chips ---------- */
.chip{
  position:relative;font-size:12.5px;font-weight:500;white-space:nowrap;
  padding:8px 14px;border-radius:var(--r-pill);border:0;
  background:var(--g-tint);color:var(--tx-3);
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  box-shadow:var(--g-inner);
  transition:background var(--d-norm) var(--e),color var(--d-fast) var(--e),
             transform var(--d-fast) var(--e),box-shadow var(--d-norm) var(--e);
}
.chip::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.chip:hover{background:var(--g-hover);color:var(--tx-1);transform:translateY(-1px)}
.chip.is-on{
  background:linear-gradient(152deg,rgba(229,84,74,.55),rgba(176,34,26,.85));color:#fff;
  box-shadow:var(--g-inner),0 8px 22px -12px var(--ac-glow);
}
.chip.is-on:hover{background:linear-gradient(152deg,rgba(229,84,74,.68),rgba(176,34,26,.92));color:#fff}

/* ---------- 10. Badge ---------- */
.badge{
  position:relative;display:inline-block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;
  border-radius:var(--r-pill);border:0;
  background:linear-gradient(152deg,rgba(229,84,74,.26),rgba(176,34,26,.14));color:var(--ac-l);
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(176,34,26,.30);
}

/* ---------- 11. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--bg-0);padding-top:calc(var(--hdr) + 28px);
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kb 28s ease-in-out infinite alternate;transform-origin:60% 40%;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(118deg,rgba(7,11,22,.88) 0%,rgba(7,11,22,.34) 54%,rgba(7,11,22,.80) 100%),
    linear-gradient(180deg,rgba(7,11,22,.60) 0%,rgba(7,11,22,.06) 32%,rgba(7,11,22,.84) 100%);
}
/* Šikmý gradient výše počítá se širokou obrazovkou. Na užších displejích
   padne text doprostřed jeho světlého pruhu, proto se tam přepíná na svislý. */
@media (max-width:1023px){
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(7,11,22,.82) 0%,
      rgba(7,11,22,.56) 18%,
      rgba(7,11,22,.70) 44%,
      rgba(7,11,22,.88) 80%,
      rgba(7,11,22,.95) 100%);
  }
}

.hero__grid{
  position:absolute;inset:0;z-index:1;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,var(--scanlines) 0 1px,transparent 1px 4px);
}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:36px var(--gut) 72px}
.hero__top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,6vw,56px)}
.hero__kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.hero__route{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--tx-5);white-space:nowrap}
.hero h1{
  font-size:clamp(34px,5.2vw,72px);font-weight:700;letter-spacing:-.025em;line-height:1.05;
  max-width:17ch;margin:0 0 24px;color:var(--tx-1);text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--ac-l)}
.hero__lead{font-size:clamp(15px,1.6vw,17px);line-height:1.6;font-weight:300;color:var(--tx-2);max-width:52ch;margin:0 0 32px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:var(--sep);
  box-shadow:var(--g-inner),var(--g-drop);
}
.stats::before{  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;z-index:2}
.stat{
  background:var(--g-tile-strong);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  padding:18px 20px;transition:background var(--d-norm) var(--e);
}
.stat:hover{background:linear-gradient(152deg,rgba(229,84,74,.24),rgba(176,34,26,.09))}
.stat__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-4);margin-bottom:8px}
.stat__v{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--tx-1)}
.stat__v sup{font-size:.45em;top:-.9em}
.stat__s{font-family:var(--f-mono);font-size:10px;color:var(--tx-6);margin-top:4px}

.scrollhint{
  position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-6);
}
.scrollhint i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--ac-l),transparent);animation:pulse 2.4s var(--e) infinite}
@media (max-width:900px){.scrollhint{display:none}}

/* ---------- 12. Karty ---------- */
.card{
  position:relative;border:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--g-tint);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-inner),var(--g-drop);
  transition:transform var(--d-norm) var(--e),box-shadow var(--d-norm) var(--e),background var(--d-norm) var(--e);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card--pad{padding:24px}
.card--link{cursor:pointer;text-align:left;width:100%;display:block}
.card--link:hover{
  transform:translateY(-6px);
  background:var(--g-tile-hover);
  box-shadow:var(--g-inner),var(--card-hover-shadow),0 0 0 1px var(--ac-faint);
}

.grid{display:grid;gap:24px}
.grid--products{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid--compliance{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--cases{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.pcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.pcard__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.04);
  transition:transform .7s var(--e-spring),filter var(--d-slow) var(--e);
}
.card--link:hover .pcard__media img{transform:scale(1.06);filter:grayscale(0) contrast(1.05)}
/* Fotky z provozů jsou světlé haly — místo rozjasňujícího "screen" je
   ztmavujeme a přetahujeme firemní červenou, aby seděly na tmavý podklad. */
.pcard__tint{
  position:absolute;inset:0;pointer-events:none;
  background:
    var(--pcard-tint);
  transition:opacity var(--d-slow) var(--e);
}
.card--link:hover .pcard__tint{opacity:.55}
.pcard__tag{
  position:absolute;left:14px;top:14px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#F5F7FA;
  background:var(--scrim);padding:5px 9px;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;
}
.pcard__body{padding:16px}
.pcard__body h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;color:var(--tx-1)}
.pcard__body p{font-size:13px;line-height:1.55;color:var(--tx-4);margin:0 0 12px}
.pcard__more{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--ac-l);white-space:nowrap;
}
.pcard__more span{transition:transform var(--d-norm) var(--e)}
.card--link:hover .pcard__more span{transform:translateX(4px)}

.card--compliance h3,.card--case h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--tx-1)}
.card--compliance p,.card--case p{font-size:13.5px;line-height:1.6;color:var(--tx-4);margin:0}
.card--compliance .badge,.card--case .badge{margin-bottom:16px}
/* Tyhle karty dřív měly vlastní transition s "transform, border-color", který
   přebil ten z .card — a protože hover mění pozadí, ne rámeček (border:0),
   pozadí naskakovalo skokem, zatímco karta plynule stoupala. Přechod z .card
   pokrývá transform, box-shadow i background, takže si vystačí s ním. */
.card--compliance:hover,.card--case:hover{
  transform:translateY(-4px);
  background:var(--g-tile-hover);
}

/* ---------- 13. Kroky ---------- */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1px;background:var(--sep);border:0;position:relative;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--g-inner),var(--g-drop);
}
.steps::before{  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;z-index:2}
.step{
  background:var(--g-tile);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  padding:28px 26px;display:flex;gap:20px;align-items:flex-start;
  position:relative;transition:background var(--d-norm) var(--e);
}
.step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ac);
  transform:scaleY(0);transform-origin:top;transition:transform var(--d-slow) var(--e);
}
.step:hover{background:var(--g-tile-hover)}
.step:hover::before{transform:scaleY(1)}
.step__n{font-family:var(--f-mono);font-size:12px;color:var(--ac-ll);padding-top:4px;flex:0 0 auto}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;color:var(--tx-1)}
.step p{font-size:13.5px;line-height:1.6;color:var(--tx-4);margin:0}

/* ---------- 14. Trasa — mapa Uzbekistán → Evropa ---------- */
.map{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--map-bg);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.map__svg{width:100%;height:auto;display:block}

/* pevnina mimo Evropu — jen tlumený kontext */
.map__land path{fill:var(--map-land);stroke:var(--map-land-line);stroke-width:.45;vector-effect:non-scaling-stroke}
/* Evropa = oblast rozvozu */
.map__eu path{fill:rgba(176,34,26,.24);stroke:rgba(229,84,74,.34);stroke-width:.45;vector-effect:non-scaling-stroke}
/* ČR — cíl šipky, střed kontinentu */
.map__cz path{fill:rgba(229,84,74,.60);stroke:rgba(242,134,124,.9);stroke-width:.8;vector-effect:non-scaling-stroke}
/* Uzbekistán — původ zboží */
.map__origin path{fill:rgba(176,34,26,.68);stroke:rgba(242,134,124,.85);stroke-width:.8;vector-effect:non-scaling-stroke}

.map__track{fill:none;stroke:var(--map-track);stroke-width:2.4;stroke-linecap:round}
.map__flow{fill:none;stroke:var(--ac-l);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 8.5;
  animation:dashflow 2.8s linear infinite;filter:drop-shadow(0 0 4px rgba(229,84,74,.65))}
.map__halo{fill:var(--ac-glow);transform-box:fill-box;transform-origin:50% 50%;animation:pulse 3.4s var(--e) infinite}
.map__dot{fill:var(--ac-l);stroke:var(--map-dot-ring);stroke-width:1.3}

.map__city{fill:var(--tx-1);font-family:var(--f-sans);font-weight:700;font-size:13px;letter-spacing:-.02em}
/* Podtitulek byl v akcentu, jenže leží nad červeně zvýrazněnou oblastí a nad
   svatozáří bodu — červená na červené splývala. Bere proto stejný textový
   token jako název, který je černý ve světlém a světlý v tmavém režimu;
   hierarchii drží velikost a mono písmo, ne barva. */
.map__sub{fill:var(--tx-1);font-family:var(--f-mono);font-size:5.6px;letter-spacing:.9px}

/* Písmo v mapě je v jednotkách viewBoxu, takže se zmenšuje spolu s ní.
   Na užších displejích se proto stupňovitě zvětšuje, aby zůstalo čitelné. */
@media (max-width:1199px){
  .map__sub{font-size:7px}
}
@media (max-width:1023px){
  .map__sub{font-size:9px}
}
/* Na telefonu je mapa jen ~170 px vysoká — zůstanou jen názvy. */
@media (max-width:719px){
  .map__city{font-size:24px}
  .map__sub{display:none}
}

/* ---------- 15. O nás ---------- */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,56px);align-items:center}
.about p{font-size:16px;line-height:1.7;margin:0 0 18px}
.about p:first-of-type{color:var(--tx-3)}
.about p:last-of-type{color:var(--tx-4);margin-bottom:0}
.about__fig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.about__fig img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.5) contrast(1.03);transition:transform .9s var(--e-spring),filter var(--d-slow) var(--e)}
.about__fig:hover img{transform:scale(1.04);filter:grayscale(.1)}
.about__fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--about-veil);
}
.about__cap{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.about__cap b{display:block;font-size:15px;font-weight:600;color:#F5F7FA}
.about__cap i{display:block;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#A9B4C9;margin-top:4px}

/* ---------- 16. Kontakt ---------- */
/* Formulář je zhruba dvaapůlkrát vyšší než kontaktní blok. Při zarovnání na
   začátek zůstane vpravo dole velká díra, tak se pravý sloupec vycentruje
   proti formuláři. Po zalomení do jednoho sloupce je řádek vysoký jako jeho
   obsah, takže centrování nic nedělá. */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,4vw,48px);align-items:center}
.form{
  position:relative;border:0;border-radius:var(--r-xl);padding:clamp(20px,3vw,28px);
  background:var(--g-tint);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-inner),var(--g-drop);
}
.form::before{  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;z-index:0}
.form__grid{position:relative;z-index:1}
.form__grid{display:grid;gap:18px}
.field{display:block}
.field__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-4);margin-bottom:8px;
}
.field__err{
  color:var(--err);text-transform:none;letter-spacing:0;font-family:var(--f-sans);
  font-size:11.5px;white-space:nowrap;opacity:0;transform:translateY(-3px);
  transition:opacity var(--d-fast) var(--e),transform var(--d-fast) var(--e);
}
.field.has-err .field__err{opacity:1;transform:none}
.field input,.field textarea{
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--r-md);
  background:var(--field-bg);color:var(--tx-1);font-family:var(--f-sans);font-size:15px;font-weight:300;
  border:1px solid var(--field-bd);
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color var(--d-fast) var(--e),box-shadow var(--d-fast) var(--e),background var(--d-fast) var(--e);
}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-7)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:rgba(229,84,74,.75);
  box-shadow:0 0 0 3px var(--ac-faint),inset 0 1px 0 rgba(255,255,255,.10);
  background:var(--field-bg-focus);
}
.field.has-err input,.field.has-err textarea{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.form__note{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--tx-7);margin:0}
.form__gdpr{font-size:12px;line-height:1.55;color:var(--tx-6);margin:-4px 0 0}
.form__gdpr a{color:var(--tx-4);border-bottom:1px solid var(--line-2);transition:color var(--d-fast) var(--e),border-color var(--d-fast) var(--e)}
.form__gdpr a:hover{color:var(--ac-l);border-bottom-color:var(--ac-line)}

/* past na roboty — pro člověka neviditelná, ale ne přes display:none,
   které si část robotů umí ohlídat */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__error{
  font-size:13.5px;line-height:1.55;color:var(--err);margin:0;
  padding:12px 14px;border-radius:var(--r-md);
  background:rgba(248,113,113,.10);box-shadow:inset 0 0 0 1px rgba(248,113,113,.35);
}

.form__done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 4px;animation:zoomin .5s var(--e-spring) both}
.form__done .tick{width:40px;height:40px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;background:var(--ac-soft)}
.form__done b{font-size:19px;font-weight:600;color:var(--tx-1)}
.form__done p{font-size:14px;line-height:1.6;color:var(--tx-4);margin:0;max-width:40ch}

.cinfo{border-left:2px solid var(--ac);padding-left:24px;margin-bottom:32px;display:grid;gap:18px}
.cinfo__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-6);margin-bottom:5px}
.cinfo__v{font-size:17px;font-weight:600;color:var(--tx-1)}
.cinfo a{font-size:16px}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.quick__btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;border:0;
  background:var(--g-tint);color:var(--tx-1);
  -webkit-backdrop-filter:var(--g-blur-lite);backdrop-filter:var(--g-blur-lite);
  box-shadow:var(--g-inner);
  font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--r-md);
  transition:background var(--d-fast) var(--e),transform var(--d-fast) var(--e);
}
.quick__btn::before{  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.quick__btn:hover{background:var(--g-hover);color:var(--tx-1);transform:translateY(-2px)}
/* Ikony sítí drží firemní barvu až při najetí — v klidu ladí s textem */
.quick__btn svg{flex:0 0 auto;color:var(--tx-4);transition:color var(--d-fast) var(--e)}
.quick__btn--wa:hover svg{color:#25D366}
.quick__btn--tg:hover svg{color:#229ED9}

/* ---------- 17. Footer ---------- */
.ftr{background:var(--bg-0);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 28px;position:relative}
.ftr__cols{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(150px,1fr));
  padding-bottom:36px;
}
.ftr__mark{display:block;width:auto;height:28px;margin-bottom:16px}
.ftr__brand p{font-size:14px;line-height:1.65;color:var(--tx-4);margin:0;max-width:44ch}

.ftr__h{
  font-family:var(--f-mono);font-size:10px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-6);
  margin:0 0 14px;
}
.ftr__col ul{display:grid;gap:9px}
.ftr__col a{font-size:14px;color:var(--tx-4)}
.ftr__col a:hover{color:var(--ac-l)}
.ftr__name{font-size:14px;font-weight:600;color:var(--tx-2)}

.ftr__legal{
  display:flex;flex-wrap:wrap;gap:6px 18px;font-style:normal;
  font-size:12.5px;line-height:1.6;color:var(--tx-6);
  padding-bottom:20px;
}
.ftr__legal strong{color:var(--tx-3);font-weight:600}

.ftr__bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);
}
.ftr__cr{font-family:var(--f-mono);font-size:11px;color:var(--tx-7)}
.ftr__by{font-family:var(--f-mono);font-size:11px;color:var(--tx-7);white-space:nowrap}
.ftr__by a{color:var(--tx-4);border-bottom:1px solid transparent;transition:color var(--d-fast) var(--e),border-color var(--d-fast) var(--e)}
.ftr__by a:hover{color:var(--ac-l);border-bottom-color:var(--ac-line)}

@media (max-width:860px){
  .ftr__cols{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .ftr__cols{grid-template-columns:1fr;gap:28px}
  .ftr__legal{
  display:flex;flex-wrap:wrap;gap:6px 18px;font-style:normal;
  font-size:12.5px;line-height:1.6;color:var(--tx-6);
  padding-bottom:20px;
}
.ftr__legal strong{color:var(--tx-3);font-weight:600}

.ftr__bar{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- 17b. Podstránky (cookies, soukromí) ---------- */
.doc{max-width:70ch;padding-top:calc(var(--hdr) + 40px)}
.doc h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--tx-1);margin:36px 0 12px}
.doc h2:first-of-type{margin-top:28px}
.doc p,.doc li{font-size:15px;line-height:1.75;color:var(--tx-3)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 18px;padding-left:0;display:grid;gap:8px}
.doc ul li{position:relative;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:var(--r-pill);background:var(--ac-l)}
.doc__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-6);margin-bottom:26px}
.doc strong{color:var(--tx-1);font-weight:600}

/* ---------- 18. Modal ---------- */
.modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden}
.modal.is-open{visibility:visible}
.modal__bg{position:absolute;inset:0;background:var(--modal-veil);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity var(--d-slow) var(--e)}
.modal.is-open .modal__bg{opacity:1}
.modal__box{
  position:relative;width:min(560px,100%);max-height:calc(100svh - 40px);overflow:auto;
  color:var(--tx-1);border:0;border-radius:var(--r-xl);
  background:var(--modal-bg);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-inner),var(--modal-shadow);
  opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity var(--d-slow) var(--e),transform var(--d-slow) var(--e-spring);
  scrollbar-width:thin;
}
.modal.is-open .modal__box{opacity:1;transform:none}
.modal__head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:var(--modal-head);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 -1px 0 var(--sep);
}
.modal__head h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.modal__close{
  font-size:12px;font-weight:600;color:var(--tx-3);padding:6px 12px;border-radius:var(--r-pill);
  background:var(--g-tint);box-shadow:var(--g-inner);
  transition:background var(--d-fast) var(--e),color var(--d-fast) var(--e);
}
.modal__close:hover{background:var(--g-hover);color:var(--tx-1)}
.modal__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.modal__media img{width:100%;height:100%;object-fit:cover}
.modal__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,22,0) 55%,rgba(7,11,22,.35))}
.modal__body{padding:24px}
.modal__tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-l);margin-bottom:10px}
.modal__body>p{font-size:14.5px;line-height:1.65;color:var(--tx-4);margin:0 0 20px}

/* Detail sortimentu je bodový: dlaždice .specs nesou čísla, body to, co se do
   nich nevejde. Odrážka je kreslená, ne z list-style — drží firemní barvu. */
.points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.points li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.6;color:var(--tx-4)}
.points li::before{
  content:"";position:absolute;left:2px;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--ac-l);
}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--sep);border:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--g-inner)}
.spec{background:var(--spec-bg);padding:14px 16px}
.spec__k{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-7);margin-bottom:5px}
.spec__v{font-size:14px;font-weight:600;color:var(--tx-1)}

/* ---------- 19. Responsive ---------- */
@media (max-width:1023px){
  .stats{grid-template-columns:1fr 1fr}
}
/* Sedm odkazů plus jazyk, motiv a tlačítko se do hlavičky vejdou až od 960 px;
   pod tím přebírá navigaci burger. Mezi 960 a 1199 px se mezery stahují, jinak
   by se odkazy začaly ořezávat. Hranice burgeru a mobilního menu musí zůstat
   stejná, ať se nesejdou obě navigace naráz. */
@media (max-width:1199px){
  .nav{gap:16px}
}
@media (max-width:959px){
  .nav__link{display:none}
  .burger{display:block}
  .nav{gap:12px}
  .nav .btn--nav{display:none}
}
@media (min-width:960px){
  .drawer{display:none}
}
@media (max-width:560px){
  .hero__cta .btn{width:100%}
  .grid--products{grid-template-columns:1fr}
}
@media (max-width:339px){
  .stats{grid-template-columns:1fr}
  .logo__mark{height:25px}
}