/* =================================================================
   video na party — videonaparty.cz
   Hlavní styly. Barvy a fonty se mění zde, v sekci :root níže.
   ================================================================= */

:root{
  /* --- Barvy (klidně upravte) --- */
  --ink:      #0c0a14;   /* hlavní pozadí */
  --ink-2:    #14111f;   /* plochy / karty */
  --ink-3:    #1c1830;   /* zvýrazněné plochy */
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.16);
  --text:     #f4f1fb;
  --muted:    #b3acc6;
  --muted-2:  #8c849f;

  --magenta:  #ff2e7e;
  --magenta-2:#ff5a93;
  --amber:    #ffbc47;
  --cyan:     #14e0d6;
  --violet:   #7c5ce7;

  --grad:     linear-gradient(100deg, #ff2e7e 0%, #ff5a93 42%, #ffbc47 100%);
  --grad-soft:linear-gradient(135deg, rgba(255,46,126,.18), rgba(124,92,231,.18));

  /* --- Typografie --- */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  --radius:   18px;
  --radius-lg:28px;
  --shadow:   0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-glow: 0 18px 50px -12px rgba(255,46,126,.45);

  --maxw: 1180px;
  --ease: cubic-bezier(.21,.84,.4,1);
}

/* ----------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  font-size:clamp(15px,.5vw + 14px,17px);
  font-weight:500;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* film grain overlay over the whole page */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("grain.png");
  opacity:.035; mix-blend-mode:overlay;
}

/* ----------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(64px,9vw,128px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,84px); }

/* ----------------------------------------------------------- type */
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,6.4vw,5rem); }
h2{ font-size:clamp(1.9rem,4vw,3.1rem); }
h3{ font-size:clamp(1.15rem,1.6vw,1.45rem); letter-spacing:-.01em; }
p{ color:var(--muted); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:#d9d3e6; font-weight:500; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:800;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
}
.eyebrow::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:var(--magenta); box-shadow:0 0 14px var(--magenta);
  transform:rotate(20deg);
}
.gradient-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ----------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:800; font-size:.98rem;
  padding:.95em 1.7em; border-radius:999px; color:#15080f;
  background:var(--grad); background-size:160% 160%;
  box-shadow:var(--shadow-glow); position:relative; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-position .6s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 22px 60px -10px rgba(255,46,126,.6); background-position:100% 0; }
.btn:active{ transform:translateY(-1px); }
.btn svg{ width:1.05em; height:1.05em; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:.98rem; padding:.9em 1.6em; border-radius:999px;
  color:var(--text); border:1.5px solid var(--line-2);
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.btn-ghost:hover{ border-color:var(--magenta-2); background:rgba(255,46,126,.08); transform:translateY(-2px); }

/* ----------------------------------------------------------- header / nav */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200;
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(12,10,20,.78); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px; }

.brand{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; }
.brand .mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--grad); box-shadow:0 8px 22px -6px rgba(255,46,126,.6); flex:0 0 auto;
}
.brand .mark svg{ width:18px; height:18px; }
.brand b{ font-weight:700; }
.brand .accent{ color:var(--amber); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-cta{ flex:0 0 auto; white-space:nowrap; }
.nav-links > li > a,
.nav-links > li > .dropbtn{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:700; font-size:.95rem; color:var(--text); white-space:nowrap;
  padding:.6em .9em; border-radius:11px; position:relative;
  transition:color .25s, background .25s;
}
.nav-links a:hover,.nav-links .dropbtn:hover{ background:rgba(255,255,255,.06); }
.nav-links a.active{ color:var(--amber); }
.nav-links a.active::after{
  content:""; position:absolute; left:.9em; right:.9em; bottom:.32em; height:2px;
  border-radius:2px; background:var(--grad);
}

/* dropdown */
.dropdown{ position:relative; }
.dropbtn .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }
.dropdown:hover .dropbtn .chev,
.dropdown.open .dropbtn .chev{ transform:rotate(180deg); }
.dropmenu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:rgba(20,17,31,.96); backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:16px; padding:8px;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.28s var(--ease);
}
.dropdown:hover .dropmenu,
.dropdown.open .dropmenu{ opacity:1; visibility:visible; transform:translateY(0); }
.dropmenu a{
  display:flex; align-items:center; gap:.7em; padding:.7em .8em; border-radius:11px;
  font-weight:600; font-size:.95rem; color:var(--text); transition:background .2s,color .2s;
}
.dropmenu a:hover{ background:var(--grad-soft); color:#fff; }
.dropmenu a .ico{ font-size:1.1em; }

.nav-cta{ display:inline-flex; }
.mobile-cta{ display:none; }
.nav-toggle{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); place-items:center; }
.nav-toggle span{ position:relative; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

/* ----------------------------------------------------------- hero */
.hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero--sub{ min-height:74vh; }
.hero-media{ position:absolute; inset:0; z-index:-2; background:#0c0a14 url("poster.jpg?v=2") center/cover no-repeat; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,6,14,.96) 0%, rgba(8,6,14,.55) 38%, rgba(8,6,14,.25) 70%, rgba(8,6,14,.55) 100%),
    radial-gradient(120% 80% at 15% 90%, rgba(255,46,126,.22), transparent 60%);
}
.hero-inner{ width:100%; padding-bottom:clamp(48px,8vw,104px); padding-top:160px; }
.hero h1{ max-width:16ch; margin-top:.35em; }
.hero .lead{ max-width:54ch; margin-top:1.2em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2.4em; }
.tag{
  font-size:.82rem; font-weight:700; letter-spacing:.02em; padding:.5em 1em; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:#e7e2f2;
  display:inline-flex; align-items:center; gap:.5em;
}
.tag .dot{ width:7px; height:7px; border-radius:50%; }

/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; color:var(--muted); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-cue .mouse{ width:22px; height:34px; border:2px solid var(--line-2); border-radius:12px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:var(--amber); transform:translateX(-50%); animation:wheel 1.7s infinite; }
@keyframes wheel{ 0%{opacity:0; top:5px;} 40%{opacity:1;} 100%{opacity:0; top:15px;} }

/* confetti decoration */
.confetti{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-12%; width:10px; height:16px; border-radius:2px; opacity:.85; animation:fall linear infinite; }
@keyframes fall{ 0%{ transform:translateY(-20vh) rotate(0); } 100%{ transform:translateY(120vh) rotate(540deg); } }
@media (prefers-reduced-motion:reduce){ .confetti i{ animation:none; display:none; } .scroll-cue .mouse::after{ animation:none; } }

/* ----------------------------------------------------------- generic blocks */
.section-head{ max-width:62ch; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.4em; }
.section-head p{ margin-top:1em; }

.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* feature / service card */
.card{
  position:relative; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.card:hover::before{ transform:scaleX(1); }
.card .ico-badge{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--grad-soft); border:1px solid var(--line); font-size:1.6rem;
}
.card h3{ margin-bottom:.5em; }
.card p{ font-size:.97rem; }
.card .more{ display:inline-flex; align-items:center; gap:.4em; margin-top:1.1em; font-weight:800; color:var(--amber); font-size:.92rem; transition:gap .3s; }
.card:hover .more{ gap:.8em; }

/* link card with media */
.media-card{
  display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.media-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
.media-card .thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; background:#16121f; }
.media-card .thumb video,.media-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.media-card:hover .thumb video,.media-card:hover .thumb img{ transform:scale(1.06); }
.media-card .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,10,20,.7), transparent 55%); }
.media-card .play-badge{ position:absolute; left:18px; bottom:16px; z-index:2; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--grad); box-shadow:var(--shadow-glow); }
.media-card .play-badge svg{ width:18px; height:18px; }
.media-card .body{ padding:24px 26px 28px; }
.media-card h3{ margin-bottom:.4em; }
.media-card p{ font-size:.95rem; }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ text-align:center; padding:26px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--grad-soft); }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); line-height:1; }
.stat .lbl{ margin-top:.5em; font-size:.85rem; color:var(--muted); font-weight:600; }

/* split (text + media) */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split.reverse .split-media{ order:-1; }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.split-media img,.split-media video{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.split-media .frame-glow{ position:absolute; inset:0; border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--line-2); pointer-events:none; }

/* steps */
.steps{ counter-reset:step; display:grid; gap:18px; }
.step{ display:flex; gap:20px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); align-items:flex-start; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--amber);
  flex:0 0 auto; width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line);
}
.step h3{ font-size:1.1rem; margin-bottom:.25em; }
.step p{ font-size:.95rem; }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price{
  display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 30px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s;
}
.price:hover{ transform:translateY(-6px); }
.price.featured{ border-color:transparent; background:
  linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
  var(--grad) border-box; box-shadow:var(--shadow-glow); }
.price .badge{ position:absolute; top:18px; right:18px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.4em .8em; border-radius:999px; background:var(--grad); color:#15080f; }
.price h3{ font-size:1.4rem; }
.price .tagline{ color:var(--muted); font-size:.92rem; margin-top:.3em; min-height:2.6em; }
.price .amount{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3.4vw,2.6rem); margin:.6em 0 .1em; }
.price .amount small{ font-family:var(--font-body); font-size:.95rem; color:var(--muted); font-weight:600; }
.price .feat{ display:grid; gap:.7em; margin:1.4em 0 1.8em; }
.price .feat li{ display:flex; gap:.7em; font-size:.95rem; color:#ded8e8; align-items:flex-start; }
.price .feat li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:.2em; color:var(--cyan); }
.price .btn,.price .btn-ghost{ margin-top:auto; justify-content:center; width:100%; }
.price-note{ text-align:center; margin-top:26px; color:var(--muted); font-size:.9rem; }

/* FAQ */
.faq{ display:grid; gap:12px; max-width:820px; margin-inline:auto; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--grad-soft); display:grid; place-items:center; transition:transform .3s var(--ease); font-size:1.1rem; color:var(--amber); }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq details p{ padding:0 24px 22px; font-size:.96rem; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,56px); align-items:start; }
.contact-card{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.contact-card .photo{ aspect-ratio:4/5; }
.contact-card .photo img{ width:100%; height:100%; object-fit:cover; }
.contact-card .info{ padding:26px 28px 30px; }
.contact-card .info h3{ font-size:1.3rem; }
.contact-card .role{ color:var(--amber); font-weight:700; font-size:.9rem; letter-spacing:.04em; }
.contact-list{ display:grid; gap:14px; margin-top:20px; }
.contact-list a,.contact-list span{ display:flex; gap:.8em; align-items:center; font-weight:600; color:#e7e2f2; font-size:.98rem; }
.contact-list .ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--line); color:var(--amber); }
.contact-list a:hover{ color:var(--amber); }
.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; transition:.3s var(--ease); }
.socials a:hover{ background:var(--grad); color:#15080f; transform:translateY(-3px); border-color:transparent; }
.socials a svg{ width:19px; height:19px; }

/* form */
.form{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,4vw,40px); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.5em; color:#ded8e8; }
.field input,.field textarea,.field select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  background:var(--ink); border:1.5px solid var(--line-2); border-radius:13px; padding:.85em 1em;
  transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--magenta-2); box-shadow:0 0 0 4px rgba(255,46,126,.15); }
.field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-hint{ font-size:.82rem; color:var(--muted-2); margin-top:14px; text-align:center; }
.consent{ display:flex; gap:.7em; align-items:flex-start; font-size:.86rem; color:var(--muted); }
.consent input{ width:auto; margin-top:.25em; accent-color:var(--magenta); }

/* CTA banner */
.cta-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(40px,6vw,72px); text-align:center; border:1px solid var(--line); background:
  radial-gradient(120% 140% at 0% 0%, rgba(255,46,126,.28), transparent 55%),
  radial-gradient(120% 140% at 100% 100%, rgba(124,92,231,.30), transparent 55%),
  var(--ink-2); }
.cta-band h2{ max-width:18ch; margin:0 auto .4em; }
.cta-band p{ max-width:52ch; margin:0 auto 1.8em; color:#ded8e8; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* page intro for subpages without hero text */
.page-band{ padding-top:140px; }

/* divider chip list */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.4em; }
.chip{ font-size:.85rem; font-weight:700; padding:.45em .95em; border-radius:999px; background:var(--grad-soft); border:1px solid var(--line); color:#ece7f5; }

/* prose for about / text pages */
.prose{ max-width:68ch; }
.prose p{ margin-bottom:1.1em; color:#d4cee2; }
.prose p:first-of-type{ font-size:1.12rem; color:#ece7f5; }

/* ----------------------------------------------------------- footer */
.site-footer{ border-top:1px solid var(--line); background:var(--ink-2); padding-block:clamp(48px,6vw,72px) 28px; margin-top:40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-brand p{ margin-top:1em; max-width:34ch; font-size:.95rem; }
.footer-col h4{ font-family:var(--font-body); font-weight:800; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:1.1em; }
.footer-col ul{ display:grid; gap:.7em; }
.footer-col a{ color:var(--muted); font-weight:600; font-size:.95rem; transition:color .25s; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:center; text-align:center; gap:14px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted-2); }
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--amber); }

/* ----------------------------------------------------------- reveal animation */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].d1{ transition-delay:.08s; } [data-reveal].d2{ transition-delay:.16s; }
[data-reveal].d3{ transition-delay:.24s; } [data-reveal].d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ----------------------------------------------------------- responsive */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .price.featured{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .contact-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
/* úzké notebooky: kompaktnější navigace, ať se tlačítko poptávky vejde celé */
@media (min-width:1001px) and (max-width:1200px){
  .nav{ gap:12px; }
  .nav-links{ gap:0; }
  .nav-links > li > a,
  .nav-links > li > .dropbtn{ font-size:.88rem; padding:.6em .55em; }
  .nav-cta{ font-size:.9rem; padding:.8em 1.15em; }
  .nav-cta svg{ display:none; }
}
@media (max-width:1000px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:grid; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:190;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(16,13,26,.98); backdrop-filter:blur(18px);
    padding:104px 22px 32px; border-left:1px solid var(--line);
    transform:translateX(105%); transition:transform .42s var(--ease); overflow-y:auto;
  }
  body.nav-open .nav-links{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  .nav-links > li > a,.nav-links > li > .dropbtn{ font-size:1.08rem; padding:.85em .7em; width:100%; justify-content:space-between; }
  .dropmenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:transparent; border:none; padding:4px 0 8px 12px; max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
  .dropdown.open .dropmenu{ max-height:340px; }
  .nav-links .mobile-cta{ display:block; margin-top:14px; }
  .nav-links .mobile-cta .btn{ width:100%; justify-content:center; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(6,5,12,.6); opacity:0; visibility:hidden; transition:.3s; z-index:180; }
  body.nav-open .nav-scrim{ opacity:1; visibility:visible; }
}
@media (max-width:560px){
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero{ min-height:88vh; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
}

/* =================================================================
   PREMIUM POLISH — cinematic party finish (přidaná vrstva)
   ================================================================= */

/* výběr textu v barvách značky */
::selection{ background:rgba(255,46,126,.85); color:#0c0a14; }
::-moz-selection{ background:rgba(255,46,126,.85); color:#0c0a14; }

/* ambientní záře v pozadí — hloubka na všech stránkách */
body::before{
  content:""; position:fixed; inset:-12%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(38% 30% at 10% 6%, rgba(124,92,231,.20), transparent 72%),
    radial-gradient(34% 28% at 92% 3%, rgba(255,46,126,.15), transparent 72%),
    radial-gradient(46% 42% at 84% 94%, rgba(20,224,214,.09), transparent 72%);
  animation:auroraDrift 30s ease-in-out infinite alternate;
}
@keyframes auroraDrift{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(0,-2.5%,0) scale(1.07); } }

/* animovaný přeliv v gradientních nadpisech */
.gradient-text{
  background-image:linear-gradient(100deg,#ff2e7e,#ff5a93,#ffbc47,#ff7ea8,#ff2e7e);
  background-size:220% 100%;
  animation:textShimmer 9s linear infinite;
}
@keyframes textShimmer{ to{ background-position:220% 0; } }

/* eyebrow jako jemný pill */
.eyebrow{ padding:.55em 1.05em .55em .9em; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); backdrop-filter:blur(6px); }

/* logo — jemná záře */
.brand .mark{ box-shadow:0 8px 26px -6px rgba(255,46,126,.7), inset 0 0 0 1px rgba(255,255,255,.14); }

/* tlačítko — lesklý přejezd při hoveru */
.btn{ overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  background-size:300% 100%; background-position:170% 0; mix-blend-mode:screen;
}
.btn:hover::after{ animation:btnSheen .9s var(--ease); }
@keyframes btnSheen{ from{ background-position:170% 0; } to{ background-position:-130% 0; } }

/* karty — hlubší stín a magenta záře v hoveru */
.card{ transition:transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.card:hover{ box-shadow:0 34px 80px -34px rgba(0,0,0,.9), 0 14px 50px -22px rgba(255,46,126,.34); }

/* hero — sebevědomější typografie + jemná záře za textem */
.hero-inner{ position:relative; }
.hero-inner::before{
  content:""; position:absolute; left:-8%; bottom:0; width:62%; height:78%; z-index:-1;
  background:radial-gradient(58% 58% at 28% 72%, rgba(255,46,126,.16), transparent 70%);
  pointer-events:none;
}
.hero h1{ font-size:clamp(2.6rem,6.8vw,5.4rem); letter-spacing:-.025em; }
.hero .lead{ color:#e7e2f4; }

/* statistiky — výraznější čísla */
.stat .num{ font-size:clamp(2.3rem,4.6vw,3.3rem); }
.stat{ transition:transform .4s var(--ease), border-color .4s; }
.stat:hover{ transform:translateY(-4px); border-color:var(--line-2); }

/* testimonial — velká uvozovka + čistá hierarchie */
.testimonial{ padding-top:48px; }
.testimonial::after{
  content:"\201C"; position:absolute; top:2px; left:24px; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:5.5rem; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; opacity:.55;
}
.testimonial > *{ position:relative; z-index:1; }
.testimonial .stars{ color:var(--amber); font-size:1.05rem; letter-spacing:.18em; }
.testimonial .quote-text{ margin-top:.55em; color:#e3ddef; font-size:1.02rem; line-height:1.62; }
.testimonial .quote-author{ margin-top:1.1em; font-weight:800; color:#fff; }

/* header — gradientní linka při scrollu */
.site-header.scrolled{ background:rgba(12,10,20,.72); }
.site-header.scrolled::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--grad); opacity:.4; }

/* footer — gradientní linka nahoře */
.site-footer{ position:relative; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); opacity:.55; }

/* split media — jemný zoom při hoveru */
.split-media img{ transition:transform .8s var(--ease); }
.split-media:hover img{ transform:scale(1.04); }

/* fokus z klávesnice */
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }

/* ----- MARQUEE pás (typy akcí) ----- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.6rem); letter-spacing:.01em; padding:0 0 0 .55em;
  color:rgba(244,241,251,.16); -webkit-text-stroke:1px rgba(255,255,255,.3);
}
.marquee .m-dot{ font-style:normal; -webkit-text-stroke:0; color:var(--magenta); font-size:.55em; margin:0 .1em 0 .55em; filter:drop-shadow(0 0 8px rgba(255,46,126,.6)); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* respekt k preferenci omezeného pohybu */
@media (prefers-reduced-motion:reduce){
  body::before, .gradient-text, .marquee-track, .btn:hover::after{ animation:none; }
}

/* =================================================================
   PREMIUM POLISH v2 — kinematografický „hledáček" + detaily
   ================================================================= */

/* text hero musí být nad hledáčkem */
.hero-inner{ z-index:2; }

/* světelný kužel sledující myš v hero (desktop) */
.hero-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease); mix-blend-mode:screen;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,32%), rgba(255,46,126,.20), transparent 68%);
}
.hero:hover .hero-spot{ opacity:1; }

/* hledáček kamery — rohové značky + REC + timecode */
.viewfinder{ position:absolute; inset:96px clamp(20px,5vw,42px) 30px; z-index:1; pointer-events:none; }
.vf-corner{ position:absolute; width:26px; height:26px; border:2px solid rgba(255,255,255,.45); }
.vf-corner.tl{ top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:6px; }
.vf-corner.tr{ top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:6px; }
.vf-corner.bl{ bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:6px; }
.vf-corner.br{ bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:6px; }
.vf-rec{
  position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:800; font-size:.72rem; letter-spacing:.2em; color:#fff;
  background:rgba(0,0,0,.32); padding:.42em .75em; border-radius:8px; backdrop-filter:blur(4px);
}
.vf-rec i{ width:8px; height:8px; border-radius:50%; background:var(--magenta); box-shadow:0 0 10px var(--magenta); animation:recBlink 1.5s ease-in-out infinite; }
@keyframes recBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
.vf-tc{
  position:absolute; bottom:8px; right:8px; font-family:ui-monospace,Menlo,monospace;
  font-size:.72rem; letter-spacing:.08em; color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.32); padding:.42em .75em; border-radius:8px; backdrop-filter:blur(4px);
}

/* editorní indexy u karet služeb (01–04) */
.grid-4{ counter-reset:svc; }
.grid-4 > .card{ counter-increment:svc; }
.grid-4 > .card::after{
  content:counter(svc,decimal-leading-zero); position:absolute; top:18px; right:22px;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--muted-2); opacity:.55;
}

/* skrytí hledáčku na malých displejích (ať nepřekáží) */
@media (max-width:680px){ .viewfinder{ inset:84px 16px 22px; } .vf-rec,.vf-tc{ font-size:.66rem; } }
@media (prefers-reduced-motion:reduce){ .vf-rec i{ animation:none; } }

/* =================================================================
   VIDEO POZADÍ Z VIMEA — celoplošné „cover" video v hero
   ================================================================= */
.hero-media iframe.hero-vimeo{
  position:absolute; top:50%; left:50%; z-index:0; border:0; pointer-events:none;
  /* udrží poměr 16:9 a vždy překryje celý hero (cover) */
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh;
  transform:translate(-50%,-50%);
}
/* tmavý přechod ať je text čitelný i přes video (nad videem) */
.hero-media::after{ z-index:2; }

/* =================================================================
   VLASTNÍ VIDEO V HERO (soubor na hostingu, ne Vimeo)
   ================================================================= */
.hero-media video.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}

/* =================================================================
   FOTOGALERIE + LIGHTBOX
   ================================================================= */
.gallery{ columns:4 250px; column-gap:14px; margin-top:44px; }
.gallery .gitem{
  display:block; width:100%; padding:0; margin:0 0 14px; border:0; cursor:zoom-in;
  background:var(--ink-2); border-radius:var(--radius); overflow:hidden; position:relative;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
}
.gallery .gitem img{
  width:100%; height:auto; display:block;
  transition:transform .7s var(--ease), filter .45s var(--ease);
}
.gallery .gitem::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(to top, rgba(12,10,20,.55), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gallery .gitem:hover img,.gallery .gitem:focus-visible img{ transform:scale(1.05); }
.gallery .gitem:hover::after,.gallery .gitem:focus-visible::after{ opacity:1; }
.gallery .gitem:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.gallery.is-collapsed .gitem[data-extra]{ display:none; }
.gallery-more{ display:flex; justify-content:center; margin-top:30px; }
.gallery-count{ text-align:center; color:var(--muted); font-size:.88rem; margin-top:16px; }

.lightbox{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(6,4,12,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(14px,4vw,48px);
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 40px 90px -40px #000;
}
.lightbox .lb-btn{
  position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(20,17,31,.85); color:var(--text);
  display:grid; place-items:center; transition:background .3s, transform .3s var(--ease);
}
.lightbox .lb-btn:hover{ background:var(--ink-3); transform:scale(1.07); }
.lightbox .lb-btn svg{ width:22px; height:22px; }
.lightbox .lb-close{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); }
.lightbox .lb-prev{ left:clamp(10px,2.5vw,30px); top:50%; margin-top:-26px; }
.lightbox .lb-next{ right:clamp(10px,2.5vw,30px); top:50%; margin-top:-26px; }
.lightbox .lb-info{
  position:absolute; bottom:clamp(10px,2.5vw,26px); left:50%; transform:translateX(-50%);
  font-size:.85rem; font-weight:700; color:var(--muted); letter-spacing:.06em;
  background:rgba(20,17,31,.8); border:1px solid var(--line); border-radius:999px; padding:.45em 1.1em;
}
body.lb-open{ overflow:hidden; }

/* =================================================================
   UKÁZKY Z YOUTUBE (náhled se načte až po kliknutí — rychlejší web)
   ================================================================= */
.yt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.yt-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ink-2); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.yt-card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.yt-frame{
  position:relative; aspect-ratio:16/9; width:100%; border:0; padding:0; margin:0;
  background:#16121f center/cover no-repeat; cursor:pointer; display:block; overflow:hidden;
}
.yt-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.yt-card:hover .yt-frame img{ transform:scale(1.05); }
.yt-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,10,20,.6),transparent 55%); }
.yt-play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); box-shadow:var(--shadow-glow); transition:transform .35s var(--ease);
}
.yt-frame:hover .yt-play{ transform:translate(-50%,-50%) scale(1.1); }
.yt-play svg{ width:26px; height:26px; color:#15080f; margin-left:3px; }
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-card .body{ padding:20px 24px 24px; }
.yt-card h3{ font-size:1.05rem; margin:0; }
.yt-card p{ font-size:.9rem; margin-top:.35em; color:var(--muted); }

@media (max-width:900px){
  .yt-grid{ grid-template-columns:1fr; }
  .gallery{ columns:2 150px; column-gap:10px; }
  .gallery .gitem{ margin-bottom:10px; }
}