/* ─────────────────────────────────────────────────────────────
   Landing v3 · Animované novoročenky · prémiová pro firmy
   Figma: LANDING v3 480:708 (11. 9. 2026). Světlý papír, jedna zelená,
   jedna tmavá „promítací“ sekce, skutečné scény a videa.
   ───────────────────────────────────────────────────────────── */
.lp3{
  --papir:#F7F4EF; --ink:#111111; --sed:#686D75; --zel:#1F5A42; --tmava:#14372C; --linka:#E6E3DD; --mint:#F3F8F5;
  --hrana:max(var(--okraj), calc((100% - var(--obal)) / 2 + var(--okraj)));
  color:var(--ink); background:#fff;
}
.lp3 h1, .lp3 h2, .lp3 h3{ font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.lp3 h2{ font-size:44px; line-height:52px; }
.lp3 p{ text-wrap:pretty; }
.lp3-sekce{ padding:112px 0; }
.lp3-papir{ background:var(--papir); }
.lp3-perex{ max-width:62ch; margin-top:14px; font-size:18px; line-height:28px; color:var(--sed); }
.lp3 .drobecky{ padding-top:18px; }

/* jemné vyjetí při posunu (jen když běží JS a pohyb není omezený) */
.lp3-js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.lp3-js [data-reveal].je-videt{ opacity:1; transform:none; }

/* ── hero: text vlevo, živá scéna vpravo ── */
.lp3-hero{ display:grid; grid-template-columns:minmax(0,540px) minmax(0,1fr); gap:56px; align-items:center; padding-left:var(--hrana); background:var(--papir); }
.lp3-hero__text{ padding:72px 0; }
.lp3-stitek{ font-size:15px; line-height:20px; font-weight:600; color:var(--zel); }
.lp3-hero h1{ margin:16px 0 18px; font-size:60px; line-height:64px; }
.lp3-hero__perex{ font-size:19px; line-height:30px; color:var(--sed); }
.lp3-akce{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:32px; }
.lp3-odkaz{ font-size:16px; line-height:22px; font-weight:700; color:var(--zel); text-underline-offset:4px; }
.lp3-odkaz:hover{ text-decoration:underline; }
.lp3-fakta{ display:flex; flex-wrap:wrap; gap:6px 0; margin:28px 0 0; padding:0; list-style:none; font-size:14px; line-height:20px; font-weight:600; color:var(--sed); }
.lp3-fakta li + li::before{ content:"·"; margin:0 14px; }
.lp3-scena-okno{ position:relative; overflow:hidden; aspect-ratio:4 / 3; background:#1B2A22; }
.lp3-scena{ position:absolute; left:-61.7%; top:-14.9%; width:166.7%; aspect-ratio:2752 / 1536; }
.lp3-scena > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* obrazovka monitoru ve fotce: 1485,518 → 2296,995 z 2752 × 1536 px */
.lp3-obrazovka{ position:absolute; left:53.96%; top:33.72%; width:29.47%; height:31.05%; overflow:hidden; container-type:inline-size; background:#F6F6F4; color:#191C1A; filter:brightness(.92); }
.lp3-obrazovka::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 70%); pointer-events:none; }
.lp3-obrazovka__lista{ display:flex; align-items:center; gap:1.4cqw; height:9.85%; padding:0 3cqw; background:#ECEDE9; font-size:2.1cqw; font-weight:700; color:#5A605C; }
.lp3-obrazovka__lista i{ width:1.7cqw; height:1.7cqw; border-radius:50%; background:#CDD0CA; }
.lp3-obrazovka__lista span{ margin-left:1.2cqw; }
.lp3-obrazovka__hlava{ padding:3cqw 4.9cqw 0; }
.lp3-obrazovka__hlava b{ display:block; font-size:3.1cqw; line-height:1.2; font-weight:800; }
.lp3-obrazovka__hlava span{ display:block; margin-top:.8cqw; font-size:2cqw; color:#6E7276; }
.lp3-obrazovka video, .lp3-obrazovka__video{ position:absolute; left:4.93%; top:28.93%; width:80.89%; height:66.25%; object-fit:cover; background:#0A1629; }

/* ── promítací sál ── */
.lp3-sal{ background:var(--tmava); color:#fff; }
.lp3-sal .lp3-perex{ color:rgba(255,255,255,.72); }
.lp3-sal__mrizka{ display:grid; grid-template-columns:minmax(0,880fr) minmax(0,400fr); gap:48px; align-items:start; margin-top:40px; }
.lp3-prehravac{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#050A12; }
.lp3-prehravac video{ display:block; width:100%; height:100%; object-fit:cover; }
.lp3-mala{ font-size:14px; line-height:20px; font-weight:600; color:rgba(255,255,255,.6); }
.lp3-sal__info h3{ margin:8px 0 12px; font-size:30px; line-height:38px; }
.lp3-sal__info > p:not(.lp3-mala){ font-size:17px; line-height:27px; color:rgba(255,255,255,.8); }
.lp3-sal__info dl{ margin:24px 0 0; }
.lp3-sal__info dl div{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.16); }
.lp3-sal__info dt{ font-size:14px; line-height:20px; font-weight:600; color:rgba(255,255,255,.6); }
.lp3-sal__info dd{ margin:0; font-size:15px; line-height:20px; font-weight:600; }
.lp3-pas{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:12px; margin:32px 0 0; padding:0; list-style:none; }
.lp3-pas button{ display:grid; gap:8px; width:100%; padding:0; border:0; background:none; color:rgba(255,255,255,.7); font:600 13px/18px 'Mulish', system-ui, sans-serif; text-align:left; cursor:pointer; }
.lp3-pas img{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; opacity:.7; outline:2px solid transparent; outline-offset:-2px; transition:opacity .25s ease, outline-color .25s ease; }
.lp3-pas button:hover img{ opacity:1; }
.lp3-pas button[aria-pressed="true"]{ color:#fff; font-weight:700; }
.lp3-pas button[aria-pressed="true"] img{ opacity:1; outline-color:#fff; }
.lp3-pas button:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* ── proč to funguje: střídavé řádky ── */
.lp3-radky{ display:grid; gap:88px; margin-top:64px; }
.lp3-radek{ display:grid; grid-template-columns:minmax(0,700fr) minmax(0,548fr); gap:80px; align-items:center; }
.lp3-radek--obracene{ grid-template-columns:minmax(0,548fr) minmax(0,700fr); }
.lp3-radek--obracene img{ order:2; }
.lp3-radek img{ display:block; width:100%; height:auto; aspect-ratio:700 / 440; object-fit:cover; }
.lp3-cislo{ font-size:16px; line-height:22px; font-weight:800; color:var(--zel); }
.lp3-radek h3{ margin:14px 0; font-size:32px; line-height:40px; }
.lp3-radek p{ font-size:18px; line-height:29px; color:var(--sed); }

/* ── ve schránce klienta ── */
.lp3-schranka-obal{ display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:72px; align-items:center; }
.lp3-pole-firma{ display:grid; gap:8px; margin-top:28px; }
.lp3-pole-firma span{ font-size:14px; line-height:20px; font-weight:700; }
.lp3-pole-firma input{ height:60px; padding:0 18px; border:2px solid var(--ink); background:#fff; font:700 18px/24px 'Mulish', system-ui, sans-serif; color:var(--ink); }
.lp3-pole-firma input:focus-visible{ outline:3px solid var(--zel); outline-offset:2px; }
.lp3-pozn{ margin-top:12px; font-size:14px; line-height:20px; color:var(--sed); }
.lp3-schranka{ margin:0; padding:0; list-style:none; background:#fff; border:1px solid var(--linka); }
.lp3-schranka__lista{ display:flex; align-items:baseline; gap:10px; padding:16px 24px; border-bottom:1px solid var(--linka); }
.lp3-schranka__lista b{ font-size:16px; line-height:22px; font-weight:800; }
.lp3-schranka__lista span{ font-size:14px; line-height:20px; color:var(--sed); }
.lp3-zprava{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 24px; border-bottom:1px solid var(--linka); color:rgba(17,17,17,.5); }
.lp3-zprava:last-child{ border-bottom:0; }
.lp3-zprava b{ display:block; font-size:15px; line-height:21px; font-weight:700; }
.lp3-zprava span{ display:block; font-size:15px; line-height:21px; }
.lp3-zprava time{ font-size:13px; line-height:18px; color:var(--sed); }
.lp3-zprava--nase{ grid-template-columns:minmax(0,1fr) auto auto; padding:14px 24px; background:var(--mint); box-shadow:inset 4px 0 0 var(--zel); color:var(--ink); }
.lp3-zprava--nase span{ font-weight:600; }
.lp3-zprava--nase video{ display:block; width:128px; height:62px; object-fit:cover; background:#0A1629; }
.lp3-zprava--nase.blikne{ animation:lp3-nova .7s ease; }
@keyframes lp3-nova{ from{ background:#D7EDE1; } to{ background:var(--mint); } }

/* ── postup ── */
.lp3-osa{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; margin:48px 0 0; padding:0; list-style:none; }
.lp3-osa li{ display:grid; align-content:start; gap:12px; }
.lp3-uzel{ display:flex; align-items:center; gap:12px; }
.lp3-uzel b{ display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--zel); color:#fff; font-size:15px; font-weight:800; }
.lp3-uzel::after{ content:""; flex:1; height:1px; background:var(--linka); }
.lp3-osa h3{ font-size:22px; line-height:30px; }
.lp3-osa p{ font-size:17px; line-height:27px; color:var(--sed); }
.lp3-potreba{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; margin:48px 0 0; padding:22px 28px; list-style:none; background:var(--papir); font-size:16px; line-height:22px; font-weight:600; }
.lp3-potreba li:first-child{ font-weight:800; }
.lp3-potreba li + li::before{ content:""; display:inline-block; width:10px; height:5px; margin-right:10px; border-left:2px solid var(--zel); border-bottom:2px solid var(--zel); transform:translateY(-3px) rotate(-45deg); }

/* ── časté dotazy: vše viditelné ── */
.lp3-dotazy{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 40px; margin-top:48px; }
.lp3-dotazy > div{ padding-top:20px; border-top:1px solid var(--linka); }
.lp3-dotazy h3{ font-size:19px; line-height:26px; }
.lp3-dotazy p{ margin-top:8px; font-size:16px; line-height:26px; color:var(--sed); }

/* ── poptávka ── */
.lp3-poptavka{ display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:72px; align-items:start; }
.lp3-formular{ display:grid; gap:18px; }
.lp3-formular > p{ margin-top:-4px; font-size:18px; line-height:28px; color:var(--sed); }
.lp3-radek-f{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lp3-pole{ display:grid; gap:6px; }
.lp3-pole > span{ font-size:14px; line-height:20px; font-weight:700; }
.lp3-pole input, .lp3-pole textarea{ width:100%; padding:14px 16px; border:1.5px solid #C9CCD1; background:#fff; color:var(--ink); font:400 16px/22px 'Mulish', system-ui, sans-serif; transition:border-color .2s ease; }
.lp3-pole input{ height:56px; }
.lp3-pole textarea{ min-height:120px; resize:vertical; }
.lp3-pole input:hover, .lp3-pole textarea:hover{ border-color:#9EA3AA; }
.lp3-pole input:focus-visible, .lp3-pole textarea:focus-visible{ outline:2px solid var(--zel); outline-offset:1px; border-color:var(--zel); }
.lp3-pole small{ font-size:13px; line-height:18px; color:#B3261E; }
.lp3-pole small:empty{ display:none; }
.lp3-pole.chyba input{ border-color:#B3261E; }
.lp3-formular .btn{ justify-self:start; }
.lp3-hotovo{ padding:14px 16px; background:var(--mint); border-left:4px solid var(--zel); font-size:15px; line-height:22px; }
.lp3-hotovo[hidden]{ display:none; }
.lp3-kontakt{ display:grid; gap:12px; padding:40px; background:var(--papir); }
.lp3-kontakt b{ font-size:22px; line-height:30px; font-weight:800; }
.lp3-kontakt p{ font-size:16px; line-height:25px; color:var(--sed); }
.lp3-kontakt .lp3-tel{ font-size:34px; line-height:42px; font-weight:800; color:var(--ink); text-decoration:none; }
.lp3-kontakt .lp3-mail{ font-size:17px; line-height:24px; font-weight:700; color:var(--zel); }

/* ── menší obrazovky ── */
@media (max-width:1100px){
  .lp3-hero{ grid-template-columns:minmax(0,1fr); gap:0; padding-left:0; }
  .lp3-hero__text{ padding:48px var(--okraj) 40px; }
  .lp3-sal__mrizka, .lp3-schranka-obal, .lp3-poptavka{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .lp3-pas{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .lp3-radek, .lp3-radek--obracene{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .lp3-radek--obracene img{ order:0; }
}
@media (max-width:820px){
  .lp3-sekce{ padding:72px 0; }
  .lp3 h2{ font-size:32px; line-height:40px; }
  .lp3-hero h1{ font-size:40px; line-height:46px; }
  .lp3-akce .btn{ flex:1 1 100%; }
  .lp3-pas{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:42%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .lp3-pas li{ scroll-snap-align:start; }
  .lp3-radky{ gap:56px; margin-top:40px; }
  .lp3-radek h3{ font-size:26px; line-height:34px; }
  .lp3-zprava, .lp3-zprava--nase{ padding-left:16px; padding-right:16px; }
  .lp3-zprava time{ display:none; }
  .lp3-zprava, .lp3-zprava--nase{ grid-template-columns:minmax(0,1fr) auto; }
  .lp3-zprava--nase video{ width:96px; height:46px; }
  .lp3-osa, .lp3-dotazy, .lp3-radek-f{ grid-template-columns:minmax(0,1fr); }
  .lp3-kontakt{ padding:28px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .lp3-js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .lp3-zprava--nase.blikne{ animation:none; }
}

/* opravy 11. 9.: nadpisy v tmavém sále bíle; atribut height u obrázku nesmí přebít poměr stran */
.lp3-sal h2, .lp3-sal h3, .lp3-sal dd{ color:#fff; }
.lp3-pas img, .lp3-radek img{ height:auto; }
.lp3-prehravac{ background-color:#050A12; background-position:center; background-size:cover; background-repeat:no-repeat; }

/* ── 11. 9.: pravdivá ukázka — seznam zpráv bez náhledů + otevřený e-mail s animací ── */
.lp3-schranka-obal{ grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:56px; }
.lp3-klient{ background:#fff; border:1px solid var(--linka); }
.lp3-klient__lista{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#F4F5F2; font-size:13px; font-weight:700; color:var(--sed); }
.lp3-klient__lista i{ width:9px; height:9px; border-radius:50%; background:#D5D8D2; }
.lp3-klient__lista span{ margin-left:6px; }
.lp3-klient__telo{ display:grid; grid-template-columns:300px minmax(0,1fr); }
.lp3-seznam{ margin:0; padding:0; list-style:none; border-right:1px solid var(--linka); }
.lp3-polozka{ display:grid; gap:2px; padding:12px 16px; border-bottom:1px solid var(--linka); color:rgba(17,17,17,.55); font-size:13.5px; line-height:19px; }
.lp3-polozka div{ display:flex; justify-content:space-between; gap:8px; }
.lp3-polozka b{ font-size:14px; line-height:20px; font-weight:600; color:rgba(17,17,17,.75); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp3-polozka time{ flex:none; font-size:12px; color:var(--sed); }
.lp3-polozka--nase{ background:var(--mint); box-shadow:inset 3px 0 0 var(--zel); color:var(--ink); font-weight:600; }
.lp3-polozka--nase b{ font-weight:800; color:var(--ink); }
.lp3-polozka--nase.blikne{ animation:lp3-nova .7s ease; }
.lp3-otevrena{ display:grid; align-content:start; gap:14px; padding:24px 28px; }
.lp3-otevrena h3{ font-size:22px; line-height:28px; }
.lp3-od{ display:flex; align-items:center; gap:10px; }
.lp3-od b{ display:block; font-size:14px; line-height:20px; }
.lp3-od small{ display:block; font-size:12.5px; line-height:18px; color:var(--sed); }
.lp3-inicialy{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--zel); color:#fff; font-size:12px; font-weight:800; }
.lp3-otevrena video{ display:block; width:100%; height:auto; aspect-ratio:1280 / 616; object-fit:cover; background:#0A1629; }
.lp3-otevrena p{ font-size:14px; line-height:21px; color:rgba(17,17,17,.8); }
@media (max-width:1100px){ .lp3-schranka-obal{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px){
  .lp3-klient__telo{ grid-template-columns:minmax(0,1fr); }
  .lp3-seznam{ border-right:0; border-bottom:1px solid var(--linka); }
  .lp3-polozka:nth-child(n+4){ display:none; }
  .lp3-otevrena{ padding:18px 16px; }
}

/* ── 11. 9.: vánoční atmosféra — větvička, světýlka, sníh, vločky v papíru ── */
.lp3{ overflow-x:clip; }
.lp3-hero, .lp3-papir{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3Cpath id='r' d='M0-20V20M-5-13 0-8 5-13M-5 13 0 8 5 13'/%3E%3Cg id='v'%3E%3Cuse href='%23r'/%3E%3Cuse href='%23r' transform='rotate(60)'/%3E%3Cuse href='%23r' transform='rotate(120)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%231F5A42' stroke-opacity='.075' stroke-width='1.5' stroke-linecap='round'%3E%3Cuse href='%23v' transform='translate(58 64)'/%3E%3Cuse href='%23v' transform='translate(190 176) scale(.62) rotate(15)'/%3E%3Cuse href='%23v' transform='translate(210 40) scale(.4)'/%3E%3C/g%3E%3C/svg%3E"); background-size:260px; }
.lp3-hero{ position:relative; }
.lp3-vetvicka{ position:absolute; z-index:2; height:auto; pointer-events:none; user-select:none; }
.lp3-vetvicka--hero{ left:calc(var(--hrana) + 505px); bottom:-71px; width:290px; transform:rotate(-10deg); }
.lp3-kontakt{ position:relative; }
.lp3-vetvicka--kontakt{ top:-86px; right:-47px; width:220px; transform:rotate(16deg); }
.lp3-sal{ position:relative; overflow:hidden; isolation:isolate; }
.lp3-sal::before{ content:""; position:absolute; inset:-8%; z-index:-1; pointer-events:none; filter:blur(7px); opacity:.9;
  background:
    radial-gradient(circle at 6% 14%, rgba(255,210,130,.26) 0 26px, transparent 30px),
    radial-gradient(circle at 13% 30%, rgba(255,225,170,.16) 0 14px, transparent 18px),
    radial-gradient(circle at 4% 62%, rgba(255,205,120,.14) 0 40px, transparent 46px),
    radial-gradient(circle at 20% 88%, rgba(255,230,180,.18) 0 18px, transparent 22px),
    radial-gradient(circle at 48% 6%, rgba(255,215,150,.12) 0 22px, transparent 27px),
    radial-gradient(circle at 78% 10%, rgba(255,210,130,.22) 0 30px, transparent 35px),
    radial-gradient(circle at 92% 26%, rgba(255,235,190,.16) 0 16px, transparent 20px),
    radial-gradient(circle at 96% 58%, rgba(255,205,120,.2) 0 44px, transparent 50px),
    radial-gradient(circle at 86% 84%, rgba(255,225,160,.16) 0 20px, transparent 24px),
    radial-gradient(circle at 60% 94%, rgba(255,215,150,.12) 0 34px, transparent 40px);
  animation:lp3-svetla 26s ease-in-out infinite alternate; }
@keyframes lp3-svetla{ to{ transform:translate3d(2%, -2.5%, 0); opacity:.65; } }
.lp3-snih{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
@media (max-width:1100px){
  .lp3-vetvicka--hero{ left:auto; right:-28px; bottom:-50px; width:min(40vw, 240px); transform:rotate(-14deg); }
}
@media (max-width:820px){
  .lp3-vetvicka--kontakt{ top:-62px; right:-30px; width:160px; }
}
@media (prefers-reduced-motion: reduce){ .lp3-sal::before{ animation:none; } }