/* OnlyYes — web. Art direction podle NEON (Mobbin): celoplošná fotka, obří úzké verzálky,
   plovoucí kompaktní menu, tenké linky místo boxů, obří logo s fotkou v patičce.
   Pozvánka samotná má vlastní romantický styl (invite.css). */
:root{
  --paper:#fffafb; --blush:#ffe3ec; --card:#ffffff; --ink:#16070e; --soft:#6f5560; --line:#ecd9e0;
  --accent:#ff2e6a; --accent-deep:#e0164f; --accent-soft:#ffc2d3; --wine:#1f0812; --wine-2:#3a0d21;
  --display:"Anton", "Impact", "Haettenschweiler", "Arial Narrow", sans-serif;
  --serif:"Bodoni Moda", "Didot", Georgia, serif;
  --body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:18px; --max:1240px;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; line-height:1.1; margin:0; text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal; color:var(--accent)}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.lead{font-size:clamp(17px,1.6vw,19px); color:var(--soft); max-width:50ch; margin:0}
.btn{font:inherit; font-weight:800; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; border:0; cursor:pointer; border-radius:999px; padding:15px 24px;
  background:var(--accent); color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:10px; justify-content:center; transition:background .2s, transform .2s}
.btn:hover{background:var(--accent-deep)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px; height:16px; flex:none}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,46,106,.08)}
.btn.small{padding:10px 16px; font-size:12px}
.btn[disabled]{opacity:.55; cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent-soft); outline-offset:3px}

/* plovoucí menu (NEON) */
.nav{position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); left:50%; transform:translateX(-50%); z-index:30; width:min(560px, calc(100% - 24px));
  background:var(--wine); color:#fff; border-radius:16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.55); overflow:hidden}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; height:52px; padding-inline:10px 8px; max-width:none}
.nav-sub{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
.nav-sub:hover{background:var(--accent-deep)}
.nav-sub svg{width:15px; height:15px; flex:none}
.logo{display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:22px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; line-height:1}
.logo em{font-style:normal; color:var(--accent)}
.logo svg{width:26px; height:26px}
.nav-links{display:flex; align-items:center; gap:14px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.nav-links a{text-decoration:none; color:#e9c9d5}
.nav-links a:hover{color:#fff}
.nav-links a.btn,.nav-links a.btn:hover{color:#fff}
.lang{display:flex; gap:2px; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; font-size:11px; font-weight:800}
.lang a{padding:4px 9px; border-radius:999px; text-decoration:none; color:#d9b3c2}
.lang a[aria-current="true"]{background:#fff; color:var(--ink)}
.page-top{height:96px}
@media (max-width:640px){ .nav-links .hide-m{display:none} }

/* hero — celoplošná fotka, obří titulek vlevo dole */
.hero{position:relative; min-height:max(640px, 100svh); color:#fff; display:flex; align-items:flex-end; overflow:hidden; background:var(--wine)}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 55%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,7,14,.82) 0%, rgba(22,7,14,.45) 48%, rgba(22,7,14,.05) 75%), linear-gradient(0deg, rgba(22,7,14,.7) 0%, transparent 45%)}
.hero-grid{position:relative; z-index:2; width:100%; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); gap:40px; align-items:end; padding-block:150px 56px}
.hero .eyebrow{color:#ff9cb8}
.hero h1{font-size:clamp(54px,7.6vw,124px); margin-block:16px 22px; color:#fff}
.hero h1 em{color:var(--accent)}
.hero .lead{color:#f1d5df}
.hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px; position:relative}
.hero .btn.ghost{color:#fff}
.hero-meta{display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:22px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#e3bfcc}
.hero-meta span{display:inline-flex; align-items:center; gap:6px}
.hero-meta svg{width:14px; height:14px; color:var(--accent)}
.hero-phone{position:relative; justify-self:end; width:min(270px,100%); aspect-ratio:9/19; border-radius:38px; padding:8px; background:#0d0408; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); overflow:hidden}
.hero-phone iframe{position:absolute; top:8px; left:8px; width:375px; height:776px; border:0; border-radius:30px; background:#fbe9ef; display:block; transform-origin:0 0}
.runaway{touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; z-index:6; white-space:nowrap; transition:left .3s cubic-bezier(.3,1.4,.5,1), top .3s cubic-bezier(.3,1.4,.5,1)}
.runaway.free{position:absolute}
.hero .runaway.free{background:rgba(22,7,14,.6); backdrop-filter:blur(6px)}
.scroll-hint{position:absolute; z-index:2; right:20px; bottom:22px; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#e3bfcc}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero::after{background:linear-gradient(0deg, rgba(22,7,14,.92) 0%, rgba(22,7,14,.6) 55%, rgba(22,7,14,.25) 100%)}
  .hero-grid{grid-template-columns:1fr; padding-block:150px 40px}
  .hero-phone{justify-self:center; width:min(240px,64%)}
  .scroll-hint{display:none}
}

/* sekce */
section.block{padding-block:110px}
.head{display:flex; flex-direction:column; gap:16px; margin-bottom:56px}
.head h2{font-size:clamp(48px,7vw,104px)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.steps li{border-top:2px solid var(--ink); padding-top:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.steps .idx{font-family:var(--display); font-size:64px; line-height:.9; color:var(--accent)}
.steps h3{font-size:clamp(28px,2.6vw,36px)}
.steps p{margin:0; color:var(--soft); max-width:34ch}
@media (max-width:820px){ .steps{grid-template-columns:1fr; gap:36px} }

/* rozdělená sekce: fotka | tmavý blok s obří otázkou (NEON) */
.split-band{display:grid; grid-template-columns:1fr 1fr; min-height:640px; background:var(--wine); color:#fff}
.split-band .ph{position:relative; overflow:hidden}
.split-band .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%}
.split-play{position:relative; padding:64px 48px 48px; display:flex; flex-direction:column; justify-content:space-between; gap:28px; overflow:hidden}
.split-play h2{font-size:clamp(56px,7.4vw,118px); color:#fff}
.split-play h2 em{color:var(--accent)}
.split-play .lead{color:#e3bfcc; max-width:42ch}
.split-btns{display:flex; align-items:center; gap:16px; position:relative; min-height:56px}
.split-play .btn.ghost{color:#fff}
.split-play .runaway.free{background:var(--wine-2)}
.split-play .arrow{position:absolute; right:40px; bottom:36px; width:72px; height:72px; color:#fff; opacity:.9}
.split-play small{color:#c99aac; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800}
.ticks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start; color:#f1d5df; font-size:15px}
.ticks svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px}
@media (max-width:860px){ .split-band{grid-template-columns:1fr} .split-band .ph{min-height:320px} .split-play{padding:44px 20px 40px} .split-play .arrow{display:none} }

.minis{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.mini{margin:0; display:flex; flex-direction:column; gap:14px; min-width:0}
.mini-phone{position:relative; width:100%; aspect-ratio:9/16.5; border-radius:26px; padding:7px; background:var(--ink); overflow:hidden}
.mini-phone iframe{position:absolute; top:7px; left:7px; width:375px; height:688px; border:0; border-radius:20px; transform-origin:0 0; pointer-events:none; background:#fbe9ef}
.mini figcaption{display:flex; flex-direction:column; gap:4px; border-top:2px solid var(--ink); padding-top:12px}
.mini figcaption b{font-family:var(--display); font-weight:400; font-size:26px; text-transform:uppercase; line-height:1}
.mini figcaption span{color:var(--soft); font-size:14.5px}
@media (max-width:900px){ .minis{grid-template-columns:1fr 1fr; gap:24px 14px} .mini figcaption b{font-size:22px} }

/* Valentýn — pás přes celou šířku */
.vday{background:var(--accent); color:#fff; padding-block:56px}
.vday .wrap{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap}
.vday .date{font-family:var(--display); font-size:clamp(110px,18vw,260px); line-height:.8}
.vday h2{font-size:clamp(40px,5vw,72px); color:#fff; max-width:12ch}
.vday p{margin:14px 0 22px; color:#ffe3ec; max-width:40ch}
.vday .btn{background:var(--wine); }
.vday .btn:hover{background:#000}

/* FAQ (NEON) */
.faq-title{font-size:clamp(80px,14vw,200px); text-align:center; margin-bottom:56px}
.faq-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:56px; align-items:start}
.faq-side{display:flex; flex-direction:column; gap:14px}
.faq-side h3{font-size:44px}
.faq-side p{margin:0; color:var(--soft); max-width:30ch}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr; gap:24px} }
.faq{display:flex; flex-direction:column; border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line); padding:20px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; line-height:1; font-weight:500; flex:none}
.faq details[open] summary::after{content:"×"}
.faq p{margin:10px 0 0; color:var(--soft); max-width:60ch}

/* patička: odkazy v rámečcích + obří logo s fotkou místo O (NEON) */
.foot{padding-block:24px 18px; border-top:1px solid var(--line)}
.foot-links{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.foot-box{border:1px solid var(--line); border-radius:14px; padding:16px 18px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; gap:18px}
.foot-box b{font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.foot-box nav{display:flex; flex-direction:column; gap:4px; font-size:14px}
.foot-box a{text-decoration:none; color:var(--soft)}
.foot-box a:hover{color:var(--ink)}
.wordmark{display:flex; align-items:center; justify-content:center; gap:.02em; margin-top:28px; font-family:var(--display); font-size:clamp(84px,19vw,300px); line-height:.82; text-transform:uppercase; letter-spacing:-.01em; user-select:none}
.wordmark .o{display:inline-block; width:.62em; height:.78em; border-radius:.3em; overflow:hidden; position:relative; top:.01em}
.wordmark .o img{width:100%; height:100%; object-fit:cover}
.wordmark em{font-style:normal; color:var(--accent)}
.foot-legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--soft); margin-top:14px}
@media (max-width:760px){ .foot-links{grid-template-columns:1fr 1fr} .foot-box{min-height:120px} }

/* jednoduchá hlavička a patička pro podstránky (tvorba, výsledek, právní) */
.subnav{position:sticky; top:0; z-index:20; background:var(--wine); color:#fff}
.subnav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
footer.simple{border-top:1px solid var(--line); padding-block:28px; font-size:13px; color:var(--soft)}
footer.simple .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer.simple nav{display:flex; gap:18px}
footer.simple a{text-decoration:none}

.show-s{display:none}
@media (max-width:560px){ .hide-s{display:none} .show-s{display:inline} }

/* formulář /create */
.builder{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:40px; align-items:start; padding-block:36px 80px}
@media (max-width:980px){ .builder{grid-template-columns:1fr} }
.builder h1{font-size:clamp(34px,4vw,50px); margin-bottom:8px}
.fs{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-top:18px; display:flex; flex-direction:column; gap:16px; min-width:0}
.fs h2{font-size:22px; display:flex; align-items:baseline; gap:10px}
.fs h2 .n{font-family:var(--display); font-style:italic; color:var(--accent); font-size:22px}
.fs .hint{font-size:13px; color:var(--soft); margin:-8px 0 0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > span{font-size:12.5px; font-weight:800; letter-spacing:.02em}
.field small{font-size:12px; color:var(--soft)}
.field input,.field select,.field textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; width:100%; min-height:48px}
.field textarea{min-height:76px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.seg{align-self:flex-start; display:inline-flex; background:var(--paper); border:1.5px solid var(--line); border-radius:999px; padding:3px; gap:2px; flex-wrap:wrap}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:block; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800; color:var(--soft)}
.seg input:checked + span{background:var(--accent); color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--accent-soft)}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{font:inherit; font-size:14px; font-weight:700; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:8px 14px; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.pill[aria-pressed="true"]{border-color:var(--accent); background:var(--blush)}
.pill .x{color:var(--soft); font-weight:800}
.addrow{display:flex; gap:8px}
.addrow input{flex:1; min-width:0}
.themes{display:flex; gap:10px; flex-wrap:wrap}
.theme{position:relative; cursor:pointer}
.theme input{position:absolute; opacity:0}
.theme span{display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border:1.5px solid var(--line); border-radius:999px; font-size:13px; font-weight:800; background:var(--paper)}
.theme i{width:24px; height:24px; border-radius:50%; display:block}
.theme input:checked + span{border-color:var(--accent); background:var(--blush)}
.theme input:focus-visible + span{outline:3px solid var(--accent-soft)}
.submit-bar{margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.consent{font-size:13px; color:var(--soft); display:flex; gap:10px; align-items:flex-start}
.consent input{margin-top:4px; accent-color:var(--accent); width:18px; height:18px; flex:none}
.err{color:#b3123f; font-size:14px; font-weight:700; min-height:20px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.preview-col{position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; align-items:center}
.preview-col .phone{width:min(360px,100%)}
.stepper{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.stepper button{font:inherit; font-size:12px; font-weight:800; border:1.5px solid var(--line); background:var(--card); color:var(--soft); border-radius:999px; padding:6px 11px; cursor:pointer}
.stepper button[aria-current="true"]{border-color:var(--accent); color:var(--accent)}
@media (max-width:980px){ .preview-col{position:static} .preview-col .phone{width:min(300px,100%)} }

/* hotovo a výsledek */
.panel{max-width:640px; margin:40px auto 80px; background:var(--card); border:1px solid var(--line); border-radius:28px; padding:40px 32px; display:flex; flex-direction:column; gap:18px}
.panel h1{font-size:clamp(34px,5vw,48px)}
.linkbox{display:flex; gap:8px; background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:6px 6px 6px 14px; align-items:center}
.linkbox code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
.warn{background:#fff4d6; border:1px solid #f2dc9b; color:#6b4b00; border-radius:14px; padding:12px 14px; font-size:14px}
.status{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:999px; align-self:flex-start}
.status.wait{background:#f3eef0; color:var(--soft)}
.status.yes{background:#dff5e8; color:#11663a}
.status.no{background:#fde4e4; color:#9b1c1c}
.kv{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0}
.kv dt{color:var(--soft)}
.kv dd{margin:0; font-weight:700}
.legal{max-width:760px; margin:40px auto 80px}
.legal h1{font-size:44px; margin-bottom:20px}
.legal h2{font-size:24px; margin:30px 0 8px}
.legal p,.legal li{color:#4b2a3a}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .shy .fake.n{transition:none} }
.foot-box nav span{color:var(--soft); opacity:.7}

.pv-jump{display:none}
@media (max-width:980px){
  .pv-jump{display:inline-flex; position:fixed; z-index:25; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); align-items:center; gap:8px;
    background:var(--wine); color:#fff; text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:12px 16px; border-radius:999px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
}