/* =========================================================
   ALMiG – landing page „Analýza stlačeného vzduchu zdarma“
   Čisté CSS, žádné externí zdroje, žádné frameworky.
   ========================================================= */

:root{
  /* barvy odvozené z loga a firemní identity ALMiG */
  --blue-950:#04294F;
  --blue-900:#063564;
  --blue-800:#0A4A8F;
  --blue-700:#0F5DAE;
  --blue-600:#1272CE;
  --blue-050:#EAF2FA;

  --orange:#F7A600;
  --orange-600:#DE9400;
  --orange-050:#FFF4DC;

  --ink:#10233A;
  --muted:#5A7089;
  --line:#DBE4EF;
  --paper:#FFFFFF;
  --paper-2:#F4F8FC;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16,35,58,.06), 0 4px 14px rgba(16,35,58,.05);
  --shadow-md: 0 2px 6px rgba(16,35,58,.08), 0 18px 44px rgba(16,35,58,.10);
  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blue-600)}

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--orange); color:var(--blue-950);
  padding:.7rem 1.1rem; font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 720px); }

/* ---------- typografie ---------- */

.display{
  margin:0;
  font-size:clamp(2.7rem, 7.4vw, 5.4rem);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#fff;
  text-wrap:balance;
}
.display__year{ color:var(--orange); }

.h2{
  margin:.35rem 0 0;
  font-size:clamp(1.75rem, 3.4vw, 2.6rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--blue-800);
  text-wrap:balance;
}
.h2--center{ text-align:center; }

.eyebrow{
  margin:0;
  font-size:.775rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-600);
}
.eyebrow--center{ text-align:center; }
.eyebrow--onDark{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--orange);
  background:rgba(247,166,0,.12);
  border:1px solid rgba(247,166,0,.35);
  padding:.42rem .95rem .42rem .8rem;
  border-radius:999px;
  margin-bottom:1.6rem;
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(247,166,0,.7);
  animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(247,166,0,.65)}
  70%,100%{box-shadow:0 0 0 9px rgba(247,166,0,0)}
}

.lede{ font-size:1.075rem; color:#33495f; margin:1rem 0 0; text-wrap:pretty; }
.lede--center{ text-align:center; margin-inline:auto; max-width:46ch; }
.muted{ color:var(--muted); margin:.9rem 0 0; }

/* ---------- tlačítka ---------- */

.btn{
  --btn-bg:var(--blue-700); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:700; letter-spacing:.005em;
  padding:.85rem 1.5rem;
  border:0; border-radius:10px;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,35,58,.20); }
.btn:active{ transform:translateY(0); }
.btn--accent{ --btn-bg:var(--orange); --btn-fg:#3B2600; }
.btn--accent:hover{ background:var(--orange-600); }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn--sm{ padding:.58rem 1.05rem; font-size:.9rem; border-radius:8px; }
.btn--block{ width:100%; }
.btn__arrow{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.link-out{
  display:inline-flex; align-items:center; gap:.45rem;
  color:#fff; font-weight:600; text-decoration:none;
  border-bottom:2px solid rgba(247,166,0,.85);
  padding-bottom:2px;
}
.link-out:hover{ color:var(--orange); }
.link-out svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* ---------- horní lišta ---------- */

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 20px rgba(16,35,58,.06); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px; }
.topbar__brand img{ width:132px; height:auto; }
.topbar__cta{ white-space:nowrap; }
/* na mobilu je CTA v liště důležitější než na desktopu – většina lidí přijde
   přes QR kód z letáku. Nezakrýváme ho, jen zmenšíme. */
@media (max-width:560px){
  .topbar__brand img{ width:108px; }
  .topbar__cta{ font-size:.82rem; padding:.52rem .8rem; }
}

/* ---------- hero ---------- */

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(18,114,206,.55) 0%, rgba(18,114,206,0) 58%),
    linear-gradient(168deg, var(--blue-800) 0%, var(--blue-900) 52%, var(--blue-950) 100%);
  color:#fff;
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3.5rem,7vw,5.5rem);
}
.hero::after{
  /* jemná vinětace, aby text držel kontrast nad kresbou potrubí */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(4,41,79,.72) 0%, rgba(4,41,79,.30) 58%, rgba(4,41,79,0) 100%);
}
.hero__inner{ position:relative; max-width:760px; }

/* signature prvek: schéma rozvodu stlačeného vzduchu s protékajícími impulzy.
   Maska drží kresbu mimo textový sloupec, aby impulz nikdy neprotnul nadpis. */
.hero__pipes{
  position:absolute; inset:0; z-index:-2; opacity:.85;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 46%, rgba(0,0,0,.45) 62%, #000 82%);
          mask-image:linear-gradient(100deg, transparent 0%, transparent 46%, rgba(0,0,0,.45) 62%, #000 82%);
}
@media (max-width:900px){
  .hero__pipes{ opacity:.5;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 62%, #000 92%);
            mask-image:linear-gradient(180deg, transparent 0%, transparent 62%, #000 92%); }
}
.hero__pipes svg{ width:100%; height:100%; display:block; }
.pipes__static path{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:2; }
.pipes__nodes circle{ fill:rgba(255,255,255,.16); }
.pipes__flow path{
  fill:none; stroke:url(#pulse); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:130 1400; stroke-dashoffset:1530;
  animation:flow 9s linear infinite;
}
.pipes__flow path:nth-child(2){ animation-duration:11s; animation-delay:-3s; }
.pipes__flow path:nth-child(3){ animation-duration:13s; animation-delay:-6s; }
.pipes__flow path:nth-child(4){ animation-duration:10s; animation-delay:-1.5s; }
@keyframes flow{ to{ stroke-dashoffset:0; } }

.hero__meta{ margin:1.4rem 0 0; font-size:1.12rem; color:#D8E6F5; }
.hero__meta strong{ color:#fff; }
.hero__sep{ margin:0 .55rem; color:rgba(255,255,255,.4); }

.countdown{
  display:flex; align-items:center; flex-wrap:wrap; gap:.65rem 1.4rem;
  margin-top:1.5rem; padding:.85rem 1.15rem;
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.05);
}
.countdown__label{
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.countdown__units{ display:flex; gap:1.5rem; }
.countdown__unit{ display:flex; align-items:baseline; gap:.35rem; }
.countdown__unit b{
  font-size:1.65rem; font-weight:800; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.countdown__unit i{ font-style:normal; font-size:.82rem; color:rgba(255,255,255,.62); }

.offer{
  margin-top:2.2rem;
  background:#fff; color:var(--ink);
  border-left:5px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-md);
}
.offer__eyebrow{
  margin:0; font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-700);
}
.offer__title{
  margin:.4rem 0 .55rem;
  font-size:clamp(1.5rem, 3.2vw, 2.05rem); line-height:1.15;
  font-weight:800; letter-spacing:-.02em; color:var(--orange-600);
}
.offer__text{ margin:0; color:#3A4F65; }

.hero__lede{ margin:2rem 0 0; font-size:1.1rem; color:#D3E3F4; max-width:60ch; }
.hero__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.8rem; margin-top:2rem; }
.hero__note{ margin:1.4rem 0 0; font-size:.88rem; color:rgba(255,255,255,.6); }

/* ---------- sekce ---------- */

.section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section--tint{ background:var(--paper-2); border-block:1px solid var(--line); }
.section--form{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(18,114,206,.06) 0%, rgba(18,114,206,0) 70%),
    var(--paper-2);
  border-top:1px solid var(--line);
}

/* ---------- karty přínosů ---------- */

.cards{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
}
/* pět karet: 3 + 2, aby poslední řádek nezůstal viset osamocený */
@media (min-width:1000px){
  .cards{ grid-template-columns:repeat(6, 1fr); }
  .card{ grid-column:span 2; }
  .card:nth-child(4), .card:nth-child(5){ grid-column:span 3; }
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.7rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#C6D8EC; }
.card__icon{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:11px; background:var(--blue-050); color:var(--blue-700);
  margin-bottom:1.1rem;
}
.card__icon svg{ width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.card__title{ margin:0 0 .5rem; font-size:1.1rem; font-weight:700; color:var(--blue-800); letter-spacing:-.01em; }
.card__text{ margin:0; font-size:.965rem; color:var(--muted); }

/* ---------- pro koho ---------- */

.split{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:4rem; } }

.checklist{
  list-style:none; margin:0; padding:1.4rem 1.6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  /* Blok se vycentruje v kartě, ale položky si drží společný levý okraj:
     grid vytvoří jediný sloupec široký jako nejdelší položka a ten se
     zarovná na střed. Oddělovací linky tak zůstanou stejně dlouhé.
     minmax(0, …) dovolí sloupci se na úzkém displeji zúžit a text zalomit. */
  display:grid;
  grid-template-columns:minmax(0, max-content);
  justify-content:center;
}
/* Ikona je flexovou položkou řádku, takže ji align-items: center posadí přesně
   na svislý střed textu – i když se text zalomí do dvou řádků. */
.checklist li{
  display:flex; align-items:center; gap:.85rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--line);
  font-weight:600; color:var(--ink);
}
.checklist li:last-child{ border-bottom:0; }
.checklist li::before{
  content:""; flex:0 0 auto; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23FFF4DC' stroke='%23F7A600' stroke-width='2'/%3E%3Cpath d='m7.4 12.3 3.1 3.1 6.1-6.6' fill='none' stroke='%23DE9400' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- kroky ---------- */

.steps{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  counter-reset:none;
}
.step{ padding-left:1.5rem; border-left:3px solid var(--blue-050); }
.step__num{
  display:block; font-size:2.15rem; font-weight:800; letter-spacing:-.04em;
  color:#C3D6EA; line-height:1; margin-bottom:.7rem;
  font-variant-numeric:tabular-nums;
}
.step__title{ margin:0 0 .45rem; font-size:1.12rem; font-weight:700; color:var(--blue-800); }
.step__text{ margin:0; font-size:.965rem; color:var(--muted); }
.steps__cta{ margin:3rem 0 0; text-align:center; }

/* ---------- formulář ---------- */

.formcard{
  margin-top:2.4rem;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.5rem, 4vw, 2.6rem);
  box-shadow:var(--shadow-md);
}

.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.42rem; }
.field-row{ display:grid; gap:1.15rem; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }

.form label{ font-size:.9rem; font-weight:700; color:var(--ink); }
.req{ color:var(--orange-600); }

.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form select,
.form textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  width:100%; padding:.82rem .95rem;
  background:#fff;
  border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form textarea{ resize:vertical; min-height:92px; }
.form select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7089' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px;
  padding-right:2.8rem;
}
.form :is(input,select,textarea):focus{
  outline:0;
  border-color:var(--blue-600);
  box-shadow:0 0 0 4px rgba(18,114,206,.14);
}
.form :is(input,select,textarea)[aria-invalid="true"]{
  border-color:#CE3B2E;
  box-shadow:0 0 0 4px rgba(206,59,46,.12);
}

.field--check{
  grid-template-columns:auto 1fr; align-items:start; gap:.3rem .7rem;
  margin-top:.35rem;
}
.field--check input{
  width:20px; height:20px; margin:.18rem 0 0; accent-color:var(--blue-700); cursor:pointer;
}
.field--check label{ font-weight:400; font-size:.94rem; color:#3A4F65; line-height:1.5; }
.field--check .err{ grid-column:1 / -1; }

.err{ margin:0; font-size:.85rem; color:#CE3B2E; font-weight:600; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

#submitBtn{ margin-top:.6rem; position:relative; }
#submitBtn[disabled]{ opacity:.65; cursor:progress; transform:none; box-shadow:none; }
.btn__spinner{ display:none; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(59,38,0,.28); border-top-color:#3B2600;
  animation:spin .7s linear infinite; }
#submitBtn.is-busy .btn__spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form__note{ margin:.2rem 0 0; font-size:.85rem; color:var(--muted); text-align:center; }
.form__fallback{
  margin:1.2rem 0 0; padding:.95rem 1.1rem;
  background:#FDECEA; border:1px solid #F3B9B2; border-radius:10px;
  color:#8C231A; font-size:.94rem; text-align:center;
}

.formdone{ text-align:center; padding:1.5rem .5rem; }
.formdone__mark{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1.2rem;
  border-radius:50%; background:var(--orange-050); border:2px solid var(--orange);
  animation:pop .45s var(--ease) both;
}
.formdone__mark svg{ width:30px;height:30px;fill:none;stroke:var(--orange-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round; }
@keyframes pop{ from{ transform:scale(.7); opacity:0 } to{ transform:scale(1); opacity:1 } }
.formdone h3{ margin:0 0 .5rem; font-size:1.4rem; font-weight:800; color:var(--blue-800); }
.formdone p{ margin:0; color:var(--muted); }

/* ---------- patička ---------- */

.footer{ background:var(--blue-950); color:#B9CEE4; padding:2.6rem 0; }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 2.5rem; }
.footer__logo{ width:132px; background:#fff; padding:.5rem .7rem; border-radius:8px; }
.footer__meta p{ margin:0 0 .25rem; font-size:.92rem; }
.footer__meta strong{ color:#fff; }
.footer a{ color:#9CC4EA; }
.footer__small{ margin-top:.7rem !important; font-size:.82rem; color:#7E9BB8; max-width:62ch; }

/* ---------- omezení pohybu ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .pipes__flow{ display:none; }
}

/* ---------- tisk ---------- */

@media print{
  .topbar,.hero__pipes,.btn,.countdown{ display:none !important; }
  .hero{ background:#fff; color:#000; }
  .display,.hero__meta,.hero__lede{ color:#000; }
}