/* ================= Wersja mobilna i tablet =================
   1024 px i mniej: menu w nakładce zamiast kapsuł.
   900 px i mniej: układy wielokolumnowe przechodzą w jedną kolumnę, makiety aplikacji przewijają się w bok.
   767 px i mniej: telefon, mniejsze odstępy i typografia, margines boczny 16 px. */

/* wszędzie: ciaśniejsza interlinia w tekstach pisanych, interfejs makiet zostaje bez zmian */
.lead,.f-copy p,.day-intro p,.tag-head p,.tag-copy p,.tile>p,.who>p,.w-proc-head p,.w-bill-head p,.f-end p,.end-p,.b-lead,.demo-head p,.d-left .sub-h,
.w-st p,.w-tl li,.steps li span,.w-pain li,.d-next li p,.d-consent,.ix-d,.cap-txt,.w-host-app p,.caps li,.w-pay li,.f-hero .lead,.hero-copy .lead{line-height:1.32!important}
.sub-h{line-height:1.25!important}
.a-text{line-height:1.55!important}

/* przewijanie w bok: na komputerze wrapper nie istnieje dla układu */
.hs{display:contents}
.burger,.mnav{display:none}

@media (max-width:1024px){
  /* ---------- nagłówek: logo i przycisk menu ---------- */
  .nav-r,.nav-u{display:none!important}
  .burger{position:relative;z-index:12;display:grid;place-items:center;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
    background:rgba(18,19,24,.42);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);cursor:pointer;padding:0}
  .burger span{position:absolute;left:14px;width:18px;height:1.5px;border-radius:2px;background:#fff;transition:transform .5s cubic-bezier(.7,0,.2,1),top .5s cubic-bezier(.7,0,.2,1)}
  .burger span:first-child{top:18.5px}.burger span:last-child{top:25.5px}
  .mnav-open .burger span:first-child{top:22px;transform:rotate(45deg)}
  .mnav-open .burger span:last-child{top:22px;transform:rotate(-45deg)}
  .hdr{z-index:12}
  .mnav-open .hdr::before{opacity:0}

  /* ---------- nakładka menu: koło rozlewa się od przycisku, pozycje wjeżdżają po kolei ---------- */
  .mnav{display:block;position:fixed;inset:0;z-index:11;background:rgba(11,12,16,.8);backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px) saturate(1.1);
    clip-path:circle(0 at var(--x,90%) var(--y,40px));visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
  .mnav-open .mnav{clip-path:circle(150% at var(--x,90%) var(--y,40px));visibility:visible;transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s}
  html.mnav-open,html.mnav-open body{overflow:hidden}
  .mnav-in{display:flex;flex-direction:column;justify-content:flex-start;gap:36px;height:100%;width:var(--wrap);margin:0 auto;padding:clamp(100px,16vh,140px) 0 calc(28px + env(safe-area-inset-bottom))}
  .mnav-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
  .mnav-l{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);font:400 clamp(28px,7.4vw,40px)/1.1 Outfit,sans-serif;letter-spacing:-.02em;color:#fff;
    opacity:0;transform:translateY(26px);transition:opacity .4s,transform .4s}
  .mnav-l i{width:22px;height:22px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat;position:relative;opacity:.5}
  .mnav-l i::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-4.5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
  .mnav-l.cur span{background:linear-gradient(90deg,#fff,#c7b2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mnav-l.cur::before{content:"";order:-1;width:8px;height:8px;border-radius:50%;background:#8D3FF2;box-shadow:0 0 0 5px rgba(141,63,242,.28);margin-right:-4px}
  .mnav-l.cur span{margin-right:auto}
  .mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(26px);transition:opacity .4s,transform .4s}
  .mnav-foot .btn2{align-self:stretch;justify-content:space-between;font-size:16px;padding:6px 6px 6px 8px}
  .mnav-foot .btn2 .i{width:44px;height:44px}
  .mnav-foot .lg{align-self:flex-start;height:44px;padding:0 18px 0 14px;border:1px solid rgba(255,255,255,.12)}
  /* język na górze menu: pigułka z podświetleniem, które przesuwa się na wybraną flagę */
  .mnav-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:-12px;opacity:0;transform:translateY(-14px);transition:opacity .4s,transform .4s}
  .mnav-top-l{font-size:13px;color:var(--mut2);letter-spacing:.02em}
  .mnav-lang{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
  .mnav-lang a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--mut);transition:color .4s}
  .mnav-lang a.on{color:#fff}
  .mnav-lang .flag{width:18px;height:18px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .mnav-lang a.on .flag{transform:scale(1.12)}
  .mnav-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(135deg,rgba(141,63,242,.55),rgba(68,212,236,.35));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 20px -8px rgba(141,63,242,.8);transition:transform .55s cubic-bezier(.65,0,.2,1)}
  .mnav-pill{transform:translateX(calc(var(--li,0) * 100%))}
  .mnav-open .mnav-top{opacity:1;transform:none;transition:opacity .6s .2s,transform .8s cubic-bezier(.2,.75,.1,1) .2s}
  /* fokus: bez domyślnego żółtego obrysu po dotknięciu, subtelny tylko przy klawiaturze */
  .burger:focus{outline:none}
  .burger:focus-visible{box-shadow:0 0 0 3px rgba(141,63,242,.55)}
  .mnav-open .mnav-l,.mnav-open .mnav-foot{opacity:1;transform:none;transition:opacity .6s calc(.22s + var(--i) * 70ms),transform .8s cubic-bezier(.2,.75,.1,1) calc(.22s + var(--i) * 70ms)}
}

@media (max-width:900px){
  /* ---------- makiety w całości, pomniejszone do szerokości ekranu (skalę liczy menu.js) ---------- */
  .hs{display:block;position:relative;overflow:hidden}
  .f-mock{overflow:hidden}
  /* ---------- strona główna ---------- */
  .hero-bottom{grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
  .feed{max-width:440px}
  .tile{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"when" "h3" "p" "ui"!important;grid-template-rows:auto!important;row-gap:12px!important}
  .tile .ui{margin-top:12px}
  .tag-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px}
  .tag-grid .hs{--hs-pad:0px}
  .tag-grid .hs #app{width:720px;max-width:none}
  .who-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important}
  .who{grid-row:auto!important;display:flex!important;flex-direction:column}
  .who+.who{border-left:0!important;border-top:1px solid rgba(255,255,255,.14)!important}
  .day-intro{display:block}

  /* ---------- funkcje systemu ---------- */
  .f-hero-in{grid-template-columns:minmax(0,1fr)!important;gap:40px;align-items:start}
  .f-frame{grid-template-columns:minmax(0,1fr)!important;gap:28px}
  .f-mock .app.task-win,.f-mock .app.views,.f-mock .app.reports,.f-mock .app.tagdemo{width:620px;max-width:none}
  .demo-head{flex-direction:column;align-items:flex-start;gap:20px}
  .f-demo .hs #big{width:780px;max-width:none;height:560px}
  /* odtwarzacz: przycisk i napis w pierwszej linii, głos, czas i wyciszenie w drugiej */
  .caption{flex-wrap:wrap;row-gap:12px}
  .caption .cap-txt{flex:1 1 calc(100% - 60px)}
  .caption.playing .pl-voice{margin-left:54px}
  .caption.playing .pl-side{margin-left:auto;max-width:none}
  .pl-vol{display:none}

  /* ---------- wdrożenie ---------- */
  .w-sts{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;border-top:0!important;margin-left:12px}
  .w-sts::before{display:none}
  .w-st{grid-row:auto!important;display:block!important;padding:0 0 40px 34px!important;border-left:1px solid rgba(255,255,255,.14)!important}
  .w-st:last-child{padding-bottom:6px!important}
  .w-st-n,.w-st:first-child .w-st-n{left:-12px!important;top:0!important}
  .w-st.on{border-left-color:rgba(255,255,255,.6)!important}
  .w-st svg{max-width:300px;margin:4px 0 20px!important}
  .w-tl{grid-template-columns:minmax(0,1fr)!important}
  .w-tl>:nth-child(1){order:1}.w-tl>:nth-child(3){order:2}.w-tl>:nth-child(5){order:3}.w-tl>:nth-child(7){order:4}
  .w-tl>:nth-child(2){order:5;margin-top:44px}.w-tl>:nth-child(4){order:6}.w-tl>:nth-child(6){order:7}.w-tl>:nth-child(8){order:8}
  #serwer .hs #wHost{width:620px;max-width:none}

  /* ---------- blog ---------- */
  .b-row{grid-template-columns:minmax(0,1fr)!important;gap:22px}
  .a-body{grid-template-columns:minmax(0,1fr)!important;gap:28px}
  .a-side{position:static}
  .a-back-s{display:none}
  .a-cover{aspect-ratio:4/3}

  /* ---------- demo ---------- */
  .d-box{grid-template-columns:minmax(0,1fr)!important;gap:44px}
  .d-right{position:static}
}

@media (max-width:767px){
  :root{--wrap:calc(100% - 32px)}
  .hdr-in{padding:14px 0}
  .logo img{height:26px}
  /* telefon: mniejsza typografia i ciaśniejsza interlinia */
  h1{font-size:clamp(28px,8vw,33px)!important;line-height:1.08!important}
  h2{font-size:clamp(24px,6.6vw,28px)!important;line-height:1.12!important}
  .sub-h{font-size:15.5px!important;line-height:1.25!important;margin-top:14px!important}
  .lead,.f-copy p,.day-intro p,.tag-head p,.tag-copy p,.tile>p,.who>p,.w-proc-head p,.w-bill-head p,.f-end p,.end-p,.b-lead,.demo-head p,.d-left .sub-h{font-size:14.5px!important;line-height:1.32!important}
  .lead{margin-top:14px!important}
  .tile h3,.who h3{font-size:19px!important}
  .w-st h3,.w-tl h3,.b-row h2{font-size:clamp(19px,5.4vw,22px)!important}
  .w-st p,.w-tl li,.steps li span,.w-pain li,.d-next li p,.d-consent{font-size:13.5px!important;line-height:1.32!important}
  .w-pain li{font-size:14.5px!important}
  .a-text{font-size:15.5px!important;line-height:1.5!important}
  .a-text h2{font-size:21px!important}
  .frame,.f-frame,.f-demo,.w-proc,.d-box,.a-body,.b-list,.tag-frame{padding-left:18px!important;padding-right:18px!important}
  .f-frame,.f-demo,.w-proc,.d-box,.a-body,.tag-frame{padding-top:34px!important;padding-bottom:34px!important}
  .cx{display:none}
  .btn2{font-size:15px}
  .ctas{flex-wrap:wrap}

  /* strona główna */
  .hero{padding-top:110px}
  /* linia dnia biegnie 4 px od lewej krawędzi ramki dnia, cały tekst zaczyna się równo ~20 px za nią */
  .home,.hero-bottom{padding-left:42px!important}
  .day-intro{padding-left:24px!important;padding-right:0!important}
  .home .clock{font-size:clamp(84px,25vw,120px)!important}
  .hero-copy .ctas{margin-top:30px}
  .day-sec{padding-top:140px}
  .day-sec .grid-lines{padding-top:44px}
  .day{padding:0!important}
  .axis{left:4px!important}
  .tile{padding-left:24px!important}
  .tile{padding-top:36px!important;padding-bottom:36px!important}
  .r-row{grid-template-columns:auto auto minmax(0,1fr)!important}
  .r-row small{display:none}
  .tag-sec{padding-top:90px}
  .who{padding:34px 18px!important}
  .end-clock{font-size:clamp(84px,25vw,120px)!important}
  .end-sec{min-height:0;padding:120px 0 90px}

  /* funkcje */
  .f-hero{min-height:0;padding-top:120px}
  .f-sec{padding:44px 0}
  .f-end{padding:90px 0 80px}
  .pl-step{display:none}
  .f-index{padding:4px 18px!important}
  .f-index a{padding:12px 0!important}
  .ix-t{font-size:14.5px!important}
  .ix-d{font-size:13px!important}

  /* wdrożenie */
  .w-pain{padding:16px 18px 6px}
  .w-bill{padding:90px 0 80px}

  /* blog */
  .b-hero{padding:120px 0 30px}
  .a-hero{padding:110px 0 28px}
  .b-row{padding:26px 0}
  .a-next{padding:18px!important}
  /* tekst hero na tle jasnych szczytów: delikatne przyciemnienie pod spodem, żeby był czytelny */
  .f-hero,.a-hero,.b-hero{position:relative}
  .f-hero::before,.a-hero::before,.b-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,11,15,0) 0%,rgba(10,11,15,.42) 35%,rgba(10,11,15,.42) 75%,rgba(10,11,15,0) 100%)}

  /* demo */
  .d-sec{padding:100px 0 60px}
  .d-form{grid-template-columns:minmax(0,1fr)}
  .d-form .btn2{justify-self:stretch;justify-content:space-between}

  /* stopka */
  .foot-in{padding:30px 18px 20px!important}
  .f-bot{flex-direction:column;gap:8px}
  .f-legal{padding:16px 19px 22px!important}
  .f-mark{margin:40px 0 28px!important}
}