:root{
  --brand:#6B32FE;
  --brand-2:#8E63FF;
  --text:#140a2a;
  --muted:#6b6a78;
  --card:#ffffff;
  --surface:#f7f6fb;
  --radius:16px;
  --shadow: 0 10px 25px rgba(18, 0, 60, .12), 0 2px 8px rgba(18,0,60,.06);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color:var(--text); background:#fbfbff;
  line-height:1.55;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.logo__img{height:40px; width:auto}
.nav__links{display:flex; gap:24px; align-items:center}
.nav__links a{font-weight:600; opacity:.9}
.btn{--h:48px; height:var(--h); display:inline-flex; align-items:center; justify-content:center; padding:0 18px; font-weight:700; border-radius:calc(var(--radius) + 6px); box-shadow:var(--shadow); border:0; cursor:pointer}
.btn--primary{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color:#fff}
.btn--ghost{background:#fff; color:var(--brand); border:2px solid rgba(107,50,254,.15)}
.burger{display:none}

/* Mobile menu */
.burger{width:44px; height:44px; place-items:center; border-radius:12px; border:1.5px solid rgba(107,50,254,.2)}
.burger span{width:20px; height:2px; background:#2d1b52; position:relative; display:block}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; right:0; height:2px; background:#2d1b52}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* Mobile menu: hide by default on all viewports */
.mobile{display:none}

/* Hero */
.hero{position:relative; padding:56px 0 40px}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:min(6vw,56px); align-items:center}
.super{display:inline-flex; align-items:center; gap:10px; font-weight:700; color:#2a155a; background:#fff; border:1px solid rgba(107,50,254,.18); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow)}
.super small{font-weight:600; color:var(--muted)}
h1{font-size: clamp(2.1rem, 4.3vw, 3.6rem); line-height:1.05; letter-spacing:-.02em; margin:14px 0 14px}
.accent{color:var(--brand)}
.lead{font-size: clamp(1rem, 1.5vw, 1.125rem); color:#3b3551}
.hero__cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}

.partner{display:flex; align-items:center; gap:14px; margin-top:26px; color:#3b3551}
.partner .badge{width:56px; height:56px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow); padding:6px}
.partner .badge img{max-width:100%; max-height:100%; object-fit:contain}

/* Hero art (maskot vpravo) */
.hero__art{position:relative; aspect-ratio:1/1; min-height:420px; border-radius:40px; background:radial-gradient(120% 120% at 70% 30%, var(--brand-2) 0%, var(--brand) 60%, #2a0c5f 100%); box-shadow:0 30px 60px rgba(57,0,170,.35), inset 0 1px 0 rgba(255,255,255,.25); overflow:hidden}
.glare{position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%)}
.octo{position:absolute; right:0; bottom:0; height:105%; max-width:none; filter:drop-shadow(0 24px 40px rgba(57,0,170,.35))}

/* Trust strip */
.trust{margin-top:46px; padding:16px; border-radius:18px; background:#fff; border:1px solid rgba(107,50,254,.12); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.trust p{margin:0; color:#3b3551}

/* Sections */
section{padding:64px 0}
.section-title{font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 18px; text-align:center}
.section-lead{margin:0 auto 34px; color:#4e4b5b; text-align:center; max-width:60ch}

/* Benefit cards */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border:1px solid rgba(107,50,254,.10); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.card__icon{width:52px; height:52px; border-radius:14px; background:linear-gradient(145deg, var(--brand-2), var(--brand)); display:grid; place-items:center; box-shadow:0 8px 18px rgba(107,50,254,.35)}
.card__icon svg{fill:#fff; width:26px; height:26px}
.card h3{margin:2px 0 4px}
.card p{color:#4c4761; margin:0}

/* CTA band */
.band{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color:#fff; border-radius:24px; padding:28px; box-shadow:var(--shadow); display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:18px}
.band .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.band__title{margin:0 0 6px}
.band__lead{margin:0; opacity:.95}
.band__cta{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

/* Contact */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
form{background:#fff; border:1px solid rgba(107,50,254,.12); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{font-weight:600; font-size:.92rem}
input,textarea{width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; border:1.5px solid #e9e7f5; outline:0; background:#fcfbff}
textarea{min-height:120px; resize:vertical}
.form-note{margin:8px 0 0; color:#6f6a86; font-size:.9rem}
.form__row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.side .contact__text{margin:0}

.footer{margin-top:18px; padding:32px 0 56px; background:#f4f2fa;}
footer{margin-top:18px; padding:32px 0 56px; background:#f4f2fa;}
.foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.small{color:#6a6780; font-size:.95rem}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(12px); transition:all .55s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 960px){
  .hero__grid, .contact, .band{grid-template-columns:1fr}
  .hero{padding-top:26px}
  .hero__art{min-height:360px}
}
@media (max-width: 760px){
  .nav__links{display:none}
  .burger{display:grid}
  .mobile{position:absolute; inset:64px 0 auto 0; background:#ffffffee; border-bottom:1px solid rgba(107,50,254,.12); display:none}
  .mobile a{display:block; padding:14px 4%; font-weight:700}
  .mobile { text-align: center; }
  #mobileMenu a { text-align: center; }
  .benefits{grid-template-columns:1fr}
  .band{padding:22px}
  .btn{--h:46px}
}
header.scrolled{box-shadow:0 4px 24px rgba(17, 0, 58, .08); background:rgba(255,255,255,.8)}

/* --- Polish: header + nav + hero --- */
.nav{border-bottom:1px solid rgba(107,50,254,.12); padding:14px 0}
.nav__links{gap:28px}
.nav__links a{display:inline-flex; align-items:center; height:48px}
.nav__links a:hover{opacity:1; text-decoration:none}
.nav__links .nav__cta{margin-left:auto}
.nav__links .nav__cta .btn{height:40px; padding:0 16px}
.nav__links a.active{color:var(--brand); font-weight:700}
header.scrolled .nav{padding:10px 0}

/* jemný hover/press pro tlačítka */
.btn{transition:transform .08s ease, box-shadow .25s ease, opacity .25s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(18,0,60,.18), 0 4px 10px rgba(18,0,60,.10)}
.btn:active{transform:translateY(0)}

/* tagline pod „super“ štítkem + telefon vpravo v hero */
.tagline{margin:10px 0 6px; color:#4a3f6a; opacity:.9}
.phone-img{position:absolute; left:-6%; bottom:-8%; height:115%; max-width:none; opacity:.9; filter:drop-shadow(0 20px 40px rgba(43,0,120,.35))}
.octo{z-index:2}

/* Updated partners-carousel and keyframes for infinite scroll */
.partners-carousel {
  display: flex;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 20px 0;
  animation: scroll-logos 30s linear infinite;
  width: max-content;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Google-style reviews */
.google-reviews .card {
  position: relative;
  padding-top: 18px;
}
.google-reviews .card img {
  border-radius: 50%;
}
.google-reviews .card strong {
  font-weight: 600;
}
.google-reviews .card small {
  color: #777;
}
.google-reviews .stars {
  color: #fbbc04;
  font-size: 15px;
  margin: 4px 0 6px;
}
.google-reviews .badge-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #777;
  margin-top: 8px;
}
.google-reviews .badge-google img {
  height: 18px;
  width: auto;
}
/* --- Google-like styling for #reference cards (pure CSS, no HTML changes) --- */
#reference .benefits .card{
  position:relative;
  padding-top:18px;
  padding-bottom:10px;
  padding-left:18px;
  padding-right:18px;
}

/* žluté hvězdičky nad textem */
#reference .benefits .card::before{
  content:"★★★★★";
  position:absolute;
  top:12px;
  left:22px;
  font-size:12px;
  letter-spacing:1px;
  color:#fbbc04;      /* Google star yellow */
  line-height:1;
}


/* drobné doladění textů v kartě */
#reference .benefits .card p{ margin:4px 0 3px; }
#reference .benefits .card strong{ margin:6px 0 2px; font-weight:600; color:#111; }

/* mobile spacing */
@media (max-width:760px){
  #reference .benefits{gap:12px}
  #reference .benefits .card{padding-left:18px; padding-right:18px}
}
/* Fix Google reviews logo: remove pseudo-element and size inline logo */
#reference .benefits .card::after{
  content:none !important;
  background-image:none !important;
}
.google-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#6a6a6a;
  text-decoration:none;
  margin-top:3px;
  margin-bottom:0;
}
.google-link:hover{
  color:#333;
  text-decoration:underline;
}
.google-link img{
  height:12px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
}

/* Reviews carousel: JS-driven smooth pan */
#reference .benefits{ overflow:hidden; }
#reference .reviews-carousel{
  display: flex;
  gap: 18px;
  width: 100%;
  margin-left: 0;
  left: auto;
  position: static;
  padding: 18px 0;

  background: none !important;   /* odstraníme bílé pole */
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}


/* Fix: remove any leftover mask/gradient on reviews carousel */
#reference .reviews-carousel{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* === Modal popup (glass effect) === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 42, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 28px;
  max-width: 520px;
  width: 92%;
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
  animation: modalFade .35s ease;
}

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

.modal-box h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.6rem;
  text-align: center;    /* center the title */
  font-weight: 800;
  letter-spacing: -0.01em;
}
.modal-box form { display: grid; gap: 12px; }
.modal-box input, .modal-box textarea {
  border-radius: 12px;
  border: 1.5px solid #ddd;
  padding: 12px 14px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #444;
}


/* Modal refinements */
.modal-overlay { z-index: 1000; }
.modal-box { max-height: calc(100vh - 96px); overflow-y: auto; }

/* === 3D Glass pane modal === */
.modal-box {
  position: relative;
  overflow: hidden; /* prevent edge seams */
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 28px 70px rgba(18,0,61,.30),      /* drop shadow */
    0 1px 0 rgba(255,255,255,.38) inset,/* top inner highlight */
    0 -1px 0 rgba(18,0,61,.08) inset;   /* bottom inner shade */
  transform: translateZ(0);
}

/* jemný světlý lem */
.modal-box::after{
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); /* thin inner rim only */
}

/* odlesky v rozích */
.modal-box::before{ content: none; }
/* === Modal sizing & two-column form === */
.modal-box{ width: min(760px, 92vw); max-width: unset; }
.modal-box form{ grid-template-columns: 1fr 1fr; gap: 14px; }
/* Make the textarea row and the footer row span full width */
.modal-box form p:nth-of-type(5),
.modal-box form .form__row{ grid-column: 1 / -1; }

@media (max-width: 720px){
  .modal-box{ width: min(96vw, 580px); }
  .modal-box form{ grid-template-columns: 1fr; }
  .modal-box form p:nth-of-type(5),
  .modal-box form .form__row{ grid-column: auto; }
}
/* === Modal mobile scrolling fix (iOS/Android) === */
.modal-overlay{ overflow-y:auto; overscroll-behavior:contain; }
.modal-box{
  max-height: min(82vh, calc(100vh - 72px));
  overflow-y:auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  overscroll-behavior: contain;
}
@media (max-width:720px){
  .modal-box{ width:min(96vw, 580px); max-height: 86vh; }
}
/* === Reference panel full-bleed === */
#reference .reviews-carousel{
  display: flex;
  gap: 18px;
  width: 100%;
  margin-left: 0;
  left: auto;
  position: static;
  padding: 18px 0;

  background: none !important;   /* odstraníme bílé pole */
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Keep cards size but allow graceful wrap on small screens */
#reference .reviews-carousel .card{ flex: 0 0 360px; }
@media (max-width: 960px){
  #reference .reviews-carousel .card{ flex: 0 0 320px; }
}
@media (max-width: 760px){
  #reference .reviews-carousel{
    margin-left: 0; margin-right: 0; border-radius: 16px;
  }
}

/* === Reference: force full‑bleed container & track === */
#reference{ position:relative; overflow:visible; }
#reference .container{
  width:100% !important;
  max-width:none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#reference .reviews-carousel{
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index:1;
}
/* === Reference: mobile horizontal carousel (no column stacking) === */
@media (max-width:760px){
  #reference .container{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
  #reference, #reference .reviews-carousel{ width:100% !important; max-width:100% !important; margin:0 !important; left:auto !important; position:static !important; padding:0 !important; }
  #reference .reviews-carousel{ display:flex; flex-wrap:nowrap; overflow:hidden !important; gap:12px; padding:8px 0 !important; }
  #reference .reviews-carousel .card{ flex:0 0 88vw; margin:0; }
}

.social-fab{ display:none; }
.social-fab svg{ width:24px; height:24px; }

/* === SOCIAL FAB HARD OVERRIDE (ensure visible) === */
@media (max-width:1200px){
  .social-fab{
    display: grid !important;
    position: fixed !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    z-index: 5000 !important;
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    background:#fff !important; color:#222 !important;
    place-items: center !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 4px 10px rgba(0,0,0,.14) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    pointer-events: auto !important;
  }
  .social-fab--fb{ left: 10px !important; }
  .social-fab--ig{ right: 10px !important; }
  .social-fab svg{ width:24px !important; height:24px !important; }
}
/* === FOOTER CLEANUP FINAL === */
/* Desktop & tablet: zobraz tlačítka a srovnej layout */
@media (min-width:761px){
  footer .foot{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; flex-wrap:wrap !important; }
  footer .foot .btn{ display:inline-flex !important; }
  footer .small{ text-align:left !important; }
}



/* Hide footer Facebook/Instagram buttons on mobile */
@media (max-width:760px){
  footer .foot .btn[href*="facebook"],
  footer .foot .btn[href*="instagram"]{ display:none !important; }
}