/* Sekcie a nakreslené obrazovky aplikácií. [F1]
   Hodnoty sú prevzaté z design/navrh-zdroj.html (px / 16 = rem). */

/* ---------- hero ---------- */
.hero{grid-template-rows:18.75rem 17.75rem 15.625rem}
.h1t{grid-column:1/8;grid-row:1/3;background:var(--og);color:#fff;padding:2.875rem}
.h1t h1{font:800 5.25rem/.97 var(--f-display);letter-spacing:-.047em;max-width:41.25rem;position:relative}
.h1t p{font:500 1.25rem/1.45 var(--f-body);max-width:32.5rem;margin-top:1.375rem;color:rgba(255,255,255,.94);position:relative}
.h1t .b{display:flex;gap:.875rem;margin-top:1.875rem;font:600 1.0625rem var(--f-body);position:relative}
.h1t .b>*{background:#fff;color:var(--ink);padding:1.0625rem 1.625rem;border-radius:1rem;display:inline-flex;align-items:center;gap:.625rem;box-shadow:0 .625rem 1.5rem rgba(140,40,0,.18)}
.h1t .b>*+*{background:rgba(27,20,16,.2);color:#fff;box-shadow:none}
.h1t .ring{position:absolute;right:-8.125rem;bottom:-10.625rem;width:28.75rem;height:28.75rem;border-radius:50%;border:4.625rem solid rgba(255,255,255,.15)}
.h1t .pts{list-style:none;position:absolute;left:2.875rem;right:2.875rem;bottom:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}
.h1t .pts li{background:rgba(255,255,255,.17);border-radius:1.125rem;padding:.875rem 1rem .9375rem;font:500 .875rem/1.38 var(--f-body);color:#fff}
.h1t .pts b{display:block;font:700 .9375rem var(--f-body);color:#fff;margin-bottom:.25rem;white-space:nowrap}
.h1t .pts svg{display:block;width:2.125rem;height:2.125rem;padding:.5rem;border-radius:.6875rem;background:#fff;color:#ff5a1f;margin-bottom:.625rem}
.h2t{grid-column:8/13;grid-row:1;padding:0}
.h3t{grid-column:8/11;grid-row:2;background:#fff;padding:1.75rem}
.h3t small{color:var(--mut);font-size:.875rem;font-weight:500}
.h3t strong{display:block;font:800 3.625rem/1 var(--f-display);letter-spacing:-.04em;margin:.5rem 0 .875rem}
.h3t .ln{display:flex;justify-content:space-between;font:500 .875rem var(--f-body);padding:.4375rem 0;border-top:1px dashed #ead9c8;color:#3a2c23}
.h3t em{position:absolute;left:1.75rem;bottom:1.5rem;font-style:normal;background:#ffe3cf;color:#8a3208;font-weight:600;font-size:.8125rem;padding:.4375rem .75rem;border-radius:var(--r-pill)}
.h4t{grid-column:11/13;grid-row:2;background:var(--lime);color:var(--lk);padding:1.625rem}
.h4t h3{font:800 1.8125rem/1.02 var(--f-display);letter-spacing:-.03em;display:block}
.h4t span{position:absolute;left:1.625rem;right:1.125rem;bottom:1.5rem;font:500 .875rem/1.35 var(--f-body)}
.h4t .doc{position:absolute;left:1.625rem;top:7rem;width:7rem;height:4.5rem;background:#fff;border-radius:.625rem;padding:.625rem;transform:rotate(-6deg);box-shadow:0 .625rem 1.25rem rgba(28,42,5,.18)}
.h4t .doc i{display:block;height:.375rem;border-radius:.1875rem;background:#e7ecdc;margin-bottom:.375rem}
.h4t .doc i.k{background:var(--lk);width:60%}
.h4t .doc i.h{background:#ff8a2b;width:45%}
.h4t .scan{position:absolute;left:1.125rem;top:8.875rem;width:8.5rem;height:.1875rem;background:var(--lk);border-radius:.125rem;transform:rotate(-6deg);box-shadow:0 0 0 .25rem rgba(28,42,5,.12)}
.h4t .ok{position:absolute;left:7.75rem;top:6rem;width:2.125rem;height:2.125rem;border-radius:50%;background:var(--lk);color:var(--lime);display:flex;align-items:center;justify-content:center}
.h5t{grid-column:1/5;grid-row:3;background:var(--ink);color:var(--cr);padding:1.875rem}
.h5t h3{font:800 2.125rem var(--f-display);letter-spacing:-.03em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.125rem;font:500 .875rem var(--f-body)}
.chips span{background:rgba(255,246,236,.12);padding:.5rem .8125rem;border-radius:var(--r-pill)}
.ths{display:grid;grid-template-columns:repeat(4,1fr);gap:.5625rem;margin-top:1.375rem;font:600 .75rem var(--f-body);color:#e9dccf;white-space:nowrap;font-size:.71875rem}
.th{height:6.5rem;border-radius:.875rem;padding:.625rem;margin-bottom:.5rem;position:relative;overflow:hidden}
.th i{display:block;border-radius:.25rem}
.th .w1{background:#fff;border-radius:.5rem;height:100%;padding:.5rem;display:flex;flex-direction:column;gap:.375rem}
.th .w1 i{height:.5rem;background:#f1e6dc}.th .w1 i.k{width:60%;background:var(--ink)}.th .w1 i.o{margin-top:auto;width:55%;height:.75rem;background:var(--or)}
.th .cg{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;height:100%}
.th .cg i{background:#f1e2d2;align-self:start;height:var(--h,30%)}.th .cg i.o{background:var(--or)}.th .cg i.b{background:var(--bl)}
.th .pp{position:absolute;left:50%;top:.75rem;width:3rem;margin-left:-1.5rem;bottom:-.5rem;background:#fff;border-radius:.625rem;border:.1875rem solid var(--dev);padding:.625rem .3125rem;display:flex;flex-direction:column;gap:.3125rem}
.th .pp i{height:.4375rem;background:#e8e9f4}.th .pp i.k{width:70%;background:var(--ink)}.th .pp i.b{height:.6875rem;background:var(--bl)}
.th .eo{background:#fff;border-radius:.5rem;height:100%;overflow:hidden;display:flex;flex-direction:column;gap:.375rem}
.th .eo i{height:.5rem;margin:0 .5rem;background:#e3f2ec}.th .eo i.g{height:1.25rem;margin:0;border-radius:0;background:var(--forest)}.th .eo i.m{margin-top:auto;margin-bottom:.5rem;height:.75rem;background:var(--mi)}
.h5t .ar{position:absolute;right:1.75rem;bottom:1.625rem;width:3.375rem;height:3.375rem;border-radius:50%;background:var(--lime);color:var(--lk);display:flex;align-items:center;justify-content:center}
.h6t{grid-column:5/9;grid-row:3;background:var(--pe);padding:0}
.h6t .ph{position:absolute;left:2.125rem;top:1.75rem;box-shadow:0 1.625rem 3.125rem rgba(120,50,10,.3);transform:rotate(-4deg)}
.h6t>h3{position:absolute;right:1.75rem;top:1.875rem;width:9.375rem;font:800 1.6875rem/1.05 var(--f-display);letter-spacing:-.03em;text-align:right}
.h6t .toast{position:absolute;right:1.625rem;bottom:1.625rem;background:#fff;border-radius:.875rem;padding:.625rem .8125rem;font:600 .8125rem/1.3 var(--f-body);display:flex;gap:.5625rem;align-items:center;box-shadow:0 .625rem 1.5rem rgba(120,50,10,.15)}
.h6t .toast i{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.h6t .toast small{display:block;color:var(--mut);font-weight:500;font-size:.75rem}
.h7t{grid-column:9/13;grid-row:3;background:#fff;padding:1.875rem}
.h7t>h3{font:800 1.9375rem/1.05 var(--f-display);letter-spacing:-.03em;display:block;max-width:20.625rem}
.stp3{position:absolute;left:1.875rem;right:1.875rem;top:7.125rem;display:flex;justify-content:space-between;align-items:center}
.stp3::before{content:"";position:absolute;left:1.25rem;right:1.25rem;top:50%;border-top:.1875rem dashed #f0c9ad}
.stp3 span{position:relative;display:flex;align-items:center;gap:.5rem;background:var(--cr);border:.09375rem solid #f2dfcd;border-radius:var(--r-pill);padding:.375rem .875rem .375rem .375rem;font:700 .9375rem var(--f-body)}
.stp3 span i{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--ink);color:var(--cr);font:800 .8125rem var(--f-body);font-style:normal;display:flex;align-items:center;justify-content:center}
.stp3 span.on{background:var(--or);border-color:var(--or);color:#fff}
.stp3 span.on i{background:#fff;color:var(--or)}
.h7t>span{position:absolute;left:1.875rem;bottom:1.75rem;font-weight:600;font-size:1rem;color:var(--ink)}
.h7t>span small{display:block;font-weight:500;font-size:.875rem;color:var(--mut);margin-top:.125rem}
.h7t>i{position:absolute;right:1.75rem;bottom:1.5rem;width:3.75rem;height:3.75rem;border-radius:50%;background:var(--or);color:#fff;font:800 1.375rem var(--f-display);display:flex;align-items:center;justify-content:center;font-style:normal;letter-spacing:-.02em}

/* shared app ui: calendar */
.ui{display:grid;grid-template-columns:8rem 1fr;height:100%;background:var(--u-bg);color:var(--u-ink);font-size:.8125rem;font-family:var(--f-body);text-align:left}
.ui-side{background:var(--u-side);padding:1.125rem .875rem;display:flex;flex-direction:column;gap:.3125rem}
.ui-side b{font-size:1rem;margin-bottom:.75rem}
.ui-side span{padding:.5rem .625rem;border-radius:.5rem;color:var(--u-mut);font-weight:500}
.ui-side span.on{background:var(--u-on);color:var(--u-onink)}
.ui-main{padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;min-width:0}
.ui-top{display:flex;justify-content:space-between;align-items:center;color:var(--u-mut);font-size:.75rem}
.ui-top b{font-size:1.125rem;color:var(--u-ink)}
.ui-cal{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.ui-col{background:var(--u-col);border-radius:.5rem;position:relative}
.ui-col>i{position:absolute;top:.5rem;left:.625rem;font-style:normal;font-size:.6875rem;color:var(--u-mut);font-weight:600}
.ui-ev{position:absolute;top:var(--y);left:.375rem;right:.375rem;border-radius:.4375rem;padding:.4375rem .5rem;background:var(--u-ev);color:var(--u-evink);font-size:.6875rem;line-height:1.3}
.ui-ev b{display:block}
.ui-ev u{display:block;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-ev.hot{background:var(--u-hot);color:var(--u-hotink)}
.t-warm{--u-bg:var(--ink);--u-side:#140e0b;--u-ink:#fff3e8;--u-mut:var(--mut-dk);--u-on:#ff7a35;--u-onink:var(--ink);--u-col:#261c16;--u-ev:#3a2a20;--u-evink:#ffe2cc;--u-hot:#ff7a35;--u-hotink:var(--ink)}
/* phone */
.ph{width:14.75rem;border-radius:2.375rem;padding:.5625rem;background:var(--dev);box-shadow:0 2.5rem 5rem rgba(0,0,0,.28)}
.ph-scr{border-radius:var(--r-tile);background:#fff;color:var(--dev);padding:2.125rem 1.125rem 1.25rem;font:500 .8125rem var(--f-body);display:flex;flex-direction:column;gap:.625rem;text-align:left;position:relative}
.ph-scr::before{content:"";position:absolute;top:.625rem;left:50%;width:4rem;height:1rem;margin-left:-2rem;border-radius:.625rem;background:var(--dev)}
.ph-scr>b{font-size:1.25rem;letter-spacing:-.02em}
.ph-scr>small{color:#8a8f98;font-size:.75rem}
.fld{background:var(--field);border-radius:.75rem;padding:.625rem .75rem}
.fld i{display:block;font-style:normal;font-size:.6875rem;color:#8a8079}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:.375rem}
.slots span{background:var(--field);border-radius:.625rem;padding:.5625rem 0;text-align:center}
.slots span.on{background:var(--or);color:#fff}
.go{background:var(--dev);color:#fff;border-radius:.75rem;padding:.75rem;text-align:center;font-weight:600;margin-top:.25rem}

/* ---------- industries ---------- */
.ind{grid-template-rows:repeat(4,15rem) 14.375rem;grid-template-areas:
"sv sv sv sv sv kl kl kl sa sa sa sa"
"sv sv sv sv sv el el el sa sa sa sa"
"vo vo vo st st st ga ga ga ga ga ga"
"ob ob ob sk sk sk ga ga ga ga ga ga"
"zd zd zd zd ub ub ub ub do do do do"}
.ind .t{padding:1.625rem 1.625rem 1.5rem}
.it h3{font:800 1.6875rem/1.02 var(--f-display);letter-spacing:-.03em;max-width:12.5rem;position:relative;z-index:2}
.it .kws{display:flex;flex-wrap:wrap;gap:.3125rem;font:600 .78125rem var(--f-body);margin-top:.625rem;max-width:11.25rem;position:relative;z-index:2}
.it .kws span{padding:.3125rem .625rem;border-radius:var(--r-pill);background:rgba(27,20,16,.08)}
.it.dk .kws span{background:rgba(255,246,236,.13)}
.it.bl .kws span,.it.or .kws span{background:rgba(255,255,255,.2)}
.it.mi .kws span{background:rgba(14,51,38,.09)}
.it.wide .kws{max-width:none}
.frg{position:absolute;left:1.375rem;bottom:1.25rem;z-index:3;background:#fff;color:var(--ink);border-radius:.9375rem;padding:.625rem .8125rem;font:700 .8125rem/1.3 var(--f-body);box-shadow:0 .75rem 1.625rem rgba(27,20,16,.18);width:13.375rem}
.wide .frg{width:16.375rem}
.wh .frg{border:.09375rem solid var(--ln);box-shadow:0 .625rem 1.375rem rgba(27,20,16,.08)}
.frg small{display:block;font-weight:500;font-size:.71875rem;color:var(--mut);margin-bottom:.125rem}
.frg.row{display:flex;align-items:center;gap:.625rem}
.frg .okc{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;flex:none}
.frg .pl{margin-left:auto;font-style:normal;font-size:.6875rem;padding:.25rem .5rem;border-radius:var(--r-pill);background:#eef0ff;color:#2737c4;white-space:nowrap}
.frg .tm2{font-style:normal;flex:none;background:var(--pk);color:var(--plum);border-radius:.625rem;padding:.3125rem .5rem;text-align:center;font-size:.6875rem;font-weight:600}
.frg .tm2 b{display:block;font-size:.8125rem}
.ph3{display:grid;grid-template-columns:auto auto auto;gap:.3125rem;margin-top:.3125rem}
.st .frg{width:14.75rem}
.sk .kws{max-width:none}
.sk .frg{padding:.5rem .8125rem}
.sk .rz{padding:.1875rem 0}
.ph3 i{white-space:nowrap;font-style:normal;font-size:.6875rem;font-weight:700;color:var(--stone);padding-top:.375rem;border-top:.25rem solid var(--line-2)}
.ph3 i.d{color:#1d6b43;border-color:#2fbf71}
.ph3 i.on{color:var(--or-dk);border-color:var(--or)}
.rz{display:flex;gap:.5625rem;font-size:.75rem;font-weight:600;padding:.25rem 0;border-top:1px dashed #eadccf}
.rz b{width:2rem;color:var(--or-dk)}
.occ{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;margin-top:.3125rem}
.occ i{font-style:normal;text-align:center;font-size:.6875rem;font-weight:700;padding:.375rem 0;border-radius:.4375rem;background:#fff;border:.09375rem dashed #b9c2ff;color:var(--bl)}
.occ i.f{background:var(--bl);border-color:var(--bl);color:#fff}
.rt{display:flex;align-items:center;gap:.5rem;font-size:.78125rem;margin-bottom:.3125rem}
.rt span{display:flex;align-items:center;gap:.3125rem;white-space:nowrap}
.rt span::before{content:"";width:.5625rem;height:.5625rem;border-radius:50%;border:.15625rem solid var(--or);box-sizing:border-box}
.rt span:last-child::before{background:var(--or)}
.rt i{flex:1;height:0;border-top:.15625rem dashed var(--sand)}
.it .kw{position:absolute;left:1.625rem;right:1.25rem;bottom:1.375rem;display:flex;flex-wrap:wrap;gap:.375rem;font:600 .8125rem var(--f-body)}
.it .kw span{padding:.375rem .6875rem;border-radius:var(--r-pill);background:rgba(27,20,16,.07)}
.it.dk .kw span{background:rgba(255,246,236,.12)}
.it.bl .kw span,.it.or .kw span{background:rgba(255,255,255,.18)}
.it .ic{position:absolute;right:-.375rem;bottom:-.625rem;width:9.75rem;height:9.75rem}
.it .ic svg{width:9.75rem;height:9.75rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.it .ic .bl0{stroke:none}
.wide h3{max-width:none}
.dk{background:var(--ink);color:var(--cr)}
.wh{background:#fff}
.bl{background:var(--bl);color:#fff}
.or{background:var(--or);color:#fff}
.mi{background:var(--mi);color:var(--forest)}
.pe{background:var(--pe)}
.pk{background:var(--pk);color:var(--plum)}
.li{background:var(--lime);color:var(--lk)}
.big h3{font:800 2.875rem/1 var(--f-display);letter-spacing:-.04em}
.big .kw2{display:flex;gap:.4375rem;margin-top:.875rem;font:600 .875rem var(--f-body)}
.big .kw2 span{padding:.4375rem .75rem;border-radius:var(--r-pill);background:rgba(255,255,255,.2)}
.li .kw2 span,.pk .kw2 span{background:rgba(27,20,16,.09)}
.card{background:#fff;color:var(--ink);border-radius:1.25rem;font-family:var(--f-body);box-shadow:0 1.5rem 3.125rem rgba(20,14,40,.22)}
/* servis card */
.sv{grid-area:sv}
.sv .card{position:absolute;left:6rem;top:9.375rem;width:26.25rem;padding:1.25rem 1.375rem;transform:rotate(-3deg)}
.cid{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--mut);font-weight:600}
.stt{font-size:.75rem;font-weight:700;padding:.3125rem .625rem;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn)}
.card>b{display:block;font:800 1.4375rem var(--f-display);letter-spacing:-.02em;margin-top:.5rem}
.card>small{display:block;font-size:.8125rem;color:var(--mut);margin-top:.125rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;margin:1rem 0 .875rem}
.steps i{font-style:normal;font-size:.71875rem;font-weight:600;color:var(--stone);padding-top:.625rem;border-top:.25rem solid var(--line-2)}
.steps i.d{color:#1d6b43;border-color:#2fbf71}
.steps i.on{color:var(--bl);border-color:var(--bl)}
.mat{display:flex;justify-content:space-between;font-size:.8125rem;padding:.5625rem .75rem;background:var(--paper);border-radius:.625rem;margin-top:.375rem}
.mat span+span{color:var(--mut)}
.sv .chipf{position:absolute;right:1.625rem;top:7rem;transform:rotate(4deg);background:var(--lime);color:var(--lk);font:700 .8125rem var(--f-body);padding:.625rem .875rem;border-radius:.875rem;box-shadow:0 .75rem 1.5rem rgba(10,20,80,.25);z-index:2;display:flex;gap:.5rem;align-items:center}
/* salon card */
.sa{grid-area:sa}
.sa .card{position:absolute;left:4.25rem;top:9.375rem;width:19.875rem;padding:1.125rem;transform:rotate(3deg)}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:.3125rem;margin:.75rem 0 .625rem}
.days span{text-align:center;font-size:.6875rem;color:var(--mut);font-weight:600;background:var(--paper);border-radius:.625rem;padding:.375rem 0}
.days span b{display:block;font-size:.9375rem;color:var(--ink)}
.days span.on{background:var(--plum);color:#ffd0e6}
.days span.on b{color:#fff}
.sl{display:flex;align-items:center;gap:.625rem;font-size:.8125rem;padding:.5625rem .6875rem;border-radius:.75rem;margin-top:.375rem;background:var(--paper)}
.sl b{width:2.75rem;font-weight:700}
.sl span{flex:1;color:#5b4a3f}
.sl.free{background:#fff;border:.125rem dashed #f3a3c8}
.sl.free span{color:#b0457a;font-weight:600}
.sl.sel{background:var(--pk);color:var(--plum)}
.sl.sel span{color:var(--plum);font-weight:600}
/* gastro */
.ga{grid-area:ga}
.ga .tick{position:absolute;left:1.875rem;top:13.375rem;width:18.75rem;padding:1.125rem 1.25rem;transform:rotate(-2.5deg)}
.tick .row{display:flex;justify-content:space-between;font-size:.8125rem;padding:.5rem 0;border-bottom:1px dashed #e7dacd}
.tick .row span:first-child b{display:inline-block;width:1.625rem}
.tick .tot{display:flex;justify-content:space-between;font:800 1.125rem var(--f-display);padding-top:.625rem}
.ga .gmenu{position:absolute;right:1.75rem;top:1.75rem;width:18.125rem;bottom:-1.25rem;background:var(--ink);color:var(--cr);border-radius:1.375rem;padding:1.25rem;font-family:var(--f-body);box-shadow:0 1.5rem 3.125rem rgba(28,42,5,.3)}
.gmenu .mh{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--mut-dk);font-weight:600}
.gmenu>b{display:block;font:800 1.3125rem var(--f-display);margin:.375rem 0 .75rem}
.mi2{display:flex;justify-content:space-between;font-size:.8125rem;padding:.5625rem 0;border-bottom:1px solid #2e231c}
.mi2 small{display:block;color:var(--mut-dk);font-size:.71875rem;margin-top:.125rem}
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem;margin-top:.875rem}
.kit div{background:#2a1f19;border-radius:.75rem;padding:.5625rem .625rem;font-size:.71875rem;color:var(--mut-dk)}
.kit div b{display:block;font:800 1.375rem var(--f-display);color:var(--cr)}
.kit div.on{background:var(--lime);color:var(--lk)}
.kit div.on b{color:var(--lk)}
.kl{grid-area:kl}.el{grid-area:el}.vo{grid-area:vo}.st{grid-area:st}.ob{grid-area:ob}.sk{grid-area:sk}.zd{grid-area:zd}.ub{grid-area:ub}.do{grid-area:do}

/* ---------- process ---------- */
.proc{background:var(--ink);color:var(--cr);padding:3.75rem 3.5rem 3.5rem;border-radius:var(--r-block)}
.proc .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.875rem}
.proc .top p{font:500 1.25rem/1.45 var(--f-body);color:var(--sand);max-width:22.5rem;padding-bottom:.625rem}
.pc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pc>article{border-radius:1.75rem;padding:1.375rem;color:var(--ink);position:relative}
.pc .vis{height:18.75rem;border-radius:1.25rem;position:relative;overflow:hidden;margin-bottom:1.5rem}
.pc .num{display:flex;align-items:center;gap:.875rem;font:800 1.25rem var(--f-display)}
.pc .num i{font-style:normal;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--ink);color:var(--cr);display:flex;align-items:center;justify-content:center;font-size:1.1875rem}
.pc h3{font:800 2rem/1.02 var(--f-display);letter-spacing:-.035em;margin:1rem .375rem .625rem}
.pc p{font:500 1.0625rem/1.45 var(--f-body);color:rgba(27,20,16,.78);margin:0 .375rem .5rem}
.hand{font-family:var(--f-hand)}
.note{position:absolute;left:1.5rem;top:1.125rem;width:16.375rem;height:16.75rem;background:#fffdf8;border-radius:.625rem;transform:rotate(-4deg);box-shadow:0 1.125rem 1.875rem rgba(120,50,10,.18);padding:1.875rem 1.375rem 0;background-image:repeating-linear-gradient(transparent 0 1.9375rem,#e9dccd 1.9375rem 2rem);background-position:0 1.125rem}
.note::before{content:"";position:absolute;left:1.125rem;right:1.125rem;top:.625rem;height:.625rem;background:radial-gradient(circle,var(--sand) .1875rem,transparent .25rem) 0 0/1.25rem .625rem repeat-x}
.note div{font:600 1.375rem/2rem var(--f-hand);color:#2b211b;white-space:nowrap}
.note div.t{font-weight:700;font-size:1.5625rem;color:var(--or-dk)}
.note .circ{position:absolute;left:.625rem;top:10rem;width:14.125rem;height:2.25rem;border:.1875rem solid var(--or);border-radius:50%;transform:rotate(-2deg)}
.sticky{position:absolute;right:.875rem;top:12.875rem;width:8.25rem;height:5rem;background:var(--lime);transform:rotate(6deg);padding:.625rem .75rem;font:700 1.3125rem/1.02 var(--f-hand);color:var(--lk);box-shadow:0 .875rem 1.5rem rgba(28,42,5,.25);border-radius:.25rem}
.sk1{position:absolute;left:1rem;top:2.125rem;width:11rem;height:13.75rem;background:#fffdf8;border-radius:.875rem;transform:rotate(-6deg);padding:.875rem;box-shadow:0 .875rem 1.5rem rgba(28,42,5,.16)}
.sk1 .bx{border:.15625rem dashed #8b9a72;border-radius:.5rem;margin-bottom:.5rem;font:600 1.125rem/1 var(--f-hand);color:#5d6b44;padding:.375rem .5rem}
.sk2{position:absolute;right:1rem;top:3.875rem;width:12rem;height:13.625rem;border-radius:1rem;transform:rotate(4deg);overflow:hidden;box-shadow:0 1.375rem 2.5rem rgba(28,42,5,.32)}
.sk2 .ui{grid-template-columns:1.875rem 1fr}
.sk2 .ui-side{padding:.75rem .375rem;gap:.375rem}
.sk2 .ui-side span{height:.625rem;padding:0;border-radius:.25rem;background:#2a1f19}
.sk2 .ui-side span.on{background:var(--or)}
.sk2 .ui-main{padding:.75rem .625rem;gap:.5rem}
.sk2 .ui-top b{font-size:.8125rem}
.sk2 .ui-cal{grid-template-columns:repeat(3,1fr);gap:.3125rem}
.sk2 .ui-ev{font-size:.65625rem;padding:.3125rem .375rem;left:.25rem;right:.25rem}
.arr{position:absolute;left:9.375rem;top:.375rem;width:7.5rem;height:4.375rem}
.dv-lap{position:absolute;left:1.75rem;top:2.75rem;width:15.625rem}
.dv-lap .s{height:9.75rem;border-radius:.75rem .75rem 0 0;background:var(--dev);padding:.4375rem .4375rem 0;overflow:hidden}
.dv-lap .s>div{height:100%;border-radius:.375rem .375rem 0 0;overflow:hidden}
.dv-lap .bs{height:.75rem;margin:0 -1.125rem;background:linear-gradient(#d9cfc6,#a99d93);border-radius:0 0 .75rem .75rem}
.dv-lap .ui{grid-template-columns:3.25rem 1fr;font-size:.6875rem}
.dv-lap .ui-side{padding:.625rem .4375rem;gap:.3125rem}
.dv-lap .ui-side b{font-size:.6875rem;margin-bottom:.25rem}
.dv-lap .ui-side span{height:.5625rem;padding:0;border-radius:.1875rem;background:#2a1f19}
.dv-lap .ui-side span.on{background:var(--or)}
.dv-lap .ui-main{padding:.625rem;gap:.4375rem}
.dv-lap .ui-top b{font-size:.75rem}
.dv-lap .ui-cal{gap:.25rem}
.dv-lap .ui-col>i{font-size:.5625rem;left:.3125rem;top:.3125rem}
.dv-lap .ui-ev{left:.1875rem;right:.1875rem;height:1.25rem;padding:0}
.dv-ph{position:absolute;left:14.75rem;top:5.25rem;width:6rem;border-radius:1.125rem;background:var(--dev);padding:.3125rem;transform:rotate(5deg);box-shadow:0 1rem 1.875rem rgba(60,10,30,.3)}
.dv-ph div{height:11rem;border-radius:.8125rem;background:#fff;padding:1.125rem .5rem .5rem;display:flex;flex-direction:column;gap:.3125rem}
.dv-ph div i{display:block;height:1rem;border-radius:.3125rem;background:#f4ece6}
.dv-ph div i.on{background:var(--or)}
.dv-ph div i.k{height:.625rem;width:70%;background:var(--ink)}
.bdgs{position:absolute;left:1.125rem;bottom:1.125rem;display:flex;flex-wrap:wrap;gap:.375rem;width:21.25rem}
.bdgs span{display:inline-flex;align-items:center;gap:.375rem;background:#fff;border-radius:var(--r-pill);padding:.4375rem .6875rem .4375rem .5rem;font:700 .78125rem var(--f-body);box-shadow:0 .375rem .875rem rgba(60,10,30,.12)}
.bdgs span i{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center}

/* ---------- automation ---------- */
.au{grid-template-rows:15.25rem 15.25rem 15.25rem}
.aub{grid-column:1/9;grid-row:1/4;background:var(--bl);padding:1.625rem 1.75rem}
.tabs{display:flex;gap:.5rem;align-items:center;font:600 .9375rem var(--f-body);color:#fff}
.tabs>*{padding:.625rem 1.125rem;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.tabs>.on{background:#fff;color:var(--bl)}
.tabs .demo{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;font-size:.8125rem;padding:.4375rem .75rem}
.win{position:absolute;left:1.75rem;right:1.75rem;top:5.375rem;bottom:6.5rem;background:#fbf8f5;border-radius:1.125rem;box-shadow:0 1.875rem 4.375rem rgba(5,10,60,.45);overflow:hidden;font-family:var(--f-body);font-size:.8125rem}
.win .bar{height:2.75rem;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 1rem;gap:.875rem}
.win .dots{display:flex;gap:.375rem}.win .dots i{width:.6875rem;height:.6875rem;border-radius:50%;background:#ff5f57}.win .dots i+i{background:#febc2e}.win .dots i+i+i{background:#28c840}
.win .bar b{font-size:.875rem}
.win .bar b span{color:var(--or)}
.win .bar small{margin-left:auto;font-size:.75rem;color:var(--gray)}
.crumb{display:flex;align-items:center;gap:.625rem;padding:.875rem 1.125rem .75rem}
.crumb span{color:var(--gray)}
.crumb b{font:800 1.3125rem var(--f-display);letter-spacing:-.02em}
.crumb .cnt{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--gray);background:#f1e9e1;padding:.3125rem .625rem;border-radius:var(--r-pill)}
.wb{display:grid;grid-template-columns:14.125rem 1fr 15.5rem;gap:.875rem;padding:0 1rem 1rem;height:calc(100% - 6rem)}
.lst{display:flex;flex-direction:column;gap:.5rem}
.li2{background:#fff;border-radius:.875rem;padding:.6875rem .8125rem;border:.09375rem solid var(--line-2)}
.li2 .a{display:flex;justify-content:space-between;font-weight:700;font-size:.84375rem}
.li2 .c{display:flex;justify-content:space-between;align-items:center;margin-top:.375rem;font-size:.71875rem;color:var(--gray)}
.li2 .s{font-size:.6875rem;font-weight:700;padding:.1875rem .5rem;border-radius:var(--r-pill);background:#eef0ff;color:#2737c4}
.li2 .s.p{background:var(--warn-bg);color:var(--warn)}
.li2.on{border-color:var(--or);box-shadow:0 .5rem 1.125rem rgba(255,106,43,.18)}
.drop{margin-top:auto;border:.125rem dashed #e2d3c4;border-radius:.875rem;padding:.75rem;font-size:.75rem;color:var(--gray);text-align:center;line-height:1.4}
.pv{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.pv .meta{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--gray)}
.pv .meta b{display:inline-flex;align-items:center;gap:.375rem;color:var(--ink);font-size:.75rem;background:#fff;border:1px solid var(--line-2);padding:.25rem .5625rem;border-radius:.5rem}
.paper{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:.75rem;box-shadow:0 .25rem 1rem rgba(60,40,20,.08);padding:1.125rem 1.125rem;position:relative;font-size:.71875rem;color:#4a3c33}
.paper .ph1{display:flex;justify-content:space-between;align-items:flex-start}
.paper .ph1 b{font:800 1.0625rem var(--f-display);color:var(--ink);letter-spacing:-.01em}
.paper .md{font-size:.65625rem;font-weight:700;letter-spacing:.06em;color:#b06a3c;border:.09375rem solid #f1c7a8;padding:.1875rem .4375rem;border-radius:.375rem}
.paper .pr{display:grid;grid-template-columns:1fr 1fr;gap:.75rem .625rem;margin:1rem 0 1.125rem}
.paper .pr div small{display:block;font-size:.6875rem;color:#9b8b7f;margin-bottom:.3125rem}
.paper .pr div b{color:var(--ink);font-size:.78125rem}
.hl{display:inline-block;outline:.125rem solid #ff8a2b;background:#fff3ea;border-radius:.375rem;padding:1px .375rem;margin-left:-.375rem}
.ptab{width:100%;border-collapse:collapse;font-size:.71875rem}
.ptab th{font-weight:600;color:#9b8b7f;text-align:left;padding:.375rem 0;border-bottom:1px solid var(--line);font-size:.6875rem}
.ptab td{padding:.5rem 0;border-bottom:1px dashed var(--line);color:var(--ink)}
.ptab td:last-child,.ptab th:last-child{text-align:right}
.ptot{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;font-weight:700;color:var(--ink)}
.ptot b{font:800 1.25rem var(--f-display)}
.rec{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:#fff3ea;border-radius:.625rem;padding:.625rem .75rem;font-size:.71875rem;color:#9a3d0a}
.rec span{display:flex;align-items:center;gap:.375rem;font-weight:700}
.rec b{font-weight:600;color:#6b4a35}
.pnl{background:#fff;border-radius:.875rem;border:.09375rem solid var(--line-2);padding:.9375rem;display:flex;flex-direction:column;gap:.5625rem}
.pnl>b{font:800 1rem var(--f-display)}
.prog{height:.375rem;border-radius:.1875rem;background:#f1e9e1;overflow:hidden}.prog i{display:block;height:100%;width:70%;background:linear-gradient(90deg,#ff5a1f,#ffb347)}
.chk{display:flex;gap:.5625rem;align-items:flex-start;font-size:.78125rem;font-weight:600;line-height:1.3}
.chk i{width:1.25rem;height:1.25rem;border-radius:50%;flex:none;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center}
.chk.w i{background:var(--warn-bg);color:#c26a00;font:800 .8125rem var(--f-body);font-style:normal}
.opt{display:flex;flex-direction:column;gap:.3125rem;margin-left:1.8125rem}
.opt span{display:flex;align-items:center;gap:.5rem;font-size:.75rem;padding:.4375rem .5625rem;border-radius:.5625rem;background:var(--paper)}
.opt span::before{content:"";width:.75rem;height:.75rem;border-radius:50%;border:.125rem solid #cdbcae;flex:none;box-sizing:border-box}
.opt span.on{background:#fff3ea;outline:.09375rem solid #ff8a2b}
.opt span.on::before{border:.25rem solid var(--or)}
.opt span em{margin-left:auto;font-style:normal;font-size:.65625rem;font-weight:700;color:var(--or-dk)}
.sum{background:var(--paper);border-radius:.625rem;padding:.5625rem .6875rem;font-size:.75rem;display:flex;flex-direction:column;gap:.3125rem}
.sum div{display:flex;justify-content:space-between}.sum span{color:var(--gray)}
.appr{margin-top:auto;background:var(--ink);color:#fff;border-radius:.75rem;padding:.8125rem;text-align:center;font-weight:700;font-size:.84375rem}
.flow{position:absolute;left:1.75rem;right:1.75rem;bottom:1.75rem;height:3.5rem;display:flex;align-items:center;gap:.5rem;font:600 .875rem var(--f-body);color:#fff}
.flow span{flex:1;display:flex;align-items:center;gap:.5rem;height:100%;padding:0 .875rem;border-radius:1rem;background:rgba(255,255,255,.14);white-space:nowrap}
.flow span i{width:1.375rem;height:1.375rem;border-radius:50%;background:#fff;color:var(--bl);font:800 .75rem var(--f-body);font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.flow span.on{background:var(--lime);color:var(--lk);flex:1.25}
.flow span.on i{background:var(--lk);color:var(--lime)}
.flow b{font:700 1.25rem var(--f-body);opacity:.6}
.bn{grid-column:9/13;padding:1.625rem 1.625rem 1.5rem}
.bn h3{font:800 1.6875rem/1.05 var(--f-display);letter-spacing:-.03em}
.bn>p{font:500 .96875rem/1.4 var(--f-body);margin-top:.5rem;opacity:.82;max-width:23.125rem}
.bn .mini{position:absolute;left:1.625rem;right:1.625rem;bottom:1.5rem}
.fl{background:#fff;border-radius:1rem;padding:.5rem .75rem;font-size:.78125rem;box-shadow:0 .625rem 1.5rem rgba(28,42,5,.14)}
.fl div{display:flex;align-items:center;gap:.625rem;padding:.375rem 0;border-bottom:1px dashed #e4ead6}
.fl div:last-child{border:0}
.fl span{width:4.875rem;color:#6f7a5c;font-weight:500}
.fl b{flex:1}
.fl i{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center}
.em{display:flex;align-items:center;gap:.625rem}
.em .msg{flex:1;background:var(--paper);border-radius:.875rem;padding:.625rem .75rem;font-size:.78125rem;min-width:0}
.em .msg small{display:block;color:var(--gray);font-size:.71875rem}
.em .msg b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em .to{display:flex;flex-direction:column;gap:.375rem;align-items:flex-start;font-size:.75rem;font-weight:700}
.em .to span{padding:.3125rem .5625rem;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn)}
.em .to span.p{display:flex;align-items:center;gap:.375rem;background:var(--bl);color:#fff;padding:.25rem .625rem .25rem .25rem}
.em .to span.p i{width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;color:var(--bl);font:800 .625rem var(--f-body);font-style:normal;display:flex;align-items:center;justify-content:center}
.chat{display:flex;flex-direction:column;gap:.3125rem;font-size:.78125rem}
.chat span{max-width:82%;padding:.4375rem .75rem;border-radius:.875rem;line-height:1.3}
.chat .u{background:#3a2c23;align-self:flex-start;border-bottom-left-radius:.25rem}
.chat .b{background:var(--lime);color:var(--lk);align-self:flex-end;border-bottom-right-radius:.25rem}
.chat .h{align-self:center;max-width:none;background:transparent;border:.09375rem dashed var(--mut);color:var(--pe);font-weight:700;font-size:.75rem;display:flex;align-items:center;gap:.375rem}
.note2{display:flex;align-items:center;gap:.625rem;margin-top:1.125rem;font:500 .9375rem var(--f-body);color:var(--mut)}
.note2 i{width:1.375rem;height:1.375rem;border-radius:50%;border:.125rem solid var(--sand);display:flex;align-items:center;justify-content:center;font:700 .75rem var(--f-body);font-style:normal}

/* ---------- showcase ---------- */
.shc{text-align:center;margin-bottom:2.75rem}
.shc .h2{max-width:62.5rem;margin:0 auto}
.shc p{font:500 1.25rem/1.45 var(--f-body);color:var(--mut);margin-top:1.125rem}
.sc{grid-template-rows:45rem 45rem}
.sc .t{padding:2.5rem 2.625rem}
.cat{display:inline-flex;font:700 .78125rem var(--f-body);letter-spacing:.07em;text-transform:uppercase;padding:.4375rem .75rem;border-radius:var(--r-pill);background:rgba(255,255,255,.2)}
.sc h3{font:800 3rem/1 var(--f-display);letter-spacing:-.04em;margin:1rem 0 .625rem}
.sc p.d{font:500 1.125rem/1.4 var(--f-body);opacity:.9;max-width:26.25rem}
.try{display:inline-flex;align-items:center;gap:.625rem;margin-top:1.375rem;font:600 1rem var(--f-body);padding:.875rem 1.25rem;border-radius:.875rem;background:#fff;color:var(--ink);box-shadow:0 .625rem 1.5rem rgba(0,0,0,.12)}
.try svg{width:1.0625rem;height:1.0625rem}
.sc .demo{position:absolute;top:2.75rem;right:2.625rem;background:rgba(255,255,255,.22)}
.sA{grid-column:1/9;grid-row:1;background:var(--og);color:#fff}
.sA .hd{display:flex;justify-content:space-between;align-items:flex-end}
.sA .hd .try{margin-top:0}
.sB{grid-column:9/13;grid-row:1;background:var(--ink);color:var(--cr)}
.sB .cat{background:rgba(255,246,236,.12)}
.sB .demo{background:rgba(255,246,236,.12)}
.sB .try{background:var(--or);color:#fff}
.sC{grid-column:1/6;grid-row:2;background:var(--bl);color:#fff}
.sD{grid-column:6/13;grid-row:2;background:var(--mi);color:var(--forest)}
.sD .cat,.sD .demo{background:rgba(14,51,38,.1)}
.sD .try{background:var(--forest);color:#fff}
/* laptop */
.lap{position:absolute;left:4.125rem;top:16.375rem;width:48.5rem}
.lap .s{height:27.5rem;background:var(--dev);border-radius:1.125rem 1.125rem 0 0;padding:.6875rem .6875rem 0}
.lap .s>div{height:100%;border-radius:.5625rem .5625rem 0 0;overflow:hidden}
.lap .bs{height:1.25rem;margin:0 -2.125rem;background:linear-gradient(#efe6de,#b9aca1);border-radius:0 0 1.125rem 1.125rem;position:relative}
.lap .bs::before{content:"";position:absolute;left:50%;top:0;width:7.5rem;margin-left:-3.75rem;height:.4375rem;background:#a39588;border-radius:0 0 .5rem .5rem}
.fs{display:grid;grid-template-columns:8.25rem 14.75rem 1fr;height:100%;background:#fbf8f5;font-family:var(--f-body);font-size:.78125rem;color:var(--ink)}
.fs .sd{background:var(--ink);color:var(--mut-dk);padding:1rem .625rem;display:flex;flex-direction:column;gap:.25rem;font-weight:500}
.fs .sd b{color:#fff3e8;font-size:1rem;margin:0 0 .75rem .375rem}
.fs .sd span{padding:.5rem .625rem;border-radius:.5rem}
.fs .sd span.on{background:var(--or);color:var(--ink);font-weight:600}
.fs .ls{border-right:1px solid var(--line);padding:.875rem .75rem;display:flex;flex-direction:column;gap:.4375rem}
.fs .ls .sr{background:#fff;border:1px solid var(--line);border-radius:.625rem;padding:.5rem .625rem;color:var(--stone);font-size:.75rem}
.fs .ls .z{border-radius:.75rem;padding:.5625rem .6875rem;background:#fff;border:1px solid #f1e8df}
.fs .ls .z.on{border:.09375rem solid var(--or);background:#fff4ec}
.fs .ls .z div{display:flex;justify-content:space-between;font-weight:700}
.fs .ls .z small{display:flex;justify-content:space-between;color:var(--gray);font-size:.71875rem;margin-top:.1875rem}
.fs .dt{padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.75rem}
.fs .dt .h{display:flex;justify-content:space-between;align-items:flex-start}
.fs .dt .h small{font-size:.71875rem;color:var(--gray);font-weight:600}
.fs .dt .h b{display:block;font:800 1.375rem var(--f-display);letter-spacing:-.02em}
.fs .dt .h em{font-style:normal;font-size:.71875rem;font-weight:700;background:var(--ok-bg);color:#0a6b3a;padding:.3125rem .625rem;border-radius:var(--r-pill)}
.fs .inf{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.fs .inf div{background:#fff;border:1px solid #f1e8df;border-radius:.625rem;padding:.5rem .625rem;font-weight:600}
.fs .inf small{display:block;font-size:.6875rem;color:var(--gray);font-weight:500}
.fs table{width:100%;border-collapse:collapse;background:#fff;border-radius:.75rem;overflow:hidden;border:1px solid #f1e8df}
.fs th{text-align:left;font-size:.6875rem;color:var(--gray);font-weight:600;padding:.5rem .75rem;background:#f7f1eb}
.fs td{padding:.625rem .75rem;border-top:1px solid #f4ece4}
.fs td:last-child,.fs th:last-child{text-align:right}
.fs tr.tt td{font:800 1.0625rem var(--f-display);background:#fff4ec}
.fs .nt{background:#fff;border:1px dashed #e6d6c6;border-radius:.625rem;padding:.5625rem .75rem;color:#4a3c33;font-size:.75rem}
.fs .nt b{display:block;font-size:.6875rem;color:var(--gray);margin-bottom:.125rem}
.fs .ac{display:flex;gap:.5rem}
.fs .ac span{padding:.625rem .875rem;border-radius:.625rem;font-weight:700;background:#fff;border:1px solid var(--line)}
.fs .ac span.p{background:var(--or);color:#fff;border-color:var(--or)}
.sA .flo{position:absolute;right:1.875rem;top:13.875rem;background:var(--lime);color:var(--lk);border-radius:1rem;padding:.75rem .875rem;font:600 .8125rem/1.3 var(--f-body);transform:rotate(4deg);box-shadow:0 1rem 1.875rem rgba(120,40,0,.28);z-index:3;display:flex;gap:.625rem;align-items:center}
.sA .flo b{display:block;font-size:.875rem}
.sA .flo i{width:1.875rem;height:1.875rem;border-radius:.5625rem;background:var(--lk);color:var(--lime);display:flex;align-items:center;justify-content:center}
/* tablet B */
.tab{position:absolute;left:1.875rem;top:20.625rem;width:23.25rem;height:29.375rem;background:var(--dev);border-radius:var(--r-tile);padding:.75rem;transform:rotate(-4deg);box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.5)}
.tab>div{height:100%;border-radius:1.25rem;overflow:hidden}
.rv{height:100%;background:var(--cr);font-family:var(--f-body);font-size:.75rem;color:var(--ink);padding:1rem .875rem;display:flex;flex-direction:column;gap:.625rem}
.rv .h{display:flex;justify-content:space-between;align-items:center}
.rv .h b{font:800 1.1875rem var(--f-display);letter-spacing:-.02em}
.rv .h small{font-size:.6875rem;color:var(--gray);font-weight:600}
.rv .tm{display:flex;gap:.375rem}
.rv .tm span{display:flex;align-items:center;gap:.3125rem;font-size:.6875rem;font-weight:600;background:#fff;border-radius:var(--r-pill);padding:.1875rem .5625rem .1875rem .1875rem;border:1px solid #f0e3d6}
.rv .tm span i{background:var(--c);width:1.125rem;height:1.125rem;border-radius:50%;font:700 .5625rem var(--f-body);font-style:normal;display:flex;align-items:center;justify-content:center;color:#fff}
.wk{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.3125rem}
.wk>div{background:#fff;border-radius:.5625rem;position:relative;border:1px solid #f3e8dd}
.wk>div>i{position:absolute;left:0;right:0;top:.375rem;text-align:center;font-style:normal;font-size:.6875rem;font-weight:700;color:var(--gray)}
.ev{position:absolute;top:var(--y);height:var(--h);left:.1875rem;right:.1875rem;border-radius:.4375rem;padding:.3125rem .3125rem;font-size:.6875rem;line-height:1.25;font-weight:600;overflow:hidden}
.ev b{display:block;font-weight:800}
.ev.a{background:#ffe0cc;color:#8a3208;border-left:.1875rem solid var(--or)}
.ev.b{background:#dfe3ff;color:#1e2aa0;border-left:.1875rem solid var(--bl)}
.ev.c{background:#e8f8c9;color:#2c4209;border-left:.1875rem solid #86b42a}
.sB .ph{position:absolute;left:13.875rem;top:32.25rem;width:12.25rem;transform:rotate(7deg);border-radius:2rem;padding:.5rem;box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.55)}
.sB .ph-scr{border-radius:1.5625rem;padding:1.875rem .875rem 1rem;gap:.5rem;font-size:.75rem}
.sB .ph-scr>b{font-size:1.0625rem}
.sB .ph-scr::before{top:.5625rem;width:3.375rem;height:.875rem;margin-left:-1.6875rem}
/* phone C */
.sC .ph{position:absolute;left:16.875rem;top:16.375rem;width:16.375rem;transform:rotate(4deg);border-radius:2.5rem;padding:.5625rem;box-shadow:0 2.125rem 4.375rem rgba(5,10,60,.5)}
.sC .ph-scr{border-radius:2rem;padding:2.25rem 1rem 1.125rem;gap:.5rem;height:32.5rem}
.ob .stp{display:flex;gap:.3125rem;font-size:.6875rem;font-weight:700}
.ob .stp span{flex:1;text-align:center;padding:.375rem 0;border-radius:.5rem;background:var(--field);color:var(--stone)}
.ob .stp span.d{background:#dfe3ff;color:#1e2aa0}
.ob .stp span.on{background:var(--bl);color:#fff}
.cust{display:flex;align-items:center;gap:.625rem;background:var(--field);border-radius:.875rem;padding:.625rem .75rem}
.cust i{width:2.125rem;height:2.125rem;border-radius:.625rem;background:var(--pk);color:var(--plum);font:800 .8125rem var(--f-body);font-style:normal;display:flex;align-items:center;justify-content:center}
.cust small{display:block;color:#8a8079;font-size:.6875rem}
.cart{display:flex;align-items:center;gap:.625rem;padding:.4375rem .125rem;border-bottom:1px dashed #ece4dc;font-size:.78125rem}
.cart .im{background:var(--c);width:1.875rem;height:1.875rem;border-radius:.625rem;flex:none}
.cart div{flex:1}
.cart div small{display:block;color:#8a8079;font-size:.6875rem}
.cart .q{display:flex;align-items:center;gap:.375rem;font-weight:700}
.cart .q i{width:1.25rem;height:1.25rem;border-radius:.375rem;background:var(--field);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.8125rem}
.ctot{display:flex;justify-content:space-between;align-items:baseline;padding-top:.25rem}
.ctot b{font:800 1.5rem var(--f-display)}
.sC .go{background:var(--bl)}
.sC .fc{position:absolute;left:2.5rem;top:26.875rem;width:13.625rem;background:#fff;color:var(--ink);border-radius:1.125rem;padding:.875rem 1rem;font:500 .78125rem/1.35 var(--f-body);transform:rotate(-4deg);box-shadow:0 1.5rem 2.75rem rgba(5,10,60,.4);z-index:3}
.sC .fc b{display:block;font:800 1.0625rem var(--f-display);margin:.1875rem 0 .5rem}
.sC .fc small{color:var(--gray);font-weight:600;font-size:.71875rem}
.sC .fc .pp{display:flex;gap:.375rem;flex-wrap:wrap}
.sC .fc .pp span{font-size:.6875rem;font-weight:700;padding:.25rem .5rem;border-radius:var(--r-pill);background:var(--ok-bg);color:#0a6b3a}
.sC .fc .pp span.n{background:#eef0ff;color:#2737c4}
/* e-obec D */
.brw{position:absolute;left:2.75rem;top:17.25rem;width:46.25rem;height:30rem;background:#fff;border-radius:1.125rem;box-shadow:0 1.875rem 3.75rem rgba(14,51,38,.3);overflow:hidden;font-family:var(--f-body);font-size:.78125rem;color:#13261f;transform:rotate(-1.5deg)}
.brw .bar{height:2.5rem;background:#eef5f1;display:flex;align-items:center;gap:.75rem;padding:0 .875rem}
.brw .bar .dots{display:flex;gap:.375rem}.brw .bar .dots i{width:.625rem;height:.625rem;border-radius:50%;background:#cfdcd5}
.brw .bar .url{flex:1;max-width:20.625rem;margin:0 auto;background:#fff;border-radius:.5rem;padding:.375rem .75rem;color:#6b8378;font-size:.71875rem;text-align:center}
.eo-h{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--forest);color:#fff}
.eo-h b{font:800 1.1875rem var(--f-display);letter-spacing:-.01em}
.eo-h small{display:block;font-size:.6875rem;color:#9fd8c0}
.eo-h .eonav{display:flex;gap:1rem;margin-left:auto;font-size:.78125rem;color:#cfe9de;font-weight:500}
.eo-h .eonav span.on{color:#fff;font-weight:700;border-bottom:.125rem solid var(--mi);padding-bottom:.1875rem}
.eo-b{display:grid;grid-template-columns:1fr 15.625rem;gap:1rem;padding:1rem 1.25rem}
.eo-b .h4{font:800 .9375rem var(--f-display);margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:baseline}
.eo-b .h4 small{font:600 .71875rem var(--f-body);color:#2a8a63}
.oz{display:flex;gap:.75rem;padding:.625rem .75rem;border-radius:.75rem;background:#f4faf7;margin-bottom:.4375rem;align-items:flex-start}
.oz .dt2{width:2.75rem;flex:none;text-align:center;background:#fff;border-radius:.5625rem;padding:.25rem 0;font-size:.65625rem;color:#6b8378;font-weight:600;border:1px solid #dcebe3}
.oz .dt2 b{display:block;font:800 1.0625rem var(--f-display);color:#13261f}
.oz div b{display:block;font-size:.8125rem}
.oz div small{display:block;color:#6b8378;font-size:.71875rem;margin-top:.125rem}
.oz .tg{margin-left:auto;font-size:.65625rem;font-weight:700;padding:.1875rem .5rem;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn);flex:none}
.uh{background:#f4faf7;border-radius:.75rem;padding:.625rem .75rem;margin-bottom:.625rem}
.uh div{display:flex;justify-content:space-between;padding:.1875rem 0;font-size:.75rem}
.uh div span{color:#6b8378}
.uh div.cl b{color:#a8b8b0;font-weight:500}
.zd2{background:var(--forest);color:#fff;border-radius:.875rem;padding:.8125rem}
.zd2 b{display:block;font:800 .9375rem var(--f-display);margin-bottom:.5rem}
.zd2 .f{background:rgba(255,255,255,.1);border-radius:.5625rem;padding:.4375rem .625rem;font-size:.75rem;margin-bottom:.375rem}
.zd2 .f small{display:block;font-size:.65625rem;color:#9fd8c0}
.zd2 .gb{background:var(--mi);color:var(--forest);border-radius:.5625rem;padding:.5625rem;text-align:center;font-weight:700;font-size:.78125rem}
.crest{width:2.125rem;height:2.5rem;flex:none}

/* ---------- about + cta ---------- */
.ab{grid-template-rows:27.5rem}
.abm{grid-column:1/5;background:var(--ink);display:flex;align-items:center;justify-content:center}
.abm .rg{position:absolute;width:21.875rem;height:21.875rem;left:50%;top:50%;margin:-10.9375rem 0 0 -10.9375rem}
.abm .mono{width:12.875rem;height:12.875rem;border-radius:50%;background:var(--og);display:flex;align-items:center;justify-content:center;font:800 5.375rem var(--f-display);letter-spacing:-.05em;color:#fff;box-shadow:0 1.875rem 3.75rem rgba(255,90,31,.35);position:relative}
.abm .mono::after{content:"";position:absolute;right:.375rem;bottom:.875rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--lime);border:.375rem solid var(--ink)}
.abt{grid-column:5/13;background:#fff;padding:2.875rem 3rem}
.abt .kick{background:var(--cr)}
.abt h2{font:800 3.75rem/1.02 var(--f-display);letter-spacing:-.045em;max-width:45rem}
.abt p{font:500 1.1875rem/1.5 var(--f-body);color:#4a3c33;max-width:40rem;margin-top:1.125rem}
.svc{list-style:none;position:absolute;left:3rem;right:3rem;bottom:2.75rem;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:.75rem}
.svc li{border-radius:1.125rem;padding:.875rem 1rem;display:flex;align-items:center;gap:.75rem;font:700 .96875rem/1.25 var(--f-body)}
.svc li i{width:2.625rem;height:2.625rem;border-radius:.75rem;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55)}
.svc li i svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta{margin-top:1rem;height:37.5rem;background:var(--og);color:#fff;padding:4rem 4rem}
.cta h2{font:800 6.5rem/.96 var(--f-display);letter-spacing:-.05em;max-width:51.25rem;position:relative;z-index:2}
.cta p{font:500 1.375rem/1.45 var(--f-body);max-width:32.5rem;margin-top:1.5rem;color:rgba(255,255,255,.94);position:relative;z-index:2}
.cta .row{position:absolute;left:4rem;bottom:3.75rem;display:flex;align-items:center;gap:1.375rem;z-index:2}
.cta .row .btn{font-size:1.1875rem;padding:1.25rem 1.875rem;border-radius:1.125rem;box-shadow:0 1rem 2.125rem rgba(120,30,0,.25)}
.cta .who{display:flex;align-items:center;gap:.75rem;font:600 1.0625rem/1.3 var(--f-body)}
.cta .who i{width:3.125rem;height:3.125rem;border-radius:50%;background:#fff;color:var(--or);font:800 1.1875rem var(--f-display);font-style:normal;display:flex;align-items:center;justify-content:center}
.cta .who small{display:block;font-weight:500;color:rgba(255,255,255,.88);font-size:1rem}
.cta .ring{position:absolute;right:-10rem;top:-12.5rem;width:38.75rem;height:38.75rem;border-radius:50%;border:5.625rem solid rgba(255,255,255,.13)}
.cta .ring2{position:absolute;right:15.625rem;bottom:-15rem;width:22.5rem;height:22.5rem;border-radius:50%;background:rgba(255,255,255,.1)}
.fan{position:absolute;right:4.375rem;top:6.875rem;width:26.25rem;height:25rem;z-index:1}
.fan>div{position:absolute;background:#fff;color:var(--ink);border-radius:1.375rem;padding:1.125rem 1.25rem;box-shadow:0 1.625rem 3.125rem rgba(120,30,0,.3);font-family:var(--f-body)}
.fan small{display:block;font-size:.78125rem;color:var(--mut);font-weight:600}
.fan b{display:block;font:800 1.375rem var(--f-display);letter-spacing:-.02em;margin-top:.1875rem}
.fan .f1{left:.625rem;top:1.25rem;width:15.625rem;transform:rotate(-8deg)}
.fan .f2{left:9.375rem;top:8.125rem;width:16.25rem;transform:rotate(5deg);background:var(--ink);color:var(--cr)}
.fan .f2 small{color:var(--mut-dk)}
.fan .f3{left:1.875rem;top:15.625rem;width:16.875rem;transform:rotate(-3deg);background:var(--lime);color:var(--lk)}
.fan .f3 small{color:#4d5f2a}
.fan .ln2{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem;font-size:.8125rem;font-weight:600}
.fan .pill2{font-size:.71875rem;font-weight:700;padding:.25rem .5625rem;border-radius:var(--r-pill);background:var(--ok-bg);color:#0a6b3a}

/* ---------- footer ---------- */
.footer{margin:1rem max(2.25rem,calc((100% - 85.5rem) / 2)) 2.25rem;background:var(--ink);color:var(--cr);border-radius:var(--r-block);padding:3.5rem 3.5rem 2.125rem;position:relative;overflow:hidden}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.ft .lg{font:800 7.5rem/.9 var(--f-display);letter-spacing:-.04em}
.ft .lg span{color:var(--or)}
.ft .tg{font:500 1.125rem/1.45 var(--f-body);color:var(--sand);margin-top:1.375rem;max-width:26.25rem}
.ft h2{font:600 .8125rem var(--f-body);color:var(--mut-dk);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.ft ul{list-style:none;font:500 1.0625rem/2 var(--f-body)}
.ft .ml{display:inline-flex;align-items:center;gap:.625rem;margin-top:.375rem;background:rgba(255,246,236,.08);padding:.75rem 1rem;border-radius:.875rem;font:600 1rem var(--f-body)}
.fb{display:flex;justify-content:space-between;margin-top:3.25rem;padding-top:1.5rem;border-top:1px solid #33271f;font:500 .9375rem/1.1875rem var(--f-body);color:var(--mut-dk)}
.fb .sw{display:flex;gap:.5rem}
.fb .sw i{background:var(--c);width:1rem;height:1rem;border-radius:50%}

/* ---------- jednorazové varianty (v návrhu boli inline) ---------- */
.th--og{background:linear-gradient(135deg,#ff5a1f,#ffb347)}
.th--cr{background:var(--cr)}
.th--bl{background:var(--bl)}
.th--mi{background:var(--mi)}
.stt--pk{background:#ffe3f0;color:#9c1f5c}
.tick .gap{height:.5rem}
.pc>.p1{background:var(--pe)}
.pc>.p1 .vis{background:#ffc89a}
.pc>.p2{background:var(--lime)}
.pc>.p2 .vis{background:#b3e04f}
.pc>.p3{background:var(--pk)}
.pc>.p3 .vis{background:#ff8fc2}
.sk1 .bx--title{height:1.625rem}
.sk1 .gr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.375rem;height:7.375rem}
.sk1 .gr .bx{height:100%;margin:0}
.sk1 .gr .bx--hl{background:rgba(255,106,43,.12)}
.sk1 .bx--add{margin-top:.5rem;text-align:center}
.bdgs span i.add{background:var(--or)}
.paper .ph1 small{font-size:.6875rem;color:#9b8b7f}
.abm .rg text{font:700 17px var(--f-body);letter-spacing:4px} /* px = jednotky viewBoxu SVG, škáluje sa so SVG */
.svc .s1{background:var(--lime);color:var(--lk)}
.svc .s2{background:var(--pe)}
.svc .s3{background:#dfe3ff;color:#1e2aa0}
.cta h2 .ls{letter-spacing:.03em}
.fan .pill2--or{background:var(--or);color:#fff}
.ft h2.sp{margin-top:1.875rem}
.ft ul.tight{line-height:1.8}

/* farba fokusu na farebných plochách */
.h1t,.aub,.sA,.sB,.sC,.cta{--focus:#fff}
.footer{--focus:var(--lime)}
.proc__arrow{width:11.875rem;height:7.5rem}
.bn.r1{grid-row:1}
.bn.r2{grid-row:2}
.bn.r3{grid-row:3}
.frg.row small{white-space:nowrap}