/* e11 — úvod (hero): matné sklo, šikmý ťah fixky, zvislá čiara fotka ↔ komiks, konštrukčné čiary, intro „Skicár“, scroll šípka.
   Zlúčené z hero.css + hero-tma.css + hero-porovnanie.css + intro.css (10. 11. 2026). */
.cta-dim{height:44px;padding:0 18px}
.cta-dim .tx{font-size:12px;padding:0 10px}
.cta-dim .mk{left:-8px;right:-18px}
.hero{position:relative;min-height:100svh;padding:88px var(--pad) 28px;display:flex;align-items:center;overflow:hidden}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,30px)}
.kicker{font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.slogan{font:700 clamp(44px,6.4vw,104px)/.95 var(--display);letter-spacing:-.04em;max-width:11ch}
.lead{max-width:34ch;color:var(--ink-2)}
.cta-row{margin-top:4px}
.stage{position:relative;z-index:2;justify-self:end;width:min(100%,clamp(300px,34vw,520px));aspect-ratio:2/3;max-height:min(78svh,780px)}
.portrait{position:absolute;inset:0;overflow:hidden;background:#2a2a2a;cursor:ns-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* plocha na chytenie fixky prstom: sleduje pás (--ly), šikmý pás pokrýva približne */
.mk-grip{position:absolute;left:0;right:0;top:calc((var(--ly) - 22) * 1%);height:30%;z-index:2;touch-action:none;cursor:ns-resize}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;pointer-events:none;-webkit-user-drag:none}
.hero::after{position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size:160px 160px}
.hero::after{content:"";opacity:.14;z-index:1}
.blk{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.blk.front{z-index:3;mix-blend-mode:multiply}
.blk.front .g{transform:translateY(calc(var(--ly) * 1.5px))}
.meta-v{position:absolute;right:-26px;top:0;writing-mode:vertical-rl;font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
@media(max-width:860px){
  .hero{padding:84px var(--pad) 72px;align-items:flex-start;min-height:100svh}
  .hero-grid{grid-template-columns:1fr;gap:22px;align-items:start}
  .stage{order:-1;justify-self:stretch;width:calc(100% - 24px);margin-left:12px;max-width:none;aspect-ratio:4/4.2;max-height:min(42svh,420px);height:min(42svh,420px)}
  .portrait img{object-position:50% 14%}
  .meta-v{display:none}
  .slogan{font-size:clamp(40px,12vw,56px);max-width:12ch}
  .lead{font-size:15px;max-width:38ch}
  .copy{gap:14px}
}
@media(max-width:860px) and (max-height:720px){
  .stage{height:min(38svh,320px);max-height:320px}
  .lead{display:none}
  .copy{gap:12px}
}
.tma{--night:#0B0D0F;--on:#ECEAE6;--on-2:#8E8C88}
.tma body{background:var(--paper)}
.tma .site-head{color:var(--on)}
.tma .site-head .dim::before,.tma .site-head .dim::after,.tma .site-head .dim .bar{background:var(--on)}
.tma .site-head .dim .tx{background:var(--night)}
.tma .hero{background:var(--night);color:var(--on)}
.tma .hero::after{opacity:.07}
.tma .hero-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.tma .copy-l{align-self:center}
.tma .copy-r{align-self:end;align-items:flex-start;padding-bottom:clamp(8px,4vh,48px)}
.tma .kicker{color:var(--on-2)}
.tma .slogan{font-size:clamp(38px,4.3vw,76px);max-width:none}
.tma .lead{color:var(--on-2)}
.tma .stage{justify-self:center;width:clamp(280px,30vw,480px)}
.tma .portrait{background:#141618}
.tma .meta-v{color:var(--on-2)}
.tma .blk.front{mix-blend-mode:screen}
.tma .hero .dim::before,.tma .hero .dim::after,.tma .hero .dim .bar{background:var(--on)}
.tma .hero .dim .tx{background:var(--night)}
.tma .dim .mk{mix-blend-mode:normal}
.tma .dim:hover .tx,.tma .dim:focus-visible .tx{background:transparent;color:var(--night)}
.tma .site-head .dim:hover .tx,.tma .site-head .dim:focus-visible .tx{background:transparent;color:var(--night)}
.tma a:focus-visible{outline-color:var(--on)}
@media(max-width:860px){
  .tma .hero-grid{grid-template-columns:1fr;gap:20px}
  .tma .stage{order:-1;justify-self:stretch;width:calc(100% - 24px)}
  .tma .slogan{font-size:clamp(38px,11vw,52px)}
  .tma .copy-r{align-self:start;padding-bottom:0}
}
.tma .hero-grid{gap:clamp(28px,6vw,110px)}
.tma .stage{width:clamp(260px,27vw,440px)}
.tma .copy{min-width:0}
.tma .copy-r{padding-left:clamp(0px,2vw,32px)}
@media(max-width:860px){.tma .copy-r{padding-left:0}}
/* mobil: SCROLL v jednom riadku s Let’s talk */
@media(max-width:860px){.tma .copy-r{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:32px}.tma .copy-r .lead{flex-basis:100%}.tma .scroll-sp{margin-top:0}}/* Let’s talk a SCROLL na spoločnej základnej línii písma – prehliadač ich zarovná sám na každom zariadení *//* mobil: lead, Let’s talk a SCROLL na ľavej hrane nadpisu */
.tma .meta-v{right:auto;left:-26px;transform:rotate(180deg)}
@media(max-width:860px){
  .tma .stage{width:calc(100% - 24px)}
  .tma .slogan{font-size:clamp(34px,10.2vw,48px)}
  .tma .kicker{font-size:11px;letter-spacing:.1em}
}
@media(max-width:500px){
  .nav{gap:6px}
  .dim{padding:0 6px}
  .dim .tx{padding:0 4px;letter-spacing:.1em}
}
.tma .portrait img{object-position:50% 50%}
.tma .bgsklo{position:absolute;z-index:-2;top:-100%;left:50%;height:300%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none;user-select:none}
.tma .portrait{background:transparent;cursor:ns-resize}
.tma .stage{aspect-ratio:2/3}
@media(max-width:860px){
  .tma .stage{justify-self:center;width:min(62vw,300px);height:auto;max-height:none;aspect-ratio:2/3;margin-left:0}
}
@media(max-width:860px) and (max-height:720px){
  .tma .stage{width:min(48vw,240px);height:auto;max-height:none}
}
.tma .hero{background:#0B0D0F url(img/sklo-pozadie.webp) center/cover}
.tma .dim .bar{display:none}
.tma .dim .tx,.tma .hero .dim .tx,.tma .site-head .dim .tx{background:transparent}
.tma .dim .tx::before,.tma .dim .tx::after{content:"";position:absolute;top:50%;height:1px;background:var(--on);width:17px}
.tma .dim .tx::before{left:-10px}
.tma .dim .tx::after{right:-10px}
.tma .cta-dim .tx::before,.tma .cta-dim .tx::after{width:28px}
.tma .cta-dim .tx::before{left:-18px}
.tma .cta-dim .tx::after{right:-18px}
.tma .dim:hover .tx::before,.tma .dim:hover .tx::after,.tma .dim:focus-visible .tx::before,.tma .dim:focus-visible .tx::after{background:var(--night)}
@media(max-width:500px){
  .tma .dim .tx::before,.tma .dim .tx::after{width:10px}
  .tma .dim .tx::before{left:-6px}
  .tma .dim .tx::after{right:-6px}
}
.tma .dim .tx::before,.tma .dim .tx::after{width:13px}
.tma .cta-dim .tx::before,.tma .cta-dim .tx::after{width:23px}
@media(max-width:500px){
  .tma .dim .tx::before,.tma .dim .tx::after{width:7px}
}
.tma .blk.front{mix-blend-mode:normal}
.tma .mk-over{fill:#9E2A12;opacity:.28}
.tma .mk-streak{fill:#FFD9C8;opacity:.16}
.tma .mk-streak.dark{fill:#8A2410;opacity:.16}
.tma .mk-edge{fill:#A12C14;opacity:.45}
.tma.intro .blk.front{clip-path:inset(-60% 130% -60% -40%);animation:mkpaint .9s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes mkpaint{to{clip-path:inset(-60% -40% -60% -40%)}}
.tma .mk-photo,.tma .mk-under{transform:translateY(calc(var(--ly) * -1.5px))}
.scroll-sp{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;outline:none;margin-top:clamp(10px,3vh,40px)}
.scroll-sp{position:relative}.scroll-sp::after{content:"";position:absolute;inset:-15px -12px}/* plocha na ťuknutie 44 px */
.scroll-sp .tx{font:400 15px/1 var(--hand);text-transform:uppercase;letter-spacing:.06em;color:var(--on)}
/* farby častí šípky – používa ich list v sekcii 02 (sipka.js) */
.sp-shadow path{fill:#000;opacity:.45}
.sp-white path{fill:none;stroke:var(--on);stroke-width:9;stroke-linejoin:round}
.sp-side{fill:#9E2A12;stroke:#111;stroke-width:3;stroke-linejoin:round}
.sp-dark{fill:#C73A1E;opacity:.55}
.sp-con path{fill:none;stroke:var(--on);stroke-width:.9;opacity:.45}
.scroll-sp:focus-visible .tx{text-decoration:underline dotted;text-underline-offset:5px}
@media(max-width:860px){
  .scroll-sp{margin-top:4px}
}

.sp-con path{opacity:.6}
.tma .meta-v{z-index:5}
.stage{--x:50%;--xn:.5}
.tma .bgsklo-komix{clip-path:inset(0 0 0 calc((2.25 + var(--xn)) / 5.5 * 100%))}
.tma .mk-komix{clip-path:inset(0 0 0 var(--x))}
.cmp-handle{position:absolute;z-index:4;top:-6%;height:112%;left:var(--x);width:44px;transform:translateX(-50%); cursor:ew-resize;touch-action:pan-y;display:flex;justify-content:center}
.cmp-mk{width:20px;height:100%;overflow:visible;display:block;pointer-events:none}
.cmp-mk .f{fill:#FF502F;opacity:.9}
.cmp-mk .o{fill:#9E2A12;opacity:.2}
.cmp-mk .s{fill:#FFD9C8;opacity:.25}
.cmp-mk .e{fill:#A12C14;opacity:.45}
.cmp-range{position:absolute;left:0;bottom:0;width:100%;height:44px;opacity:0;margin:0;pointer-events:none}
.cmp-range:focus-visible~.cmp-hint{outline:1px solid var(--on,#ECEAE6);outline-offset:6px}
.cmp-hint{position:absolute;z-index:4;left:0;right:0;bottom:-34px;display:flex;justify-content:space-between;margin:0; font:600 11px/1 var(--text,"Figtree",sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--on-2,#8E8C88);pointer-events:none}
.meta-v{z-index:5}
@media(max-width:860px){
  .cmp-hint{bottom:3%;padding:0 4%;font-size:10px}
}
.hero{position:relative}
.kon{position:absolute;z-index:-1;pointer-events:none;overflow:visible}
.kon .l{fill:none;stroke:#ECEAE6;stroke-width:.8;opacity:.26;stroke-linecap:round}
.kon .l.f{opacity:.15}
.kon .dt{fill:#ECEAE6;opacity:.3}
.kon.go .l{stroke-dasharray:1;stroke-dashoffset:1;animation:kon-draw .7s cubic-bezier(.4,0,.2,1) var(--d) forwards}
.kon.go .dt{opacity:0;animation:kon-dot .3s ease var(--d) forwards}
@keyframes kon-draw{to{stroke-dashoffset:0}}
@keyframes kon-dot{to{opacity:.3}}
@media(max-width:860px){
  .kon .l{stroke-width:.7;opacity:.2}
  .kon .l.f{opacity:.12}
}
.cmp-mk .pen{fill:none;stroke:#ECEAE6;stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.85;stroke-linecap:round}
.cmp-mk .pen.p2{opacity:.35}
.cmp-mk .dot{fill:#ECEAE6;opacity:.6}
.cmp-handle:hover .cmp-mk .pen{opacity:1}
.skica{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;opacity:.34; clip-path:inset(0 0 0 var(--x))}
.tma.intro .skica{-webkit-mask-image:linear-gradient(#000 33%,transparent 46%);mask-image:linear-gradient(#000 33%,transparent 46%); -webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:0 100%;mask-position:0 100%; animation:skica 1.5s cubic-bezier(.45,0,.3,1) .7s forwards}
@keyframes skica{to{-webkit-mask-position:0 0;mask-position:0 0}}
.tma.intro .blk.front{animation-delay:2.1s!important}
.tma.intro .cmp-hint{opacity:0;animation:kon-dot .5s ease 4.2s forwards}
.tma.intro .skica{animation:none!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:0}
.tma.intro.sk-done .skica{opacity:.34}
.sk-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.34;clip-path:inset(0 0 0 var(--x))}
.tma.intro .blk.front{animation:none!important;clip-path:inset(-60% 130% -60% -40%)}
.tma.sk-marker .blk.front{animation:mkpaint .9s cubic-bezier(.45,0,.2,1) 0s forwards!important}
.tma.intro .cmp-hint{animation:none!important;opacity:0}
.tma.sk-hint .cmp-hint{opacity:1;transition:opacity .5s}
.sk-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;clip-path:inset(0 0 0 var(--x))}
.sk-fx .h{fill:none;stroke:#ECEAE6;stroke-width:.9;stroke-linecap:round;opacity:.42;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.sk-fx .h.on{animation:sk-draw .32s cubic-bezier(.4,0,.2,1) var(--d) forwards}
@keyframes sk-draw{to{stroke-dashoffset:0}}
.sk-fx .g{fill:#8E8C88;opacity:.22;clip-path:inset(-20% 104% -20% -2%)}
.sk-fx .g.on{animation:sk-wipe .5s cubic-bezier(.45,0,.2,1) forwards}
@keyframes sk-wipe{to{clip-path:inset(-20% -4% -20% -2%)}}
.sk-end .sk-fx{transition:opacity 1.2s;opacity:.7}
.sk-end.sk-clean .sk-fx{opacity:0}
.sk-pen{position:absolute;z-index:3;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#ECEAE6;box-shadow:0 0 0 1px rgba(236,234,230,.35);pointer-events:none;opacity:0}
.sk-pen.on{opacity:.9}
@supports not (aspect-ratio:1){.stage{height:70vh}}