/* ══════════════════════════════════════════════════════════════════════════ POZNAJ — poznaj.sk Idea značky: najprv poznaj stav, potom ho zmeň, nakoniec zmenu dokáž číslom. Celá výzva na regionálny príspevok stojí na dvojici „východiskový stav → merateľný účinok“ — vizuál preto pracuje s meraním: mriežka, skok krivky, akcentový bod ako cieľová hodnota. Farby: ink #0C1116 (podklad) · paper #FBFAF7 · signal #C6F04A Typo : Space Grotesk (displej, čísla) · Switzer (text) ══════════════════════════════════════════════════════════════════════════ */ :root{ /* tmavá vrstva */ --ink:#0C1116; --ink-2:#131A22; --ink-3:#1B242E; --ink-4:#26313D; --on-ink:#F4F3EF; --on-ink-2:#AEB7C0; --on-ink-3:#828C97; --line-d:rgba(244,243,239,.11); --line-d2:rgba(244,243,239,.20); /* svetlá vrstva */ --paper:#FBFAF7; --paper-2:#F3F1EB; --paper-3:#EAE7DE; --line:#E2DFD5; --line-2:#CFCBBE; --txt:#0C1116; --txt-2:#414B56; --txt-3:#666E79; /* 4,57:1 aj na --paper-2; #6A737E bolo 4,26:1 */ /* akcent */ --acc:#C6F04A; /* limetka — iba na tmavom podklade */ --acc-2:#A9DC2B; --acc-ink:#101806; /* text na limetkovej ploche */ --moss:#3E7A0F; /* limetka prevedená pre svetlý podklad */ --moss-2:#2E5C0A; --glow:rgba(198,240,74,.30); /* semafor pre oprávnenosť */ --ok:#3E7A0F; --warn:#9A6A00; --no:#A3342A; --d:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; /* displej + čísla */ --s:'Switzer',ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --wrap:1200px; --pad:24px; --hdr:68px; --r:10px; --r-l:16px; --r-xl:24px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);background:var(--ink)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--txt); font:400 17px/1.62 var(--s);-webkit-font-smoothing:antialiased;overflow-x:clip} img,svg{max-width:100%;display:block} h1,h2,h3,h4{margin:0;font-family:var(--d);font-weight:700;letter-spacing:-.03em; line-height:1.02;text-wrap:balance} p{margin:0 0 1em} a{color:inherit} b,strong{font-weight:700} :focus-visible{outline:3px solid var(--acc-2);outline-offset:3px;border-radius:4px} ::selection{background:var(--acc);color:var(--acc-ink)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:999;background:var(--acc);color:var(--acc-ink); padding:10px 18px;border-radius:var(--r);font-weight:600} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* čísla vždy tabuľkové — inak countdown a kalkulačka „skáču“ */ .num,.cd__u b,.calc output,.stat b,.fact b{font-family:var(--d);font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1} /* ── odhaľovanie pri scrolle ─────────────────────────────────────────────── */ html.js .r{opacity:0;transform:translateY(22px)} html.js .r.in{opacity:1;transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease)} @media (prefers-reduced-motion:reduce){html.js .r{opacity:1!important;transform:none!important}} /* ══ HLAVIČKA ═════════════════════════════════════════════════════════════ */ /* Hlavička je sticky, teda je v toku NAD hero — za ňou nie je tmavé hero, ale biele pozadie . Polopriehľadné pozadie tam vychádzalo #4F5255, čiže sivý pás nad čiernym hero. V pokoji preto plná --ink, ktorá s hero splynie bez švíku; sklo sa zapne až po scrollnutí, keď pod hlavičkou naozaj prebieha obsah. */ .top{position:sticky;top:0;z-index:80;background:var(--ink); border-bottom:1px solid transparent;transition:background .3s,border-color .3s} .top.solid{background:rgba(12,17,22,.92);border-bottom-color:var(--line-d); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)} .top__in{display:flex;align-items:center;gap:20px;min-height:var(--hdr)} .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--on-ink)} .brand svg{width:30px;height:30px;flex:0 0 30px} .brand__t{font:700 21px/1 var(--d);letter-spacing:-.035em} .brand__t i{font-style:normal;color:var(--acc)} .nav{margin-left:auto;display:flex;align-items:center;gap:26px;flex-wrap:nowrap} .nav .btn{flex:0 0 auto} .nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0} .nav ul a{color:var(--on-ink-2);text-decoration:none;font:500 14.5px/1 var(--s); padding:8px 0;display:block;position:relative;transition:color .2s} .nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px; background:var(--acc);transition:right .32s var(--ease)} .nav ul a:hover{color:var(--on-ink)} .nav ul a:hover::after{right:0} .nt{position:absolute;opacity:0;pointer-events:none} .burger{display:none} .prog{height:2px;background:transparent} .prog i{display:block;height:2px;width:0;background:var(--acc)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font:600 15px/1 var(--s);text-decoration:none;padding:13px 20px;border-radius:var(--r-pill); border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease), background .2s,box-shadow .25s,border-color .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn--acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 8px 26px -10px var(--glow)} .btn--acc:hover{background:#D3F76A;box-shadow:0 14px 34px -10px var(--glow)} .btn--ghost{border-color:var(--line-d2);color:var(--on-ink)} .btn--ghost:hover{border-color:var(--on-ink-3);background:rgba(244,243,239,.05)} .btn--ink{background:var(--ink);color:var(--on-ink)} .btn--ink:hover{background:var(--ink-3)} .btn--line{border-color:var(--line-2);color:var(--txt)} .btn--line:hover{background:var(--paper-2);border-color:var(--txt-3)} .btn--sm{padding:10px 16px;font-size:14px} /* ══ HERO ═════════════════════════════════════════════════════════════════ */ .hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden; padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,84px)} /* Mriežka na pozadí = meranie. Dva prekryté gradienty + radiálna maska, aby sa smerom von strácala a nesúťažila s textom. */ .hero::before{content:"";position:absolute;inset:-2px;pointer-events:none; background-image:linear-gradient(var(--line-d) 1px,transparent 1px), linear-gradient(90deg,var(--line-d) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(120% 85% at 22% 8%,#000 0,transparent 72%); mask-image:radial-gradient(120% 85% at 22% 8%,#000 0,transparent 72%)} .hero::after{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-220px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(198,240,74,.16),transparent 62%)} .hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(32px,5vw,64px);align-items:start} .eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--s); letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2);margin:0 0 22px} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 7px; box-shadow:0 0 0 4px rgba(198,240,74,.16)} .hero h1{font-size:clamp(38px,6.2vw,76px);letter-spacing:-.042em;margin:0 0 22px} .hero h1 i{font-style:normal;color:var(--acc)} .hero__lead{font-size:clamp(17px,1.9vw,20px);color:var(--on-ink-2);max-width:56ch;margin:0 0 30px} .hero__lead b{color:var(--on-ink);font-weight:600} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .hero__note{font-size:14px;color:var(--on-ink-3);max-width:52ch;margin:0} /* ── odpočet ── */ .cd{background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-xl); padding:24px;position:relative;overflow:hidden} .cd::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--acc),transparent)} .cd__h{font:600 12px/1 var(--s);letter-spacing:.13em;text-transform:uppercase; color:var(--on-ink-3);margin:0 0 16px;display:flex;align-items:center;gap:9px} .cd__h .pulse{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 8px; animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(198,240,74,.5)}55%{box-shadow:0 0 0 9px rgba(198,240,74,0)}} @media (prefers-reduced-motion:reduce){.cd__h .pulse{animation:none}} .cd__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px} .cd__u{background:var(--ink-3);border-radius:var(--r);padding:12px 6px;text-align:center} .cd__u b{display:block;font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.04em; color:var(--on-ink);line-height:1} .cd__u span{display:block;font:500 10.5px/1 var(--s);letter-spacing:.1em;text-transform:uppercase; color:var(--on-ink-3);margin-top:7px} .cd__f{border-top:1px solid var(--line-d);padding-top:16px;font-size:13.5px;color:var(--on-ink-2)} .cd__f dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0} .cd__f dt{color:var(--on-ink-3)} .cd__f dd{margin:0;text-align:right;font-weight:600;color:var(--on-ink)} /* ── bežiaci pás okresov ── */ .ticker{background:var(--ink-2);border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);overflow:hidden;padding:13px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .ticker__t{display:flex;width:max-content;animation:slide 68s linear infinite} .ticker:hover .ticker__t,.ticker:focus-within .ticker__t{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.ticker__t{animation:none} .ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}} @keyframes slide{to{transform:translateX(-50%)}} .ticker span{font:500 13.5px/1 var(--s);color:var(--on-ink-2);padding:0 17px;white-space:nowrap; display:inline-flex;align-items:center;gap:17px} .ticker span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--acc);opacity:.55} /* ══ SEKCIE ═══════════════════════════════════════════════════════════════ */ .sec{padding:clamp(62px,8.5vw,110px) 0} .sec--paper{background:var(--paper)} .sec--paper2{background:var(--paper-2)} .sec--ink{background:var(--ink);color:var(--on-ink)} .sec--ink h2,.sec--ink h3{color:var(--on-ink)} .sec--ink .sec__lead{color:var(--on-ink-2)} .sec--ink .lbl{color:var(--on-ink-3)} .sec--ink .lbl::before{background:var(--acc)} .lbl{display:flex;align-items:center;gap:11px;font:600 12px/1 var(--s);letter-spacing:.15em; text-transform:uppercase;color:var(--txt-3);margin:0 0 20px} .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--moss);flex:0 0 7px} .lbl em{font-style:normal;font-family:var(--d);font-weight:700;letter-spacing:.04em;opacity:.55} .sec__h{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.038em;max-width:20ch;margin:0 0 20px} .sec__h i{font-style:normal;color:var(--moss)} .sec--ink .sec__h i{color:var(--acc)} .sec__lead{font-size:clamp(17px,1.7vw,19px);color:var(--txt-2);max-width:62ch;margin:0 0 44px} .sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:28px 56px; align-items:end;margin-bottom:48px} .sec__head .sec__lead{margin:0} .sec__head .sec__h{margin:0} /* ══ „nie je to web“ — porovnanie ═════════════════════════════════════════ */ .vs{display:grid;grid-template-columns:1fr 1fr;gap:20px} .vs__c{border-radius:var(--r-xl);padding:30px;border:1px solid var(--line-d)} .vs__c--no{background:var(--ink-2)} .vs__c--yes{background:linear-gradient(160deg,rgba(198,240,74,.10),rgba(198,240,74,.02)); border-color:rgba(198,240,74,.28)} .vs__tag{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--s); letter-spacing:.11em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill); margin-bottom:20px} .vs__c--no .vs__tag{background:rgba(244,243,239,.07);color:var(--on-ink-3)} .vs__c--yes .vs__tag{background:var(--acc);color:var(--acc-ink)} .vs__c h3{font-size:23px;margin:0 0 14px;letter-spacing:-.03em} .vs__c ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .vs__c li{display:flex;gap:11px;font-size:15.5px;line-height:1.5;color:var(--on-ink-2)} .vs__c li::before{content:"—";color:var(--on-ink-3);flex:0 0 auto} .vs__c--yes li::before{content:"→";color:var(--acc)} .vs__c--yes li{color:var(--on-ink)} .vs__cite{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-d); font-size:13px;line-height:1.55;color:var(--on-ink-3)} .vs__cite b{color:var(--on-ink-2);font-weight:600} /* ══ KALKULAČKA ═══════════════════════════════════════════════════════════ */ .calc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,48px); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl); padding:clamp(24px,3.4vw,40px)} .calc fieldset{border:0;margin:0 0 26px;padding:0} .calc legend{font:600 13px/1 var(--s);letter-spacing:.07em;text-transform:uppercase; color:var(--txt-3);margin-bottom:13px;padding:0} .seg{display:grid;gap:9px} .seg label{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;cursor:pointer; border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper); transition:border-color .2s,background .2s,box-shadow .2s} .seg label:hover{border-color:var(--line-2);background:var(--paper-2)} .seg input{position:absolute;opacity:0;width:0;height:0} .seg .mk{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 19px; margin-top:2px;position:relative;transition:border-color .2s} .seg .mk::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--moss); transform:scale(0);transition:transform .2s var(--ease)} .seg input:checked ~ .mk{border-color:var(--moss)} .seg input:checked ~ .mk::after{transform:scale(1)} .seg label:has(input:checked){border-color:var(--moss);background:#F5FAEE; box-shadow:0 0 0 3px rgba(62,122,15,.10)} .seg label:has(input:focus-visible){outline:3px solid var(--acc-2);outline-offset:2px} .seg .tx b{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em} .seg .tx span{display:block;font-size:13.5px;color:var(--txt-3);line-height:1.45;margin-top:3px} .calc .rng{display:flex;flex-direction:column;gap:11px} .calc .rng output{font:700 30px/1 var(--d);letter-spacing:-.035em;color:var(--txt)} .calc input[type=range]{width:100%;accent-color:var(--moss);height:26px} .calc__out{background:var(--ink);color:var(--on-ink);border-radius:var(--r-l); padding:clamp(22px,3vw,32px);align-self:start;position:relative;overflow:hidden} .calc__out::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--acc),transparent 70%)} .calc__out h3{font-size:19px;margin:0 0 6px;letter-spacing:-.025em} .calc__out>p{font-size:13.5px;color:var(--on-ink-3);margin:0 0 24px} .bars{display:grid;gap:18px;margin-bottom:24px} .bar__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px} .bar__h span{font:500 13.5px/1.3 var(--s);color:var(--on-ink-2)} .bar__h b{font:700 19px/1 var(--d);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .bar__t{height:11px;border-radius:var(--r-pill);background:var(--ink-3);overflow:hidden} .bar__t i{display:block;height:100%;border-radius:var(--r-pill);width:0; transition:width .7s var(--ease)} .bar--work .bar__t i{background:var(--acc)} .bar--vat .bar__t i{background:var(--ink-4)} .bar--cash .bar__t i{background:#E0B341} .calc__verdict{border-top:1px solid var(--line-d);padding-top:20px;font-size:14.5px; line-height:1.6;color:var(--on-ink-2)} .calc__verdict b{color:var(--acc);font-weight:600} .calc__verdict .say{display:block;margin-top:12px;padding:13px 15px;background:var(--ink-2); border-left:2px solid var(--acc);border-radius:0 var(--r) var(--r) 0;font-style:italic; color:var(--on-ink)} /* ══ OPRÁVNENOSŤ ══════════════════════════════════════════════════════════ */ .elig{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,44px); align-items:start} .elig__form{background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-xl); padding:26px;position:sticky;top:calc(var(--hdr) + 20px)} .elig__form fieldset{border:0;margin:0 0 22px;padding:0} .elig__form legend{font:600 12px/1 var(--s);letter-spacing:.1em;text-transform:uppercase; color:var(--on-ink-3);margin-bottom:12px;padding:0} .elig__form .seg label{background:var(--ink-3);border-color:var(--line-d);color:var(--on-ink)} .elig__form .seg label:hover{background:var(--ink-4);border-color:var(--line-d2)} .elig__form .seg .mk{border-color:var(--line-d2)} .elig__form .seg .mk::after{background:var(--acc)} .elig__form .seg input:checked ~ .mk{border-color:var(--acc)} .elig__form .seg label:has(input:checked){border-color:var(--acc);background:rgba(198,240,74,.10); box-shadow:0 0 0 3px rgba(198,240,74,.10)} .elig__form .seg .tx span{color:var(--on-ink-2)} /* na --ink-4 pri hoveri mala --on-ink-3 len 3,87:1 */ .elig__form .fld{display:block;margin-bottom:8px} .elig__form .fld span{display:block;font-size:13.5px;color:var(--on-ink-2);margin-bottom:7px} .elig__form input[type=number]{width:100%;background:var(--ink-3);border:1px solid var(--line-d2); color:var(--on-ink);border-radius:var(--r);padding:12px 14px;font:600 16px/1 var(--d); font-variant-numeric:tabular-nums} .elig__form input[type=number]:focus{outline:none;border-color:var(--acc)} .elig__res{display:grid;gap:12px} .act{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start; background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-l);padding:20px 22px; transition:border-color .25s,background .25s} .act[data-s="ok"]{border-color:rgba(198,240,74,.35);background:linear-gradient(120deg,rgba(198,240,74,.07),transparent 60%)} .act[data-s="no"]{opacity:.42} .act__id{font:700 13px/1 var(--d);letter-spacing:.02em;padding:7px 10px;border-radius:var(--r); background:var(--ink-3);color:var(--on-ink-2);white-space:nowrap} .act[data-s="ok"] .act__id{background:var(--acc);color:var(--acc-ink)} .act h4{font-size:17px;margin:0 0 5px;letter-spacing:-.02em;color:var(--on-ink)} .act p{margin:0;font-size:14px;line-height:1.5;color:var(--on-ink-2)} .act__why{display:block;margin-top:8px;font-size:13px;color:var(--on-ink-3)} .act[data-s="ok"] .act__why{color:var(--acc-2)} .act__amt{font:700 15px/1.3 var(--d);letter-spacing:-.02em;text-align:right;color:var(--on-ink); white-space:nowrap;font-variant-numeric:tabular-nums} .act__amt em{display:block;font-style:normal;font:500 11.5px/1 var(--s);color:var(--on-ink-3); margin-top:5px;letter-spacing:.05em;text-transform:uppercase} /* ══ KARTY: čo staviame ═══════════════════════════════════════════════════ */ /* Štyri karty: pri troch stĺpcoch vznikne rad 3+1, ktorý pôsobí ako chyba. 400 px ako minimum vynúti na desktope 2×2 a na mobile jeden stĺpec. */ .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:18px} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl); padding:28px;display:flex;flex-direction:column;position:relative;overflow:hidden; transition:border-color .25s,transform .25s var(--ease),box-shadow .25s} .card:hover{border-color:var(--line-2);transform:translateY(-3px); box-shadow:0 22px 48px -26px rgba(12,17,22,.28)} .card__id{font:700 12px/1 var(--d);letter-spacing:.05em;color:var(--moss); background:#EDF6E0;border-radius:var(--r-pill);padding:7px 11px;align-self:flex-start; margin-bottom:18px} .card h3{font-size:21px;margin:0 0 11px;letter-spacing:-.028em} .card p{font-size:15.2px;color:var(--txt-2);margin:0 0 18px} .card ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px} .card li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.5;color:var(--txt-2)} .card li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px; border-radius:50%;background:var(--moss);opacity:.75} .card__proof{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line-2); font-size:13.5px;line-height:1.55;color:var(--txt-3)} .card__proof b{color:var(--txt);font-weight:600;display:block;margin-bottom:4px; font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)} .card__proof a{color:var(--moss);font-weight:600;text-underline-offset:3px} /* ══ ČÍSLA / REFERENCIE ═══════════════════════════════════════════════════ */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px; background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r-xl);overflow:hidden} .stat{background:var(--ink-2);padding:28px 24px} .stat b{display:block;font:700 clamp(30px,4vw,42px)/1 var(--d);letter-spacing:-.045em; color:var(--acc);margin-bottom:9px} .stat span{display:block;font-size:14.5px;line-height:1.45;color:var(--on-ink-2)} .stat em{display:block;font-style:normal;font-size:12.5px;color:var(--on-ink-3);margin-top:7px} .refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .ref{background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-l);padding:24px; display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit; transition:border-color .25s,transform .25s var(--ease)} .ref:hover{border-color:var(--line-d2);transform:translateY(-3px)} .ref h4{font-size:18px;margin:0;letter-spacing:-.025em} .ref p{font-size:14px;color:var(--on-ink-2);margin:0} .ref__u{margin-top:auto;padding-top:12px;font:600 13px/1 var(--d);color:var(--acc); display:inline-flex;align-items:center;gap:7px} /* ══ POSTUP ═══════════════════════════════════════════════════════════════ */ .steps{display:grid;gap:0;counter-reset:s} .step{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.6fr);gap:clamp(18px,3vw,40px); padding:28px 0;border-top:1px solid var(--line);align-items:start} .step:last-child{border-bottom:1px solid var(--line)} .step__n{counter-increment:s;font:700 13px/1 var(--d);letter-spacing:.06em;color:var(--txt-3); padding-top:6px;min-width:32px} .step__n::before{content:"0" counter(s)} .step h3{font-size:clamp(20px,2.3vw,26px);margin:0 0 8px;letter-spacing:-.03em} .step p{margin:0;color:var(--txt-2);font-size:15.5px} .step__when{font:600 13px/1.4 var(--s);color:var(--moss);padding-top:7px;text-align:right} @media (max-width:820px){.step{grid-template-columns:auto 1fr}.step__when{grid-column:2;text-align:left;padding-top:10px}} /* ══ POCTIVO (riziká) ═════════════════════════════════════════════════════ */ .honest{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px} .honest__c{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:0 var(--r-l) var(--r-l) 0; background:var(--paper);padding:22px 24px} .honest__c h4{font-size:16.5px;margin:0 0 8px;letter-spacing:-.02em} .honest__c p{margin:0;font-size:14.5px;line-height:1.55;color:var(--txt-2)} /* ══ KONTAKT ══════════════════════════════════════════════════════════════ */ .cta{background:var(--ink);color:var(--on-ink);border-radius:var(--r-xl); padding:clamp(34px,5vw,64px);position:relative;overflow:hidden} .cta::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line-d) 1px,transparent 1px), linear-gradient(90deg,var(--line-d) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(90% 110% at 88% 6%,#000,transparent 70%); mask-image:radial-gradient(90% 110% at 88% 6%,#000,transparent 70%)} .cta__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr); gap:clamp(26px,4vw,54px);align-items:center} .cta h2{font-size:clamp(27px,3.7vw,42px);letter-spacing:-.038em;margin:0 0 14px;color:var(--on-ink)} .cta h2 i{font-style:normal;color:var(--acc)} .cta p{color:var(--on-ink-2);margin:0 0 24px;font-size:16.5px;max-width:52ch} .cta__list{list-style:none;margin:0;padding:0;display:grid;gap:13px} .cta__list a{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--on-ink); background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-l);padding:16px 18px; transition:border-color .25s,background .25s,transform .2s var(--ease)} .cta__list a:hover{border-color:var(--acc);background:var(--ink-3);transform:translateX(4px)} .cta__list svg{width:19px;height:19px;flex:0 0 19px;color:var(--acc)} .cta__list b{display:block;font:600 16px/1.2 var(--s)} .cta__list span{display:block;font-size:12.5px;color:var(--on-ink-3);margin-top:3px} /* ══ PÄTA ═════════════════════════════════════════════════════════════════ */ .foot{background:var(--ink);color:var(--on-ink-2);padding:60px 0 28px;border-top:1px solid var(--line-d)} .foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line-d)} .foot h5{font:600 12px/1 var(--s);letter-spacing:.13em;text-transform:uppercase; color:var(--on-ink-3);margin:0 0 15px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .foot a{color:var(--on-ink-2);text-decoration:none;font-size:14.5px;transition:color .2s} .foot a:hover{color:var(--acc)} .foot__okresy{font-size:13px;line-height:1.85;color:var(--on-ink-3);margin:0} .foot__okresy b{color:var(--on-ink-2);font-weight:600} .foot__bot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between; padding-top:24px;font-size:13px;color:var(--on-ink-3)} .foot__bot p{margin:0} .todo{display:inline-block;background:rgba(224,179,65,.14);color:#E0B341;border-radius:5px; padding:1px 7px;font:600 11px/1.6 var(--mono);letter-spacing:.03em} /* ══ RESPONZÍVNE ══════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .hero__in,.calc,.cta__in,.sec__head{grid-template-columns:1fr} .elig{grid-template-columns:1fr} .elig__form{position:static} .foot__top{grid-template-columns:1fr 1fr} } @media (max-width:760px){ :root{--pad:18px} .nav{position:fixed;inset:var(--hdr) 0 0;background:var(--ink);flex-direction:column; align-items:stretch;gap:0;padding:22px var(--pad) 34px;overflow-y:auto; transform:translateX(100%);transition:transform .34s var(--ease);visibility:hidden} .nt:checked ~ .nav{transform:none;visibility:visible} .nav ul{flex-direction:column;gap:0} .nav ul a{padding:15px 0;font-size:18px;border-bottom:1px solid var(--line-d);color:var(--on-ink)} .nav .btn{margin-top:22px} .burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;cursor:pointer; color:var(--on-ink);font:600 14px/1 var(--s);padding:11px 15px;border-radius:var(--r-pill); border:1px solid var(--line-d2);-webkit-tap-highlight-color:transparent} .nt:not(:checked) ~ .burger .bc{display:none} .nt:checked ~ .burger .bo{display:none} .vs{grid-template-columns:1fr} .cd__grid{gap:6px} .act{grid-template-columns:auto 1fr} .act__amt{grid-column:2;text-align:left;margin-top:6px} .foot__top{grid-template-columns:1fr} .sec{padding:56px 0} }