/* Lokamo :: wzor podstrony produktu (szablon/index.html).
   Korzysta z home.css (.wrap, .ch__*, .btn, .lnk, .phone, .stage-l, .scn,
   .story, .beat, .faq, .qa, .cta) i dodaje tylko swoje klocki:
   .sub-* (sekcje podstrony) oraz .tp-* (scena produktu w em, skala z cqw). */

/* Hero podstrony: ciemne, z makieta produktu */
.sub-hero{position:relative;background:var(--ink);color:var(--paper);padding:calc(var(--hdr) + 44px) 0 104px;overflow:clip}
.sub-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask:radial-gradient(70% 80% at 70% 40%,#000 10%,transparent 75%);mask:radial-gradient(70% 80% at 70% 40%,#000 10%,transparent 75%);pointer-events:none}
.sub-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;font-size:14px;color:var(--mist)}
.crumbs li+li::before{content:"/";margin-right:8px;color:#4A4A50}
.crumbs a{color:var(--mist);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}
.sub-hero__k{display:flex;align-items:center;gap:10px;margin:34px 0 18px;font-size:13px;color:var(--mist)}
.sub-hero__k i{width:6px;height:6px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px rgba(46,75,255,.25)}
.sub-hero__t{font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.042em;font-weight:560;text-wrap:balance}
.sub-hero__t span{color:var(--mist)}
.sub-hero__lead{margin-top:24px;max-width:520px;font-size:18px;line-height:1.6;color:var(--d-text);text-wrap:pretty}
.sub-hero__facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;padding-top:22px;border-top:1px solid var(--d-line);list-style:none;font-size:14.5px;color:var(--mist)}
.sub-hero__facts b{margin-right:6px;color:#fff;font-weight:500}
.sub-hero__vis{position:relative;container-type:inline-size}
.sub-hero__vis .scn__in{position:relative;inset:auto;width:100%;aspect-ratio:1/.92;font-size:calc(100cqw / 42)}
.js .sub-hero__copy>*{animation:subRise 1s var(--ease-out) both}
.js .sub-hero__copy>*:nth-child(2){animation-delay:.05s}
.js .sub-hero__copy>*:nth-child(3){animation-delay:.1s}
.js .sub-hero__copy>*:nth-child(n+4){animation-delay:.16s}
.js .sub-hero__vis{animation:subRise 1.2s var(--ease-out) .15s both}
@keyframes subRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Korzysci z faktami */
.sub-facts{padding:128px 0 120px}
.sub-facts__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:64px 0 0;border-top:1px solid var(--line)}
.sub-facts__grid>div{padding:28px 24px 0 0}
.sub-facts__grid>div+div{padding-left:24px;border-left:1px solid var(--line)}
.sub-facts__grid dt{font-size:clamp(34px,3.4vw,50px);font-weight:500;letter-spacing:-.035em;line-height:1}
.sub-facts__grid dd{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:var(--text2)}
.sub-facts__grid dd b{display:block;margin-bottom:4px;color:var(--ink);font-weight:560}
/* Miejsce na prawdziwa opinie klienta (patrz komentarz w HTML) */
.sub-quote{display:none}

/* Plany z prawdziwymi cenami */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.plan--on{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt),0 30px 60px -36px rgba(46,75,255,.45)}
.plan__tag{position:absolute;top:-11px;left:22px;padding:4px 9px;border-radius:6px;background:var(--cobalt);color:#fff;font-size:11.5px;letter-spacing:.04em}
.plan h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.plan__p{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.plan__p b{font-size:44px;font-weight:500;letter-spacing:-.045em;line-height:1}
.plan__p span{font-size:14.5px;color:var(--steel)}
.plan__d{margin-top:12px;font-size:15px;line-height:1.5;color:var(--text2);min-height:3em}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:20px 0 24px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.plan li{position:relative;padding-left:24px}
.plan li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan--on li::before{background:var(--cobalt)}
.plan .btn{margin-top:auto}
.plan__btn{--bg:#fff;--fg:var(--ink);border-color:#D2D2D7}
.plan__btn:hover{border-color:var(--ink)}
.plans__more{margin-top:22px;font-size:14.5px;color:var(--steel)}
.plans__more a{color:var(--ink);text-underline-offset:3px}

/* Scena produktu (hero i opowiesc): telefon goscia, bon w kuchni, kelner */
.scn--tpl{aspect-ratio:1/1.08}
.tp-phone{position:absolute;left:3.4em;top:4em;width:17.6em}
.tp-g{position:absolute;inset:0;padding:3.3em .95em 0;font-size:1em}
.tp-bar{position:absolute;left:1.9em;top:1.25em;font-size:.82em;font-weight:600}
.tp-hero{position:relative;height:8.8em;border-radius:1.1em;overflow:hidden}
.tp-hero img{width:100%;height:100%;object-fit:cover}
.tp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.6))}
.tp-hero b{position:absolute;left:.8em;bottom:.6em;z-index:1;color:#fff;font-size:1.5em;font-weight:680;letter-spacing:-.02em}
.tp-lang{position:absolute;right:.6em;top:.6em;z-index:1;padding:.35em .6em;border-radius:99em;background:rgba(255,255,255,.94);font-size:.8em;font-weight:600;transition:background-color .3s,color .3s}
.tp-lang.is-flash{background:var(--ink);color:#fff}
.tp-cat{margin:.9em 0 .2em;font-size:.95em;font-weight:620}
.tp-list{list-style:none}
.tp-list li{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto 2em;gap:.7em;align-items:center;padding:.6em 0;border-bottom:1px solid #EDEDF0}
.tp-list img{width:3.4em;height:3.4em;border-radius:.65em;object-fit:cover}
.tp-list span{min-width:0}
.tp-list b,.tp-list small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-list b{font-size:.95em;font-weight:620}
.tp-list small{margin-top:.1em;font-size:.78em;color:var(--steel)}
.tp-list em{font-style:normal;font-size:.85em}
.tp-add{position:relative;display:grid;place-items:center;width:2em;height:2em;border-radius:50%;border:1px solid var(--line);font:500 1.1em/1 var(--font);font-style:normal;transition:background-color .25s,color .25s,border-color .25s}
.tp-add::before{content:"+"}
.tp-add.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.tp-add.is-on::before{content:attr(data-n);font:600 .8em/1 var(--mono)}
.tp-cart{position:absolute;left:.85em;right:.85em;bottom:1em;display:flex;align-items:center;gap:.6em;height:3.3em;padding:0 .45em 0 .55em;border-radius:1.05em;background:var(--ink);color:#fff;transform:translateY(5em);transition:transform .55s var(--ease-out)}
.tp-cart.is-show{transform:none}
.tp-cart span{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:rgba(255,255,255,.16);font-size:.82em}
.tp-cart b{font-size:.92em;font-weight:560}
.tp-cart em{margin-left:auto;font-style:normal;font-size:.85em}
.tp-cart i{padding:.6em .9em;border-radius:.75em;background:#fff;color:var(--ink);font-style:normal;font-size:.9em;font-weight:620}
.tp-sheet{position:absolute;left:0;right:0;bottom:0;padding:1.4em 1.1em 1.6em;border-radius:1.6em 1.6em 0 0;background:#fff;box-shadow:0 -1em 2.4em -1em rgba(13,13,15,.28);transform:translateY(105%);transition:transform .6s var(--ease-out)}
.tp-sheet.is-show{transform:none}
.tp-done{text-align:center}
.tp-ok{display:grid;place-items:center;width:2.7em;height:2.7em;margin:0 auto .6em;border-radius:50%;background:var(--ok)}
.tp-ok::before{content:"";width:1.3em;height:1.3em;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tp-sheet b{display:block;font-size:1.15em;font-weight:680;letter-spacing:-.01em}
.tp-sheet small{display:block;margin-top:.3em;font-size:.82em;color:var(--steel)}
.tp-track{display:flex;justify-content:space-between;gap:.4em;margin-top:1.1em;list-style:none;font-size:.78em;color:var(--steel)}
.tp-track li{flex:1;padding-top:.5em;border-top:.2em solid #E4E4E8;text-align:left}
.tp-track li.is-on{border-top-color:var(--cobalt);color:var(--ink)}
.tp-bill{text-align:left}
.tp-bill>b{display:flex;justify-content:space-between;align-items:baseline}
.tp-bill>b small{margin:0}
.tp-bill ul{list-style:none;margin-top:.7em}
.tp-bill li{display:flex;justify-content:space-between;padding:.35em 0;border-bottom:1px solid #EFEFF2;font-size:.88em}
.tp-bill li i{font-style:normal}
.tp-sum{display:flex;justify-content:space-between;margin-top:.6em;font-weight:620}
.tp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35em;margin-top:.8em}
.tp-opts span{padding:.55em .2em;border:1px solid #E1E1E6;border-radius:.6em;text-align:center;font-size:.78em;font-weight:560;transition:background-color .25s,color .25s,border-color .25s}
.tp-opts span.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.tp-req{display:block;margin-top:.9em;padding:.85em;border-radius:.8em;background:var(--ink);color:#fff;text-align:center;font-style:normal;font-weight:620;font-size:.92em}
.tp-sent{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;border-radius:inherit;background:#fff;text-align:center;opacity:0;transition:opacity .4s}
.tp-sent.is-show{opacity:1}
.tp-tap{position:relative}
.tp-tap::after{content:"";position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;border:.2em solid var(--cobalt);opacity:0;pointer-events:none}
.tp-tap.is-tap::after{animation:tpTap .7s var(--ease-out)}
@keyframes tpTap{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.tp-card{position:absolute;color:var(--ink);padding:1.1em 1.2em;border-radius:1.1em;background:#fff;box-shadow:0 0 0 1px rgba(13,13,15,.05),0 1.4em 2.8em -1.4em rgba(13,13,15,.35);opacity:0;transform:translateY(1em);transition:opacity .5s,transform .7s var(--ease-out)}
.tp-card.is-show{opacity:1;transform:none}
.tp-card__k{display:flex;align-items:center;gap:.5em;font-size:.82em;color:var(--steel)}
.tp-card__k::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--cobalt)}
.tp-qr{left:23.5em;top:9em;width:14.5em;text-align:center}
.tp-qr span{display:block;width:10em;height:10em;margin:.4em auto .8em;background:url("/assets/home/img/qr.svg") center/contain no-repeat}
.tp-qr b{display:block;font-size:1.1em;font-weight:650}
.tp-qr small{display:block;margin-top:.3em;font-size:.85em;color:var(--steel)}
.tp-kds{left:23.5em;top:8.5em;width:15.5em;border-left:.3em solid var(--cobalt)}
.tp-kds.is-ready{border-left-color:var(--ok)}
.tp-kds__h{display:flex;align-items:center;gap:.5em;margin-top:.7em}
.tp-kds__h b{font-size:1.3em;font-weight:680}
.tp-kds__h span{padding:.3em .45em;border-radius:.4em;background:#F2F2F5;font-size:.8em;color:var(--steel)}
.tp-kds__h em{margin-left:auto;padding:.3em .5em;border-radius:.4em;background:#EEF1FF;color:var(--cobalt);font-size:.8em;font-style:normal}
.tp-kds.is-ready .tp-kds__h em{background:#EAF6EF;color:var(--ok)}
.tp-kds ul{list-style:none;margin-top:.6em}
.tp-kds li{display:flex;align-items:center;gap:.6em;padding:.25em 0;font-size:1em}
.tp-kds li i{display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:.35em;background:#F2F2F5;font-style:normal;font-size:.78em;color:var(--steel)}
.tp-kds__f{margin-top:.7em;padding-top:.7em;border-top:1px solid #EFEFF2;font-size:.82em;color:var(--ok)}
.tp-waiter{left:23.5em;top:26em;width:15.5em}
.tp-waiter p{display:flex;align-items:center;gap:.6em;margin-top:.6em}
.tp-waiter p b{font-size:1.05em;font-weight:620}
.tp-waiter p i{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#FFF1E6;color:#C2410C;font-style:normal;font-weight:680;font-size:.9em}
.tp-waiter small{display:block;margin-top:.25em;color:var(--steel);font-size:.85em}
.sub-hero__vis .tp-card{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2em 3.4em -1.6em rgba(0,0,0,.8)}
.sub-hero__vis .tp-phone{box-shadow:0 2.6em 4.6em -1.6em rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}

@media (max-width:999px){
  .sub-hero__grid{grid-template-columns:1fr;gap:40px}
  .sub-hero__vis{max-width:560px}
  .sub-facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sub-facts__grid>div:nth-child(3){padding-left:0;border-left:0}
  .sub-facts__grid>div:nth-child(n+3){margin-top:28px;border-top:1px solid var(--line)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sub-hero{padding:calc(var(--hdr) + 28px) 0 72px}
  .sub-hero__t{font-size:clamp(38px,11vw,52px)}
  .sub-hero__lead{font-size:17px}
  .sub-hero .hero__ctas .btn{width:100%}
  .sub-facts{padding:88px 0}
  .sub-facts__grid{grid-template-columns:1fr}
  .sub-facts__grid>div,.sub-facts__grid>div+div{padding:22px 0 0;border-left:0;margin-top:22px;border-top:1px solid var(--line)}
  .sub-facts__grid>div:first-child{margin-top:0;border-top:0}
  .plans{grid-template-columns:1fr}
  .plan__d{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .js .sub-hero__copy>*,.js .sub-hero__vis{animation:none}
}