:root{
  --bg: #07080c;
  --surface: #12141c;
  --ink: #f4f5f9;
  --muted: #9298a8;
  --line: rgba(255,255,255,.09);
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 48px -20px rgba(47,111,237,.35);

  --c-delivery: #ff5a79;
  --c-travel: #9c8bff;
  --c-mechanik: #3b82f6;
  --c-book: #2dd9bd;
  --c-servis: #ffb43c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  margin:0;
  letter-spacing:-.01em;
}
em{
  font-style:italic;color:var(--c-mechanik);
  text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:var(--c-mechanik);
  text-decoration-thickness:2px; text-underline-offset:4px;
}
a{color:inherit;text-decoration:none}
p{margin:0;color:var(--muted);line-height:1.6}

/* decorative blobs */
.blob{
  position:fixed;
  width:46vw; height:46vw;
  max-width:620px; max-height:620px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
.blob--a{ top:-14vw; right:-14vw; background:radial-gradient(circle, var(--c-mechanik), transparent 70%); opacity:.55; animation:float-blob 12s ease-in-out infinite; }
.blob--b{ bottom:-18vw; left:-16vw; background:radial-gradient(circle, var(--c-delivery), transparent 70%); opacity:.3; animation:float-blob 14s ease-in-out infinite reverse; }
@keyframes float-blob{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3vw,-3vw) scale(1.05); } }
@keyframes wiggle-in{ 0%{ transform:translateY(10px) rotate(-1deg); opacity:0; } 100%{ transform:translateY(0) rotate(0); opacity:1; } }
@keyframes icon-pop{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.15) rotate(-6deg); } }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 6vw;
  backdrop-filter:blur(14px);
  background:rgba(7,8,12,.72);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand-logo{
  height:30px; width:auto; display:block;
  filter:drop-shadow(0 0 10px rgba(59,130,246,.4));
}
.nav{display:flex; gap:28px; font-size:.95rem; font-weight:500}
.nav a{color:var(--muted); transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav-toggle{
  display:none; flex-direction:column; gap:4px;
  width:34px; height:34px; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}

/* hero — kompaktní, ať se první řada karet vejde na obrazovku bez scrollování */
.hero{
  position:relative; z-index:1;
  max-width:820px;
  margin:0 auto;
  padding:4.5vh 6vw 2vh;
  text-align:center;
  animation:wiggle-in .5s ease-out;
}
.hero-logo{
  height:auto; width:min(150px, 40%); margin:0 auto 16px; display:block;
  filter:drop-shadow(0 0 20px rgba(59,130,246,.5));
}
.eyebrow{
  display:inline-block;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-mechanik);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(1.8rem, 4.2vw, 3.2rem);
  line-height:1.1;
}
.hero-copy{
  max-width:46ch; margin:14px auto 0;
  font-size:1rem;
}
.hero-cta{
  display:flex; gap:14px; justify-content:center; margin-top:16px; flex-wrap:wrap;
}
.btn{
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--c-mechanik); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 56px -18px rgba(59,130,246,.55); }
.btn-ghost{ border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:transparent; box-shadow:var(--shadow); }

/* services */
.services{ position:relative; z-index:1; padding:1vh 6vw 10vh; max-width:1180px; margin:0 auto; }
.section-title{
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  text-align:center;
  margin-bottom:16px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}
.card{
  --accent:var(--c-mechanik);
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.card[data-accent="delivery"]{--accent:var(--c-delivery)}
.card[data-accent="travel"]{--accent:var(--c-travel)}
.card[data-accent="mechanik"]{--accent:var(--c-mechanik)}
.card[data-accent="book"]{--accent:var(--c-book)}
.card[data-accent="servis"]{--accent:var(--c-servis)}

.card:nth-child(odd):hover{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 48px -20px color-mix(in srgb, var(--accent) 55%, transparent);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  transform:translateY(-4px) rotate(-1deg);
}
.card:nth-child(even):hover{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 48px -20px color-mix(in srgb, var(--accent) 55%, transparent);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  transform:translateY(-4px) rotate(1deg);
}
.card-icon{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:color-mix(in srgb, var(--accent) 18%, black);
  color:var(--accent);
  transition:transform .2s ease;
}
.card:hover .card-icon{ animation:icon-pop .5s ease; }
.card-icon svg{width:26px; height:26px}
.card h3{font-size:1.2rem}
.card p{font-size:.92rem; flex:1}
.card-link{
  font-size:.88rem; font-weight:600; color:var(--accent);
}
.card-link--soon{ color:var(--muted); }

/* scroll reveal */
.card--reveal{ opacity:0; transform:translateY(18px); }
.card--reveal.is-visible{ opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .5s ease; }

/* about */
.about{
  position:relative; z-index:1;
  max-width:1000px; margin:0 auto; padding:6vh 6vw 14vh; text-align:center;
}
.about-lead{
  max-width:56ch; margin:18px auto 0; font-size:1.08rem;
}
.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  margin-top:48px;
  text-align:left;
}
.about-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 22px 20px;
}
.about-item h3{
  font-size:1.02rem; margin-bottom:8px; color:var(--ink);
}
.about-item p{
  font-size:.92rem; margin:0;
}

/* footer */
footer{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  padding:6vh 6vw 4vh;
  font-size:.92rem;
}
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px; max-width:1180px; margin:0 auto;
}
.footer-grid strong{display:block; margin-bottom:6px; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.footer-grid a{color:var(--ink)}
.footer-grid a:hover{color:var(--c-mechanik)}
.footer-note{ text-align:center; color:var(--muted); margin-top:40px; font-size:.82rem }
.footer-note a{ color:var(--muted); text-decoration:underline; }
.footer-note a:hover{ color:var(--c-mechanik); }

/* cookie banner (Google Analytics souhlas) — běžný prvek v toku dokumentu (viz analytics.js,
   proč ne position:fixed: fixní banner reálně překrýval obsah stránky na krátkých stránkách). */
.cookie-banner{
  width:calc(100% - 32px); max-width:680px; margin:16px auto; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
}
.cookie-banner p{ flex:1; min-width:220px; font-size:.86rem; margin:0; color:var(--muted); }
.cookie-banner p a{ color:var(--c-mechanik); }
.cookie-banner-actions{ display:flex; gap:8px; flex-shrink:0; }
.cookie-banner-actions .btn{ font-size:.86rem; padding:9px 16px; }
@media (max-width:480px){ .cookie-banner{ flex-direction:column; align-items:stretch; } .cookie-banner-actions{ justify-content:flex-end; } }

@media (max-width:760px){
  .nav{
    position:fixed; inset:60px 16px auto 16px;
    flex-direction:column; gap:4px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:10px; box-shadow:var(--shadow);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.2s ease;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav a{ padding:10px 12px; border-radius:8px; }
  .nav a:hover{ background:var(--bg); }
  .nav-toggle{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .card--reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}