/* Archivo (SIL Open Font License) — hostované na vlastním webu */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-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:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#EEEFF2;
  --paper-2:#E3E5EB;
  --ink:#0B1024;
  --ink-2:#444B63;
  --blue:#172A6E;      /* půlnoční modrá: plochy a tvary */
  --hi:#2B45A0;        /* světlejší tón pro mesh uvnitř ploch */
  --lo:#0D1A4B;        /* tmavší tón */
  --accent:#2F5BEA;    /* odkazy, fokus, drobné akcenty */
  /* typografická škála — stejná na všech stránkách */
  --fs-hero:clamp(2.4rem,10.4vw,11.5rem); /* hlavní slogan (H1 úvodu) */
  --fs-h1:clamp(2.6rem,6.8vw,7.6rem);     /* H1 podstránek */
  --fs-h2:clamp(2.3rem,6.2vw,6.8rem);     /* nadpisy sekcí */
  --fs-h3:clamp(20px,1.8vw,26px);         /* podnadpisy */
  --fs-lede:clamp(18px,1.4vw,21px);       /* úvodní odstavce */
  --cta:#D1167E;       /* purpurová: jen výzvy k akci (tlačítka) */
  --cta-hover:#A80F63;
  --on-blue:#FFFFFF;
  --on-blue-2:#C9D3F2;
  --blue-soft:#7C98F4;
  --ok:#0B7A3B;        /* potvrzení odeslání */
  --err:#C8322B;       /* chyba odeslání */
  --crm-bg:#0B1024;
  --crm-shape:#1A2A68;
  --rule:rgba(11,16,36,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,4.2vw,64px);
  --maxw:1600px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) var(--paper)}
body{font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;font-weight:400;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;caret-color:var(--accent);overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;z-index:100;left:12px;top:12px;width:auto;height:auto;clip:auto;padding:12px 16px;background:#fff;color:var(--ink);font-weight:700;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.tnum{font-variant-numeric:tabular-nums}
.xblack{font-weight:900;font-stretch:118%;letter-spacing:-.035em;line-height:.86}
.xthin{font-weight:100;font-stretch:118%;letter-spacing:-.025em}
.cap{font-weight:600;font-stretch:88%;font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* ——— Lišta ——— */
.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);transition:box-shadow .4s}
.bar.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.bar .wrap{display:flex;align-items:center;height:76px;gap:32px}
.logo{display:block;width:clamp(60px,5vw,72px);aspect-ratio:800/506;background:url(cd-logo-bold.png) left center/contain no-repeat}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{font-weight:600;font-stretch:92%;font-size:15px;padding:8px 12px;position:relative;transition:color .25s}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--cta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.menu a:hover,.menu a.is-here{color:var(--ink)}
.menu a:hover::after,.menu a.is-here::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:#fff;font:700 16px/1 "Archivo",sans-serif;font-stretch:96%;letter-spacing:.005em;cursor:pointer;transition:background .3s,color .3s,transform .5s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover{background:var(--blue)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--ink);color:#fff}
/* hlavní výzva k akci — na celém webu stejná purpurová */
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-hover);color:#fff}
.btn-lg{height:64px;padding:0 30px;font-size:18px}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-line:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.p-c .btn-line:hover,.p-e .btn-line:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.bar .btn{height:44px;font-size:15px}
.burger{display:none;margin-left:auto;height:44px;padding:0 16px;border:0;background:var(--ink);color:#fff;font:700 14px/1 "Archivo";letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* ——— Úvod: claim z A, háček z B ——— */
/* tloušťka háčku = výška prvního řádku, takže pruh kryje jen „Marketing.“ a ostatní řádky zůstanou čisté */
.stage{--fs:clamp(2.4rem,8.5vw,9.6rem);--lh:.98;--t:calc(var(--fs)*1.04);--top:clamp(28px,6vh,72px);position:relative;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(40% 40% at 6% 10%, color-mix(in srgb,var(--hi) 12%,transparent), transparent 70%),
  radial-gradient(30% 30% at 60% 60%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 70%)}
.grid-guides{position:absolute;inset:0;pointer-events:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px}
.grid-guides i{border-left:1px solid rgba(11,16,36,.05)}
.grid-guides i:last-child{border-right:1px solid rgba(11,16,36,.05)}
/* obří háček: rameno „h“ nad claimem, dřík „l“ vede dolů ke čtyřem oborům */
.hook-shape{position:absolute;z-index:3;pointer-events:none;right:calc(var(--pad) + 2vw);top:var(--top);width:min(40vw,680px);height:calc(100% - var(--top));border:var(--t) solid transparent;border-left:0;border-bottom:0;border-top-right-radius:calc(var(--t)*2);
  background:radial-gradient(60% 30% at 15% 0%, var(--hi), transparent 70%) border-box,radial-gradient(60% 40% at 100% 60%, var(--lo), transparent 70%) border-box,var(--blue) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  animation:drop 1.8s .1s var(--ease) both;will-change:transform}
@keyframes drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.hook-ink{position:absolute;left:0;top:0;margin:0;color:var(--on-blue);pointer-events:none}
.hook-ink>span{position:absolute;left:0;top:0;display:block;white-space:nowrap}
.since{position:absolute;z-index:4;right:calc(var(--pad) + 2vw);width:var(--t);top:auto;bottom:clamp(40px,8vh,96px);display:flex;align-items:center;justify-content:center;gap:.9em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--on-blue);pointer-events:none;animation:fade 1s 1s both}
.since span{font-weight:600;font-stretch:88%;font-size:clamp(11px,.9vw,13px);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1}
.since .cap{color:var(--on-blue-2);font-size:max(11px,calc(var(--t)*.075))}
@keyframes fade{from{opacity:0}}

.hero{position:relative;z-index:2;padding-top:var(--top);padding-bottom:clamp(64px,11vh,130px)}
/* čtyři obory jako titulky; zároveň hlavní rozcestník */
.index ol{list-style:none;font-size:var(--fs);line-height:var(--lh)}
.index a,.index .ix{display:block;width:max-content;max-width:100%;position:relative;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;transition:color .3s .05s;-webkit-tap-highlight-color:transparent}
.index a>span,.index .ix>span{display:inline-block;animation:up 1.1s var(--ease) both}
.index li:nth-child(2) :is(a,.ix)>span{animation-delay:.08s}.index li:nth-child(3) :is(a,.ix)>span{animation-delay:.16s}.index li:nth-child(4) :is(a,.ix)>span{animation-delay:.24s}
@keyframes up{from{transform:translateY(105%)}}
.index a::before{content:"";position:absolute;left:0;right:0;top:.08em;bottom:.2em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.index a:focus-visible{color:#fff}
.index a:focus-visible::before{transform:scaleX(1)}
@media (hover:hover){
  .index a:hover{color:#fff}
  .index a:hover::before{transform:scaleX(1)}
}
.index a:active{color:var(--cta)}

/* claim „Stavíme na spolehlivosti.“ + historie skupiny */
.intro{position:relative;z-index:2;padding-bottom:clamp(72px,12vh,140px)}
.claim{font-size:var(--fs-hero);line-height:.9;border-top:2px solid var(--ink);padding-top:clamp(28px,5vh,56px);max-width:calc(100% - var(--t) - 4vw)}
.claim span{display:block;width:max-content;max-width:none}
.claim .l1{font-weight:100;font-stretch:118%;letter-spacing:-.03em}
.claim .l2{font-weight:900;font-stretch:118%;letter-spacing:-.035em;margin-top:.02em;transition:font-weight 2.2s var(--ease)}
/* „spolehlivosti.“ nabere váhu, až claim dojede na obrazovku */
.js .claim:not(.go) .l2{font-weight:100}
.hero-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 20px;margin-top:clamp(36px,6vh,64px);align-items:end}
.lede{grid-column:1/span 5;font-size:var(--fs-lede);line-height:1.5;max-width:40ch}
.lede b{font-weight:800}
.hero-row .cta{grid-column:6/span 4;display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:clamp(40px,7vh,72px);padding-top:18px;border-top:1px solid var(--rule);max-width:calc(100% - var(--t) - 4vw);font-size:14px}
.facts span{display:flex;gap:10px;align-items:baseline}
.facts b{font-weight:600;font-stretch:88%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ——— Plakáty oborů ——— */
.poster{position:relative;overflow:hidden;padding:clamp(64px,11vh,130px) 0;scroll-margin-top:60px}
.poster .shape{position:absolute;pointer-events:none;will-change:transform}
.poster-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:28px 20px;align-items:end}
.p-head{grid-column:1/span 9}
.p-title{font-size:var(--fs-h2);display:block;width:max-content;max-width:100%}
.p-thin{display:block;font-size:calc(var(--fs-h2) * .5);line-height:1.04;margin-top:.22em;max-width:24ch}
.p-side{grid-column:9/span 4;display:flex;flex-direction:column;gap:28px;position:relative}
.p-m .p-side,.p-d .p-side{padding:28px;margin:-28px;background:var(--paper)}
.p-d .p-side{background:var(--paper-2)}
.p-sub{font-size:17px;line-height:1.55;max-width:46ch}
.p-h3{font-weight:900;font-stretch:112%;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em;margin-bottom:-18px}
.p-list{list-style:none;border-top:2px solid currentColor}
.p-list li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:500;font-stretch:96%;font-size:16.5px}
.p-list li::before{content:"";flex:none;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;border-top-right-radius:4px;transform:translateY(-1px)}
.p-icon{display:block;width:clamp(52px,5.4vw,80px);height:clamp(52px,5.4vw,80px);margin-bottom:clamp(18px,2.4vw,28px)}
.p-icon svg{width:100%;height:100%;display:block}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
/* Marketing — papír + otevřené „C“ */
.p-m{background:var(--paper)}
.p-m .shape{width:min(52vw,820px);aspect-ratio:1;right:-12vw;top:50%;margin-top:calc(min(52vw,820px)/-2)}
.p-m .shape circle{stroke:var(--blue)}
.p-m .acc{fill:var(--accent)}
/* Velkoobchod — půlnoční pole + diagonála „z“ */
.p-e{background:var(--blue);color:var(--on-blue)}
.p-e::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 20%,color-mix(in srgb,var(--hi) 55%,transparent),transparent 70%),radial-gradient(40% 50% at 10% 100%,color-mix(in srgb,var(--lo) 70%,transparent),transparent 70%)}
.p-e .shape{width:min(62vw,980px);height:140%;right:-8vw;top:-20%}
.p-e .shape path{fill:var(--lo)}
.p-e .p-list{border-color:var(--on-blue)}
.p-e .p-list li{border-color:color-mix(in srgb,var(--on-blue) 24%,transparent)}
.p-e .p-sub{color:var(--on-blue-2)}
.p-e .acc{fill:var(--blue-soft)}
/* CRMCO — inkoustové pole + obří logo CRMCO, které při scrollu projíždí */
.p-c{background:var(--crm-bg);color:#fff}
.p-c::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 55% at 90% 10%,color-mix(in srgb,var(--hi) 40%,transparent),transparent 70%)}
.p-c .shape{width:175vw;aspect-ratio:4.589;left:-2vw;top:50%;margin-top:-19vw;background:url(crmco-logo-shape.svg) left center/contain no-repeat;}
.p-c .p-list{border-color:#fff}
.p-c .p-list li{border-color:rgba(255,255,255,.2)}
.p-c .p-sub{color:#BBC6EE}
.p-c .acc{fill:var(--blue-soft)}
.crm-badge{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-stretch:88%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#BBC6EE}
.crm-badge i{display:block;height:18px;aspect-ratio:4.589;background:url(crmco-logo-white.svg) left center/contain no-repeat}
/* Domovy — papír 2 + oblouk „h“ */
.p-d{background:var(--paper-2)}
.p-d .shape{--t:clamp(56px,8vw,130px);width:min(40vw,640px);height:120%;right:var(--pad);top:-8%;border:var(--t) solid var(--blue);border-bottom:0;border-radius:calc(var(--t)*2) calc(var(--t)*2) 0 0}
.p-d .acc{fill:var(--accent)}
.specs{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.specs div{padding:12px 0;border-bottom:1px solid var(--rule)}
.specs div:nth-child(odd){padding-right:16px}
.specs dt{font-weight:600;font-stretch:88%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.specs dd{font-weight:800;font-stretch:108%;font-size:19px;letter-spacing:-.01em}

/* ——— Reference ——— */
.refs{background:var(--paper);padding:clamp(56px,9vh,110px) 0 clamp(40px,7vh,80px);overflow:hidden;border-top:2px solid var(--ink)}
.refs-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,4vh,40px)}
.refs-head .cap{color:var(--ink-2)}
.marquee{display:flex;width:max-content;animation:roll 40s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee ul{display:flex;list-style:none;align-items:center;font-size:var(--fs-h2);white-space:nowrap}
.marquee li{display:flex;align-items:center;transition:color .3s}
.marquee li:hover{color:var(--accent)}
.marquee li::after{content:"";display:inline-block;width:.5em;height:.5em;margin:0 .4em;border-top:.16em solid var(--blue);border-right:.16em solid var(--blue);border-top-right-radius:.28em;transform:translateY(-.04em)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ——— Kontakt ——— */
.contact{background:var(--blue);color:var(--on-blue);position:relative;overflow:hidden;padding:clamp(72px,12vh,140px) 0}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 60% at 100% 0%,color-mix(in srgb,var(--hi) 70%,transparent),transparent 70%),radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--lo) 80%,transparent),transparent 70%)}
.c-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:40px 20px}
.c-head{grid-column:1/span 5}
.c-title{font-size:var(--fs-h2)}
.c-title .xthin{display:block;font-size:.5em;line-height:1;margin-bottom:.1em}
.c-head p{margin-top:24px;color:var(--on-blue-2);max-width:36ch;font-size:var(--fs-lede)}
.direct{margin-top:40px;list-style:none;border-top:2px solid var(--on-blue)}
.direct li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--on-blue) 24%,transparent);font-weight:600;font-size:16.5px;flex-wrap:wrap}
.direct span{font-weight:500;font-stretch:88%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-blue-2);padding-top:3px}
.direct a{border-bottom:1px solid transparent;transition:border-color .3s}
.direct a:hover{border-color:var(--on-blue)}
.form{grid-column:7/span 6;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-stretch:88%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-blue)}
.field label i{font-style:normal;font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--on-blue-2)}
.field input,.field select,.field textarea{width:100%;font:500 17px/1.3 "Archivo",sans-serif;color:var(--ink);background:#fff;border:2px solid #fff;border-radius:0;padding:14px 16px;appearance:none;-webkit-appearance:none;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:140px;resize:vertical}
.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B1024' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px}
.field input::placeholder,.field textarea::placeholder{color:#6A7090}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--paper-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:6px 6px 0 -2px var(--ink)}
.field .err{display:none;font-weight:600;font-size:14px;color:var(--ink);background:#fff;padding:6px 10px;align-self:flex-start;box-shadow:inset 3px 0 0 var(--err)}
.field.invalid input,.field.invalid textarea{border-color:var(--err)}
.field.invalid .err{display:block}
.check{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--on-blue-2);cursor:pointer}
.check input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:1px;border:2px solid #fff;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.check input::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input:checked{background:#fff}
.check input:checked::after{opacity:1}
.consent a,.check a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:10px}
.consent{font-size:13.5px;color:var(--on-blue-2);max-width:40ch}
.form-status{grid-column:1/-1;font-weight:600;min-height:1.5em}
.form-status.is-ok,.form-status.is-err{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;line-height:1.45}
.form-status.is-ok{background:var(--ok);color:#fff}
.form-status.is-ok::before{content:"";flex:none;width:18px;height:10px;margin-top:4px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.form-status.is-err{background:#fff;color:var(--ink);box-shadow:inset 5px 0 0 var(--err)}

/* ——— Patička ——— */
.foot{background:var(--paper);padding:clamp(56px,9vh,100px) 0 32px;font-size:15px}
.foot-top{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 20px}
.foot-col{grid-column:span 3}
.foot h2{font-weight:600;font-stretch:88%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.foot address{font-style:normal}
.foot a{border-bottom:1px solid var(--rule)}
.foot a:hover{border-color:var(--accent);color:var(--accent)}
.bigmark{position:relative;width:100%;aspect-ratio:1600/1013;margin-top:clamp(48px,9vh,100px)}
.bigmark i{position:absolute;inset:0}
.bigmark .ink{background:url(cd-logo.png) center/contain no-repeat}
.bigmark .stem{background:var(--blue);clip-path:inset(24.1% 1% 13.69% 94.24%)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:2px solid var(--ink);font-size:13.5px;color:var(--ink-2)}

/* ——— Responsive ——— */
@media (max-width:1100px){
  .p-head{grid-column:1/-1}
  .p-side{grid-column:1/span 8}
  .lede{grid-column:1/span 7}
  .hero-row .cta{grid-column:1/span 7;grid-row:2}
  .c-head,.form{grid-column:1/-1}
  .foot-col{grid-column:span 6}
}
@media (max-width:820px){
  .menu,.bar .btn{display:none}
  .burger{display:block}
  .bar.open .menu{display:flex;flex-direction:column;position:fixed;inset:76px 0 auto 0;background:var(--paper);padding:8px var(--pad) 24px;border-bottom:2px solid var(--ink);gap:0}
  .bar.open .menu a{font-size:28px;font-weight:900;font-stretch:112%;padding:10px 0;border-bottom:1px solid var(--rule)}
  .bar.open .menu a::after{display:none}
  .grid-guides{grid-template-columns:repeat(4,1fr)}
  .grid-guides i:nth-child(n+5){display:none}
  .stage{--fs:clamp(2.1rem,10.2vw,4.6rem);--lh:1;--t:calc(var(--fs)*1.06)}
  .hook-shape{width:40vw;right:-3vw}
  .since{right:-3vw}
  .hero{padding-bottom:56px}
  :root{--fs-hero:clamp(2.2rem,11vw,5rem);--fs-h1:clamp(2.2rem,11vw,4rem);--fs-h2:clamp(2rem,10.4vw,3.6rem);--fs-h3:20px}
  .claim{max-width:calc(100% - 50px)}
  .lede,.hero-row .cta,.p-side{grid-column:1/-1}
  .facts,.hero-row{max-width:calc(100% - 50px)}
  .hero-row .cta .btn{flex:1 1 auto;justify-content:space-between}
  .p-m .p-side,.p-d .p-side{margin:0 calc(var(--pad)*-1);padding:22px var(--pad)}
  .p-m .shape{width:90vw;margin-top:-45vw;right:-40vw}
  .p-c .shape{width:300vw;margin-top:-33vw;left:-40vw}
  .p-d .shape{--t:34px;width:40vw;right:-6vw;top:-26%;height:44%}
  .form{grid-template-columns:1fr}
  .foot-col{grid-column:1/-1}
}
/* ——— Souhlas s cookies ——— */
.souhlas{position:fixed;z-index:60;left:0;right:0;bottom:0;max-height:100vh;overflow-y:auto;background:var(--ink);color:#fff;font-size:15px;box-shadow:0 -18px 40px -24px rgba(0,0,0,.5);animation:souhlas-in .6s var(--ease)}
.souhlas[hidden]{display:none}
.souhlas-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:end;padding-top:24px;padding-bottom:24px}
.souhlas .cap{color:var(--on-blue-2);margin-bottom:6px}
.souhlas-text p:last-child{max-width:70ch;color:var(--on-blue-2)}
.souhlas-text a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.souhlas-volby{grid-column:1/-1;display:grid;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.souhlas-volby[hidden]{display:none}
.souhlas-volby b{color:#fff}
.souhlas .check input:disabled{opacity:.5;cursor:default}
.souhlas-btns{display:flex;gap:10px;flex-wrap:wrap}
.souhlas-btns .btn{height:48px;font-size:15px}
.souhlas .btn-line:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #fff}
@keyframes souhlas-in{from{transform:translateY(100%)}}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-cookies{background:none;border:0;border-bottom:1px solid var(--rule);padding:0;font:inherit;color:inherit;cursor:pointer}
.foot-cookies:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:820px){
  .souhlas-in{grid-template-columns:1fr;padding-top:20px;padding-bottom:20px}
  .souhlas-btns .btn{flex:1 1 auto;justify-content:center}
  .souhlas-btns .btn-line{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .souhlas{animation:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .claim:not(.go) .l2{font-weight:900;font-stretch:118%;letter-spacing:-.035em}
  .marquee{flex-wrap:wrap;width:auto}
  .marquee ul[aria-hidden]{display:none}
  .marquee ul{flex-wrap:wrap;white-space:normal;font-size:clamp(1.8rem,4vw,3.6rem);padding:0 var(--pad)}
}

/* ——— Podstránky ——— */
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-weight:600;font-stretch:88%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:clamp(28px,5vh,56px)}
.crumbs a{border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--accent);border-color:var(--accent)}
.page-head{position:relative;padding:clamp(20px,3vh,32px) 0 clamp(48px,8vh,96px)}
.page-title{font-size:var(--fs-h1);line-height:.9}
.page-title .xthin{display:block;font-size:.5em;margin-bottom:.1em}
.page-lede{margin-top:clamp(24px,4vh,40px);font-size:var(--fs-lede);max-width:46ch}
.menu a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.section{padding:clamp(64px,11vh,130px) 0;position:relative}
.section-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:clamp(32px,6vh,64px);align-items:end}
.section-head h2{grid-column:1/span 7;font-size:var(--fs-h2)}
.section-head p{grid-column:8/span 5;max-width:44ch;color:var(--ink-2)}
/* řádky funkcí: typografický seznam místo karet */
.rows{list-style:none;border-top:2px solid var(--ink)}
.rows li{display:grid;grid-template-columns:repeat(12,1fr);gap:8px 20px;padding:22px 0;border-bottom:1px solid var(--rule)}
.rows h3{grid-column:1/span 5;font-weight:900;font-stretch:112%;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em}
.rows p{grid-column:6/span 7;max-width:58ch;color:var(--ink-2)}
.on-dark .rows{border-color:#fff}
.on-dark .rows li{border-color:rgba(255,255,255,.18)}
.on-dark .rows p{color:#C3CCEE}
/* kroky spolupráce: číslo | nadpis | popis v jedné mřížce */
.steps{list-style:none;border-top:2px solid var(--ink)}
.steps li{display:grid;grid-template-columns:clamp(64px,7vw,112px) minmax(0,5fr) minmax(0,6fr);gap:6px clamp(16px,2.4vw,40px);align-items:baseline;padding:clamp(22px,3.4vh,34px) 0;border-bottom:1px solid var(--rule)}
.steps .n{font-weight:900;font-stretch:118%;font-size:clamp(26px,3vw,44px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.steps h3{font-weight:900;font-stretch:112%;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em}
.steps p{color:var(--ink-2);max-width:52ch}
@media (max-width:900px){
  .steps li{grid-template-columns:clamp(48px,12vw,64px) minmax(0,1fr)}
  .steps p{grid-column:2}
}
/* čtecí režim (GDPR) */
.doc{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding-bottom:clamp(72px,12vh,140px)}
.toc{grid-column:1/span 3;position:sticky;top:100px;align-self:start;font-size:14.5px}
.toc p{font-weight:600;font-stretch:88%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:8px}
.toc ol{list-style:none}
.toc a{display:block;padding:6px 0;border-bottom:1px solid var(--rule);transition:color .2s}
.toc a:hover{color:var(--accent)}
.prose{grid-column:5/span 7;max-width:68ch;font-size:17.5px;line-height:1.65}
.prose h2{font-weight:900;font-stretch:112%;font-size:calc(var(--fs-h3) * 1.2);line-height:1.1;letter-spacing:-.02em;margin:56px 0 16px;padding-top:18px;border-top:2px solid var(--ink);scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:800;font-size:18px;margin:28px 0 8px}
.prose p,.prose ul,.prose table{margin-bottom:14px}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
.prose th{font-weight:600;font-stretch:88%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--ink)}
.prose .meta{color:var(--ink-2);font-size:15px}
@media (max-width:900px){
  .section-head h2,.section-head p{grid-column:1/-1}
  .rows h3,.rows p{grid-column:1/-1}
  .toc{position:static;grid-column:1/-1}
  .prose{grid-column:1/-1}
}