/* ekg-elektrody.cz – styly

   Barevné tokeny jsou hsl bez závorek, používají se jako hsl(var(--token)). */



:root{

  --background: 0 0% 100%;

  --foreground: 215 25% 15%;

  --card: 0 0% 100%;

  --primary: 175 80% 28%;

  --primary-foreground: 0 0% 100%;

  --accent: 173 80% 40%;

  --accent-soft: 170 55% 94%;

  --secondary: 168 30% 96%;

  --muted: 168 25% 95%;

  --muted-foreground: 215 14% 36%;

  --border: 168 18% 88%;

  --band: 175 80% 24%;

  --band-foreground: 0 0% 100%;

  --band-muted: 175 40% 90%;

  --header-h: 69px;

  color-scheme: light;

}



*,

*::before,

*::after{ box-sizing: border-box; }



html{ scroll-behavior: smooth; }



body{

  margin: 0;

  background: hsl(var(--background));

  color: hsl(var(--foreground));

  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

}



a{ color: inherit; }

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

h1, h2, h3, p, figure, blockquote, dl, dd, ul{ margin: 0; }

ul{ padding: 0; list-style: none; }

section{ scroll-margin-top: calc(var(--header-h) + 8px); }



.container{

  max-width: 1400px;

  margin: 0 auto;

  padding-inline: 24px;

}



.ic{ width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }



a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{

  outline: 2px solid hsl(var(--primary));

  outline-offset: 2px;

}



.skip{

  position: absolute; left: -9999px; top: 8px;

  background: hsl(var(--card)); color: hsl(var(--foreground));

  padding: 10px 14px; border-radius: 8px; z-index: 100;

}

.skip:focus{ left: 8px; }



/* ---------- Tlačítka ---------- */

.btn{

  display: inline-flex; align-items: center; justify-content: center;

  min-height: 48px; padding: 0 24px;

  border: 1px solid transparent; border-radius: 8px;

  font: inherit; font-size: 15px; font-weight: 600;

  text-decoration: none; cursor: pointer;

}

.btn-primary{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.btn-primary:hover{ opacity: .88; }

.btn-light{ border-color: hsl(0 0% 100% / .6); background: transparent; color: #fff; }

.btn-light:hover{ background: hsl(0 0% 100% / .14); }

.btn-sm{ min-height: 44px; padding: 0 18px; font-size: 14px; margin-left: 8px; }



/* ---------- Hlavička ---------- */

.site-header{

  position: sticky; top: 0; z-index: 50;

  background: hsl(var(--card));

  border-bottom: 1px solid hsl(var(--border));

}

.header-inner{

  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;

  gap: 8px 24px;

  max-width: 1400px; margin: 0 auto; padding: 12px 24px;

}

.brand{

  display: flex; align-items: center; gap: 12px;

  text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;

}

.brand-icon{

  display: flex; padding: 8px; border-radius: 8px;

  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));

  font-size: 24px;

}

.nav{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.navlink{

  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;

  border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none;

  color: hsl(var(--muted-foreground));

}

.navlink:hover{ background: hsl(var(--muted)); color: hsl(var(--foreground)); }



/* ---------- Úvod (hero) ---------- */

.hero{

  min-height: calc(100vh - var(--header-h));

  min-height: calc(100svh - var(--header-h));

  display: flex; flex-direction: column;

  color: #fff;

  background-color: #0b2a2e;

  background-image:

    linear-gradient(90deg, rgba(6,28,32,.9) 0%, rgba(6,28,32,.74) 45%, rgba(6,28,32,.4) 100%),

    url('../hero-ekg-elektrody.jpg');

  background-size: cover;

  background-position: center right;

}

.hero-inner{

  flex: 1; width: 100%;

  display: flex; flex-direction: column; gap: 48px;

  max-width: 1400px; margin: 0 auto; padding: 64px 24px 48px;

}

.hero-row{

  flex: 1 1 auto;

  display: flex; flex-wrap: wrap; align-items: center; gap: 48px;

}

.hero-text{

  flex: 1 1 420px; min-width: 0; max-width: 640px;

  display: flex; flex-direction: column; gap: 24px;

}

.eyebrow{

  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;

  color: hsl(var(--muted-foreground));

}

.hero .eyebrow{ color: hsl(0 0% 100% / .78); }

h1{

  font-size: clamp(38px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700;

  text-wrap: balance;

}

.lead{ font-size: 18px; line-height: 1.6; max-width: 52ch; color: hsl(0 0% 100% / .88); }

.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }



.electrode{

  flex: 0 1 460px; min-width: 0; margin-left: auto; padding: 24px;

  display: flex; flex-direction: column; gap: 8px;

  color: #fff;

}

.electrode svg{ display: block; width: 100%; }

.electrode .drawing{ max-width: 380px; margin: 0 auto; }

.electrode .trace{ height: 64px; }



.stats{

  display: flex; flex-wrap: wrap; gap: 1px;

  background: hsl(var(--border)); border: 1px solid hsl(var(--border));

  border-radius: 8px; overflow: hidden;

}

.stat{

  flex: 1 1 200px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px;

  padding: 20px 24px; background: hsl(var(--card)); color: hsl(var(--foreground));

}

.stat-value{

  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;

  color: hsl(var(--primary));

}

.stat-label{ font-size: 13px; color: hsl(var(--muted-foreground)); }



@keyframes slideUp{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference){

  .rise{ animation: slideUp .4s ease-out both; }

}



/* ---------- Sekce ---------- */

.section-inner{

  display: flex; flex-direction: column; gap: 48px;

  max-width: 1400px; margin: 0 auto; padding: 80px 24px;

}

.section-head{ display: flex; flex-direction: column; gap: 12px; max-width: 640px; }

h2{ font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }

.sub{ font-size: 18px; line-height: 1.6; color: hsl(var(--muted-foreground)); }

h3{ font-size: 18px; font-weight: 600; }



.cards{ display: flex; flex-wrap: wrap; gap: 24px; }

.card{

  flex: 1 1 280px; min-width: 0;

  display: flex; flex-direction: column; gap: 16px; padding: 24px;

  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 8px;

}

.card p{ font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); }

.icon-tile{

  display: flex; align-items: center; justify-content: center;

  width: 44px; height: 44px; border-radius: 8px; font-size: 22px;

  background: hsl(var(--accent-soft)); color: hsl(var(--primary));

}



.spec-wrap{ display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }

.spec-intro{ flex: 1 1 280px; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }

.spec-intro h3{ font-size: 24px; letter-spacing: -0.01em; }

.spec-intro p{ font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); }

.spec{

  flex: 2 1 480px; min-width: 0;

  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden;

}

.spec-row{

  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;

  padding: 16px 24px;

}

.spec-row + .spec-row{ border-top: 1px solid hsl(var(--border)); }

.spec dt{ font-size: 14px; color: hsl(var(--muted-foreground)); }

.spec dd{ font-size: 15px; font-weight: 500; }



/* ---------- Ceník ---------- */

.band-light{

  background: hsl(var(--secondary));

  border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));

}

.price-grid{ display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }

.panel{

  min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px;

  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 8px;

}

.price-card{ flex: 1 1 340px; }

.calc{ flex: 1 1 420px; }

.price-label{ font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

.price{ display: flex; flex-direction: column; gap: 4px; }

.price strong{

  font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.03em;

  font-variant-numeric: tabular-nums; color: hsl(var(--primary));

}

.price span{ font-size: 15px; color: hsl(var(--muted-foreground)); }

.checks{ display: flex; flex-direction: column; gap: 12px; font-size: 15px; }

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

.checks .ic{ margin-top: 2px; font-size: 20px; color: hsl(var(--primary)); }

.price-card .btn{ margin-top: auto; }



.calc-head{ display: flex; flex-direction: column; gap: 4px; }

.calc-head h3{ font-size: 20px; }

.calc-head p{ font-size: 14px; color: hsl(var(--muted-foreground)); }

.stepper-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }

.stepper-row > span{ font-size: 15px; font-weight: 500; }

.stepper{ display: flex; align-items: center; gap: 8px; }

.step-btn{

  display: flex; align-items: center; justify-content: center;

  width: 44px; height: 44px; border-radius: 8px; cursor: pointer; font-size: 18px;

  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));

}

.step-btn:hover{ background: hsl(var(--muted)); }

.packs{

  min-width: 64px; text-align: center;

  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;

  color: hsl(var(--primary));

}

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }

.chip{

  min-height: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer;

  font: inherit; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;

  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));

}

.chip:hover{ background: hsl(var(--muted)); }

.chip[aria-pressed="true"]{

  border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600;

}

.results{ display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid hsl(var(--border)); }

.result-row{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 15px; }

.result-row > span:first-child{ color: hsl(var(--muted-foreground)); }

.result-row > span:last-child{ font-weight: 500; font-variant-numeric: tabular-nums; }

.result-total{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }

.result-total > span:first-child{ font-size: 15px; font-weight: 600; }

.result-total > span:last-child{ font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }



/* ---------- Recenze ---------- */

.quote{

  flex: 1 1 300px; min-width: 0;

  display: flex; flex-direction: column; gap: 24px; padding: 28px;

  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 8px;

}

.quote blockquote{ font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }

.quote figcaption{ margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; }

.quote figcaption strong{ font-weight: 600; }

.quote figcaption span{ color: hsl(var(--muted-foreground)); }



/* ---------- Kontakt ---------- */

.contact{ background: hsl(var(--band)); color: hsl(var(--band-foreground)); }

.contact-inner{

  display: flex; flex-wrap: wrap; gap: 48px;

  max-width: 1400px; margin: 0 auto; padding: 80px 24px;

}

.contact-left{ flex: 1 1 320px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 32px; }

.contact .sub{ color: hsl(var(--band-muted)); }

.contact-block{ display: flex; flex-direction: column; gap: 12px; }

.contact-block .eyebrow{ color: hsl(var(--band-muted)); }

.contact-list{

  display: flex; flex-direction: column;

  background: hsl(var(--card)); color: hsl(var(--foreground));

  border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden;

}

.contact-item{

  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px;

  padding: 16px 20px; font-size: 15px;

}

.contact-item + .contact-item{ border-top: 1px solid hsl(var(--border)); }

.contact-item span{ font-weight: 500; }

.contact-item a{ font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }

.contact-item a:hover{ text-decoration: underline; }



.form-card{

  flex: 2 1 480px; min-width: 0;

  display: flex; flex-direction: column; gap: 20px; padding: 32px;

  background: hsl(var(--card)); color: hsl(var(--foreground));

  border: 1px solid hsl(var(--border)); border-radius: 8px;

}

.field-row{ display: flex; flex-wrap: wrap; gap: 20px; }

.field{ flex: none; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.field-row .field{ flex: 1 1 220px; }

.field label{ font-size: 14px; font-weight: 500; }

.field input, .field textarea{

  width: 100%; padding: 0 12px;

  border: 1px solid hsl(var(--border)); border-radius: 8px;

  background: hsl(var(--background)); color: hsl(var(--foreground));

  font: inherit; font-size: 15px;

}

.field input{ height: 44px; }

.field textarea{ min-height: 112px; padding: 12px; resize: vertical; }

.field input::placeholder, .field textarea::placeholder{ color: hsl(var(--muted-foreground)); opacity: .75; }

.form-card .btn{ align-self: flex-start; }

.form-status{ font-size: 14px; color: hsl(var(--muted-foreground)); min-height: 1.5em; }



/* ---------- Patička ---------- */

.site-footer{ background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); }

.footer-inner{

  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;

  max-width: 1400px; margin: 0 auto; padding: 28px 24px;

  font-size: 14px; color: hsl(var(--muted-foreground));

}

.footer-inner a{ text-decoration: none; }

.footer-inner a:hover{ text-decoration: underline; }



/* ---------- Telefon ---------- */

@media (max-width: 800px){

  .hero{

    background-image:

      linear-gradient(rgba(6,28,32,.82), rgba(6,28,32,.82)),

      url('../hero-ekg-elektrody.jpg');

    background-position: center;

  }

  .electrode{ margin-left: 0; flex-basis: 100%; padding-inline: 0; }

  .section-inner, .contact-inner{ padding-block: 56px; }

  h2{ font-size: 30px; }

  .panel, .form-card{ padding: 24px; }

}