/* ============================================================

   0. PÍSMA — vlastní soubory, nic se netahá od Googlu

   ------------------------------------------------------------

   Česká diakritika (ě, š, č, ř, ž, ů, ď, ť, ň) leží v rozsahu

   latin-ext, proto má každý řez dvě varianty. Prohlížeč si

   stáhne jen tu, kterou na dané stránce opravdu potřebuje.

   font-display:swap znamená, že se text ukáže hned systémovým

   písmem a přepne se, jakmile je naše písmo stažené.

   ============================================================ */

@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sora-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sora-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sora-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sora-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================

   1. DESIGN TOKENY

   ============================================================ */

:root{

  /* Pozadí */

  --obsidian:#070C14;

  --navy:#0A111E;

  --slate:#0F1729;

  --card:#1C2541;

  --card-hover:#233054;

  /* Akcent */

  --cyan:#00B4D8;

  --azure:#0077B6;

  --ice:#48CAE4;

  --frost:#90E0EF;

  /* Text */

  --white:#FFFFFF;

  --platinum:#E8EEF5;

  --silver:#A8B6C8;

  --muted:#6B7A91;

  --edge:#2A3A5C;

  /* Systémové */

  --success:#2DD4A7;

  --alert:#FF6B6B;

  --btn-ink:#06101B;



  --glass-surface:rgba(28,37,65,.55);

  --glass-border:rgba(72,202,228,.14);

  --accent-gradient:linear-gradient(96deg,#0077B6 0%,#00B4D8 50%,#48CAE4 100%);

  --cta-glow:0 6px 24px rgba(0,180,216,.32);



  --ff-display:'Sora',system-ui,sans-serif;

  --ff-body:'Manrope',system-ui,sans-serif;

  --ff-mono:'JetBrains Mono',ui-monospace,monospace;



  --container:1280px;

  --pad:24px;

  --section-y:160px;

  --r-card:16px;

  --r-btn:10px;

  --ease-out:cubic-bezier(.16,1,.3,1);

  --ease-sheen:cubic-bezier(.22,1,.36,1);

}



/* ============================================================

   2. RESET A ZÁKLAD

   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{

  font-family:var(--ff-body);

  font-size:17px;

  line-height:1.65;

  color:var(--silver);

  background:var(--navy);

  background-image:radial-gradient(120% 70% at 50% 0%,#12203A 0%,#0A111E 55%,#070C14 100%);

  background-attachment:fixed;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

}

img,svg{display:block;max-width:100%}

button,input,select,textarea{font:inherit;color:inherit}

a{color:var(--frost);text-decoration:none}

:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:4px}



.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

.section{padding-block:var(--section-y);position:relative}



/* Oddělovač = "hrana skla" */

.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--edge) 20%,rgba(72,202,228,.4) 50%,var(--edge) 80%,transparent)}



/* ============================================================

   3. TYPOGRAFIE

   ============================================================ */

h1,h2,h3,h4{font-family:var(--ff-display);color:var(--platinum);font-weight:600;line-height:1.2}

/* Titulek podstránky. Vypadá jako H1, ale H1 zůstává na stránce jen jeden

   (SEO: více H1 v jednom dokumentu je chyba) — podstránky jsou pohledy

   uvnitř téhož HTML, takže druhý H1 by robot viděl jako duplicitní. */

h1,.page-title{font-size:clamp(2.25rem,5.2vw,4.25rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;color:var(--white)}

h2{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.15;letter-spacing:-.02em}

h3{font-size:clamp(1.3rem,1.7vw,1.625rem);letter-spacing:-.01em}

h4{font-size:1.1875rem}



.eyebrow{

  font-family:var(--ff-mono);font-size:.75rem;font-weight:500;

  letter-spacing:.18em;text-transform:uppercase;color:var(--ice);

  display:block;margin-bottom:18px;

}

.lead{font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.55;color:var(--silver);max-width:62ch}

p{max-width:68ch}



/* Podtržení posledního slova nadpisu */

.mark{position:relative;white-space:nowrap;display:inline-block}

.mark::after{

  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:3px;border-radius:2px;

  background:var(--accent-gradient);

  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);

  mask-image:linear-gradient(90deg,#000 60%,transparent);

}



.section-head{margin-bottom:64px;max-width:720px}

.section-head.center{margin-inline:auto;text-align:center}

.section-head.center .lead{margin-inline:auto}

.section-head .lead{margin-top:20px}



/* ============================================================

   4. TLAČÍTKA

   ============================================================ */

.btn{

  display:inline-flex;align-items:center;justify-content:center;gap:10px;

  min-height:52px;padding:0 26px;border-radius:var(--r-btn);border:1px solid transparent;

  font-weight:600;font-size:1rem;letter-spacing:.01em;cursor:pointer;

  transition:background-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out,border-color .2s ease-out,color .2s ease-out;

}

.btn svg{flex:none;transition:transform .2s ease-out}

.btn-primary{background:var(--cyan);color:var(--btn-ink);box-shadow:var(--cta-glow)}

.btn-primary:hover{background:var(--azure);color:var(--white);box-shadow:0 10px 32px rgba(0,180,216,.42);transform:translateY(-2px)}

.btn-primary:hover svg{transform:translateX(4px)}

.btn-ghost{background:rgba(28,37,65,.4);border-color:var(--edge);color:var(--platinum);backdrop-filter:blur(10px)}

.btn-ghost:hover{border-color:rgba(72,202,228,.45);color:var(--white);background:var(--card-hover)}

.btn-lg{min-height:58px;padding:0 32px}

.btn-block{width:100%}



/* ============================================================

   5. HLAVIČKA

   ============================================================ */

.header{

  position:fixed;inset:0 0 auto;z-index:100;

  transition:background-color .3s ease-out,box-shadow .3s ease-out,border-color .3s ease-out;

  border-bottom:1px solid transparent;

}

.header.scrolled{

  background:rgba(10,17,30,.72);

  backdrop-filter:blur(18px) saturate(140%);

  -webkit-backdrop-filter:blur(18px) saturate(140%);

  border-bottom-color:var(--edge);

}

.header-inner{display:flex;align-items:center;gap:32px;height:88px;transition:height .3s ease-out}

.header.scrolled .header-inner{height:68px}



.logo{display:flex;align-items:center;gap:11px;flex:none}

.logo-mark{filter:drop-shadow(0 0 12px rgba(0,180,216,.25))}

/* Vlastní logo ze souboru. Výška se řídí nastavením LOGO.height ve skriptu. */

.logo-img{display:block;height:34px;width:auto;max-width:220px;flex:none;object-fit:contain}

.logo-img[hidden],.logo-mark[hidden],.logo-text[hidden]{display:none}

.logo-text{font-family:var(--ff-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;color:var(--white);line-height:1.1}

.logo-text span{display:block;font-family:var(--ff-mono);font-size:.5625rem;font-weight:500;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}



.nav{display:flex;gap:30px;margin-left:auto}

.nav a{font-size:.9375rem;font-weight:500;color:var(--silver);position:relative;padding-block:6px;transition:color .2s ease-out}

.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cyan);transition:right .25s var(--ease-out)}

.nav a:hover{color:var(--white)}

.nav a:hover::after{right:0}



.header-actions{display:flex;align-items:center;gap:18px;flex:none}

.header-tel{display:flex;align-items:center;gap:8px;color:var(--platinum);font-weight:600;font-size:.9375rem;white-space:nowrap}

.header-tel:hover{color:var(--ice)}

.header-tel svg{color:var(--ice)}



.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--edge);border-radius:var(--r-btn);cursor:pointer;color:var(--platinum)}



/* Přepínač jazyků */

.lang{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--edge);border-radius:999px;background:rgba(28,37,65,.4);backdrop-filter:blur(10px);flex:none}

.lang button{

  width:30px;height:21px;padding:0;border:1px solid var(--edge);border-radius:5px;background:none;

  display:grid;place-items:center;overflow:hidden;opacity:.5;cursor:pointer;

  transition:opacity .2s ease-out,border-color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out;

}

.lang button svg{width:100%;height:100%}

.lang button:hover{opacity:.9;transform:translateY(-1px)}

.lang button[aria-current="true"]{opacity:1;border-color:var(--cyan);box-shadow:0 0 12px rgba(0,180,216,.45)}

/* Vlajky jsou nově vždy v liště, kopie v rozbalovacím menu je zbytečná */

.mobile-panel .lang{display:none}





/* Mobilní panel */

.mobile-panel{

  position:fixed;inset:auto 0 0;z-index:99;transform:translateY(101%);

  visibility:hidden;

  transition:transform .35s var(--ease-out),visibility 0s linear .35s;

  background:rgba(10,17,30,.94);backdrop-filter:blur(20px);

  border-top:1px solid var(--edge);border-radius:20px 20px 0 0;

  padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));

}

.mobile-panel.open{transform:translateY(0);visibility:visible;transition-delay:0s}

.mobile-panel a.m-link{display:block;font-family:var(--ff-display);font-size:1.25rem;font-weight:600;color:var(--platinum);padding:14px 0;border-bottom:1px solid rgba(42,58,92,.6)}

.mobile-panel .m-actions{display:grid;gap:12px;margin-top:24px}



/* ============================================================

   6. HERO

   ------------------------------------------------------------

   VZHLED POZADÍ se ladí proměnnými níže.

   SOUBOR S VIDEEM se mění v HTML — hledejte "VIDEO NA POZADÍ".

   ============================================================ */

:root{

  --hero-video-opacity:.65;  /* jak výrazné je video (0 = neviditelné, 1 = plná síla) */

  --hero-shade-left:.88;     /* ztmavení uprostřed pod vystředěným textem — zvyšte, když je text hůř čitelný */

  --hero-shade-bottom:.72;   /* ztmavení směrem dolů */

}



/* Výška hera roste s obsahem a je omezená shora. Díky tomu se poměr
   stran plochy nikdy nevzdálí videu natolik, aby z něj zbyl jen úzký
   výřez, a pod textem nezůstane prázdný tmavý pruh. */
.hero{
  position:relative;
  min-height:min(78vh,760px);
  display:flex;align-items:center;
  /* Horní odsazení je větší než spodní, takže text sedí kousek
     pod optickým středem — nahoře je fixní hlavička. Chcete-li ho
     posunout výš nebo níž, měňte jen tuhle první hodnotu. */
  padding-top:clamp(132px,16vw,168px);
  padding-bottom:clamp(56px,9vw,116px);
  overflow:hidden;
}



/* Vrstvy pozadí: 0 = záložní grafika, 1 = video, 2 = ztmavení kvůli čitelnosti */

.hero-media{
  position:absolute;inset:0;z-index:0;background:var(--obsidian);
  /* Celá obrazová vrstva se dole rozplyne do pozadí stránky. Tím zmizí
     ostrá hrana i barevný šev mezi herem a zbytkem webu — nezáleží na
     tom, jakým odstínem přechod končí ani jak je stránka vysoká. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}

/* object-fit:cover znamená, že se obraz vždy roztáhne přes celou
   plochu a přebytek se ořízne — nikdy nevzniknou černé okraje.
   object-position drží záběr mírně nad středem, kde bývá děj. */
.hero-media img,.hero-media svg,.hero-media video{
  width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  display:block;
}

.hero-media .hero-fallback{position:absolute;inset:0;z-index:0}

.hero-media .hero-video{

  position:absolute;inset:0;z-index:1;

  opacity:0;transition:opacity .9s ease-out;pointer-events:none;

}

/* Video se odkryje, teprve až se skutečně načte. Dokud žádné nevložíte,

   zůstane vidět záložní grafika a nikde nevznikne černá díra. */

.hero-media .hero-video.is-on{opacity:var(--hero-video-opacity)}

.hero-media::after{

  content:"";position:absolute;inset:0;z-index:2;

  background:

    radial-gradient(62% 85% at 50% 42%,rgba(7,12,20,var(--hero-shade-left)) 0%,rgba(7,12,20,.4) 55%,transparent 88%),

    linear-gradient(180deg,rgba(7,12,20,.42) 0%,rgba(10,17,30,var(--hero-shade-bottom)) 62%,rgba(10,17,30,.9) 100%);

}



.hero-inner{position:relative;z-index:1;max-width:640px;margin-inline:auto;text-align:center}

/* Textový stín navíc — pojistka čitelnosti nezávislá na tom, jak jasné

   nebo pestré bude konkrétní video. Scrim (.hero-media::after) řeší

   celkové ztmavení (teď jako ovál uprostřed, pod vystředěným textem),

   stín drží ostrost hran písma i na světlých místech. */

.hero .eyebrow{font-size:.6875rem;letter-spacing:.16em;margin-bottom:14px;text-shadow:0 1px 10px rgba(3,7,15,.7)}

.hero h1{font-size:clamp(1.75rem,3.5vw,2.875rem);line-height:1.1;margin-bottom:20px;text-wrap:balance;text-shadow:0 2px 20px rgba(3,7,15,.55)}

.hero .lead{font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.55;margin-bottom:30px;max-width:58ch;margin-inline:auto;text-wrap:balance;text-shadow:0 1px 14px rgba(3,7,15,.6)}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px;justify-content:center}

.hero-cta .btn-lg{min-height:52px;padding:0 26px;font-size:.9375rem}

.hero-trust{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:22px;border-top:1px solid rgba(42,58,92,.7);justify-content:center}

.hero-trust li{display:flex;align-items:center;gap:8px;list-style:none;font-size:.875rem;color:var(--silver);text-shadow:0 1px 10px rgba(3,7,15,.6)}

.hero-trust svg{color:var(--cyan);flex:none}



.scroll-hint{position:absolute;left:50%;bottom:26px;z-index:1;width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--cyan));animation:pulse 2.4s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}



/* ============================================================

   7. SKLENĚNÉ KARTY + SVĚTELNÝ ODLESK (signature)

   ============================================================ */

.glass{

  position:relative;overflow:hidden;

  background:var(--glass-surface);

  border:1px solid var(--glass-border);

  border-radius:var(--r-card);

  backdrop-filter:blur(18px) saturate(140%);

  -webkit-backdrop-filter:blur(18px) saturate(140%);

  box-shadow:0 8px 32px rgba(3,7,15,.55);

}

.sheen::before{

  content:"";position:absolute;top:-60%;left:-120%;width:60%;height:220%;

  background:linear-gradient(105deg,transparent,rgba(72,202,228,.12) 45%,rgba(144,224,239,.2) 50%,rgba(72,202,228,.12) 55%,transparent);

  transform:skewX(-16deg);pointer-events:none;transition:left .7s var(--ease-sheen);

}

.sheen:hover::before,.sheen:focus-within::before{left:140%}



/* Benefity */

/* Karty s benefity začínají až pod herem — dřív ho na mobilu
   překrývaly záporným odsazením. */
.benefits{position:relative;z-index:2;margin-top:clamp(28px,5vw,72px)}

.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.benefit{padding:32px 26px}

.benefit .num{font-family:var(--ff-mono);font-size:.6875rem;color:var(--muted);letter-spacing:.14em;display:block;margin-bottom:18px}

.benefit .ico{color:var(--ice);margin-bottom:16px}

.benefit h3{font-size:1.1875rem;margin-bottom:10px}

.benefit p{font-size:.9375rem;line-height:1.6;color:var(--silver)}

.benefit{transition:background-color .2s ease-out,transform .2s ease-out,border-color .2s ease-out}

.benefit:hover{background:var(--card-hover);transform:translateY(-4px);border-color:rgba(72,202,228,.32)}



/* ============================================================

   8. PŘED / PO

   ============================================================ */

.ba-wrap{max-width:1060px;margin-inline:auto}

.ba{

  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;

  border:1px solid var(--edge);box-shadow:0 24px 60px rgba(3,7,15,.6);

  cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--slate);

}

.ba-layer{position:absolute;inset:0}

.ba-layer svg{width:100%;height:100%}

.ba-before{clip-path:inset(0 50% 0 0);will-change:clip-path}

.ba-handle{

  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--cyan);

  box-shadow:0 0 16px rgba(0,180,216,.7);transform:translateX(-1px);

  will-change:left;

}

.ba-knob{

  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;

  background:rgba(10,17,30,.75);backdrop-filter:blur(8px);

  border:1px solid var(--ice);color:var(--ice);box-shadow:0 0 20px rgba(0,180,216,.35);

}

.ba-tag{

  position:absolute;top:16px;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.16em;

  padding:6px 12px;border-radius:999px;background:rgba(7,12,20,.75);backdrop-filter:blur(6px);

  border:1px solid var(--edge);color:var(--platinum);pointer-events:none;

}

.ba-tag.l{left:16px}

.ba-tag.r{right:16px;color:var(--ice);border-color:rgba(72,202,228,.4)}



.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}

.pill{

  padding:9px 20px;border-radius:999px;background:transparent;border:1px solid var(--edge);

  color:var(--silver);font-size:.875rem;font-weight:500;cursor:pointer;

  transition:all .2s ease-out;min-height:40px;

}

.pill:hover{border-color:rgba(72,202,228,.45);color:var(--platinum)}

.pill[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--btn-ink);font-weight:600}

.ba-meta{

  text-align:center;margin-top:22px;font-family:var(--ff-mono);font-size:.8125rem;

  color:var(--muted);letter-spacing:.04em;

}



/* ============================================================

   9. SLUŽBY

   ============================================================ */

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.svc{

  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);

  border-radius:var(--r-card);overflow:hidden;position:relative;

  transition:transform .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out;

}

.svc:hover{transform:translateY(-6px);border-color:rgba(72,202,228,.35);box-shadow:0 16px 40px rgba(3,7,15,.6)}

.svc-media{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--slate)}

.svc-media svg,

.svc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out),opacity .4s ease-out}

/* Fotka je ztlumená, ať pod ní zůstane text čitelný */

.svc-media img{opacity:.62}

.svc:hover .svc-media img{opacity:.78}

.svc:hover .svc-media svg,

.svc:hover .svc-media img{transform:scale(1.05)}

.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--card))}

.svc-body{padding:26px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1}

.svc-body h3{margin-bottom:12px;text-wrap:balance}

.svc-body p{font-size:.9375rem;line-height:1.6;flex:1;margin-bottom:20px}

.svc-more{display:inline-flex;align-items:center;gap:8px;color:var(--ice);font-weight:600;font-size:.9375rem}

.svc-more svg{transition:transform .2s ease-out}

.svc:hover .svc-more svg{transform:translateX(4px)}

.svc-link{position:absolute;inset:0;z-index:2}



/* ============================================================

   10. PRŮBĚH

   ============================================================ */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}

.steps::before{

  content:"";position:absolute;top:32px;left:12%;right:12%;height:2px;

  background:linear-gradient(90deg,var(--edge),var(--cyan),var(--edge));

  transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease-out);

}

.steps.in::before{transform:scaleX(1)}

.step{position:relative;text-align:center}

.step-num{

  width:64px;height:64px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;

  font-family:var(--ff-mono);font-size:1.375rem;color:var(--ice);

  background:rgba(10,17,30,.9);border:1px solid rgba(72,202,228,.35);

  backdrop-filter:blur(10px);position:relative;z-index:1;

}

.step h3{margin-bottom:12px}

.step p{font-size:.9375rem;margin-inline:auto}



/* ============================================================

   11. ČÍSLA

   ============================================================ */

.stats-band{background:var(--slate);border-block:1px solid var(--edge);padding-block:64px;position:relative}

.stats-band::before,.stats-band::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(72,202,228,.35),transparent)}

.stats-band::before{top:-1px}.stats-band::after{bottom:-1px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}

.stat b{display:block;font-family:var(--ff-display);font-weight:700;font-size:clamp(2rem,4vw,3.5rem);color:var(--white);line-height:1;letter-spacing:-.03em}

.stat span{display:block;margin-top:12px;font-size:.9375rem;color:var(--muted)}



/* ============================================================

   12. REFERENCE

   ============================================================ */

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.quote{padding:34px 30px;position:relative}

.quote .qm{position:absolute;top:14px;left:24px;font-family:var(--ff-display);font-size:4rem;line-height:1;color:rgba(72,202,228,.15)}

.quote p{position:relative;color:var(--platinum);font-size:1.0625rem;line-height:1.6;margin-bottom:24px}

.quote footer{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(42,58,92,.7)}

.avatar{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;font-size:.9375rem;color:var(--btn-ink);background:var(--accent-gradient)}

.quote cite{display:block;font-style:normal;font-weight:600;color:var(--platinum);font-size:.9375rem}

.quote small{color:var(--muted);font-size:.8125rem}



.partners{margin-top:72px;padding-top:48px;border-top:1px solid var(--edge)}

.partners p{text-align:center;color:var(--muted);font-size:.875rem;margin:0 auto 28px}

.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

.marquee-track{display:flex;gap:64px;width:max-content;animation:slide 40s linear infinite}

.marquee:hover .marquee-track{animation-play-state:paused}

@keyframes slide{to{transform:translateX(-50%)}}

.partner{

  font-family:var(--ff-display);font-weight:600;font-size:1.0625rem;color:var(--silver);

  opacity:.45;filter:grayscale(1);white-space:nowrap;letter-spacing:.02em;

  transition:opacity .25s ease-out,color .25s ease-out;padding-block:8px;

}

.partner:hover{opacity:1;color:var(--white)}



/* ============================================================

   13. O NÁS

   ============================================================ */

.about{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}

.about-media{position:relative}

.about-media .frame{position:absolute;inset:24px -24px -24px 24px;border:1px solid var(--edge);border-radius:20px;z-index:0}

.about-media .shot{position:relative;z-index:1;border-radius:20px;overflow:hidden;border:1px solid var(--edge)}

.about-media .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,180,216,.1),transparent 60%)}

.about p+p{margin-top:18px}

.values{list-style:none;margin-top:32px;display:grid;gap:14px}

.values li{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--platinum)}

.values svg{color:var(--cyan);flex:none;margin-top:3px}

.about .btn{margin-top:34px}



/* ============================================================

   14. FAQ

   ============================================================ */

.faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}

.faq-item{background:var(--card);border:1px solid var(--edge);border-radius:12px;overflow:hidden;transition:background-color .25s ease-out,border-color .25s ease-out}

.faq-item[open]{background:var(--card-hover);border-color:rgba(72,202,228,.3);box-shadow:inset 3px 0 0 var(--cyan)}

.faq-q{

  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;

  padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;

  font-family:var(--ff-display);font-weight:600;font-size:1.0625rem;color:var(--platinum);

}

.faq-q:hover{color:var(--white)}

.faq-icon{flex:none;width:24px;height:24px;position:relative;color:var(--ice)}

.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);transition:transform .28s ease-in-out,opacity .28s ease-in-out}

.faq-icon::before{width:14px;height:2px}

.faq-icon::after{width:2px;height:14px}

.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.faq-a{overflow:hidden;height:0;transition:height .28s ease-in-out}

.faq-a-inner{padding:0 26px 24px}

.faq-a p{font-size:.9375rem;color:var(--silver)}

.faq-a a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:.875rem;color:var(--ice)}

.faq-cta{text-align:center;margin-top:48px}

.faq-cta h4{margin-bottom:8px}

.faq-cta p{margin:0 auto 22px;color:var(--muted);font-size:.9375rem}



/* ============================================================

   15. KONTAKT

   ============================================================ */

.contact{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start}

.contact-info{padding:40px 34px}

.contact-info h2{margin-bottom:18px}

.contact-info>p{font-size:.9375rem;margin-bottom:32px}

.info-list{list-style:none;display:grid;gap:22px}

.info-list li{display:flex;gap:14px;align-items:flex-start}

.info-list .ii{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(0,180,216,.1);border:1px solid rgba(72,202,228,.22);color:var(--ice)}

.info-list b{display:block;color:var(--platinum);font-weight:600;font-size:1rem}

.info-list a{color:var(--platinum)}

.info-list a:hover{color:var(--ice)}

.info-list small{color:var(--muted);font-size:.8125rem;display:block;line-height:1.6}



.form-card{padding:40px 34px}

.form-grid{display:grid;gap:20px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.field label{display:block;font-size:.875rem;font-weight:500;color:var(--silver);margin-bottom:8px}

.field label .req{color:var(--ice)}

.field input,.field select,.field textarea{

  width:100%;min-height:52px;padding:14px 16px;background:var(--slate);

  border:1px solid var(--edge);border-radius:var(--r-btn);color:var(--platinum);

  font-size:1rem;transition:border-color .2s ease-out,box-shadow .2s ease-out;

}

.field textarea{min-height:118px;resize:vertical;line-height:1.55}

.field input::placeholder,.field textarea::placeholder{color:#546274}

.field input:focus,.field select:focus,.field textarea:focus{

  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,.16);

}

.field select{appearance:none;cursor:pointer;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2348CAE4' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}

.err{display:none;color:var(--alert);font-size:.8125rem;margin-top:7px}

.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--alert)}

.field.invalid .err{display:block}



.dropzone{

  display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-btn);

  border:1px dashed var(--edge);background:rgba(15,23,41,.5);cursor:pointer;

  transition:border-color .2s ease-out,background-color .2s ease-out;

}

.dropzone:hover{border-color:rgba(72,202,228,.5);background:var(--slate)}

.dropzone svg{color:var(--ice);flex:none}

.dropzone b{display:block;color:var(--platinum);font-size:.9375rem;font-weight:600}

.dropzone small{color:var(--muted);font-size:.8125rem}

.dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}



.consent{display:flex;gap:12px;align-items:flex-start}

.consent input{appearance:none;flex:none;width:20px;height:20px;min-height:0;margin-top:2px;padding:0;border:1px solid var(--edge);border-radius:5px;background:var(--slate);cursor:pointer;transition:all .18s ease-out}

.consent input:checked{background:var(--cyan);border-color:var(--cyan);

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2306101B' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");

  background-repeat:no-repeat;background-position:center}

.consent label{font-size:.875rem;color:var(--silver);margin:0;line-height:1.55}



.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;display:none}

/* Třídy nahrazující dřívější inline styly (SEO report je vytýkal) */

.err-consent{margin-top:-12px}

.aside-links{list-style:none;display:grid;gap:12px}

.svg-defs{position:absolute}

.footer-cookie-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;

  color:var(--muted);font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}

.footer-cookie-link:hover{color:var(--ice)}



.form-success{display:none;text-align:center;padding:56px 24px}

.form-success .ok{width:64px;height:64px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:rgba(45,212,167,.12);border:1px solid rgba(45,212,167,.4);color:var(--success)}

.form-success h3{margin-bottom:10px}

.form-success p{margin-inline:auto;font-size:.9375rem}

.form-card.done .form-grid{display:none}

.form-card.done .form-success{display:block}



/* ============================================================

   16. PATIČKA

   ============================================================ */

.footer{background:var(--obsidian);border-top:1px solid var(--edge);padding-block:72px 0}

.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.3fr;gap:48px}

.footer-brand p{font-size:.875rem;color:var(--muted);margin-top:20px;max-width:34ch}

.footer h4{font-family:var(--ff-mono);font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}

.footer ul{list-style:none;display:grid;gap:12px}

.footer ul a,.footer address a{color:var(--silver);font-size:.9375rem;font-style:normal}

.footer ul a:hover,.footer address a:hover{color:var(--ice)}

.footer address{font-style:normal;font-size:.9375rem;color:var(--silver);line-height:1.8}

.footer-bottom{margin-top:56px;padding-block:26px;border-top:1px solid rgba(42,58,92,.6);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}

.footer-bottom p{font-size:.8125rem;color:var(--muted);margin:0}

.footer-bottom a{font-size:.8125rem;color:var(--muted)}

.footer-bottom a:hover{color:var(--ice)}



/* ============================================================

   17. MOBILNÍ AKČNÍ LIŠTA

   ============================================================ */

.mobile-bar{

  display:none;position:fixed;inset:auto 0 0;z-index:98;gap:12px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));

  background:rgba(10,17,30,.92);backdrop-filter:blur(18px);border-top:1px solid var(--edge);

  transform:translateY(120%);transition:transform .3s var(--ease-out);

}

.mobile-bar.show{transform:translateY(0)}

.mobile-bar .btn{flex:1;min-height:50px;padding:0 12px;font-size:.9375rem}



/* ============================================================

   17b. COOKIE LIŠTA

   ------------------------------------------------------------

   Vyšší z-index než mobilní akční lišta záměrně — souhlas musí

   návštěvník vyřešit jako první, teprve pak se dostane k CTA liště.

   ============================================================ */

.cookie-bar{

  position:fixed;inset:auto 0 0;z-index:200;

  transform:translateY(101%);visibility:hidden;

  transition:transform .35s var(--ease-out),visibility 0s linear .35s;

  background:rgba(10,17,30,.96);backdrop-filter:blur(20px);

  border-top:1px solid var(--edge);

  padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));

}

.cookie-bar.show{transform:translateY(0);visibility:visible;transition-delay:0s}

.cookie-inner{

  max-width:var(--container);margin-inline:auto;

  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;

}

.cookie-text{flex:1 1 420px;font-size:.875rem;line-height:1.55;color:var(--silver);max-width:64ch}

.cookie-text a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}

.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}

.cookie-actions .btn{min-height:46px;padding:0 20px;font-size:.875rem}

@media (max-width:560px){

  .cookie-inner{flex-direction:column;align-items:stretch}

  .cookie-actions{width:100%}

  .cookie-actions .btn{flex:1}

}



/* ============================================================

   18. ODHALENÍ PŘI SCROLLU

   ============================================================ */

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}

.reveal.in{opacity:1;transform:none}



/* ============================================================

   19. RESPONZIVITA

   ============================================================ */

@media (max-width:1024px){

  :root{--section-y:96px;--pad:32px}

  .nav,.header-tel{display:none}

  .burger{display:flex}

  .benefit-grid{grid-template-columns:repeat(2,1fr)}

  .svc-grid{grid-template-columns:repeat(2,1fr)}

  .about{grid-template-columns:1fr;gap:48px}

  .about-media .frame{inset:20px -16px -16px 20px}

  .contact{grid-template-columns:1fr}

  .quotes{grid-template-columns:1fr;gap:20px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}

}

@media (max-width:720px){

  :root{--section-y:72px;--pad:20px}

  body{font-size:16px}

  .header-actions .btn-primary{display:none}

  /* Na mobilu se hero smrskne na obsah. Pevná výška tu dělala
     dvě potíže: prázdný tmavý pruh pod textem a extrémní ořez videa. */
  .hero{min-height:auto;padding-top:126px;padding-bottom:52px}
  .hero-trust{gap:8px 20px;padding-top:18px}

  .hero-cta{flex-direction:column;align-items:stretch}

  .hero-cta .btn{width:100%}

  .scroll-hint{display:none}

  .benefits{margin-top:28px}

  .benefit-grid{grid-template-columns:1fr;gap:14px}

  .benefit{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding:24px 22px}

  .benefit .num{grid-column:1/-1}

  .benefit .ico{margin:0}

  .benefit h3{margin-bottom:8px}

  .benefit p{grid-column:2}

  .ba{aspect-ratio:4/3;cursor:grab}

  .svc-grid{grid-template-columns:1fr}

  .steps{grid-template-columns:1fr;gap:36px;text-align:left}

  .steps::before{top:0;bottom:0;left:31px;right:auto;width:2px;height:auto;

    background:linear-gradient(180deg,var(--edge),var(--cyan),var(--edge));

    transform:scaleY(0);transform-origin:top}

  .steps.in::before{transform:scaleY(1)}

  .step{display:grid;grid-template-columns:64px 1fr;gap:0 20px;text-align:left}

  .step-num{margin:0;grid-row:span 3}

  .step p{margin:0}

  .stats{grid-template-columns:repeat(2,1fr);gap:32px 20px}

  .two-col{grid-template-columns:1fr}

  .contact-info,.form-card{padding:30px 22px}

  .footer-grid{grid-template-columns:1fr;gap:36px}

  .mobile-bar{display:flex}

  .footer{padding-bottom:80px}

  .section-head{margin-bottom:40px}

  .field input,.field select,.field textarea{font-size:16px}

}



/* ============================================================

   20. OMEZENÍ POHYBU

   ============================================================ */

@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

  .reveal{opacity:1;transform:none}

  .steps::before{transform:none!important}

}



/* ============================================================

   21. PODSTRÁNKY — hlavička, drobečky, článek

   ============================================================ */

.page-hero{padding:170px 0 72px;position:relative;overflow:hidden}

.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;

  background:linear-gradient(90deg,transparent,var(--edge) 20%,rgba(72,202,228,.4) 50%,var(--edge) 80%,transparent)}

.page-hero .glow{position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;

  background:radial-gradient(circle,rgba(0,180,216,.14),transparent 70%);pointer-events:none}

.page-hero h1,.page-hero .page-title{font-size:clamp(1.9rem,4vw,3.25rem);max-width:20ch;text-wrap:balance}

.page-hero .lead{margin-top:22px}



.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px;

  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}

.crumbs a{color:var(--muted)}

.crumbs a:hover{color:var(--ice)}

.crumbs span{color:var(--edge)}

.crumbs strong{color:var(--silver);font-weight:500}



.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;padding-block:72px 120px}

.article{max-width:none}

.article>*+*{margin-top:22px}

.article h2{font-size:clamp(1.35rem,2.2vw,1.875rem);margin-top:52px;scroll-margin-top:110px}

.article h3{font-size:1.25rem;margin-top:34px}

.article p{max-width:none;color:var(--silver)}

.article strong{color:var(--platinum);font-weight:600}

.article a{color:var(--ice);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(72,202,228,.4)}

.article a:hover{text-decoration-color:var(--ice)}

.article ul,.article ol{padding-left:22px;display:grid;gap:10px;color:var(--silver)}

.article li::marker{color:var(--ice)}

.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--ff-mono);font-size:.75rem;

  letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}



.callout{padding:26px 28px;border-radius:var(--r-card);background:var(--card);

  border:1px solid var(--edge);border-left:3px solid var(--cyan);margin-top:34px!important}

.callout b{display:block;color:var(--platinum);font-family:var(--ff-display);font-size:1.0625rem;margin-bottom:8px}

.callout p{font-size:.9375rem;margin:0}



.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:.9375rem}

.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--edge)}

.tbl th{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}

.tbl td{color:var(--silver)}

.tbl tr:last-child td{border-bottom:0}

.tbl td:first-child{color:var(--platinum);font-weight:600}



.aside{position:sticky;top:110px;display:grid;gap:20px}

.aside-card{padding:28px 26px}

.aside-card h4{font-family:var(--ff-display);font-size:1.0625rem;color:var(--platinum);margin-bottom:10px;letter-spacing:0;text-transform:none}

.aside-card p{font-size:.875rem;margin-bottom:20px}

.toc ul{list-style:none;display:grid;gap:10px}

.toc a{font-size:.875rem;color:var(--silver);display:block;padding-left:14px;border-left:2px solid var(--edge);transition:all .2s ease-out}

.toc a:hover{color:var(--ice);border-left-color:var(--cyan)}



/* Výpis poradny */

.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-block:72px 120px}

.post{display:flex;flex-direction:column;padding:32px 30px;position:relative;

  transition:transform .25s ease-out,border-color .25s ease-out}

.post:hover{transform:translateY(-5px);border-color:rgba(72,202,228,.35)}

.post .tag{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:14px}

.post h2{font-size:1.25rem;margin-bottom:12px;text-wrap:balance}

.post p{font-size:.9375rem;flex:1;margin-bottom:20px}

.post .more{display:inline-flex;align-items:center;gap:8px;color:var(--ice);font-weight:600;font-size:.9375rem}

.post .more svg{transition:transform .2s ease-out}

.post:hover .more svg{transform:translateX(4px)}

.post a.cover{position:absolute;inset:0;z-index:2}



/* Pás s výzvou */

.cta-band{background:var(--slate);border-block:1px solid var(--edge);padding-block:80px;text-align:center;position:relative}

.cta-band::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;

  background:linear-gradient(90deg,transparent,rgba(72,202,228,.35),transparent)}

.cta-band h2{margin-bottom:14px}

.cta-band p{margin:0 auto 30px}

.cta-band .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}



/* Stránka 404 / poděkování */

.state{min-height:78vh;display:grid;place-items:center;text-align:center;padding:150px 0 90px}

.state .code{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.24em;color:var(--ice);margin-bottom:20px}

.state h1,.state .page-title{margin-bottom:18px}

.state p{margin:0 auto 32px}

.state .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.state .ok-badge{width:78px;height:78px;margin:0 auto 30px;border-radius:50%;display:grid;place-items:center;

  background:rgba(45,212,167,.1);border:1px solid rgba(45,212,167,.4);color:var(--success)}



@media (max-width:1024px){

  .article-wrap{grid-template-columns:1fr;gap:40px;padding-block:52px 80px}

  .aside{position:static}

  .post-grid{grid-template-columns:1fr;padding-block:52px 80px}

  .page-hero{padding:140px 0 56px}

}

@media (max-width:720px){

  .page-hero{padding:120px 0 44px}

  .tbl{display:block;overflow-x:auto;white-space:nowrap}

  .cta-band{padding-block:56px}

  .cta-band .btns .btn{width:100%}

}



/* Chybová hláška celého formuláře */

.form-error{display:none;padding:14px 16px;border-radius:var(--r-btn);

  background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.35);

  color:#FFC9C9;font-size:.875rem;line-height:1.5}





/* ============================================================

   22. PŘEPÍNÁNÍ POHLEDŮ (jednosouborová verze)

   ============================================================ */

.view[hidden]{display:none}

.view{animation:viewIn .32s var(--ease-out)}

@keyframes viewIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){.view{animation:none}}



/* ============================================================

   DOTYKOVÉ CÍLE NA MOBILU

   Google hodnotí odkazy nižší než ~48 px jako špatně

   trefitelné prstem. Na malých displejích proto drobným

   odkazům v patičce a v postranním panelu přidáme výšku.

   ============================================================ */

@media (max-width:720px){

  .footer ul a,

  .footer address a,

  .footer-bottom a,

  .footer-cookie-link,

  .aside-links a,

  .toc a,

  .faq-a a,

  .info-list a{

    display:inline-block;

    padding-block:11px;

    line-height:1.45;

  }

  .footer ul{gap:2px}

  .aside-links{gap:2px}

  .toc ul{gap:2px}

  .footer-bottom{gap:4px 22px}

  .info-list{gap:14px}

}



/* ============================================================

   HLAVIČKA NA MOBILU

   Přepínač jazyků zůstává vidět přímo v liště (dřív se pod

   560 px schovával do rozbalovacího menu) a skupina vpravo

   se drží u pravého okraje, takže tlačítko menu sedí v rohu.

   ============================================================ */

@media (max-width:1024px){

  /* Bez viditelné navigace chybí prvek, který obsah roztlačí,

     proto skupinu vpravo odsuneme automatickým odsazením. */

  .header-actions{margin-left:auto}

}



@media (max-width:560px){

  .header-inner{gap:12px}

  .header-actions{gap:10px}

  .logo{min-width:0}

  .logo-text{font-size:.9375rem}



  /* Vlajky se už neschovávají, jen se zmenší, aby se vešly */

  .header-actions .lang{display:flex;padding:3px;gap:5px}

  .header-actions .lang button{width:28px;height:20px}



  /* Tlačítko menu je poslední prvek, drží se tedy vpravo */

  .burger{flex:none;margin-left:0}

}



/* Na opravdu úzkých displejích (360 px a méně) ubereme ještě víc,

   aby se logo, vlajky i tlačítko menu vešly na jeden řádek */

@media (max-width:360px){

  .header-inner{gap:8px;padding-inline:14px}

  .header-actions{gap:8px}

  .logo-text{font-size:.8125rem}

  .logo-text span{letter-spacing:.16em}

  .header-actions .lang{gap:3px;padding:2px}

  .header-actions .lang button{width:22px;height:16px}

}