/* Strategie velkých lisů — komponenty nad společným enginem */
.panel{background:var(--paper);border-radius:18px;padding:24px 28px}
.panel h3{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.2;margin-bottom:16px}
.panel h3 small,.cw h3 small{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);margin-left:6px}
.fn2{font-size:13px;line-height:1.45;color:var(--muted);margin-top:12px}
.fn2.abs{position:absolute;left:72px;right:420px;bottom:88px;margin:0}
.thanks{font-family:var(--head);font-size:34px;margin-top:30px}

/* 2 · situation */
.sit{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px}
.cap{display:grid;gap:13px}
.cr{display:grid;grid-template-columns:118px minmax(0,1fr) 78px 170px;align-items:center;gap:14px}
.cr .cn{font-size:15px;font-weight:600}
.cbar{height:16px;background:var(--surface);border-radius:8px;overflow:hidden}
.cbar i,.hbb i{display:block;height:100%;width:var(--w);background:#b9c2be;border-radius:8px;transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease) .4s}
.slide.active .cbar i,.slide.active .hbb i{transform:scaleX(1)}
.cr.us .cbar i{background:var(--aqua)}
.cr b{font-family:var(--head);font-weight:500;font-size:19px;text-align:right;font-variant-numeric:tabular-nums}
.cr em{font-style:normal;font-size:13px;color:var(--muted)}
.cr em.pt{color:#b2541d;font-weight:600}
.cr.us .cn{color:var(--aqua)}
.sitr{display:grid;gap:18px;align-content:start}
.gauge{background:var(--ink);color:#fff;border-radius:18px;padding:24px 28px}
.gt{display:flex;align-items:baseline;gap:16px}
.gt b{font-family:var(--head);font-weight:500;font-size:76px;line-height:1;color:var(--aqua)}
.gt span{font-size:15px;color:rgba(255,255,255,.7);font-weight:600}
.gbar{position:relative;height:26px;border-radius:13px;background:rgba(255,255,255,.12);margin:18px 0 16px;overflow:hidden}
.gbar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--aqua);border-radius:13px;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .5s}
.slide.active .gbar i{transform:scaleX(1)}
.gbar span{position:absolute;right:14px;top:4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.gauge p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.75)}
.gauge p strong{color:#fff}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mc{background:var(--paper);border-radius:18px;padding:18px 20px;border-top:4px solid var(--aqua)}
.mc.bad{border-top-color:#d0745a}
.mc b{display:block;font-family:var(--head);font-weight:500;font-size:19px;margin-bottom:6px}
.mc span{font-size:14px;line-height:1.45;color:var(--muted)}

/* 3 · why now */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.kp4{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kp4 .kpi{padding:20px 22px}
.kp4 .num{font-size:40px}
.kp4 .lbl{font-size:14px}
.hb{display:grid;gap:11px}
.hr{display:grid;grid-template-columns:100px minmax(0,1fr) 50px;align-items:center;gap:12px;font-size:15px;font-weight:600}
.hbb{height:14px;background:var(--surface);border-radius:7px;overflow:hidden}
.hr b{font-family:var(--head);font-weight:500;font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.hr.us{color:var(--aqua)}
.hr.us .hbb i{background:var(--aqua)}
.hr.g{color:var(--muted)}
.hr.g .hbb i{background:#d9dedb}
.warn{margin-top:18px;background:#fdf3ee;border-left:4px solid #d0745a;border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.5;color:#5b4a43}
.warn b{color:var(--ink)}

/* 4 · segments matrix */
.seg{display:grid;grid-template-columns:600px minmax(0,1fr);gap:26px}
.mx{position:relative;height:560px;background:var(--paper);border-radius:18px;overflow:hidden}
.mx::before{content:"";position:absolute;left:50%;top:24px;bottom:48px;border-left:1px dashed var(--line)}
.mx::after{content:"";position:absolute;top:50%;left:44px;right:24px;border-top:1px dashed var(--line)}
.ax{position:absolute;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ay{left:12px;bottom:60px;transform:rotate(-90deg);transform-origin:left bottom;white-space:nowrap}
.axx{right:24px;bottom:16px}
.q{position:absolute;top:18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.q1{right:24px;background:rgba(51,181,156,.14);color:#1f8c76}
.q2{left:54px;background:var(--surface);color:var(--muted)}
.bub{position:absolute;--pad-l:44px;left:calc(44px + (100% - 68px) * var(--x) / 100);bottom:calc(48px + (100% - 72px) * var(--y) / 100);
  width:var(--s);height:var(--s);margin:0 0 calc(var(--s) / -2) calc(var(--s) / -2);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;
  transform:scale(0);transition:transform .8s var(--ease)}
.slide.active .bub{transform:scale(1)}
.slide.active .bub:nth-of-type(2){transition-delay:.45s}.slide.active .bub:nth-of-type(3){transition-delay:.55s}
.slide.active .bub:nth-of-type(4){transition-delay:.65s}.slide.active .bub:nth-of-type(5){transition-delay:.75s}
.slide.active .bub:nth-of-type(6){transition-delay:.85s}.slide.active .bub:nth-of-type(7){transition-delay:.95s}
.bub b{font-family:var(--head);font-weight:500;font-size:16px;line-height:1.1}
.bub span{font-size:12px;line-height:1.2;margin-top:2px}
.bub.p{background:var(--aqua);color:#fff}
.bub.p2{background:rgba(51,181,156,.22);color:#16614f;border:2px solid var(--aqua)}
.bub.f{background:#e8ddc9;color:#6b5428}
.bub.n{background:#dfe3e1;color:var(--muted)}
.bub.n b{font-size:13px}
.mnote{position:absolute;left:54px;bottom:16px;font-size:12px;color:var(--muted);max-width:330px;line-height:1.35}
.segtab table,.tgt table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:18px;overflow:hidden}
.segtab th,.tgt th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.segtab td,.tgt td{padding:11px 14px;font-size:14px;line-height:1.35;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--muted)}
.segtab tr:last-child td,.tgt tr:last-child td{border-bottom:none}
.segtab td b,.tgt td b{color:var(--ink);font-weight:700}
.segtab td small,.tgt td small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.segtab td.n{font-family:var(--head);font-size:17px;color:var(--ink);white-space:nowrap}
.vt{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:20px;white-space:nowrap}
.v1{background:var(--aqua);color:#fff}
.v2{background:rgba(51,181,156,.16);color:#1f8c76}
.vf{background:#efe6d5;color:#6b5428}
.vn{background:var(--surface);color:var(--muted)}

/* 5 · pillar 1 */
.p1{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.tgt td.hi{color:var(--ink);font-weight:600}
.tgt td.hi::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--aqua);margin-right:8px;vertical-align:1px}
.offer{display:grid;gap:18px;align-content:start}
.of{background:var(--paper);border-radius:18px;padding:22px 24px;border-top:4px solid var(--aqua)}
.of h3{font-family:var(--head);font-weight:500;font-size:21px;margin-bottom:14px}
.steps{list-style:none;display:grid;gap:11px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4}
.steps li b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--aqua);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.of.cond{border-top-color:#d0745a}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chips span{font-size:13px;font-weight:700;padding:5px 11px;border-radius:20px}
.chips .ok{background:rgba(51,181,156,.16);color:#1f8c76}
.chips .ok::before{content:"✓ "}
.chips .q{position:static;background:#fbf0d9;color:#8a6414;letter-spacing:0;text-transform:none}
.chips .q::before{content:"? "}
.chips .no{background:#fbe5de;color:#a4472c}
.chips .no::before{content:"✗ "}
.of.cond p{font-size:14px;line-height:1.5;color:var(--muted)}

/* 6 · pillars 2+3 */
.pil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 380px;gap:20px}
.pc{background:var(--paper);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.ph2{height:170px;overflow:hidden}
.ph2 img{width:100%;height:100%;object-fit:cover}
.pb{padding:18px 22px 20px;display:flex;flex-direction:column;gap:8px}
.pb .vt{align-self:flex-start}
.pb h3{font-family:var(--head);font-weight:500;font-size:22px}
.pv{font-size:14.5px;line-height:1.45;color:var(--ink)}
.pb ul{list-style:none;display:grid;gap:7px;margin-top:4px}
.pb li{font-size:14px;line-height:1.42;color:var(--muted);padding-left:16px;position:relative}
.pb li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--aqua)}
.pb li.bad::before{background:#d0745a}
.pb li strong{color:var(--ink)}
.side{display:grid;gap:14px;align-content:start}
.sd{background:var(--paper);border-radius:16px;padding:16px 18px;display:grid;gap:6px}
.sd .vt{justify-self:start}
.sd b{font-family:var(--head);font-weight:500;font-size:18px}
.sd>span:last-child{font-size:13.5px;line-height:1.45;color:var(--muted)}
.sd.f{border-left:4px solid #c9ad78}

/* 7 · economics */
.eco{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
.calc{background:var(--paper);border-radius:18px;padding:26px 30px;display:grid;gap:20px}
.sl label{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:10px}
.sl label b{font-family:var(--head);font-weight:500;font-size:20px;color:var(--aqua)}
.sl input{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;
  background:linear-gradient(to right,var(--aqua) var(--p,50%),var(--surface) var(--p,50%));outline:none;cursor:pointer}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--aqua);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sl input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--aqua)}
.ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.ubar{position:relative;height:34px;background:var(--surface);border-radius:10px;overflow:hidden;display:flex}
.ubar .now{width:30%;background:var(--ink)}
.ubar .add{width:20%;background:var(--aqua);transition:width .4s var(--ease)}
.ubar .lb0{position:absolute;left:12px;top:8px;font-size:13px;font-weight:700;color:#fff}
.cres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cres>div{border-radius:14px;background:var(--surface);padding:16px 18px}
.cres>div.dark{background:var(--ink);color:#fff}
.cres b{display:block;font-family:var(--head);font-weight:500;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.cres .dark b{color:var(--aqua)}
.cres span{display:block;font-size:13px;line-height:1.4;margin-top:8px;color:var(--muted)}
.cres .dark span{color:rgba(255,255,255,.7)}
.ecor{display:grid;gap:16px;align-content:start}
.ec{background:var(--paper);border-radius:18px;padding:20px 24px}
.ec b{display:block;font-family:var(--head);font-weight:500;font-size:20px;margin-bottom:6px}
.ec span{font-size:15px;line-height:1.5;color:var(--muted)}
.ec span strong{color:var(--ink)}
.ec.a{border-left:4px solid var(--aqua)}

/* 8 · critique */
.crit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:22px}
.cl,.cw{background:var(--paper);border-radius:18px;padding:22px 26px}
.cl{border-top:4px solid var(--aqua)}
.cw{border-top:4px solid #d0745a}
.cl h3,.cw h3{font-family:var(--head);font-weight:500;font-size:22px;margin-bottom:12px}
.cl ul{list-style:none;display:grid;gap:13px}
.cl li b,.cw li b{display:block;font-size:15px;color:var(--ink)}
.cl li span{font-size:14px;line-height:1.45;color:var(--muted)}
.cw ol{list-style:none;counter-reset:c;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.cw li{counter-increment:c;position:relative;padding-left:34px;font-size:14px;line-height:1.42;color:var(--muted)}
.cw li::before{content:counter(c);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#fbe5de;color:#a4472c;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cw li b{display:inline;font-size:14.5px;line-height:1.4}
.cw li span{display:block;margin-top:4px;color:#1f8c76;font-weight:600}

/* 9 · plan */
.rmap2{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rp2{background:var(--paper);border-radius:18px;padding:20px 22px;border-top:4px solid #b9c2be}
.rp2.a{border-top-color:var(--aqua);background:linear-gradient(160deg,#eaf6f2,#fff 60%)}
.rq{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.rp2 b{display:block;font-family:var(--head);font-weight:500;font-size:21px;margin:6px 0 10px}
.rp2 ul{list-style:none;display:grid;gap:7px}
.rp2 li{font-size:14px;line-height:1.42;color:var(--muted);padding-left:14px;position:relative}
.rp2 li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--aqua)}
.rp2 li strong{color:var(--ink)}
.funnel{margin-top:18px;background:var(--ink);color:#fff;border-radius:18px;padding:16px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fh{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua);margin-right:6px}
.funnel div{display:flex;align-items:baseline;gap:8px}
.funnel div b{font-family:var(--head);font-weight:500;font-size:30px}
.funnel div.a b{color:var(--aqua)}
.funnel div span{font-size:13.5px;color:rgba(255,255,255,.7)}
.funnel i{font-style:normal;color:rgba(255,255,255,.35)}
.funnel em{font-style:normal;font-size:12px;color:rgba(255,255,255,.5);margin-left:auto}

/* 10 · decisions */
.s-end h2{font-size:56px}
.s-end .asks{margin-top:34px}
.ask ul{gap:7px}
.risk-row{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:14px;color:var(--muted)}
.risk-row .fh{color:#b2541d}
.risk-row b{color:var(--ink)}

/* ---------- flow (phones, portrait) ---------- */
body.flow .sit,body.flow .why,body.flow .seg,body.flow .p1,body.flow .pil,body.flow .eco,body.flow .crit,body.flow .rmap2{grid-template-columns:minmax(0,1fr)}
body.flow .kp4,body.flow .mini{grid-template-columns:minmax(0,1fr)}
body.flow .cr{grid-template-columns:92px minmax(0,1fr) 64px;gap:10px}
body.flow .cr em{grid-column:2/4;margin-top:-8px}
body.flow .gt b{font-size:56px}
body.flow .mx{height:420px}
body.flow .bub{zoom:.78}
body.flow .mnote{display:none}
body.flow .segtab,body.flow .tgt{overflow-x:auto}
body.flow .segtab table,body.flow .tgt table{min-width:560px}
body.flow .cw ol{grid-template-columns:minmax(0,1fr)}
body.flow .cres{grid-template-columns:minmax(0,1fr)}
body.flow .fn2.abs{position:static;margin-top:14px}
body.flow .funnel em{margin-left:0}
body.flow .s-end h2{font-size:34px}
body.flow .thanks{font-size:26px}
body.flow .kp4 .num{font-size:32px}

/* ---------- fill the stage: content blocks use the full height (desktop) ---------- */
body:not(.flow) .sit,body:not(.flow) .why,body:not(.flow) .p1,body:not(.flow) .pil,body:not(.flow) .eco,body:not(.flow) .crit{height:528px}
.gt>span{font-size:16px;color:rgba(255,255,255,.7);font-weight:600}
.gt b span{font:inherit;color:inherit}
.sit>.panel{display:flex;flex-direction:column}
.sit .cap{flex:1;align-content:space-evenly}
.cr{grid-template-columns:130px minmax(0,1fr) 92px 190px}
.cr .cn{font-size:17px}
.cr b{font-size:23px}
.cr em{font-size:14px}
.cbar{height:20px;border-radius:10px}
.sitr{grid-template-rows:auto 1fr}
.mini .mc span{font-size:15px;line-height:1.5}
.mc b{font-size:21px}
.gauge p{font-size:16px}
.fn2{font-size:13.5px}

.why .kp4{grid-auto-rows:1fr}
.kp4 .kpi{display:flex;flex-direction:column;justify-content:center;padding:24px 26px}
.kp4 .num{font-size:50px}
.kp4 .lbl{font-size:15.5px;line-height:1.5;margin-top:12px}
.why .lab{display:flex;flex-direction:column}
.lab .hb{flex:1;align-content:space-evenly}
.hr{font-size:16.5px;grid-template-columns:110px minmax(0,1fr) 56px}
.hr b{font-size:21px}
.hbb{height:18px;border-radius:9px}
.warn{font-size:15.5px}

body:not(.flow) .seg{height:528px}
.mx{height:100%}
.q{top:14px}
.segtab{height:100%}
.segtab table{height:100%}
.segtab td{font-size:15px}
.segtab td b{font-size:15.5px}
.segtab td small{font-size:13px}
.segtab td.n{font-size:19px}
.vt{font-size:13px;padding:5px 12px}
.bub b{font-size:17px}
.bub span{font-size:13px}

.p1 .tgt{display:flex;flex-direction:column}
.tgt table{flex:1}
.tgt td{font-size:15px}
.tgt td small{font-size:13px}
.of h3{font-size:23px}
.steps li{font-size:16.5px}
.of.cond p{font-size:15px}
.chips span{font-size:14px}
.offer{grid-template-rows:auto 1fr}

.ph2{height:170px}
.pb h3{font-size:24px}
.pv{font-size:16px}
.pb li{font-size:15px}
.side{grid-auto-rows:1fr}
.sd{align-content:center;padding:18px 20px}
.sd b{font-size:20px}
.sd>span:last-child{font-size:14.5px}

.eco .calc{align-content:space-between}
.sl label{font-size:17px}
.sl label b{font-size:24px}
.cres b{font-size:48px}
.cres span{font-size:14px}
.ecor{grid-auto-rows:1fr}
.ec{display:flex;flex-direction:column;justify-content:center;padding:22px 26px}
.ec b{font-size:22px}
.ec span{font-size:16px}

.crit>div{display:flex;flex-direction:column}
.cl ul{flex:1;align-content:space-evenly}
.cl li b{font-size:17px}
.cl li span{font-size:15px}
.cw ol{flex:1;align-content:space-evenly}
.cw li{font-size:15px}
.cw li b{font-size:16px}
.cl h3,.cw h3{font-size:24px}

body:not(.flow) .rmap2{height:400px}
.rp2 b{font-size:23px}
.rp2 li{font-size:15.5px}
.rp2 ul{gap:9px}
.funnel{padding:20px 28px;margin-top:20px}
.funnel div b{font-size:36px}
.funnel div span{font-size:15px}

.ask h3{font-size:24px}
.ask li{font-size:16px}
.risk-row{font-size:15px;margin-top:24px}
.side{grid-auto-rows:auto;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;height:100%}
.sd{padding:12px 18px;gap:4px}
.sd b{font-size:19px}
.sd>span:last-child{font-size:14px;line-height:1.42}
body:not(.flow) .pc{height:100%}
body:not(.flow) .crit{height:486px}
.fn2.abs{bottom:96px}
.s-title .lbl{font-size:15.5px}
.mc span{font-size:16px}
body:not(.flow) .rmap2{height:370px}
.rp2 li{font-size:16px}
.funnel{gap:14px}
.funnel em{flex-basis:100%;text-align:right;margin-top:-6px}
.gt b,.cr b,.hr b{white-space:nowrap}
body.flow .cr{grid-template-columns:86px minmax(0,1fr) 76px}
body.flow .cr b{font-size:18px}
body.flow .gt{flex-wrap:wrap;gap:8px 14px}