/* ==============================
   XFD elektro – kompletní CSS
   ============================== */

/* --- Kořenové proměnné (paleta + radius + stíny) --- */
:root{
  /* Typografie + barvy textu */
  --ink:#111111;             /* výchozí text */
  --ink-soft:#5e6378;        /* sekundární text */

  /* Pozadí sekcí */
  --paper:#ffffff;           /* bílá */
  --muted:#f3f6fb;           /* světlé podklady */
  --bg-hero:#0c1329;         /* tmavé pozadí hrdiny */

  /* Hlavička (světlé menu) */
  --bg-header:#ffffff;
  --ink-header:#111111;
  --hover-header:rgba(0,0,0,.06);

  /* Brand barvy (z loga) */
  --blue:#0B6AE0;            /* primární modrá (CTA, badge) */
  --yellow: #F7B500;         /* sekundární žlutá (akcent) */
  --red:    #E53935;         /* sekundární červená (akcent) */

  /* UI */
  --radius:18px;
  --shadow-1:0 6px 16px rgba(11,16,32,.08), 0 18px 50px rgba(11,16,32,.12);
  --shadow-2:0 16px 40px rgba(11,16,32,.16), 0 26px 70px rgba(11,16,32,.20);
}

/* --- Reset/box model --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}

/* ======================
   Header / Navigace
   ====================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg-header);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center;  justify-content: space-between;
  padding:10px 18px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink-header); text-decoration:none}
.brand img{height:55px; width:auto; filter:none}

.nav ul{list-style:none; display:flex; gap:15px; margin:0; padding:0; margin-left: auto;}
.nav a{
  color:var(--ink-header); text-decoration:none;
  font-weight:600; font-size:14px;
  padding:10px 12px; border-radius:12px; display:block;
}
.nav a:not(.cta):hover{background:var(--hover-header)}

.menu-toggle{display:none; background:none; border:0; color:var(--ink-header); font-size:15px; font-weight:700}
@media (max-width:900px){
  .nav ul{display:none}
  .nav.open ul{
      display: flex;
    flex-direction: column;
    background: var(--bg-header);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  .menu-toggle{display:inline-flex; align-items:center; gap:8px;margin-left: auto;}
}

/* CTA / Buttons – sjednocená modrá */
.btn{border:0; border-radius:12px; padding:12px 16px; font-weight:700; text-decoration:none; display:inline-block}
.btn-primary,
.cta{
  /* Fallback gradient + moderní varianta */
  background:linear-gradient(135deg, var(--blue), #6AA5F0);
  background:linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 72%, white));
  color:#ffffff !important;
  box-shadow:0 6px 14px rgba(11,16,32,.12);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-primary:hover,
.cta:hover{
  background:linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 72%, white));
  filter:brightness(0.97);
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(11,16,32,.16);
}
.btn-outline{
  background:rgba(255,255,255,.06);
  color:#e9eef8; border:1px solid rgba(255,255,255,.3);
}

/* ======================
   Hero / Slider
   ====================== */
.hero{
  position:relative; min-height:64svh; color:#fff;
  display:grid; place-items:center; overflow:hidden; background:var(--bg-hero);
}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1200ms ease}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover}
.hero-inner{position:relative; z-index:2; max-width:1100px; margin:auto; padding:56px 18px; text-align:center}
.hero-inner .hero-box {
  display: inline-block;
  background: rgba(255,255,255,0.62); /* světlý poloprůhledný podklad */
  backdrop-filter: blur(6px);         /* jemné rozostření pozadí */
  border-radius: 16px;
  padding: 24px 36px;
  color: #111!important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.hero-inner .btn-primary {
  margin-top: 28px;
}

h1{margin:16px 0 40px 0; font-size:clamp(28px,5vw,40px); }
.lead{max-width:100%; margin:0 auto 20px; color:#111; font-size:clamp(16px,2.2vw,19px)}

/* ======================
   Sekce / Layout
   ====================== */
section{padding:72px 18px}
.container{max-width:1100px; margin:0 auto}
.muted{background:var(--muted)}
.section-head{margin-bottom:28px}
.section-head h2{margin:0 0 8px; font-size:clamp(24px,3.5vw,34px)}
.section-head p{margin:0; color:var(--ink-soft)}

/* ======================
   Cards – glass + 3D
   ====================== */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
}
.card{
  position:relative; border-radius:var(--radius); padding:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(239,245,255,.82));
  border:1.5px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-1); overflow:hidden; transform:translateZ(0);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s;
  --accent: var(--blue);
}

.cards .card:nth-child(3n+1){--accent: var(--blue)}
.cards .card:nth-child(3n+2){--accent: var(--yellow)}
.cards .card:nth-child(3n+3){--accent: var(--red)}


/*.card{border-color:color-mix(in srgb, var(--accent) 42%, transparent)}*/
.card::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  /*background:
    radial-gradient(600px 200px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%),
    radial-gradient(300px 120px at -10% 90%, rgba(0,212,166,.18), transparent 45%);*/
}
.card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  /*background:var(--accent);*/ opacity:.85;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-2)}

.icon{
  width:48px; height:48px;/* border-radius:14px; display:grid; place-items:center;
  margin-bottom:10px; font-size:26px; line-height:1;
  background:color-mix(in srgb, var(--accent) 16%, white);
  border:1px solid color-mix(in srgb, var(--accent) 48%, white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(0,0,0,.06);
  color:color-mix(in srgb, var(--accent) 70%, black);
  */
}

/* Nadpis karty s podtržením v akcentu */
.card h3{margin:6px 0 8px; position:relative}
.card h3::after{
  content:""; position:absolute; left:0; bottom:-6px; width:48px; height:3px;
  background:var(--accent); border-radius:2px;
}

/* ======================
   Kroky (Jak objednat)
   ====================== */
.step{display:flex; gap:14px; align-items:flex-start}
.step .badge{
  min-width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 72%, white));
  color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.step h3{margin:0 0 6px}

/* ======================
   Formuláře
   ====================== */
form{display:grid; gap:14px}
input, textarea{
  width:100%; padding:10px 12px; font-size:16px; border-radius:10px;
  border:1px solid #ccd3e0; font-family:inherit; background:#fff; color:var(--ink);
}
textarea{resize:vertical; min-height:120px}
.form-success{color:#0a7a4b; display:none}

/* ======================
   Kontakt – layout karet
   ====================== */
.contact-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.contact-card{grid-column:span 12; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:22px}
@media(min-width:740px){.contact-card{grid-column:span 6}}
.contact-card a{color:var(--ink); text-decoration:none}
.contact-card a:hover{color:var(--blue)}

/* ======================
   Patička
   ====================== */
footer{background:#0b1020; color:#a9b3c7; padding:16px 18px;
/*display:flex; flex-wrap:wrap; gap:16px; align-items:center; */ text-align:center;
}
.footer-inner{
 }

/* ======================
   Utility
   ====================== */
.pill{display:inline-block; background:#e8f9ff; color:#045268; border:1px solid #bfefff; padding:6px 10px; border-radius:999px; font-weight:700}

/* Volitelné zvýraznění aktivní položky při scrollu (scroll-spy) */
.nav a.is-active{background:var(--hover-header)}


/* styl odkazů */
a {
  color: #F9A825; /* teplá oranžovo-žlutá */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

a:hover,
a:focus-visible {
  color: #c98500;         /* mírně tmavší při hoveru */
  /*border-color: #c98500;*/  /* jemné podtržení */
}

/* Specificky pro kontaktní kartu, aby ladilo s celkem */
.contact-card a {
  font-weight: 600;
}
.fa-2x {
  font-size: 2em!important;
}