/* Re:FORM design.css – velký typografický a scénický krok (po fx.css). Drží brand 2.1: inkoust a bílá, ostré hrany,
   barva jen jako význam, žádná záře ani plynulé přechody. */

/* 1) Úvod: písmo je hlavní obraz stránky */
.hero{padding-block:clamp(3.4rem,9vw,8.5rem) clamp(3.2rem,7vw,6.5rem)}
.hero h1{font-size:clamp(3rem,1rem + 9.2vw,9.6rem);line-height:.9;letter-spacing:-.058em;max-width:9.6em}
.hero.sm h1{font-size:clamp(2.8rem,1rem + 7vw,7.4rem);max-width:11em;line-height:.92}
.hero .lede{max-width:24em}
.hero h1 .wd{padding-bottom:.06em}

/* 2) Velká čísla */
.fact dt{font-size:clamp(3.6rem,1rem + 8.4vw,8.6rem);line-height:.9;letter-spacing:-.06em}
.fact dt small{font-size:.32em}

/* 3) Nadpisy sekcí */
.sec h2{font-size:clamp(2.2rem,1rem + 4.6vw,5.2rem);letter-spacing:-.05em;line-height:.96}

/* 4) „Krok druhých → Re:“ jako papíry, které se skládají na sebe */
.mo .wins{align-items:start}
@media(min-width:861px){.mo .wins .head{position:sticky;top:calc(var(--hh) + 2rem);align-self:start}}
.mo .wins .list{display:block}
.mo .wins .win{position:sticky;top:calc(var(--hh) + 1.2rem + var(--n,0)*1rem);margin-bottom:clamp(2.4rem,14vh,7rem);
  padding:clamp(1.4rem,3vw,2.6rem);min-height:clamp(15rem,52vh,25rem);align-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-top:8px solid var(--acc);
  box-shadow:0 1px 2px rgb(16 20 30/.06),0 24px 50px -26px rgb(16 20 30/.4);
  transform-origin:50% 0;rotate:var(--rot,0deg);scale:var(--sc,1);transition:scale .25s var(--ease);will-change:scale}
.mo .wins .win:last-child{margin-bottom:0}
.mo .wins .win::before,.mo .wins .win::after{display:none}
.mo .wins .win .q p{font-size:1.1rem;color:var(--mute)}
.mo .wins .win h3{font-size:clamp(2rem,1rem + 3.2vw,3.8rem);line-height:.98;letter-spacing:-.05em}
.mo .wins .win .a .more{margin-top:1rem}

/* 5) Závěr: tmavá scéna */
.closer{background:var(--night);color:#fff;padding-block:clamp(5rem,12vw,10rem)}
.closer .slogan{font-size:clamp(3.6rem,1rem + 12.5vw,12.5rem);line-height:.86;letter-spacing:-.065em;color:#fff}
.closer .slogan .m{color:rgb(255 255 255/.42)}
.closer p,.closer h2{color:#fff}
.closer a:not(.btn){color:#fff}
.closer .btn{background:#fff;color:#161A22;border-color:#fff}
.closer .btn:hover{background:var(--acc-d,#fff);color:#fff;border-color:var(--acc-d,#fff)}
.closer .btn.ghost{background:transparent;color:#fff;border-color:rgb(255 255 255/.55)}
.closer .btn.ghost:hover{background:#fff;color:#161A22}

/* 6) Mobilní menu přes celou obrazovku */
@media(max-width:1060px){
  #mobile-menu{display:block;grid-template-rows:none;height:calc(100dvh - var(--hh) - 2px);background:var(--bg);
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.77,0,.18,1),visibility 0s .55s;border:0}
  #mobile-menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .55s cubic-bezier(.77,0,.18,1),visibility 0s;border:0}
  #mobile-menu>div{height:100%;overflow:auto}
  #mobile-menu nav{padding:1rem var(--gut) 2.5rem}
  #mobile-menu a:not(.btn){font-size:clamp(2.5rem,11vw,4rem);padding:.85rem 0;opacity:0;translate:0 1.4rem;
    transition:opacity .5s ease calc(var(--i,0)*45ms + 180ms),translate .6s var(--ease) calc(var(--i,0)*45ms + 180ms)}
  #mobile-menu.is-open a:not(.btn){opacity:1;translate:0 0}
  #mobile-menu a:nth-child(2){--i:1}#mobile-menu a:nth-child(3){--i:2}#mobile-menu a:nth-child(4){--i:3}
  #mobile-menu a:nth-child(5){--i:4}#mobile-menu a:nth-child(6){--i:5}#mobile-menu a:nth-child(7){--i:6}#mobile-menu a:nth-child(8){--i:7}
}
@media(prefers-reduced-motion:reduce){#mobile-menu,#mobile-menu a:not(.btn){transition-duration:.01s!important;transition-delay:0s!important}}