/* YABI 2.0 v3 – Domov. Návrh: Home / Desktop 674:3572 (1440) a Home / Mobile 682:2271 (390). */

/* ---------- Spoločné: úvod sekcie (chip 160 px | nadpis | perex 424 px) ---------- */
.section-home{max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding:80px var(--gutter)}
.intro{display:flex;align-items:flex-start;gap:32px}
.intro__label{flex:none;width:160px}
.intro .chip{width:auto}
.intro__label.chip{width:max-content;margin-right:calc(160px - max-content)}
.intro>.chip{flex:none}
.intro__title{flex:1 1 0;min-width:0;font-size:48px;--lh:48px;line-height:48px;letter-spacing:-2.16px;margin-block:calc(.3425em - 24px) calc(.3575em - 24px)}
.intro__summary{flex:none;width:424px;font-size:18px;line-height:24px;letter-spacing:-.36px}
@supports (text-box:trim-both cap text){.intro__title,.intro__summary{margin-block:0;text-box:trim-both cap text}}
.intro__label-wrap{flex:none;width:160px}

/* ---------- Hero ---------- */
.hero{max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding:160px var(--gutter) 80px;display:flex;flex-direction:column;gap:48px;overflow:hidden}
.hero__intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hero__headline{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.hero__title{display:flex;flex-direction:column;font-size:120px;line-height:120px;letter-spacing:-6px}
.hero__line{display:block;white-space:nowrap}
/* EN hero: dlhšie riadky by pri 120 px prekrývali pravý stĺpec (vták + CTA); font saškáluje podľa šírky */
@media (min-width:1280px){
  :lang(en) .hero__title{font-size:min(103px,calc((100vw - 662px) / 7.583));line-height:1em;letter-spacing:-.05em}
}
@media (min-width:1024px) and (max-width:1279px){
  :lang(en) .hero__intro{flex-direction:column;align-items:flex-start}
}
.hero__line--arrow{display:flex;align-items:center;gap:16px}
.hero__arrow{flex:none;width:90px;height:70px}
.hero__aside{flex:none;width:350px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero__perex{font-size:18px;--lh:24px;line-height:24px;letter-spacing:-.36px}
.hero__bird{width:77px;height:74px}
.hero__showcase{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Ticker: desktop statický riadok cez celú šírku, mobil bežiaci pás */
.ticker{position:relative;height:43px;overflow:hidden}
.ticker__track{display:flex;width:100%}
.ticker__list{display:flex;flex:none;width:100%;justify-content:space-between;padding:12px 21px;font-size:16px;font-weight:500;line-height:20px;color:var(--ink-gray);white-space:nowrap}
.ticker__list[aria-hidden]{display:none}

/* Karusel */
.slider{position:relative;height:570px;border-radius:28px;background:var(--primary);overflow:hidden}
.slider__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:-4px}
.slider__track::-webkit-scrollbar{display:none}
.slider__slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;background:var(--primary)}
.slider__slide>img{width:100%;height:100%;object-fit:cover}
.slider__frame{position:absolute;right:17.8125%;top:-3px;bottom:36px;aspect-ratio:511/323;overflow:hidden}
.slider__frame img{width:100%;height:100%;object-fit:cover}
.hero__pilot{position:absolute;left:24px;top:24px;z-index:2;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:var(--r-btn);background:#010b19}
.hero__pilot::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.hero__pilot-text{font-size:14px;font-weight:500;color:var(--orange);white-space:nowrap}
.hero__pilot .btn{padding:12px 16px}
.slider__arrow{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:999px;background:var(--paper);cursor:pointer}
.slider__arrow[hidden]{display:none}
.slider__arrow img{width:20px;height:20px}
.slider__arrow--prev{left:24px}
.slider__arrow--next{right:24px}
.slider__arrow:hover{background:var(--paper-dark)}
.hero .slider__arrow{top:261px}
/* Bodky (zdieľané s karuselmi Proces a O nás): pill 20 px, bodka 8 px. Tlačidlo 24 × 24 px (WCAG 2.5.8 / target-size),
   preto rozostup bodiek 24 px; vizuál bodky ostáva 8 px a okraj pillu 10 px od krajnej bodky. */
.slider__dots{position:absolute;left:50%;z-index:2;transform:translateX(-50%);display:flex;align-items:center;height:20px;padding:0 2px;border-radius:999px;background:rgba(0,11,22,.6)}
.hero .slider__dots{top:534px}
.slider__dots[hidden]{display:none}
.slider__dots button{position:relative;width:24px;height:24px;margin-block:-2px;padding:0;border:0;background:none;cursor:pointer}
.slider__dots button::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.slider__dots button[aria-current="true"]::before{background:var(--paper)}
.slider__dots button:focus-visible{outline-color:var(--paper);outline-offset:0;border-radius:4px}

/* ---------- Proces ---------- */
.process{display:flex;flex-direction:column;gap:64px}
.process__body{display:flex;flex-direction:column;gap:32px}
.process__head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.process__subtitle{font-size:32px;--lh:32px;line-height:32px;letter-spacing:-.8px}
.progress{position:relative;flex:none;width:600px;display:flex;flex-direction:column;gap:16px}
.progress__track{position:relative;height:16px;border-radius:8px;background:var(--paper-dark)}
.progress__fill{position:absolute;left:0;top:0;height:16px;width:100px;border-radius:8px;background:var(--ink)}
.progress__dot{position:absolute;left:80px;top:-6px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:18px;line-height:1;text-align:center;display:flex;align-items:center;justify-content:center}
.progress__labels{display:flex;justify-content:space-between;color:var(--ink-gray);white-space:pre}
/* S JS (carousel.js pridá .is-live): výplň a bod sa posúvajú len cez transform podľa polohy pásu (--p = podiel 0–1, --x = posun bodu),
   farba --c = farba aktívnej karty (medzi kartami zmiešaná podľa polohy).
   Polomer výplne je vydelený mierkou, aby po scaleX ostal ľavý koniec okrúhly (8 px). */
.progress.is-live .progress__fill{width:16.6667%;transform:none;border-radius:8px;background:var(--c,var(--orange))}
.progress.is-live .progress__dot{left:calc(16.6667% - 14px);transform:none;background:var(--c,var(--orange))}
/* Karusel krokov (Proces na Domov, príbeh na O nás): pás so scroll-snap, ovládače nad kartou. */
.carousel{position:relative}
/* Šípky a bodky jednotlivej snímky v móde pod sebou (carousel.js, data-carousel-stack-below) – polohuje ich snímka */
.carousel__nav{display:contents}
.carousel__nav[hidden]{display:none}
.steps{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:36px;margin-bottom:-36px;outline-offset:-2px}
.steps::-webkit-scrollbar{display:none}
.carousel .slider__arrow{top:calc(50% - 24px)}
.carousel .slider__dots{bottom:16px}
.step{flex:0 0 100%;scroll-snap-align:start;display:flex;height:430px;border-radius:var(--r-main);overflow:hidden;filter:drop-shadow(0 16px 20px rgba(0,11,22,.08));background:var(--red)}
/* Obal obsahu snímky (role=group, aria-roledescription=slide) – li ostáva listitem; obal preberá flex rozloženie li. */
.step__slide{flex:1 1 auto;min-width:0;display:flex;flex-direction:inherit}
.step__copy{flex:0 0 560px;display:flex;flex-direction:column;justify-content:space-between;padding:32px;color:var(--paper)}
.step__copy ul{display:flex;flex-direction:column}
.step__intro{display:flex;flex-direction:column;gap:24px;max-width:496px}
.step__title{font-size:32px;--lh:32px;line-height:32px;letter-spacing:-.8px}
.step__needs{display:flex;flex-direction:column;gap:12px;max-width:496px}
.step__needs>.t-eyebrow{padding-bottom:12px;border-bottom:1px solid currentColor;margin-bottom:0}
.step__needs ul{gap:0}
.step__needs li.trim{margin-block:0;text-box:none;line-height:24px}
.step__media{flex:1 1 auto;min-width:0;position:relative}
.step__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.step--orange{background:var(--orange)}.step--orange .step__copy{background:var(--orange);color:var(--ink)}
.step--red .step__copy{background:var(--red)}
.step--blue{background:var(--primary)}.step--blue .step__copy{background:var(--primary)}
.step--green{background:var(--green)}.step--green .step__copy{background:var(--green);color:var(--ink)}
.step--green .step__needs>.t-eyebrow,.step--soft-rule .step__needs>.t-eyebrow{border-bottom-color:var(--grey-20)}
.step--orange:not(.step--soft-rule) .step__needs>.t-eyebrow{border-bottom-color:var(--ink)}

/* ---------- Projekty ---------- */
.projects{display:flex;flex-direction:column;gap:64px}
.projects__grid{position:relative;height:935px}
.project-tile{position:absolute;border-radius:var(--r-main);overflow:hidden;filter:drop-shadow(0 16px 20px rgba(0,11,22,.08))}
.project-tile img{width:100%;height:100%;object-fit:cover}
.project-tile--pathfinder{left:0;right:45%;top:0;height:433px;background:var(--red)}
.project-tile--lumi{left:56.25%;right:0;top:192px;height:492px;background:var(--green)}
.project-tile--devio{left:21.5625%;right:45%;top:449px;height:474px;background:var(--primary)}
.project-card{position:absolute;z-index:1;display:flex;flex-direction:column;width:380px;height:232px;padding:32px 32px 0;color:var(--ink);transition:transform .2s ease}
.project-card::before{content:"";position:absolute;z-index:-1;inset:-8.62% -10.53% -25.86%;background:url(/assets/home/paper.svg) center/100% 100% no-repeat}
.project-card::after{content:"";position:absolute;left:324px;top:0;width:56px;height:56px;background:url(/assets/home/flap.svg) no-repeat;background-size:auto;transform:none}
.project-card__type{display:block;margin-bottom:16px}
.project-card__name{font-size:32px;--lh:32px;line-height:32px;letter-spacing:-.8px;margin-bottom:16px}
.project-card__desc{max-width:280px}
.project-card__link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;margin-bottom:24px;font-size:16px;font-weight:500;line-height:24px;color:var(--primary)}
.project-card__link img{width:44px;height:44px}
.project-card--pathfinder{left:19px;top:191px;transform:rotate(-1.5deg)}
.project-card--lumi{left:745px;top:437px;transform:rotate(-2.5deg)}
.project-card--devio{left:288px;top:697px;transform:rotate(2deg)}
.project-card--pathfinder .project-card__link{color:var(--red)}
.project-card--lumi .project-card__link{color:var(--ink)}
.project-card:hover{transform:rotate(0) translateY(-4px)}
.project-card:focus-visible{outline-offset:6px}
/* Papierik („Project tooltip (hover)“ vo Figme) sa pri myši ukáže až pri hoveri dlaždice / samotnej karty alebo pri
   fokuse (Tab). V pokoji len opacity 0 – odkaz ostáva v strome prístupnosti a dosiahnuteľný klávesnicou.
   Dotykové zariadenia (hover:none) a mobil < 768 px (karta pod dlaždicou, nie nad ňou): trvalo viditeľný. */
@media (hover:hover) and (min-width:768px){
  /* skrytá karta ostáva klikateľná (časť karty leží mimo jej dlaždice) – hover nad jej plochou ju zobrazí */
  .project-card{opacity:0;transition:transform .2s ease,opacity .2s ease}
  .project-tile:hover+.project-card,.project-card:hover,.project-card:focus-within{opacity:1}
}
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:reduce){
  /* bez pohybu: okamžité zobrazenie, karta ostane naklonená ako v pokoji (bez narovnania a posunu) */
  .project-card{transition:none}
  .project-card--pathfinder:hover{transform:rotate(-1.5deg)}
  .project-card--lumi:hover{transform:rotate(-2.5deg)}
  .project-card--devio:hover{transform:rotate(2deg)}
}

/* ---------- Cenník (cenovky) ---------- */
.pricing{display:flex;flex-direction:column;gap:48px;padding-block:96px}
.pricing__header{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.pricing__heading{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pricing__title{font-size:64px;line-height:64px;letter-spacing:-2.56px}
.pricing__summary{width:424px;font-size:18px;--lh:24px;line-height:24px;letter-spacing:-.36px;color:var(--ink-gray)}
.tags{position:relative;height:660px}
.tag{position:absolute;width:400px;height:520px}
.tag--start{left:33px;top:73px;transform:rotate(-3deg)}
.tag--pro{left:440px;top:40px}
.tag--business{left:854px;top:76px;transform:rotate(3deg)}
.tag__link{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:32px;color:var(--paper);transition:transform .2s ease}
.tag__link::before{content:"";position:absolute;z-index:-1;inset:-2.31% -9% -11.54%;background:center/100% 100% no-repeat}
.tag__link::after{content:"";position:absolute;right:0;top:0;width:64px;height:64px;background:url(/assets/home/fold-flap.svg) no-repeat}
.tag--start .tag__link::before{background-image:url(/assets/home/price-tag-start.svg)}
.tag--pro .tag__link::before{background-image:url(/assets/home/price-tag-pro.svg)}
.tag--business .tag__link::before{background-image:url(/assets/home/price-tag-business.svg)}
.tag--business .tag__link{color:var(--ink)}
.tag__link:hover{transform:translateY(-6px)}
.tag__link:focus-visible{outline-offset:-6px}
.tag__top{display:flex;flex-direction:column;gap:12px}
.tag__name{font-size:48px;--lh:48px;line-height:48px;letter-spacing:-2.16px}
.tag__sub{font-size:18px;--lh:24px;line-height:24px;letter-spacing:-.36px;max-width:280px}
.tag__price{font-size:96px;--lh:96px;line-height:96px;letter-spacing:-4.8px;white-space:nowrap}
.tag__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tag__meta{font-size:16px;--lh:24px;line-height:24px;letter-spacing:-.16px}
.tag__bottom img{width:56px;height:56px}
.sticker{position:absolute;z-index:2;left:-87px;top:-109px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:148px;height:148px;border-radius:50%;background:var(--orange);color:var(--ink);transform:rotate(-12deg);filter:drop-shadow(0 12px 12px rgba(0,10,23,.18));text-align:center;pointer-events:none}
.tag--pro .sticker{left:250px;top:-101px}
.sticker__big{font-size:48px;--lh:48px;line-height:48px;font-weight:700;letter-spacing:-2.16px;white-space:nowrap}
.sticker__small{font-size:14px;--lh:20px;line-height:20px;letter-spacing:-.14px;margin-top:8px}
.pricing__cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 32px;border-radius:var(--r-main);background:var(--paper-dark)}
.pricing__cta-copy{display:flex;flex-direction:column;gap:8px}
.pricing__tuning{font-size:18px;--lh:24px;line-height:24px;letter-spacing:-.36px}
.pricing__tuning strong{font-weight:500}
.pricing__pilot{color:var(--ink-gray)}
.pricing__buttons{display:flex;gap:12px;flex:none}

/* ---------- FAQ ---------- */
.faq-section{display:flex;flex-direction:column;gap:64px}

/* ---------- 1024–1439: škálovanie ---------- */
@media (max-width:1439px){
  .projects{overflow-x:clip}
  .projects__grid{height:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px}
  .project-tile,.project-card{position:relative;left:auto;right:auto;top:auto}
  .project-tile{height:auto;aspect-ratio:704/433}
  .project-tile--pathfinder{grid-column:1/8;grid-row:1}
  .project-card--pathfinder{grid-column:1/8;grid-row:2;margin-top:-140px;margin-left:16px}
  .project-tile--lumi{grid-column:8/13;grid-row:1/3;aspect-ratio:560/492;align-self:end}
  .project-card--lumi{grid-column:8/13;grid-row:3;margin-top:-140px;margin-left:16px}
  .project-tile--devio{grid-column:3/8;grid-row:3/5;aspect-ratio:428/474}
  .project-card--devio{grid-column:3/9;grid-row:5;margin-top:-180px;margin-left:16px}
  .project-card{max-width:calc(100% - 16px)}
  .project-card::after{left:auto;right:0}
}
@media (min-width:1200px) and (max-width:1439px){
  .tag{width:31.25%}
  .tag--start{left:2.58%}.tag--pro{left:34.375%}.tag--business{left:66.7%}
  .tag__price{font-size:80px;line-height:80px;letter-spacing:-4px}
  .tag--pro .sticker{left:auto;right:-40px}
}
@media (max-width:1199px){
  .pricing{overflow-x:clip}
  .tags{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:48px 24px;padding-top:80px}
  .tag{position:relative;left:auto;top:auto}
  .tag--pro .sticker{left:auto;right:-30px}
}
@media (max-width:1279px){
  .ticker__track{width:max-content}
  .ticker__list{width:auto;gap:24px;padding:12px 12px 12px var(--gutter)}
  .ticker__list[aria-hidden]{display:flex}
  @media (prefers-reduced-motion:no-preference){.ticker__track{animation:ticker 30s linear infinite}}
  .hero__title{font-size:96px;line-height:96px;letter-spacing:-4.8px}
}
/* SK hero: pri 1024-1365 px riadok "po hotový web" siahá pod pravý stĺpec (vták, perex, CTA).
   Rovnaký princíp ako EN pravidlo vyššie: font sa plynule škáluje s šírkou viewportu tak,
   aby medzi titulkom a pravým stĺpcom ostal aspoň 8 px odstup. Hodnoty odvodené z merania:
   titulok 648 px pri 96 px fonte / 784 px pri 120 px, pravý stĺpec 350 px. */
@media (min-width:1024px) and (max-width:1365px){
  :lang(sk) .hero__title{font-size:min(120px,calc((100vw - 448px) / 7.5));line-height:1em;letter-spacing:-.05em}
}
@media (max-width:1023px){
  .hero{padding-top:128px}
  .hero__intro{flex-direction:column;align-items:flex-start}
  .hero__title{font-size:80px;line-height:80px;letter-spacing:-4px}
  .intro{flex-wrap:wrap}
  .intro__title{flex-basis:calc(100% - 192px)}
  .intro__summary{width:100%;padding-left:192px}
  .step{flex-direction:column;height:auto}
  .step__copy{flex:1 0 auto;gap:32px}
  .step__media{height:var(--media-h);flex:none}
  .carousel{--media-h:320px}
  .carousel .slider__arrow{top:auto;bottom:calc(var(--media-h) / 2 - 24px)}
  .process__head{flex-direction:column}
  .progress{width:100%}
  .pricing__header{flex-direction:column;align-items:flex-start}
  .pricing__cta{flex-direction:column;align-items:stretch}
  .slider__frame{right:0;left:0;width:auto;margin-inline:auto}
}

/* ---------- Mobil (návrh 390) ---------- */
@media (max-width:767px){
  .section-home{padding:64px var(--gutter)}
  .hero{padding:112px var(--gutter) 64px;gap:32px}
  .hero__intro{gap:24px}
  .hero__headline{gap:24px}
  .hero__title{font-size:48px;line-height:48px;letter-spacing:-2.4px}
  .hero__line{white-space:normal}
  .hero__line--arrow{gap:8px}
  .hero__arrow{width:42px;height:33px}
  .hero__aside{width:100%;max-width:350px}
  .hero__perex{font-size:16px;line-height:24px;letter-spacing:-.16px}
  .hero__bird{width:60px;height:58px}
  .ticker{height:48px;margin-inline:calc(-1 * var(--gutter))}
  .ticker__list{line-height:24px}
  .slider{height:300px;border-radius:var(--r-main)}
  .slider__frame{inset:0;aspect-ratio:auto}
  .hero__pilot,.hero .slider__arrow{display:none!important}
  .hero .slider__dots{top:264px}
  .intro{flex-direction:column;gap:32px}
  .intro__title{font-size:32px;line-height:36px;letter-spacing:-.8px;flex-basis:auto;width:100%}
  .intro__summary{width:100%;padding-left:0;font-size:16px;letter-spacing:-.16px}
  .process{gap:32px}
  .process__subtitle{font-size:32px}
  .progress__labels{font-size:10px}
  .step__copy{padding:32px 24px}
  .step__title{font-size:32px;line-height:36px}
  .carousel{--media-h:200px}
  .carousel .slider__arrow--prev{left:12px}
  .carousel .slider__arrow--next{right:12px}
  .projects{gap:32px}
  .projects__grid{display:flex;flex-direction:column;gap:16px}
  .project-tile{aspect-ratio:auto;width:100%}
  .project-tile--pathfinder{height:215px;border-radius:var(--r-btn)}
  .project-tile--lumi{height:308px}
  .project-tile--devio{height:388px}
  .project-card{width:auto;max-width:none;height:auto;margin:0 0 16px!important;padding:24px;transform:none!important;border:1px solid var(--grey-20);border-radius:var(--r-main);background:var(--paper)}
  .project-card::before,.project-card::after{display:none}
  .project-card__link{margin:16px 0 0}
  .pricing{gap:32px;padding-block:64px}
  .pricing__title{font-size:32px;line-height:36px;letter-spacing:-.8px}
  .pricing__summary{width:100%;font-size:16px;letter-spacing:-.16px}
  .tags{flex-direction:column;align-items:center;gap:16px;padding-top:0}
  .tag{width:100%;max-width:350px;height:455px;transform:none!important}
  .tag__link{padding:28px}
  .tag__link::after{width:56px;height:56px;background-size:100% 100%}
  .tag__name{font-size:42px;line-height:42px}
  .tag__price{font-size:84px;line-height:84px;letter-spacing:-4.2px}
  .tag__bottom img{width:49px;height:49px}
  .tag--pro .sticker{right:0;left:auto;top:-80px;width:120px;height:120px}
  .sticker__big{font-size:38px;line-height:38px}
  .pricing__cta{padding:24px;align-items:center;text-align:center}
  .pricing__buttons{flex-direction:column;width:100%;max-width:302px}
  .faq-section{gap:32px}
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ====== Motion pass: hero load intro + pruzne karty a ceniky ====== */
@media (prefers-reduced-motion:no-preference){
  .hero__headline .chip{animation:yabi-rise .7s cubic-bezier(.22,1,.36,1) both}
  .hero__line{animation:yabi-rise .85s cubic-bezier(.22,1,.36,1) .12s both}
  .hero__line--arrow{animation-delay:.26s}
  .hero__arrow{transform-origin:left center;animation:yabi-pop .6s cubic-bezier(.34,1.56,.64,1) .5s both}
  .hero__aside>*{animation:yabi-rise .7s cubic-bezier(.22,1,.36,1) .38s both}
  .hero__aside>*:nth-child(2){animation-delay:.5s}
  .hero__aside>*:nth-child(3){animation-delay:.6s}
  .hero__showcase{animation:yabi-rise .9s cubic-bezier(.22,1,.36,1) .55s both}
  /* Karty projektov: jarny lift pri hoveri */
  .project-card{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
  .project-card:hover{transform:rotate(0) translateY(-10px)}
  .tag__link{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .tag__link:hover{transform:translateY(-10px)}
}

/* ====== Motion pass 2 (domov): vacsi pohyb v identite YABI. Len pri prefers-reduced-motion:no-preference. ====== */
@keyframes yabi-swing-l{from{rotate:-6deg;scale:.94}to{rotate:0deg;scale:1}}
@keyframes yabi-swing-r{from{rotate:6deg;scale:.94}to{rotate:0deg;scale:1}}
@keyframes yabi-push{from{scale:1}to{scale:1.18}}
@keyframes yabi-sticker-pop{0%{rotate:-90deg;scale:.2;opacity:0}60%{rotate:8deg;scale:1.12;opacity:1}100%{rotate:0deg;scale:1;opacity:1}}
@keyframes yabi-float{0%,100%{translate:0 0;rotate:-1.5deg}50%{translate:0 -4px;rotate:1.5deg}}
@keyframes yabi-grow{from{scale:.9;opacity:.4}to{scale:1;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hero__bird{animation:yabi-float 5.5s ease-in-out infinite;transform-origin:50% 60%;will-change:transform}
  @supports (animation-timeline:view()){
    .projects .project-tile{animation:yabi-rise both,yabi-swing-l both;animation-timeline:view(),view();animation-range:entry 0 entry 40%,entry 0 entry 75%}
    .projects .project-tile--lumi{animation-name:yabi-rise,yabi-swing-r}
    .slider__slide--showcase .slider__frame img{animation:yabi-push both linear;animation-timeline:scroll(root);animation-range:0 90vh;transform-origin:50% 40%}
    .pricing .sticker{animation:yabi-sticker-pop both cubic-bezier(.3,1.2,.5,1);animation-timeline:view();animation-range:entry 30% entry 100%}
    .process__body{animation:yabi-grow both linear;animation-timeline:view();animation-range:entry 0 entry 70%}
  }
}

/* YABI motion 3: kroky procesu - jemne priblizenie obrazka pri hoveri */
@media (prefers-reduced-motion:no-preference){
  .step__media img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .step:hover .step__media img{transform:scale(1.04) rotate(-.6deg)}
}

/* YABI motion 4: pripnuty procesny pas (len desktop, JS pridava .is-pinned) - bezne scrollovanie, ziadna past */
.about-stories__pin{display:flex;flex-direction:column;gap:32px}
@media (prefers-reduced-motion:no-preference) and (min-width:1100px) and (pointer:fine){
  .process.is-pinned{padding-bottom:0}
  .process.is-pinned .process__body{position:sticky;top:96px}
  .process.is-pinned::after{content:"";display:block;flex:none;height:var(--pin-extra,300vh);margin-top:-64px}
  .about-stories.is-pinned{padding-bottom:0}
  .about-stories.is-pinned .about-stories__pin{position:sticky;top:96px}
  .about-stories.is-pinned::after{content:"";display:block;flex:none;height:var(--pin-extra,300vh);margin-top:-64px}
}

/* YABI motion 5: hero showcase sa odhali ako opona zo stredu (len pri nacitani, bez reduce-motion) */
@keyframes yabi-curtain{from{clip-path:inset(34% 22% 34% 22% round 40px)}to{clip-path:inset(-60px round 0)}}
@media (prefers-reduced-motion:no-preference){
  .hero__showcase{animation:yabi-rise .9s cubic-bezier(.22,1,.36,1) .55s both,yabi-curtain 1.2s cubic-bezier(.7,0,.15,1) .45s both}
}


/* Keep the discount by Pro, beside its amount on mobile. */
.tag__price-row{display:contents}
.tag--pro .sticker{left:auto;right:-28px;top:-108px;animation:none;rotate:none;scale:none}
@media (min-width:1024px) and (max-width:1199px){.tag--pro .sticker{left:auto;right:-24px;top:-96px;width:132px;height:132px}}
@media (max-width:1023px){
  .tag__price-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
  .tag__price{font-size:clamp(60px,18vw,72px);line-height:1;letter-spacing:-.05em}
  .tag--pro .tag__price{font-size:clamp(49px,15vw,58px);line-height:1;letter-spacing:-.05em}
  .tag--pro .sticker{position:relative;inset:auto;flex:0 0 88px;width:88px;height:88px;transform:rotate(-12deg);filter:drop-shadow(0 6px 8px rgba(0,10,23,.15));gap:2px}
  .tag--pro .sticker__big{font-size:29px;line-height:31px;letter-spacing:-1px}
  .tag--pro .sticker__small{font-size:11px;line-height:13px;letter-spacing:0;margin-top:3px}
}
@media (min-width:1024px){.pricing .tags{margin-top:64px}}
@media (max-width:767px){.tag--pro .tag__link{padding-inline:22px}}

@media (max-width:767px){
  .tag--pro .tag__price-row{justify-content:flex-start;gap:8px;margin-inline:-10px}
  .tag--pro .sticker{flex-basis:104px;width:104px;height:104px;transform:rotate(-8deg)}
  .tag--pro .sticker__big{font-size:34px;line-height:36px}
  .tag--pro .sticker__small{font-size:12px;line-height:14px}
}
@media (min-width:1024px){.tag--pro .sticker{top:-40px}}
@media (min-width:1024px) and (max-width:1399px){.tag--pro .sticker{top:-60px}}
@media (min-width:1024px) and (max-width:1439px){.tag--pro .sticker{top:-40px;width:132px;height:132px;right:-24px}}
@media (min-width:1024px) and (max-width:1439px){.tag--pro .tag__sub{max-width:160px}}
/* ================================================================
   PATCH → append to the very END of css/home.css
   Scope: home pricing only (section.pricing on / and /en/).
   ================================================================ */

/* 1) Reveal: the one-shot JS reveal (site.js patch) replaces the scroll-timeline reveal on the tags.
      (0,2,0) beats base.css `.tag` (0,1,0) yabi-rise; (0,3,0) guarantees no sticker pop competes.
      Unconditional: without JS the tags are simply visible, never hidden. */
.pricing .tag{animation:none}
.pricing .tag .sticker{animation:none}

/* 2) Headline → tags spacing. The section gap (48 desktop / 32 mobile) is kept, so tags → CTA is unchanged;
      only the tags block is pulled up. Same specificity as the late `.pricing .tags{margin-top:64px}`, later wins.
      >=1024: header bottom → .tags top 32px (was 112). The Pro sticker box starts at .tags top
      (tag top 40px, sticker top −40px), so it stays 32px below the header text at every width. */
@media (min-width:1024px){.pricing .tags{margin-top:-16px}}
/* 1024–1199 (flex wrap): padding-top 80 → 40 = exactly the sticker overhang; sticker box 32px below header. */
@media (min-width:1024px) and (max-width:1199px){.pricing .tags{padding-top:40px}}
/* 768–1023: the sticker sits inside the card here, so padding-top 80 was empty space. 24px still clears
   the ±3° rotated tags (corner rise ≈ 200·sin3° = 10.5px + tag artwork overhang ≈ 12px). Box gap 48−16+24 = 56. */
@media (min-width:768px) and (max-width:1023px){.pricing .tags{margin-top:-16px;padding-top:24px}}
/* <=767: 32 → 24px (tags unrotated, sticker inside the card). */
@media (max-width:767px){.pricing .tags{margin-top:-8px}}
/* ================================================================
   PATCH → append to the very END of css/home.css
   Home case-study cards (.project-card on / and /en/: Pathfinder, Lumi, Devio) only.
   Only the two pseudo-elements change; card box, padding, rotation, hover, focus, opacity reveal and
   reduced-motion rules stay. Scoped to >=768px, so the mobile rule hiding both pseudos stays in force.
   paper.svg and flap.svg are no longer referenced here; the files themselves are unchanged.
   ================================================================ */
@media (min-width:768px){
  .project-card{--pc-fold:56px;--pc-radius:22px}

  /* Paper = exactly the card box. In paper.svg the visible sheet is 40..420 × 20..252 = 380 × 232,
     i.e. the card itself; the extra 40/40/20/60px were only the filter (shadow) region.
     Fold cut: 45° line with legs of --pc-fold from the top-right corner at ANY card width/height.
     A 225deg gradient measures from the top-right corner; the cut line lies 56 / √2 = 39.6px from it.
     ±0.5px gives an antialiased edge without moving the line. */
  .project-card::before{
    inset:0;
    background:linear-gradient(225deg,transparent calc(var(--pc-fold) * .70711 - .5px),#fff calc(var(--pc-fold) * .70711 + .5px));
    border-radius:var(--pc-radius) 0 var(--pc-radius) var(--pc-radius);
    /* paper.svg shadow: dy 20, stdDeviation 20 (CSS blur = 2 × 20), rgba(0,10,23,.22); follows the cut via alpha */
    filter:drop-shadow(0 20px 40px rgba(0,10,23,.22))
  }

  /* Flap = the lower-left half of the same 56 × 56 corner square, so its hypotenuse is the paper's cut line.
     flap.svg geometry: triangle 14,4 → 70,60 → 14,60 (56 × 56), bottom-left radius 8, fill #F1F6F8. */
  .project-card::after{
    left:auto;right:0;top:0;width:var(--pc-fold);height:var(--pc-fold);
    background:linear-gradient(45deg,#f1f6f8 calc(50% - .5px),transparent calc(50% + .5px));
    border-bottom-left-radius:8px;
    /* flap.svg shadow: dx −4, dy 6, stdDeviation 5 (CSS blur 10), rgba(0,10,23,.18) */
    filter:drop-shadow(-4px 6px 10px rgba(0,10,23,.18))
  }
}

/* ================================================================
   PATCH → append to the very END of css/home.css, AFTER home-project-card-corner-patch.css.
   REPLACES the previous home-project-card-eyebrow-patch.css completely (do not keep both).
   Home case-study cards (.project-card) only, >=768px. Below 768px nothing changes.
   Normal cards (border box 380px) stay as they are; only narrower cards change.
   ================================================================ */
@media (min-width:768px){
  /* Width comes from width/max-width, never from content, so inline-size containment is safe here. */
  .project-card{container:project-card / inline-size}

  /* Container queries measure the CONTENT box. Card padding-inline is 32 + 32px, so
     content < 316px  ⇔  border box < 380px. Only descendants are styled here (never the card itself).
     If the card's side padding ever changes, update 315.98px = 380 − left − right padding − 0.02. */
  @container project-card (max-width:315.98px){
    /* Fold = lower-left half of the 56 × 56 corner square; at row y it covers x from W−56 to W−56+y.
       The eyebrow sits roughly between y 32 and 56 → its right edge must stay at or left of W−56:
       56 − 32 (padding) = 24px, + 4px for the flap shadow offset (dx −4) = 28px. Text wraps instead. */
    .project-card__type{margin-right:calc(var(--pc-fold,56px) - 32px + 4px)}
  }

  /* Height of narrow cards: the card cannot query its own container, so a ResizeObserver in site.js
     adds .project-card--narrow when the border box is < 380px. Such a card keeps 232px as its minimum
     and grows downward; paper (::before, inset:0) follows, the fold stays 56px at the top-right corner. */
  .project-card.project-card--narrow{height:auto;min-height:232px}
  /* When the content fills the card, margin-top:auto on the CTA collapses to 0; keep at least 16px above
     the CTA row (padding, so the .trim margins of the description stay untouched) and 12px between a
     wrapped CTA label and its arrow. With free space the CTA still sits at the bottom, 24px above the edge. */
  .project-card--narrow .project-card__link{padding-top:16px;gap:12px}
}

/* No-JS fallback (browsers that support the scripting media feature): let every card grow if needed
   instead of overflowing. Normal cards render the same as long as their content fits 232px. */
@media (scripting:none) and (min-width:768px){
  .project-card{height:auto;min-height:232px}
}

/* Desktop fine-pointer project letters follow within their own image. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .projects .project-tile{cursor:pointer}
 .projects .project-card--following{width:var(--follow-w,380px);left:var(--follow-x)!important;top:var(--follow-y)!important;transform:none!important;translate:none!important;opacity:1;transition:opacity .2s ease}
}