/* Naše weby — každý web je priečinok ako v macOS: náhľad vykúka spod predného panelu */
.weby{width:100%;max-width:1240px;margin:0 auto;padding:clamp(110px,14vh,150px) var(--pad) clamp(56px,9vh,110px)}
.weby-head{max-width:60ch;margin-bottom:clamp(36px,6vh,64px)}
.weby-head h1{font:700 clamp(40px,5.4vw,76px)/.98 var(--disp);letter-spacing:-.02em;text-transform:uppercase;color:var(--mint)}
.weby-head p{margin-top:16px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(var(--hi),.82)}
.weby-head a{display:inline-block;margin-top:18px;font-size:14.5px;color:var(--mint);border-bottom:1px solid rgba(var(--hi),.35);padding-bottom:2px;
  transition:border-color .2s}
.weby-head a:hover{border-color:var(--pink)}

.folders{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,72px) clamp(24px,3vw,44px)}
.folder{--lift:0px;position:relative;display:block;aspect-ratio:1/1.02;color:var(--navy);
  filter:drop-shadow(0 22px 28px rgba(var(--shade),.45));transition:transform .45s var(--ease-out)}
.folder:focus-visible{outline:2px solid var(--pink);outline-offset:6px;border-radius:20px}

.f-back{position:absolute;inset:9% 0 0;border-radius:0 22px 22px 22px;background:linear-gradient(180deg,#7fc3ea,#4aa0da)}
.f-back::before{content:"";position:absolute;left:0;bottom:calc(100% - 1px);width:40%;height:calc(11% + 1px);border-radius:16px 0 0 0;
  background:#7fc3ea;clip-path:polygon(0 0,86% 0,100% 100%,0 100%)}
.f-shot{position:absolute;left:5%;right:5%;top:calc(15% - var(--lift));aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:var(--navy-deep);box-shadow:0 6px 18px rgba(var(--shade),.4);transition:top .45s var(--ease-out)}
.f-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.f-front{position:absolute;left:0;right:0;bottom:0;height:52%;padding:clamp(16px,1.7vw,24px) clamp(18px,2vw,28px);border-radius:20px 20px 22px 22px;
  background:linear-gradient(180deg,#f0fafe 0%,#cdebf9 100%);box-shadow:inset 0 1px 0 #fff,0 -8px 18px rgba(var(--shade),.18);
  display:flex;flex-direction:column;gap:3px}
.f-front b{font:700 clamp(19px,1.7vw,24px)/1.1 var(--disp);letter-spacing:-.01em;color:var(--navy)}
.f-front i{font-style:normal;font-size:13px;color:#2D5F99}
.f-front span{margin-top:6px;font-size:clamp(13px,.98vw,14.5px);line-height:1.5;color:#12365f}
.f-arw{position:absolute;right:clamp(16px,1.8vw,24px);top:calc(48% + clamp(16px,1.7vw,24px));width:30px;height:30px;border-radius:50%;
  background:var(--pink);display:grid;place-items:center;transition:transform .35s var(--ease-out)}
.f-arw svg{width:15px;height:15px}

@media (hover:hover) and (pointer:fine){
  .folder:hover{--lift:7%;transform:translateY(-6px)}
  .folder:hover .f-arw{transform:translate(2px,-2px)}
}
.folder:active{transform:scale(.985)}

@keyframes folderIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.folders li{animation:folderIn .7s var(--ease-out) both;animation-delay:calc(.1s + var(--i,0) * 70ms)}
.folders li:nth-child(2){--i:1}.folders li:nth-child(3){--i:2}.folders li:nth-child(4){--i:3}.folders li:nth-child(5){--i:4}
@media (prefers-reduced-motion:reduce){.folders li{animation:none}.folder,.f-shot,.f-arw{transition:none}}

@media (max-width:980px){.folders{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.folders{grid-template-columns:1fr;max-width:420px;margin:0 auto}.folder{aspect-ratio:1/.9}.f-front{height:50%}.f-arw{top:calc(50% + clamp(16px,1.7vw,24px))}}