/* =====================================================================
   Eva Milcová – fotografka · design 2026
   ===================================================================== */
:root{
  --bg:#121214; --bg2:#17171a; --surface:#1d1d21; --surface2:#242429;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --text:#EEE8E1; --body:#c4bdb5; --muted:#9E9891; --dim:#6d6862;
  --accent:#C9463A; --accent-2:#E0594C;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --nav-h:104px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:1px solid var(--accent-2); outline-offset:4px}
.wrap{width:min(1240px, 100% - 48px); margin-inline:auto}
.wrap.narrow{width:min(780px, 100% - 48px)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.02; margin:0; letter-spacing:-.01em}
em{font-style:italic}
.ico{width:18px; height:18px; flex:none}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:fixed; left:16px; top:-60px; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; font-size:13px; transition:top .3s}
.skip:focus{top:16px}
.label{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:14px}
.label::before{content:""; width:34px; height:1px; background:var(--accent); flex:none}
.amp{color:var(--accent)}
section{padding:130px 0; scroll-margin-top:70px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 30px; border:1px solid var(--line2); background:none; cursor:pointer;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; position:relative; overflow:hidden; z-index:0; line-height:1.4;
  transition:color .4s var(--ease), border-color .4s; color:var(--text); text-align:center;
}
.btn::before{content:""; position:absolute; inset:0; background:var(--text); transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1}
.btn:hover{color:var(--bg); border-color:var(--text)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.solid::before{background:var(--accent-2)}
.btn.solid:hover{color:#fff; border-color:var(--accent-2)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn .ico{width:16px; height:16px}
.btn[disabled]{opacity:.6; pointer-events:none}
.link-arr{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--line2); padding-bottom:6px; transition:border-color .3s, gap .4s var(--ease)}
.link-arr:hover{border-color:var(--accent); gap:16px}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto; z-index:50; transition:background .4s, border-color .4s, transform .5s var(--ease); border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(18,18,20,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line)}
.nav .nav-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--nav-h); transition:height .4s var(--ease)}
.nav.scrolled .nav-in{height:76px}
.nav ul{display:flex; gap:44px; list-style:none; margin:0; padding:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:500}
.nav ul.r{justify-content:flex-end}
.nav ul a{position:relative; padding:6px 0; color:#d9d3cc; transition:color .3s}
.nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav ul a:hover, .nav ul a.active{color:#fff}
.nav ul a:hover::after, .nav ul a.active::after{transform:scaleX(1); transform-origin:left}
.logo{display:block}
.logo img{width:78px; height:auto; transition:width .4s var(--ease)}
.nav.scrolled .logo img{width:54px}
.burger{display:none; background:none; border:0; color:var(--text); cursor:pointer; justify-self:end; padding:10px; margin-right:-6px; position:relative; z-index:3}
.burger i{display:block; width:26px; height:1px; background:currentColor; margin:7px 0; transition:transform .45s var(--ease), opacity .3s}
.menu-open .burger i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* mobile overlay menu */
.mnav{position:fixed; inset:0; z-index:45; background:rgba(14,14,16,.98); display:flex; flex-direction:column; justify-content:center; padding:110px 32px 40px; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s}
.menu-open .mnav{opacity:1; visibility:visible}
.mnav ul{list-style:none; margin:0; padding:0}
.mnav li{overflow:hidden}
.mnav li a{display:flex; align-items:baseline; gap:16px; font-family:var(--serif); font-size:clamp(38px, 10vw, 56px); font-weight:300; line-height:1.25; transform:translateY(110%); transition:transform .7s var(--ease), color .3s}
.mnav li a small{font-family:var(--sans); font-size:11px; color:var(--dim); letter-spacing:.1em}
.mnav li a.active{color:#fff; font-style:italic}
.menu-open .mnav li a{transform:none}
.mnav li:nth-child(2) a{transition-delay:.04s} .mnav li:nth-child(3) a{transition-delay:.08s} .mnav li:nth-child(4) a{transition-delay:.12s}
.mnav li:nth-child(5) a{transition-delay:.16s} .mnav li:nth-child(6) a{transition-delay:.2s} .mnav li:nth-child(7) a{transition-delay:.24s}
.mnav .mnav-foot{margin-top:44px; padding-top:26px; border-top:1px solid var(--line); display:grid; gap:10px; font-size:14px; color:var(--muted)}
.mnav .mnav-foot a{display:flex; gap:12px; align-items:center}
.menu-open{overflow:hidden}

/* ---------- HERO (home) ---------- */
.hero{position:relative; min-height:100vh; padding:150px 0 70px; display:flex; align-items:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 72% 45%, rgba(201,70,58,.10), transparent 60%), radial-gradient(ellipse 50% 60% at 20% 80%, rgba(255,255,255,.035), transparent 70%)}
.hero .grid{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; width:min(1240px, 100% - 48px)}
.hero h1{font-size:clamp(48px, 5.1vw, 84px); font-weight:300; margin:28px 0 30px}
.hero h1 em{color:#fff; font-weight:400}
.hero p.lead{max-width:440px; color:var(--muted); font-size:17px; margin:0 0 44px}
.hero .ctas{display:flex; gap:16px; flex-wrap:wrap}
.hero .meta{display:flex; gap:44px; margin-top:70px; padding-top:28px; border-top:1px solid var(--line); max-width:520px}
.hero .meta div{font-size:12px; color:var(--muted); letter-spacing:.06em}
.hero .meta b{display:block; font-family:var(--serif); font-size:30px; font-weight:400; color:var(--text); letter-spacing:0; line-height:1.1}

.stage{position:relative; height:min(78vh, 720px); perspective:1400px; --px:0; --py:0}
.frame{
  position:absolute; right:0; top:0; width:72%; height:88%; transform-style:preserve-3d;
  transform:rotateY(calc(-7deg + var(--px)*6deg)) rotateX(calc(var(--py)*-4deg)); transition:transform .6s var(--ease);
}
.frame .shot{position:absolute; inset:0; overflow:hidden; background:#0c0c0e; box-shadow:0 60px 80px -40px rgba(0,0,0,.8), 0 0 0 1px var(--line)}
.frame .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity 1.1s var(--ease), transform 6s linear}
.frame .shot img.on{opacity:1; transform:scale(1)}
.frame .border{position:absolute; inset:-18px; border:1px solid var(--line2); transform:translateZ(-60px); pointer-events:none}
.frame .cap{position:absolute; right:0; bottom:-44px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); display:flex; gap:18px}
.frame .cap b{color:var(--text); font-weight:500}
#cam3d{position:absolute; left:-9%; bottom:-10%; width:85%; height:78%; z-index:3; cursor:pointer; outline:none}
#cam3d::before{content:""; position:absolute; inset:4% 2% -2% 0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 46% 40% at 42% 55%, rgba(255,232,218,.22), rgba(201,70,58,.12) 48%, transparent 74%); filter:blur(8px)}
#cam3d canvas{display:block; width:100%!important; height:100%!important}
.cam-hint{position:absolute; left:4%; bottom:-2%; z-index:4; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; pointer-events:none; transition:opacity .6s}
.cam-hint i{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(201,70,58,.6); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(201,70,58,0)} 100%{box-shadow:0 0 0 0 rgba(201,70,58,0)}}
.flash{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:90}
.scroll-cue{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:1px; height:56px; background:var(--line); overflow:hidden}
.scroll-cue::after{content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--text); animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* ---------- PROMO band (aktuální mini focení) ---------- */
.promo{padding:0; border-block:1px solid var(--line); background:var(--bg2)}
.promo-list{display:grid}
.promo-item{display:grid; grid-template-columns:auto 1fr auto; gap:34px; align-items:center; padding:26px 0; position:relative}
.promo-item + .promo-item{border-top:1px solid var(--line)}
.promo-item .pimg{width:120px; aspect-ratio:4/3; overflow:hidden; background:#0b0b0d}
.promo-item .pimg img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.promo-item:hover .pimg img{transform:scale(1.07)}
.promo-item .tag{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-2); font-weight:600}
.promo-item h3{font-size:clamp(26px, 2.6vw, 36px); font-weight:300; margin:6px 0 4px}
.promo-item p{margin:0; color:var(--muted); font-size:14px; max-width:620px}
.promo-item .go{width:48px; height:48px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; transition:.4s var(--ease)}
.promo-item:hover .go{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg)}

/* ---------- ABOUT ---------- */
.about .grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:110px; align-items:center}
.portrait{position:relative; perspective:1200px}
.portrait .card{position:relative; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .8s var(--ease)}
.portrait .card.tilting{transition:transform .15s linear}
.portrait img{width:100%; aspect-ratio:349/520; object-fit:cover; object-position:top; box-shadow:0 50px 80px -40px rgba(0,0,0,.8)}
.portrait .outline{position:absolute; inset:0; border:1px solid var(--accent); transform:translateZ(-50px) translate(28px, 28px)}
.portrait .sig{position:absolute; right:-40px; bottom:40px; transform:translateZ(60px); background:var(--bg2); border:1px solid var(--line); padding:18px 22px; font-family:var(--serif); font-size:22px; font-style:italic; line-height:1.25}
.portrait .sig small{display:block; font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.about h2{font-size:clamp(44px, 5vw, 72px); font-weight:300; margin:24px 0 34px}
.about .txt p{color:var(--muted); margin:0 0 20px; max-width:600px}
.about .txt p strong{color:var(--text); font-weight:500}
.about blockquote{margin:44px 0 0; padding-left:28px; border-left:1px solid var(--accent); font-family:var(--serif); font-size:30px; font-style:italic; line-height:1.3; color:var(--text); font-weight:300}

/* ---------- section heads ---------- */
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:70px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(44px, 5.4vw, 80px); font-weight:300; margin-top:22px}
.sec-head p{max-width:380px; color:var(--muted); margin:0}

/* ---------- SERVICES (editorial list + floating 3D preview) ---------- */
.services{background:var(--bg2); border-block:1px solid var(--line)}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid; grid-template-columns:70px 1fr auto 40px; align-items:center; gap:24px; padding:30px 0; border-bottom:1px solid var(--line); position:relative}
.svc .n{font-size:12px; color:var(--dim); letter-spacing:.1em}
.svc h3{font-size:clamp(30px, 3.4vw, 48px); font-weight:300; transition:transform .5s var(--ease), color .3s}
.svc h3 small{display:block; font-family:var(--sans); font-size:13px; color:var(--muted); letter-spacing:.02em; margin-top:8px; line-height:1.5}
.svc .p{font-size:13px; color:var(--muted); letter-spacing:.08em; text-align:right; white-space:nowrap}
.svc .p b{display:block; font-family:var(--serif); font-size:24px; color:var(--text); font-weight:400; letter-spacing:0}
.svc .go{width:40px; height:40px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; transition:.4s var(--ease)}
.svc .go .ico{width:16px; height:16px}
.svc:hover h3{transform:translateX(16px); color:#fff}
.svc:hover .go{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg)}
.svc .thumb{display:none}
.preview{position:fixed; left:0; top:0; width:300px; height:380px; pointer-events:none; z-index:40; perspective:800px; opacity:0; transition:opacity .35s}
.preview.show{opacity:1}
.preview .pv{position:relative; width:100%; height:100%; overflow:hidden; transform-style:preserve-3d; box-shadow:0 40px 60px -20px rgba(0,0,0,.7); background:#0b0b0d}
.preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s}
.preview img.on{opacity:1}

/* ---------- GALLERY wall (3D wall that flattens on scroll) ---------- */
.gallery{padding-bottom:110px; overflow:hidden}
.gallery .sec-head{margin-bottom:60px}
.wall-stage{perspective:1600px; perspective-origin:50% 0%}
.wall{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; grid-auto-flow:dense; gap:14px; transform-style:preserve-3d;
  transform:rotateX(var(--wx, 30deg)) scale(var(--ws, .9)) translateY(var(--wy, 0px)); transform-origin:50% 0%;
}
.wall a{position:relative; overflow:hidden; background:#0b0b0d; transform:translateZ(0); transition:transform .6s var(--ease), box-shadow .6s}
.wall a.t{grid-row:span 2}
.wall a.w{grid-column:span 2}
.wall img{width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(.92); transition:filter .6s, transform 1.2s var(--ease)}
.wall a::after{content:attr(data-cap); position:absolute; left:18px; right:18px; bottom:14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:0; transform:translateY(8px); transition:.5s var(--ease); text-shadow:0 1px 12px rgba(0,0,0,.6)}
.wall a:hover{transform:translateZ(50px); box-shadow:0 40px 60px -20px rgba(0,0,0,.9); z-index:2}
.wall a:hover img{filter:none; transform:scale(1.05)}
.wall a:hover::after{opacity:1; transform:none}
.wall a.hide{display:none}
.filters{display:flex; gap:10px 28px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; flex-wrap:wrap}
.filters button{background:none; border:0; padding:6px 0; color:var(--dim); font:inherit; letter-spacing:inherit; cursor:pointer; border-bottom:1px solid transparent; transition:.3s}
.filters button.on, .filters button:hover{color:var(--text); border-color:var(--accent)}
.more{text-align:center; margin-top:60px}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:95; background:rgba(10,10,12,.96); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; touch-action:pan-y}
.lb.open{opacity:1; visibility:visible}
.lb figure{margin:0; display:grid; place-items:center; max-width:92vw; max-height:86vh}
.lb img{max-width:92vw; max-height:84vh; width:auto; height:auto; box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.96); opacity:0; transition:transform .5s var(--ease), opacity .4s}
.lb.open img.ready{transform:none; opacity:1}
.lb .lb-btn{position:absolute; background:none; border:0; color:var(--text); cursor:pointer; width:56px; height:56px; display:grid; place-items:center; opacity:.75; transition:opacity .3s, transform .3s}
.lb .lb-btn:hover{opacity:1}
.lb .lb-btn .ico{width:28px; height:28px; stroke-width:1.2}
.lb .lb-close{top:16px; right:16px}
.lb .lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb .lb-next{right:12px; top:50%; transform:translateY(-50%)}
.lb .lb-prev:hover{transform:translate(-4px,-50%)}
.lb .lb-next:hover{transform:translate(4px,-50%)}
.lb .lc{position:absolute; bottom:22px; left:80px; right:80px; text-align:center; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:center; gap:18px}
.lb .lc b{color:var(--text); font-weight:500}
.lb .lb-spin{position:absolute; width:34px; height:34px; border:1px solid var(--line2); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; opacity:0; transition:opacity .3s}
.lb.loading .lb-spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- PRICING ---------- */
.pricing{background:var(--bg2); border-block:1px solid var(--line)}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.price-grid.n3{grid-template-columns:repeat(3,1fr)}
.price-grid.n2{grid-template-columns:repeat(2,1fr)}
.price-grid.n1{grid-template-columns:minmax(0, 420px)}
.pc-wrap{perspective:1000px}
.pc{
  position:relative; height:100%; padding:40px 32px 34px; background:var(--surface); border:1px solid var(--line);
  transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .8s var(--ease), border-color .4s;
  display:flex; flex-direction:column;
}
.pc.tilting{transition:transform .12s linear, border-color .4s}
.pc:hover{border-color:var(--line2)}
.pc::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.07), transparent 50%); opacity:0; transition:opacity .4s}
.pc.tilting::after{opacity:1}
.pc .tag{position:absolute; top:-1px; right:24px; background:var(--accent); color:#fff; font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:6px 12px; font-weight:600; line-height:1.4}
.pc.feat{border-color:rgba(201,70,58,.55)}
.pc h3{font-size:32px; transform:translateZ(30px)}
.pc .dur{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.pc .amt{font-family:var(--serif); font-size:58px; font-weight:300; line-height:1; margin:34px 0 6px; transform:translateZ(50px)}
.pc .amt.long{font-size:40px}
.pc .amt small{font-size:20px; color:var(--muted); margin-left:4px}
.pc .amt .od{font-size:20px; color:var(--muted); margin-right:6px; font-style:italic}
.pc .extra{font-size:13px; color:var(--dim)}
.pc ul{list-style:none; padding:26px 0 0; margin:26px 0 30px; border-top:1px solid var(--line); display:grid; gap:12px; font-size:14px; color:#cfc9c2}
.pc li{display:flex; gap:12px; line-height:1.55}
.pc li::before{content:""; flex:none; width:12px; height:1px; background:var(--accent); margin-top:11px}
.pc .btn{margin-top:auto; justify-content:center; padding:14px 18px}
.price-wide{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.price-wide.n1{grid-template-columns:1fr}
.pw{padding:40px; border:1px solid var(--line); background:var(--surface); display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; transition:border-color .4s}
.pw:hover{border-color:var(--line2)}
.pw h3{font-size:clamp(28px, 2.5vw, 36px); font-weight:300; text-wrap:balance}
.pw p{color:var(--muted); font-size:14px; margin:12px 0 0; max-width:420px}
.pw .from{text-align:right; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.pw .from b{display:block; font-family:var(--serif); font-size:44px; font-weight:300; color:var(--text); letter-spacing:0; line-height:1.1; text-transform:none}
.pk{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:13px; color:#cfc9c2}
.pk span::before{content:"— "; color:var(--accent)}
.price-foot{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:44px; color:var(--muted); font-size:14px}

/* ---------- PROCESS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.step{padding:44px 40px 10px 0}
.step + .step{padding-left:40px; border-left:1px solid var(--line)}
.step .num{font-family:var(--serif); font-size:15px; color:var(--accent); letter-spacing:.1em}
.step h3{font-size:34px; font-weight:300; margin:18px 0 14px}
.step p{color:var(--muted); margin:0; font-size:15px}

/* ---------- FAQ ---------- */
.faq .grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:start}
.faq .side{position:sticky; top:130px}
.faq h2{font-size:clamp(44px, 5vw, 72px); font-weight:300; margin:22px 0 24px}
.faq .side p{color:var(--muted)}
.faq .side .btn{margin-top:14px}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; padding:28px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; font-family:var(--serif); font-size:26px; font-weight:400; line-height:1.25; transition:color .3s}
.acc summary:hover{color:#fff}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{flex:none; position:relative; width:16px; height:16px}
.acc summary .pm::before, .acc summary .pm::after{content:""; position:absolute; left:0; top:50%; width:16px; height:1px; background:var(--text); transition:transform .4s var(--ease)}
.acc summary .pm::after{transform:rotate(90deg)}
.acc details[open] summary .pm::after{transform:rotate(0)}
.acc .ans{padding:0 60px 30px 0; color:var(--muted)}
.acc .ans p{margin:0 0 14px}
.acc .ans p:last-child{margin-bottom:0}
.acc .ans strong{color:var(--text); font-weight:500}
.acc .ans a{color:var(--text); border-bottom:1px solid var(--accent)}
.acc .ans-in{overflow:hidden}

/* ---------- BLOG cards ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:56px 28px}
.post{display:flex; flex-direction:column}
.post .pimg{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:#0b0b0d; margin-bottom:24px}
.post .pimg img{width:100%; height:100%; object-fit:cover; filter:brightness(.88); transition:transform 1.2s var(--ease), filter .6s}
.post:hover .pimg img{transform:scale(1.05); filter:none}
.post .pmeta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); display:flex; gap:14px; align-items:center}
.post .pmeta i{width:4px; height:4px; border-radius:50%; background:var(--accent); display:block}
.post h3{font-size:28px; font-weight:400; line-height:1.15; margin:12px 0 12px}
.post h3 a{background:linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--ease)}
.post:hover h3 a{background-size:100% 1px}
.post p{margin:0; color:var(--muted); font-size:15px}
.post.feat{display:grid; grid-template-columns:1.25fr 1fr; gap:60px; align-items:center; grid-column:1 / -1; padding-bottom:56px; border-bottom:1px solid var(--line)}
.post.feat .pimg{aspect-ratio:16/10; margin:0}
.post.feat h3{font-size:clamp(34px, 3.6vw, 52px); font-weight:300; line-height:1.08; margin:18px 0 18px}
.post.feat p{font-size:16px; margin-bottom:30px}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags a{font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:7px 14px; border:1px solid var(--line2); color:var(--muted); transition:.3s}
.tags a:hover, .tags a.on{color:var(--text); border-color:var(--accent)}

.pager{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:80px; flex-wrap:wrap}
.pager a, .pager span{min-width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); font-size:13px; color:var(--muted); padding:0 14px; transition:.3s}
.pager a:hover{border-color:var(--text); color:var(--text)}
.pager .on{border-color:var(--accent); color:var(--text)}
.pager .ico{width:16px; height:16px}

/* ---------- CONTACT (home) ---------- */
.contact{position:relative; padding:0; overflow:hidden}
.contact .bgimg{position:absolute; inset:-10% 0; background-position:center 30%; background-size:cover; transform:translateY(var(--par, 0px)) scale(1.1); filter:brightness(.32) saturate(.8)}
.contact::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,18,20,.95) 30%, rgba(18,18,20,.4))}
.contact .contact-in{position:relative; z-index:1; padding:150px 0; display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:end}
.contact h2{font-size:clamp(50px, 6.4vw, 100px); font-weight:300; margin:24px 0 30px}
.contact p{color:#bdb6ae; max-width:460px; margin:0 0 40px}
.cinfo{display:grid; border-top:1px solid var(--line2)}
.cinfo a, .cinfo div{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line2); transition:padding .4s var(--ease)}
.cinfo a:hover{padding-left:10px}
.cinfo span{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.cinfo b{font-family:var(--serif); font-size:24px; font-weight:400; text-align:right; line-height:1.3}

/* =====================================================================
   SUBPAGES
   ===================================================================== */
.subpage main{min-height:60vh}
.phero{position:relative; padding:calc(var(--nav-h) + 90px) 0 90px; overflow:hidden; border-bottom:1px solid var(--line)}
.phero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 55% 80% at 80% 30%, rgba(201,70,58,.09), transparent 60%), radial-gradient(ellipse 40% 60% at 10% 90%, rgba(255,255,255,.03), transparent 70%); pointer-events:none}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(46px, 6vw, 96px); font-weight:300; margin:26px 0 0; max-width:16ch}
.phero h1 em{color:#fff}
.phero .lead{max-width:560px; color:var(--muted); font-size:17px; margin:30px 0 0}
.phero .ph-meta{display:flex; gap:44px; margin-top:44px; flex-wrap:wrap; align-items:center}
.phero .ph-meta div{font-size:12px; color:var(--muted); letter-spacing:.06em}
.phero .ph-meta b{display:block; font-family:var(--serif); font-size:30px; font-weight:400; color:var(--text); letter-spacing:0; line-height:1.1}
.phero .ph-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:44px}
.phero.short{padding-bottom:70px}
.phero.short h1{max-width:22ch}
.crumbs{display:flex; flex-wrap:wrap; gap:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:34px}
.crumbs a{color:var(--muted); transition:color .3s}
.crumbs a:hover{color:var(--text)}
.crumbs span{color:var(--dim)}
.crumbs b{font-weight:500; color:var(--muted); max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* hero with framed photo */
.phero.split .ph-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center}
.phero.split h1{max-width:12ch}
.ph-frame{position:relative; perspective:1400px; --px:0; --py:0}
.ph-frame .fr{position:relative; aspect-ratio:4/5; transform-style:preserve-3d; transform:rotateY(calc(-6deg + var(--px)*6deg)) rotateX(calc(var(--py)*-4deg)); transition:transform .6s var(--ease); max-height:620px; margin-left:auto}
.ph-frame .fr img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; box-shadow:0 60px 80px -40px rgba(0,0,0,.8), 0 0 0 1px var(--line)}
.ph-frame .fr::before{content:""; position:absolute; inset:-18px; border:1px solid var(--line2); transform:translateZ(-60px); pointer-events:none}
.ph-frame .fr .cap{position:absolute; right:0; bottom:-40px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim)}

.page-sec{padding:110px 0}
.page-sec + .page-sec{padding-top:0}
.page-sec.alt{background:var(--bg2); border-block:1px solid var(--line)}
.page-sec.alt + .page-sec{padding-top:110px}
.sec-title{display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; margin-bottom:54px}
.sec-title h2{font-size:clamp(38px, 4.4vw, 64px); font-weight:300; margin-top:20px}
.sec-title p{color:var(--muted); max-width:420px; margin:0}

/* ---------- prose (obsah z redakčního systému) ---------- */
.prose{color:var(--body); font-size:17px; line-height:1.85}
.prose > :first-child{margin-top:0!important}
.prose p{margin:0 0 1.25em}
.prose p:empty, .prose p:has(> br:only-child){display:none}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5{color:var(--text); font-weight:400}
.prose h1{font-size:clamp(34px, 3.6vw, 48px); font-weight:300; line-height:1.1; margin:1.6em 0 .6em}
.prose h2{font-size:clamp(30px, 3vw, 40px); font-weight:300; line-height:1.12; margin:1.7em 0 .6em}
.prose h3{font-size:clamp(24px, 2.2vw, 30px); line-height:1.2; margin:1.6em 0 .5em}
.prose h4, .prose h5{font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:2em 0 .8em}
.prose h1 > br:first-child, .prose h2 > br:first-child, .prose h3 > br:first-child, .prose p > br:first-child{display:none}
.prose h1 b, .prose h2 b, .prose h3 b, .prose h1 strong, .prose h2 strong, .prose h3 strong{font-weight:inherit}
.prose strong, .prose b{color:var(--text); font-weight:600}
.prose em{color:var(--text)}
.prose a{color:var(--text); background:linear-gradient(var(--accent), var(--accent)) 0 100%/100% 1px no-repeat; padding-bottom:2px; transition:color .3s, background-size .4s var(--ease)}
.prose a:hover{color:#fff; background-size:100% 2px}
.prose ul, .prose ol{margin:0 0 1.4em; padding-left:0}
.prose ul{list-style:none}
.prose ul li{position:relative; padding-left:28px; margin:.45em 0}
.prose ul li::before{content:""; position:absolute; left:0; top:.9em; width:14px; height:1px; background:var(--accent)}
.prose ul li p{margin:0}
.prose ul ul, .prose ol ol{margin:.4em 0 .6em}
.prose ol{padding-left:1.4em}
.prose ol li{margin:.45em 0; padding-left:6px}
.prose ol li::marker{color:var(--accent); font-family:var(--serif)}
.prose hr{border:0; height:1px; background:var(--line); margin:2.6em 0}
.prose blockquote, .prose .vyrazny4{margin:2em 0; padding-left:28px; border-left:1px solid var(--accent); font-family:var(--serif); font-size:clamp(24px, 2.4vw, 30px); font-style:italic; line-height:1.35; color:var(--text); font-weight:300}
.prose img{height:auto; margin:2em 0}
.prose img.img_vpravo{float:right; max-width:45%; margin:.4em 0 1.4em 2em}
.prose img.img_vlevo{float:left; max-width:45%; margin:.4em 2em 1.4em 0}
.prose img.img_100{width:100%}
.prose table{width:100%; border-collapse:collapse; margin:2em 0; font-size:15px; display:block; overflow-x:auto}
.prose td, .prose th{border-bottom:1px solid var(--line); padding:14px 16px 14px 0; text-align:left; vertical-align:top; width:auto!important}
.prose td p{margin:0}
.prose tr:first-child td{color:var(--text); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.prose iframe, .prose video{display:block; max-width:100%; margin:2em 0; border:0; background:#0b0b0d}
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"]{width:100%; height:auto; aspect-ratio:16/9}
.prose video{width:auto!important; height:auto!important; max-height:70vh}
.prose p:has(> video){display:flex; flex-wrap:wrap; gap:16px}
.prose p > video{margin:0; max-width:calc(50% - 8px)}
.prose .velky, .prose p.velky{font-size:1.2em; color:var(--text)}
.prose .vyrazny{color:var(--text)}
.prose .vyrazny2, .prose .vyrazny3{font-family:var(--serif); font-size:clamp(24px, 2.4vw, 32px); line-height:1.3; color:var(--text); font-weight:300; margin:1.6em 0}
.prose .vyrazny3{color:var(--accent-2)}
.prose .maly, .prose .maly2, .prose .maly3{font-size:.85em; color:var(--muted)}
.prose .center, .prose [style*="text-align: center"]{text-align:center}
.prose [style*="color: #ffffff"], .prose [style*="color:#ffffff"]{color:inherit!important}
.prose .a_cta, .prose .a_cta2, .prose .tlacitko_cerne, .prose .tlacitko_cervene, .prose .tlacitko_zelene, .prose .tlacitko_modre{display:inline-flex; align-items:center; gap:12px; padding:15px 28px; margin:.4em .4em .4em 0; border:1px solid var(--line2); background:none; font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--text); transition:.4s var(--ease)}
.prose .a_cta, .prose .tlacitko_cervene{background:var(--accent); border-color:var(--accent); color:#fff}
.prose .a_cta:hover, .prose .tlacitko_cervene:hover{background:var(--accent-2); border-color:var(--accent-2)}
.prose .a_cta2:hover, .prose .tlacitko_cerne:hover, .prose .tlacitko_zelene:hover, .prose .tlacitko_modre:hover{background:var(--text); color:var(--bg); border-color:var(--text)}
.prose .reenio-iframe{background:var(--surface); border:1px solid var(--line); padding:clamp(6px, 1.4vw, 18px); margin:1em 0; min-height:400px}
.prose::after{content:""; display:table; clear:both}
.prose.lead-first > p:first-of-type{font-size:1.15em; color:var(--text)}

/* content + sticky aside */
.content-grid{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:90px; align-items:start}
.content-grid .prose{max-width:780px}
.aside{position:sticky; top:120px; display:grid; gap:18px}
.acard{background:var(--surface); border:1px solid var(--line); padding:34px 30px}
.acard .label{margin-bottom:18px}
.acard h3{font-size:30px; font-weight:300; line-height:1.15}
.acard .price{font-family:var(--serif); font-size:52px; font-weight:300; line-height:1; margin:18px 0 6px}
.acard .price small{font-size:18px; color:var(--muted); margin-left:4px}
.acard .price .od{font-size:20px; color:var(--muted); font-style:italic; margin-right:6px}
.acard p{color:var(--muted); font-size:14px; margin:12px 0 22px}
.acard .btn{width:100%; margin-top:8px}
.acard .alist{display:grid; border-top:1px solid var(--line); margin-top:8px}
.acard .alist a{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; transition:padding .4s var(--ease), color .3s}
.acard .alist a:hover{padding-left:8px; color:#fff}
.acard .alist .ico{color:var(--accent-2)}

/* masonry gallery */
.masonry{columns:3 320px; column-gap:14px}
.m-item{display:block; position:relative; margin:0 0 14px; break-inside:avoid; overflow:hidden; background:#0b0b0d; cursor:zoom-in}
.m-item img{width:100%; height:auto; filter:brightness(.86); transition:filter .6s, transform 1.2s var(--ease)}
.m-item:hover img{filter:none; transform:scale(1.04)}
.m-item.is-more{display:none}
.m-video video{display:block; width:100%; height:auto; filter:brightness(.86); transition:filter .6s}
.m-video:hover video{filter:none}
.m-video .play{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:rgba(18,18,20,.35); backdrop-filter:blur(4px); transition:transform .4s var(--ease), background .4s}
.m-video .play::after{content:""; position:absolute; left:26px; top:21px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent}
.m-video:hover .play{transform:scale(1.08); background:var(--accent); border-color:var(--accent)}
.lb video{max-width:92vw; max-height:84vh; display:none; background:#000}
.lb.is-video video{display:block}
.lb.is-video img{display:none}
.masonry.show-all .m-item.is-more{display:block}
.m-item.reveal-in{animation:fadeUp .9s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(30px)}}

/* category cards (galerie) */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cat-wrap{perspective:1200px}
.cat{position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:#0b0b0d; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .8s var(--ease)}
.cat.tilting{transition:transform .15s linear}
.cat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(.92); transition:transform 1.4s var(--ease), filter .6s}
.cat:hover img{transform:scale(1.06); filter:brightness(.82)}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(12,12,14,.88)); pointer-events:none}
.cat .ci{position:absolute; left:0; right:0; bottom:0; padding:30px; z-index:2; display:grid; gap:8px}
.cat .n{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.66)}
.cat h3{font-size:clamp(28px, 2.6vw, 38px); font-weight:300; line-height:1.08; color:#fff}
.cat .cmeta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.cat .cmeta b{font-family:var(--serif); font-size:20px; letter-spacing:0; text-transform:none; color:#fff; font-weight:400}
.cat .go{width:40px; height:40px; border:1px solid rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; transition:.4s var(--ease); flex:none}
.cat .go .ico{width:16px; height:16px}
.cat:hover .go{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg)}

/* related strip */
.rel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.rel-grid .cat{aspect-ratio:4/5}
.rel-grid .cat h3{font-size:clamp(22px, 2vw, 28px)}
.rel-grid .cat .ci{padding:22px}

/* CTA band */
.cta-band{position:relative; overflow:hidden; border-top:1px solid var(--line)}
.cta-band .bgimg{position:absolute; inset:-10% 0; background-size:cover; background-position:center 35%; filter:brightness(.28) saturate(.75); transform:translateY(var(--par, 0px)) scale(1.08)}
.cta-band::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,18,20,.94) 35%, rgba(18,18,20,.45))}
.cta-band .wrap{position:relative; z-index:1; padding:120px 0; display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end}
.cta-band h2{font-size:clamp(44px, 5.4vw, 84px); font-weight:300; margin:22px 0 24px}
.cta-band p{color:#bdb6ae; max-width:460px; margin:0 0 34px}
.cta-band .ctas{display:flex; gap:14px; flex-wrap:wrap}

/* article */
.art-hero{padding-bottom:0; border-bottom:0}
.art-hero h1{max-width:22ch; font-size:clamp(40px, 5vw, 76px); line-height:1.05}
.art-meta{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:34px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.art-meta i{width:4px; height:4px; border-radius:50%; background:var(--accent); display:block}
.art-cover{margin-top:70px; position:relative; overflow:hidden; aspect-ratio:16/8; background:#0b0b0d}
.art-cover img{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; transform:translateY(var(--par, 0px))}
.art-body{padding:90px 0 40px}
.art-foot{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:60px; padding-top:30px}
.share{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.share a, .share button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; background:none; color:var(--text); cursor:pointer; transition:.4s var(--ease)}
.share a:hover, .share button:hover{background:var(--text); color:var(--bg)}
.share .ico{width:16px; height:16px}
.share .copied{font-size:11px; color:var(--accent-2); opacity:0; transition:opacity .3s}
.share .copied.on{opacity:1}

/* contact page */
.kontakt-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:start}
.kinfo h2{font-size:clamp(36px, 3.6vw, 52px); font-weight:300; margin:20px 0 22px}
.kinfo > p{color:var(--muted); margin:0 0 36px; max-width:440px}
.kinfo .cinfo b{font-size:22px}
.kinfo .soc{justify-content:flex-start; margin:36px 0 0}
.form{display:grid; grid-template-columns:1fr 1fr; gap:22px 22px; background:var(--surface); border:1px solid var(--line); padding:clamp(28px, 4vw, 52px)}
.form .full{grid-column:1 / -1}
.field{position:relative; display:block}
.field input, .field textarea, .field select{width:100%; background:transparent; border:0; border-bottom:1px solid var(--line2); color:var(--text); font:inherit; font-size:16px; padding:26px 0 10px; border-radius:0; outline:none; transition:border-color .3s; resize:vertical}
.field textarea{min-height:140px}
.field label{position:absolute; left:0; top:24px; color:var(--muted); font-size:15px; pointer-events:none; transition:.3s var(--ease); transform-origin:left}
.field input:focus, .field textarea:focus{border-color:var(--accent)}
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{top:2px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.form .note{font-size:13px; color:var(--dim); margin:0}
.form .note a{color:var(--muted); border-bottom:1px solid var(--line2)}
.form .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.form-msg{grid-column:1 / -1; padding:16px 20px; font-size:14px; display:none; border:1px solid}
.form-msg.ok{display:block; border-color:rgba(120,190,140,.45); background:rgba(120,190,140,.08); color:#cfe9d5}
.form-msg.err{display:block; border-color:rgba(224,89,76,.5); background:rgba(224,89,76,.08); color:#f3cbc6}
.form .btn{justify-self:start}

/* thank-you / 404 */
.center-page{min-height:88vh; display:grid; place-items:center; text-align:center; padding:calc(var(--nav-h) + 40px) 0 80px; position:relative; overflow:hidden}
.center-page::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 50% 40%, rgba(201,70,58,.10), transparent 65%)}
.center-page .wrap{position:relative}
.center-page .big{font-family:var(--serif); font-weight:300; font-size:clamp(120px, 22vw, 260px); line-height:.9; color:transparent; -webkit-text-stroke:1px var(--line2); letter-spacing:-.04em}
.center-page h1{font-size:clamp(40px, 5vw, 72px); font-weight:300; margin:20px 0 22px}
.center-page p{color:var(--muted); max-width:520px; margin:0 auto 40px}
.center-page .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.center-page .label{justify-content:center}
.center-page .label::after{content:""; width:34px; height:1px; background:var(--accent)}
.okmark{width:84px; height:84px; border-radius:50%; border:1px solid var(--accent); display:grid; place-items:center; margin:0 auto 30px; color:var(--accent-2)}
.okmark .ico{width:34px; height:34px; stroke-width:1.3}

/* children cards on generic pages (rozcestník) */
.kids{margin-top:80px}

/* ---------- FOOTER ---------- */
footer.site{padding:70px 0 50px; text-align:center; border-top:1px solid var(--line)}
footer.site .flogo{width:64px; margin:0 auto; opacity:.9}
.fnav{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 34px; list-style:none; margin:34px 0 0; padding:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase}
.fnav a{color:var(--muted); transition:color .3s}
.fnav a:hover{color:var(--text)}
.soc{display:flex; justify-content:center; gap:14px; margin:30px 0 30px}
.soc a{width:48px; height:48px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; transition:.4s var(--ease)}
.soc a:hover{background:var(--text); color:var(--bg); transform:translateY(-3px)}
.soc svg{width:18px; height:18px}
footer.site small{color:var(--dim); font-size:12px; line-height:1.8; display:block}
footer.site small a{border-bottom:1px solid var(--line2)}
footer.site small a:hover{color:var(--muted)}

/* ---------- popup (vyskakovací okno) ---------- */
.modal{position:fixed; inset:0; z-index:96; display:grid; place-items:center; padding:24px; background:rgba(10,10,12,.82); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s}
.modal.open{opacity:1; visibility:visible}
.modal .modal-in{position:relative; width:min(620px, 100%); max-height:86vh; overflow:auto; background:var(--surface); border:1px solid var(--line2); padding:clamp(30px, 5vw, 54px); transform:translateY(24px); transition:transform .6s var(--ease)}
.modal.open .modal-in{transform:none}
.modal .modal-x{position:absolute; top:10px; right:10px; width:44px; height:44px; display:grid; place-items:center; background:none; border:0; color:var(--text); cursor:pointer; opacity:.7}
.modal .modal-x:hover{opacity:1}
.modal .prose{font-size:16px}
.modal .prose img{margin:0 0 1.2em}

/* ---------- cookie bar ---------- */
.cookiebar{position:fixed; left:20px; bottom:20px; z-index:97; width:min(440px, calc(100% - 40px)); background:rgba(29,29,33,.97); border:1px solid var(--line2); padding:26px 26px 22px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); backdrop-filter:blur(10px); transform:translateY(30px); opacity:0; animation:cbIn .8s var(--ease) .6s forwards}
@keyframes cbIn{to{transform:none; opacity:1}}
.cookiebar.hide{animation:none; transform:translateY(30px); opacity:0; transition:.5s var(--ease); pointer-events:none}
.cookiebar h3{font-size:24px; font-weight:400; margin:0 0 10px}
.cookiebar p{font-size:13px; line-height:1.65; color:var(--muted); margin:0 0 20px}
.cookiebar p a{color:var(--text); border-bottom:1px solid var(--accent)}
.cookiebar .cb-btns{display:flex; gap:10px; flex-wrap:wrap}
.cookiebar .btn{padding:12px 18px; font-size:11px; flex:1 1 auto}
.cookie-form{margin-top:40px; padding:36px; background:var(--surface); border:1px solid var(--line)}
.cookie-form h2{margin-top:0!important}
.cookie-form select{background:var(--bg); color:var(--text); border:1px solid var(--line2)!important; padding:12px 14px; font:inherit; font-size:15px; min-width:220px}
.cookie-form input[type=submit]{width:auto!important; cursor:pointer; padding:16px 30px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; font-family:var(--sans); transition:background .3s}
.cookie-form input[type=submit]:hover{background:var(--accent-2)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--nav-h:84px}
  .nav ul{display:none}
  .burger{display:block; grid-column:3}
  .logo{grid-column:2}
  .logo img{width:62px}
  .price-grid, .price-grid.n3{grid-template-columns:repeat(2,1fr)}
  .price-wide{grid-template-columns:1fr}
  .about .grid{gap:70px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .post.feat{grid-template-columns:1fr; gap:34px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr; gap:60px}
  .aside{position:static; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
  .kontakt-grid{gap:60px}
}
@media (max-width:860px){
  section{padding:90px 0}
  .hero{padding-top:120px; min-height:auto}
  .hero .grid, .about .grid, .faq .grid, .contact .contact-in, .cta-band .wrap, .phero.split .ph-grid, .kontakt-grid{grid-template-columns:1fr}
  .hero .meta{gap:28px; margin-top:44px}
  .stage{height:auto; aspect-ratio:4/4.4; margin-top:20px}
  .frame{width:78%}
  #cam3d{width:94%; height:68%; left:-12%; bottom:-10%}
  .about .grid{gap:60px}
  .portrait{max-width:420px}
  .portrait .sig{right:-10px}
  .svc{grid-template-columns:1fr auto; gap:16px}
  .svc .n, .svc .go{display:none}
  .svc .thumb{display:block; grid-column:1 / -1; width:100%; aspect-ratio:16/9; object-fit:cover; filter:brightness(.85)}
  .preview{display:none}
  .wall{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px}
  .steps{grid-template-columns:1fr}
  .step, .step + .step{padding:34px 0; border-left:0; border-bottom:1px solid var(--line)}
  .faq .side{position:static}
  .faq .grid{gap:40px}
  .acc .ans{padding-right:0}
  .acc summary{font-size:23px}
  .contact .contact-in{padding:100px 0; gap:40px}
  .cta-band .wrap{padding:90px 0; gap:40px}
  .pw{grid-template-columns:1fr; padding:30px}
  .pw .from{text-align:left}
  .phero{padding:calc(var(--nav-h) + 50px) 0 70px}
  .phero.split .ph-grid{gap:60px}
  .ph-frame{max-width:460px}
  .ph-frame .fr{margin:0 18px}
  .page-sec{padding:80px 0}
  .page-sec.alt + .page-sec{padding-top:80px}
  .promo-item{grid-template-columns:auto 1fr; gap:20px}
  .promo-item .go{display:none}
  .promo-item .pimg{width:92px}
  .art-cover{margin-top:50px; aspect-ratio:4/3}
  .art-body{padding:60px 0 20px}
  .form{grid-template-columns:1fr}
  .prose img.img_vpravo, .prose img.img_vlevo{float:none; max-width:100%; margin:1.4em 0}
}
@media (max-width:560px){
  .wrap, .wrap.narrow, .hero .grid{width:calc(100% - 32px)}
  .price-grid, .price-grid.n3, .price-grid.n2{grid-template-columns:1fr}
  .hero .meta b{font-size:24px}
  .hero .meta{gap:22px}
  .filters{gap:8px 18px}
  .cinfo b{font-size:19px}
  .blog-grid{grid-template-columns:1fr; gap:48px}
  .cat-grid{grid-template-columns:1fr}
  .cat{aspect-ratio:4/5}
  .rel-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .rel-grid .cat .ci{padding:16px}
  .rel-grid .cat .cmeta{display:none}
  .masonry{columns:2; column-gap:8px}
  .m-item{margin-bottom:8px}
  .prose{font-size:16px}
  .prose p > video{max-width:100%}
  .sec-head{margin-bottom:50px}
  .pager a, .pager span{min-width:40px; height:40px}
  .lb .lb-prev, .lb .lb-next{top:auto; bottom:8px; transform:none}
  .lb .lb-prev:hover, .lb .lb-next:hover{transform:none}
  .lb .lc{bottom:24px; left:64px; right:64px; font-size:10px; letter-spacing:.16em}
  .cookiebar{left:12px; bottom:12px; width:calc(100% - 24px); padding:22px 20px 18px}
  .art-foot{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}