:root{
  color-scheme: light dark;
  --bg:#f8e8dc;
  --surface:#7a1a0d;
  --section-bg:#fff6f0;
  --section-text:#3b1a14;
  --primary:#6c0c00;
  --primary-dark:#4d0700;
  --text:#fdf5ef;
  --muted:#f5cdb4;
  --border-soft:#f0dfcf;
  --accent:#f0dc7e;
  --shadow:0 25px 70px rgba(76,7,0,.25);
  --grid-pattern:url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(140,27,0,0.12)' stroke-width='1'%3E%3Cpath d='M0 20h160M0 60h160M0 100h160M0 140h160M20 0v160M60 0v160M100 0v160M140 0v160' /%3E%3C/g%3E%3C/svg%3E");
  --form-gap:1rem;
  --form-radius:12px;
  --form-border:1px solid rgba(161,69,52,.3);
  --form-bg:rgba(122,26,13,.04);
  --form-placeholder:rgba(59,26,20,.65);
  --form-focus:rgba(122,26,13,.35);
  font-size:16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.6;
  color:#2b120b;
  background:linear-gradient(180deg,#ffeede 0%,var(--bg) 35%);
  background-attachment:fixed;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--grid-pattern);
  background-repeat:repeat;
  background-size:160px 160px;
  background-attachment:fixed;
  background-position:top left;
  opacity:.35; pointer-events:none; z-index:-1;
}

a{ color:inherit; }

.page{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1rem,3vw,2.5rem) 4rem;
}
section[id]{ scroll-margin-top:40px; }

/* ---------- HEADER / HERO ---------- */
header{
  border-radius:32px;
  background:#7a1a0d;
  color:#fff;
  padding:100px clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4rem);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
header::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--grid-pattern);
  background-repeat:repeat;
  background-size:160px 160px;
  background-attachment:fixed;
  background-position:top left;
  opacity:.25; pointer-events:none;
}
.hero{ position:relative; z-index:1; display:grid; gap:1.5rem; }

/* NAV */
header .nav, header nav{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; font-weight:600; margin-bottom:1rem;
}
.brand{ font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.brand img{ display:block; height:30px; width:auto; object-fit:contain; }

/* === JEDNOTNE LINK STAVY V HLAVNEJ LISTE === */
header nav ul,
header .nav ul,
.floating-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.5rem; align-items:center;
}

/* Vsetky odkazy v hlavicke a vo floating liste maju rovnaky vzhlad,
   zrusime default visited farby a podciarknutia */
header nav a,
header .nav a,
header nav a:link,
header .nav a:link,
header nav a:visited,
header .nav a:visited,
header nav a:active,
header .nav a:active,
.floating-nav a,
.floating-nav a:link,
.floating-nav a:visited,
.floating-nav a:active{
  color:rgba(255,255,255,.92);
  text-decoration:none;
}

/* Hover efekt - ziadne cervene podciarknutie, len jemne podciarknutie bielou */
header nav a:hover,
header .nav a:hover,
.floating-nav a:hover{
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.6);
  text-underline-offset:4px;
  opacity:.92;
}

/* Floating nav */
.floating-nav{
  position:fixed; top:0; left:0; right:0;
  padding:0 clamp(1rem,3vw,2.5rem);
  display:flex; justify-content:center;
  z-index:999; pointer-events:none;
}
.floating-nav-content{
  width:min(1200px,100%); margin:0 auto;
  position:relative;
  display:flex; justify-content:flex-end; align-items:center;
  gap:clamp(1rem,3vw,4rem);
  background:#7a1a0d;
  backdrop-filter:blur(6px);
  border-radius:0 0 20px 20px;
  padding:.4rem clamp(1rem,4vw,3rem);
  padding-left:clamp(7rem, 18vw, 10rem);
  box-shadow:0 15px 35px rgba(0,0,0,.2);
  transform:translateY(0); opacity:1;
  transition:transform .3s ease, opacity .3s ease;
  pointer-events:auto;
  overflow:visible;
}
.nav-toggle{
  display:none;
  border:none;
  background:rgba(0,0,0,.12);
  color:#fff;
  width:46px; height:46px;
  border-radius:12px;
  cursor:pointer;
  align-items:center; justify-content:center;
  font-size:1.4rem;
}
.floating-nav.is-visible .floating-nav-content{ transform:translateY(0); opacity:1; }
.floating-nav .brand{ color:#fff; text-decoration:none; }
.floating-nav .brand{
  display:inline-flex;
  align-items:center;
  position:absolute;
  left:clamp(1rem,4vw,3rem);
  top:-3px;
  padding:.45rem .95rem;
  margin:0;
  border:none;
  border-radius:14px;
  background:#7a1a0d;
  box-shadow:0 12px 14px -8px rgba(0,0,0,.32);
  transform:none;
  z-index:2;
}
.floating-nav .brand:hover,
.floating-nav .brand:focus,
.floating-nav .brand:focus-visible{
  background:#7a1a0d;
  opacity:1;
  outline:none;
}
.floating-nav .brand img{
  height:62px;
  width:auto;
  object-fit:contain;
  display:block;
}
.floating-nav-content ul a{
  font-size:1.125rem;
  font-weight:700;
}

/* HERO CONTENT */
.hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem; align-items:start;
}
.hero-grid > div:nth-child(2){ margin-top:30px; }
.hero h1{ font-size:clamp(2.3rem,5vw,3.7rem); margin:0 0 1rem 0; }
.hero p{ color:rgba(255,255,255,.92); margin:0 0 2rem 0; }

.badge{
  display:inline-flex; align-self:flex-start;
  padding:.35rem .85rem; border-radius:999px; font-size:.85rem;
  background:rgba(122,26,13,.18);
  color:var(--primary-dark);
  font-weight:600;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:.5rem;
}

/* Buttons */
.btn{
  padding:.9rem 1.75rem; border-radius:999px; border:none;
  font-weight:600; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
}
.btn-primary{ background:var(--accent); color:var(--primary-dark); box-shadow:0 15px 30px rgba(76,7,0,.25); }
.btn-outline{ border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; }
.btn:hover{ transform:translateY(-2px); }

/* Stats */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem; margin-top:2rem;
}
.stat-card{
  background:rgba(255,255,255,.08);
  border-radius:18px; padding:1.5rem;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
}
.stat-card strong{ font-size:2rem; display:block; }

/* ---------- SECTIONS / CARDS ---------- */
section{
  margin-top:3.5rem;
  background:var(--section-bg);
  padding:clamp(2rem,4vw,3rem);
  border-radius:24px; box-shadow:var(--shadow);
  color:var(--section-text);
  position:relative; overflow:hidden;
}
section::before{
  content:""; position:absolute; inset:0;
  background-image:var(--grid-pattern);
  background-repeat:repeat; background-size:160px 160px;
  background-attachment:fixed; background-position:top left;
  opacity:.2;
}
section > *{ position:relative; z-index:1; }
section h2{ margin:0 0 1rem 0; font-size:clamp(1.75rem,3vw,2.25rem); }
.section-intro{ color:rgba(59,26,20,.85); max-width:640px; margin-bottom:1.5rem; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.card{
  background:#fff; border:1px solid var(--border-soft);
  border-radius:18px; padding:1.5rem;
  display:flex; flex-direction:column; gap:.75rem;
  min-height:100%; color:var(--section-text);
  position:relative; overflow:hidden;
}
.card.card-link{ cursor:pointer; }
.card .card-full-link{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  display:block;
}
.card.card-link > *:not(.card-full-link){
  position:relative;
  z-index:1;
  pointer-events:none;
}
.card.card-link:focus-within,
.card.card-link:hover{
  box-shadow:0 18px 36px rgba(0,0,0,.12);
  transform:translateY(-2px);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-image{
  width:100%; height:160px; object-fit:contain;
  border-radius:0; margin-bottom:1rem;
  box-shadow:none; background:transparent;
}
.learn-more{ font-weight:600; color:var(--primary-dark); text-decoration:none; }
.learn-more::after{ content:" \2192"; }
.card .learn-more{ margin-top:auto; align-self:flex-start; display:inline-flex; }

.highlight{
  border-left:4px solid var(--accent);
  padding-left:1rem; margin-bottom:1rem;
  background:rgba(122,26,13,.05);
}

.detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; align-items:start; }
.detail-grid.detail-grid--stack{ grid-template-columns:1fr; }
.detail-grid.detail-grid--center{ margin-bottom:1rem; }
.detail-grid.detail-grid-request{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr);
  gap:1.75rem;
}
.detail-text p{ margin:.25rem 0 1rem 0; }

.detail-list{
  list-style:disc;
  padding-left:1.2rem;
  margin:0;
  color:rgba(59,26,20,.9);
}
.detail-list li + li{ margin-top:.5rem; }
.detail-list li::marker{ color:var(--primary-dark); font-weight:700; }
.card .detail-list{
  list-style:disc;
  padding-left:1.25rem;
  display:block;
}
.card .detail-list li + li{ margin-top:.15rem; }

.detail-gallery, .gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.75rem;
}
.detail-stack{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.detail-gallery img, .gallery img{
  width:100%; height:auto; object-fit:contain;
  border-radius:16px; border:1px solid var(--border-soft);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  background:#fff;
}
.gallery-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:flex-start;
}
.gallery-thumbs img{
  width:220px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--border-soft);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  cursor:pointer;
  background:#fff;
  padding:8px;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.gallery-thumbs img:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(0,0,0,.16);
}
.gallery-thumbs img:active{ opacity:.85; }
.gallery-thumbs img{ }
@media (max-width:640px){
  .gallery-thumbs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .gallery-thumbs img{
    width:100%;
    aspect-ratio:4/3;
    padding:6px;
  }
  .detail-gallery .lms-gallery__viewport{ min-height:0; }
}
.detail-grid .lms-gallery{ margin:0; }
.detail-grid .lms-gallery__viewport{ aspect-ratio:16/9; }
.detail-grid.detail-grid--center{ align-items:center; }
.detail-gallery .lms-gallery__viewport{ aspect-ratio:16/9; min-height:220px; }
.detail-gallery .lms-gallery__track{ align-items:center; }
.detail-gallery .lms-gallery__slide img{ object-fit:contain; height:100%; background:#fff; }

.comparison-grid, .usecase-grid, .process{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;
}
.comparison-card, .usecase-card, .story-card, .service-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:18px; padding:1.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.process{ counter-reset:process-step; }
.process .story-card{
  position:relative;
  padding-top:2.75rem;
}
.process .story-card::before{
  counter-increment:process-step;
  content:counter(process-step);
  position:absolute;
  top:1rem; left:1.2rem;
  width:36px; height:36px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-weight:600;
  display:grid;
  place-items:center;
  box-shadow:0 10px 20px rgba(76,7,0,.15);
}

/* ---------- CONTACT / MAP ---------- */
.contact-card{ display:flex; flex-direction:column; gap:2rem; }
.contact-top{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.5rem;
  align-items:stretch;
}
.contact-details{ display:flex; flex-direction:column; gap:.75rem; color:var(--section-text); }
.contact-details a{ text-decoration:none; color:var(--primary-dark); font-weight:600; }

.contact-map{
  width:100%;
  min-height:360px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(76,7,0,.15);
}
.contact-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width:900px){
  .detail-grid{
    grid-template-columns:1fr;
  }
  .contact-top{ grid-template-columns:1fr; }
  .contact-map{ min-height:300px; }
  .detail-grid.detail-grid-request{ grid-template-columns:1fr; }
}

/* ---------- UNIVERZALNE FORM STYLY ---------- */
.form-card{
  border:1px solid var(--border-soft);
  border-radius:20px; background:#fff;
  padding:1.75rem; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.form-card form{ display:grid; gap:var(--form-gap); }

.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--form-gap); }
.form-grid.form-grid--single{ grid-template-columns:1fr; }
.form-card label{ font-weight:600; display:block; font-size:.95rem; }
.field-label{
  display:block;
  font-weight:600;
  margin-bottom:.35rem;
}
.form-card input, .form-card select, .form-card textarea{
  border:var(--form-border); border-radius:var(--form-radius);
  padding:.8rem 1rem; font:inherit; width:100%;
  background:var(--form-bg); color:var(--section-text);
}
.form-card input::placeholder, .form-card textarea::placeholder{ color:var(--form-placeholder); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{
  outline:2px solid var(--form-focus); outline-offset:2px;
}
.form-actions{ display:flex; justify-content:flex-end; gap:.75rem; margin-top:.25rem; }
.form-status{margin:0 0 1rem;padding:0.75rem 1rem;border-radius:12px;font-weight:700;font-size:1rem;display:none;line-height:1.45;width:100%}
.form-status--success{display:block !important;background:#d1f4d7 !important;color:#0f5132 !important;border:2px solid #198754 !important;box-shadow:0 6px 16px rgba(25,135,84,0.16) !important}
.form-status--error{display:block !important;background:#ffe1e1 !important;color:#b00020 !important;border:2px solid #e63946 !important;box-shadow:0 6px 16px rgba(230,57,70,0.16) !important}
.request-small-note, .service-small-note, .inquiry-note{ font-size:.85rem; color:rgba(59,26,20,.75); }

.pill-toggle{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.pill-option{
  position:relative;
}
.pill-option input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.pill-option span{
  display:inline-flex;
  align-items:center;
  padding:.55rem 1.2rem;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--section-text);
  font-weight:600;
  transition:all .18s ease;
}
.pill-option input:checked + span{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 10px 20px rgba(122,26,13,.2);
}
.pill-option input:focus-visible + span{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.file-upload{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem 1.25rem;
  border-radius:14px;
  border:1px dashed rgba(161,69,52,.45);
  background:rgba(122,26,13,.04);
  color:var(--primary-dark);
  font-weight:600;
  cursor:pointer;
  transition:all .18s ease;
  max-width:100%;
}
.file-upload input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.file-upload .file-action{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.file-upload .file-action::before{
  content:"+";
  font-weight:700;
  font-size:1rem;
}
.file-upload .file-hint{
  font-size:.85rem;
  color:rgba(59,26,20,.75);
}
.file-upload:hover{
  border-color:var(--primary);
  background:rgba(122,26,13,.08);
  box-shadow:0 10px 20px rgba(76,7,0,.12);
}

/* ---------- FOOTER ---------- */
footer{ text-align:center; color:#6c4a3c; font-size:.9rem; margin:3rem 0 1rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .contact-top{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .floating-nav-content{
    gap:clamp(.75rem,2.5vw,2rem);
    padding-left:clamp(5.5rem, 14vw, 8rem);
  }
  .floating-nav ul{ gap:1rem; }
  .floating-nav-content ul a{ font-size:1rem; }
  .floating-nav .brand{ padding:.35rem .75rem; }
  .floating-nav .brand img{ height:52px; }
}
@media (max-width:640px){
  header .nav ul{ flex-wrap:wrap; gap:.75rem; }
  .stats{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .floating-nav{ padding:0; }
  .floating-nav-content{
    width:100%;
    max-width:100%;
    border-radius:0;
    padding:.55rem .65rem;
    justify-content:space-between;
    gap:.5rem;
    min-height:60px;
  }
  .floating-nav .brand{
    position:static;
    padding:0;
    margin:0;
    box-shadow:none;
    background:transparent;
    border-radius:0;
  }
  .floating-nav .brand img{
    height:38px;
  }
  .floating-nav ul{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0; right:0;
    flex-direction:column;
    gap:.35rem;
    width:100%;
    padding:.65rem .85rem .75rem;
    background:#7a1a0d;
    border-radius:0 0 12px 12px;
    box-shadow:0 10px 24px rgba(0,0,0,.26);
    z-index:5;
  }
  .floating-nav ul li a{ padding:.35rem 0; display:block; }
  .floating-nav.menu-open ul{ display:flex; }
  .nav-toggle{ display:inline-flex; }

  .contact-map{ min-height:260px; }

  .page{ padding:.8rem .65rem 1.2rem; }
  header{
    padding:90px .75rem 1.15rem;
    border-radius:18px;
  }
  section{
    padding:.85rem .75rem 1rem;
    border-radius:14px;
  }
  section h2{ margin:0 0 .6rem 0; }
  .hero{ gap:.65rem; }
  .detail-grid,
  .comparison-grid,
  .usecase-grid,
  .process{ gap:.65rem; }
  .card, .story-card, .comparison-card, .usecase-card, .service-card{
    padding:.85rem;
    border-radius:12px;
  }
  .card h3, .story-card h3, .comparison-card h3, .usecase-card h3, .service-card h3{
    margin:.2rem 0 .25rem 0;
    font-size:1rem;
  }
  .card p, .story-card p, .comparison-card p, .usecase-card p, .service-card p{
    margin:.15rem 0 .45rem 0;
  }
  .form-card{
    padding:.85rem;
    border-radius:12px;
  }
  .form-grid{ gap:.55rem; }
  :root{
    --form-gap:.55rem;
  }
}