/* Úvodní stránka samostatného webu */
:root{--ld-ink:#14212b;--ld-mu:#5b6b78;--ld-acc:#0f766e;--ld-acc2:#14b8a6;--ld-soft:#e6f7f4;--ld-line:#dbe3e8;--ld-bg:#f4f7f9}
.ld-body{background:var(--ld-bg);color:var(--ld-ink);min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
.ld-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ld-bg i{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.ld-bg i:nth-child(1){width:720px;height:720px;right:-260px;top:-300px;background:radial-gradient(circle at 40% 40%,#c9f1ea,transparent 65%)}
.ld-bg i:nth-child(2){width:520px;height:520px;left:-220px;bottom:-200px;background:radial-gradient(circle at 60% 60%,#ffe3dd,transparent 65%)}
.ld-bg i:nth-child(3){width:300px;height:300px;right:18%;bottom:8%;background:radial-gradient(circle,#e0ecff,transparent 68%)}
.ld-top,.ld-main,.ld-foot{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.ld-top{display:flex;align-items:center;justify-content:space-between;height:72px}
.ld-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ld-ink);text-decoration:none}
.ld-mark{display:inline-grid;grid-template-columns:repeat(3,6px);gap:3px;align-items:end;height:18px}
.ld-mark b{display:block;width:6px;border-radius:2px;background:var(--ld-acc)}
.ld-mark b:nth-child(1){height:8px;opacity:.55}.ld-mark b:nth-child(2){height:13px;opacity:.8}.ld-mark b:nth-child(3){height:18px}
.ld-toplink{font-weight:600;color:var(--ld-acc);text-decoration:none;padding:8px 14px;border:1px solid var(--ld-line);border-radius:999px;background:#fff}
.ld-toplink:hover{border-color:var(--ld-acc)}
.ld-main{display:grid;grid-template-columns:1.35fr .9fr;gap:48px;align-items:start;padding-top:36px;padding-bottom:56px;flex:1}
.ld-main.ld-v2{grid-template-columns:.85fr 1.25fr;gap:40px;align-items:center;padding-top:28px}
.ld-v2 .ld-left h1{font-size:36px;margin-bottom:18px}
.ld-v2 .ld-form{max-width:440px}
.ld-cards3{grid-column:1/-1;margin:8px 0 0}
.ld-cards3 .ld-card{padding:14px 16px}.ld-cards3 .ld-card h2{font-size:16px}.ld-cards3 .ld-card p{font-size:13.5px}
.ld-cards3 .ld-ico{width:34px;height:34px;font-size:17px;margin-bottom:8px}
.ld-eyebrow{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ld-acc)}
.ld-hero h1{margin:0 0 16px;font-size:44px;line-height:1.08;letter-spacing:-.025em;font-weight:800}
.ld-hero h1 em,.ld-left h1 em{font-style:normal;color:var(--ld-acc);background:linear-gradient(transparent 62%,#bff0e8 62%)}
.ld-lead{margin:0 0 28px;font-size:18px;line-height:1.5;color:var(--ld-mu);max-width:620px}
.ld-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.ld-card{background:#fff;border:1px solid var(--ld-line);border-radius:14px;padding:18px 16px 16px;box-shadow:0 6px 18px rgba(20,33,43,.05);transition:transform .15s,box-shadow .15s}
.ld-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,33,43,.09)}
.ld-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ld-soft);font-size:20px;margin-bottom:10px}
.ld-card h2{margin:0 0 6px;font-size:17px}
.ld-card p{margin:0;font-size:14px;line-height:1.45;color:var(--ld-mu)}
.ld-points{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--ld-mu)}
.ld-points li{position:relative;padding-left:26px}
.ld-points li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;background:var(--ld-acc2);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--ld-acc2)}
.ld-points b{color:var(--ld-ink)}
.ld-login{position:sticky;top:24px}
.ld-form{background:#fff;border:1px solid var(--ld-line);border-top:5px solid var(--ld-acc);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px rgba(20,33,43,.10)}
.ld-form h2{margin:0;font-size:22px}
.ld-sub{margin:-4px 0 4px;font-size:13.5px;color:var(--ld-mu);line-height:1.4}
.ld-form label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--ld-ink)}
.ld-form input[type=email],.ld-form input[type=password]{width:100%;font:15px/1.3 inherit;padding:11px 12px;border:1px solid var(--ld-line);border-radius:9px;background:#fbfcfd}
.ld-form input:focus{outline:2px solid var(--ld-acc2);outline-offset:1px;border-color:var(--ld-acc2);background:#fff}
.ld-btn.jl-btn{background:var(--ld-acc);justify-content:center;margin-top:4px;border-radius:9px;min-height:46px;font-size:16px}
.ld-btn.jl-btn:hover{background:#0b5f59}
.ld-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:22px;font-size:13px;color:var(--ld-mu);border-top:1px solid var(--ld-line)}
@media(max-width:900px){.ld-main,.ld-main.ld-v2{grid-template-columns:1fr;gap:28px}.ld-v2 .ld-form{max-width:none}.ld-login{position:static}.ld-cards{grid-template-columns:1fr}.ld-hero h1{font-size:34px}}
@media(max-width:520px){.ld-top{height:60px}.ld-hero h1{font-size:29px}.ld-lead{font-size:16px}.ld-form{padding:20px 16px}}

/* ---- animovaná scéna: 14 s smyčka. 0–40 % přepisování · 42–54 % nástroj · 54–100 % hotovo ---- */
.ld-scene{position:relative}
.sc{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(20,33,43,.12))}
.sc *{animation-duration:14s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.sc-rows{animation-name:scRows;transform-box:fill-box}
@keyframes scRows{0%{transform:translateY(0);opacity:1}40%{transform:translateY(-182px);opacity:1}46%{opacity:0}100%{opacity:0;transform:translateY(0)}}
.sc-cursor{animation-name:scCursor;animation-timing-function:steps(2,end)}
@keyframes scCursor{0%,40%{opacity:1}42%,100%{opacity:0}}
.sc-done{animation-name:scDone;transform-origin:442px 167px}
@keyframes scDone{0%,50%{opacity:0;transform:scale(.6)}56%{opacity:1;transform:scale(1.04)}60%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.sc-btn{animation-name:scBtn;transform-origin:442px 165px}
@keyframes scBtn{0%,40%{opacity:0;transform:scale(.4)}43%{opacity:1;transform:scale(1.12)}45%{transform:scale(1)}48%{transform:scale(.88)}50%{opacity:1;transform:scale(1)}53%,100%{opacity:0;transform:scale(1)}}
.sc-zap{animation-name:scZap;transform-origin:442px 165px}
@keyframes scZap{0%,47%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}56%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
.sc-p{transform-box:fill-box;transform-origin:center;opacity:0}
.sc-p0{animation-name:scP0}
@keyframes scP0{0%,2%{opacity:0;transform:translateY(-30px) rotate(-8deg)}5%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p1{animation-name:scP1}
@keyframes scP1{0%,8%{opacity:0;transform:translateY(-30px) rotate(-8deg)}11%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p2{animation-name:scP2}
@keyframes scP2{0%,13%{opacity:0;transform:translateY(-30px) rotate(-8deg)}16%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p3{animation-name:scP3}
@keyframes scP3{0%,18%{opacity:0;transform:translateY(-30px) rotate(-8deg)}21%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p4{animation-name:scP4}
@keyframes scP4{0%,23%{opacity:0;transform:translateY(-30px) rotate(-8deg)}26%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p5{animation-name:scP5}
@keyframes scP5{0%,28%{opacity:0;transform:translateY(-30px) rotate(-8deg)}31%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-p6{animation-name:scP6}
@keyframes scP6{0%,33%{opacity:0;transform:translateY(-30px) rotate(-8deg)}36%{opacity:1;transform:translateY(0) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1)}52%{opacity:0;transform:translate(-110px,-90px) scale(.1) rotate(180deg)}100%{opacity:0;transform:translate(-110px,-90px) scale(.1)}}
.sc-hh{animation-name:scHour;transform-origin:560px 60px;animation-timing-function:linear}
@keyframes scHour{0%{transform:rotate(0)}40%{transform:rotate(300deg)}54%,100%{transform:rotate(300deg)}}
.sc-mh{animation-name:scMin;transform-origin:560px 60px;animation-timing-function:linear}
@keyframes scMin{0%{transform:rotate(0)}40%{transform:rotate(3240deg)}54%,100%{transform:rotate(3240deg)}}
.sc-sun{animation-name:scSun;transform-box:fill-box;transform-origin:center}
@keyframes scSun{0%,26%{opacity:1;transform:translateY(0)}34%,50%{opacity:0;transform:translateY(16px)}58%,100%{opacity:1;transform:translateY(0)}}
.sc-moon{animation-name:scMoon}
@keyframes scMoon{0%,28%{opacity:0}34%,50%{opacity:1}56%,100%{opacity:0}}
.sc-armL{animation-name:scArmL;transform-origin:262px 222px}
.sc-armR{animation-name:scArmR;transform-origin:266px 234px}
@keyframes scArmL{0%,40%{transform:rotate(0)}1%,3%,5%,7%,9%,11%,13%,15%,17%,19%,21%,23%,25%,27%,29%,31%,33%,35%,37%,39%{transform:rotate(-4deg)}2%,4%,6%,8%,10%,12%,14%,16%,18%,20%,22%,24%,26%,28%,30%,32%,34%,36%,38%{transform:rotate(3deg)}48%,96%{transform:rotate(26deg)}100%{transform:rotate(0)}}
@keyframes scArmR{0%,40%{transform:rotate(0)}1%,3%,5%,7%,9%,11%,13%,15%,17%,19%,21%,23%,25%,27%,29%,31%,33%,35%,37%,39%{transform:rotate(3deg)}2%,4%,6%,8%,10%,12%,14%,16%,18%,20%,22%,24%,26%,28%,30%,32%,34%,36%,38%{transform:rotate(-4deg)}48%,96%{transform:rotate(-22deg)}100%{transform:rotate(0)}}
.sc-body{animation-name:scBody;transform-origin:245px 282px}
@keyframes scBody{0%,40%{transform:rotate(0) translateY(0)}20%{transform:rotate(3deg) translateY(2px)}48%,96%{transform:rotate(-7deg) translateY(0)}100%{transform:rotate(0)}}
.sc-head{animation-name:scHead;transform-origin:249px 198px}
@keyframes scHead{0%,40%{transform:rotate(4deg)}10%,30%{transform:rotate(7deg) translateY(2px)}48%,96%{transform:rotate(-4deg)}100%{transform:rotate(4deg)}}
.sc-mouth-flat{animation-name:scFlat}.sc-mouth-smile{animation-name:scSmile}
@keyframes scFlat{0%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes scSmile{0%,46%{opacity:0}50%,100%{opacity:1}}
.sc-brow{animation-name:scFlat}
.sc-sweat{animation-name:scSweat;transform-box:fill-box;transform-origin:center}
@keyframes scSweat{0%,6%{opacity:0;transform:translateY(-6px)}10%,38%{opacity:1;transform:translateY(0)}20%{transform:translateY(5px)}30%{transform:translateY(0)}44%,100%{opacity:0;transform:translateY(8px)}}
.sc-steam{animation-name:scSteam;transform-box:fill-box;transform-origin:bottom}
@keyframes scSteam{0%,54%{opacity:0;transform:translateY(4px) scaleY(.6)}62%{opacity:1;transform:translateY(0) scaleY(1)}70%{transform:translateY(-4px) scaleY(1.1)}78%{transform:translateY(0) scaleY(1)}86%{transform:translateY(-4px) scaleY(1.1)}96%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.sc-hearts{animation-name:scHearts;transform-box:fill-box;transform-origin:center}
@keyframes scHearts{0%,58%{opacity:0;transform:translateY(6px) scale(.6)}64%{opacity:1;transform:translateY(-6px) scale(1)}80%{opacity:1;transform:translateY(-26px) scale(1.1)}92%{opacity:0;transform:translateY(-44px) scale(.9)}100%{opacity:0}}
/* titulky pod scénou */
.ld-cap{position:relative;height:3.2em;margin-top:14px;font-size:15.5px;line-height:1.45;color:var(--ld-mu)}
.ld-cap p{position:absolute;inset:0;margin:0;opacity:0;animation:scCap 14s infinite ease-in-out}
.ld-cap b{color:var(--ld-ink)}
.ld-c1{animation-name:scCap1!important}.ld-c2{animation-name:scCap2!important}.ld-c3{animation-name:scCap3!important}
@keyframes scCap1{0%,2%{opacity:0;transform:translateY(6px)}4%,20%{opacity:1;transform:translateY(0)}23%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes scCap2{0%,23%{opacity:0;transform:translateY(6px)}26%,44%{opacity:1;transform:translateY(0)}47%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes scCap3{0%,52%{opacity:0;transform:translateY(6px)}56%,96%{opacity:1;transform:translateY(0)}99%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sc *,.ld-cap p{animation:none!important}.sc-rows,.sc-cursor,.sc-btn,.sc-zap,.sc-p,.sc-sweat,.sc-brow,.sc-mouth-flat,.sc-moon,.sc-hearts{opacity:0}.sc-done,.sc-mouth-smile,.sc-steam{opacity:1}.sc-armL{transform:rotate(26deg)}.sc-armR{transform:rotate(-22deg)}.sc-body{transform:rotate(-7deg)}.ld-c3{opacity:1!important}}
