/* Lokamo :: Telefon LokamoAI (v4, H5). Kinowa ciemna scena: gleboki granat z ziarnem,
   poswiata z gradientu znaku LokamoAI (jedyne miejsce na stronie, gdzie ten gradient
   jest tlem), miekkie swiatlo z boku, szklane panele z obrysem 0,5 px.
   Scena: ekran rozmowy iOS (logo lokalu, licznik, fala glosu, napisy slowo po slowie),
   obok bon na kuchnie, ktory wylatuje z telefonu i drukuje pozycje.
   Ruch: tylko transform/opacity. Os czasu: v4.js (scenaRozmowa), tla dryfuja tylko w widoku. */

.tfx{
  --gl-1:#2E4BFF;--gl-2:#7B61FF;--gl-3:#FF4D1A;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
  padding:72px 64px;border-radius:calc(var(--bx-r) + 8px);color:#fff;
  background:radial-gradient(120% 90% at 50% 120%,#0C1033 0%,rgba(12,16,51,0) 60%),linear-gradient(160deg,#0A0C1E 0%,#05060F 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),0 40px 90px -50px rgba(20,24,90,.8)
}
.tfx::after{background-image:url("/assets/v4/ziarno.svg");opacity:.3;mix-blend-mode:soft-light;z-index:0}
.tfx>*{position:relative;z-index:1}
.tfx__tlo{position:absolute!important;inset:0;z-index:0!important;overflow:hidden;border-radius:inherit;pointer-events:none}
.tfx__sw{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;animation:tfx-dryf 18s ease-in-out infinite alternate var(--kl-a,paused)}
.tfx__sw--a{right:-6%;top:-18%;width:62%;height:78%;background:radial-gradient(closest-side,rgba(46,75,255,.75),rgba(46,75,255,0));}
.tfx__sw--b{right:18%;bottom:-30%;width:52%;height:70%;background:radial-gradient(closest-side,rgba(123,97,255,.55),rgba(123,97,255,0));animation-duration:22s;animation-delay:-6s}
.tfx__sw--c{left:-14%;top:20%;width:40%;height:80%;background:radial-gradient(closest-side,rgba(160,176,255,.16),rgba(160,176,255,0));animation-duration:26s}
@keyframes tfx-dryf{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,5%,0) scale(1.08)}}

/* Tekst */
.tfx__k{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.78);font-feature-settings:"ss01"}
.tfx__k svg{width:18px;height:18px}
.tfx__nowe{margin-left:4px;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);font-family:var(--font);font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;color:#fff}
.tfx h2{font-size:clamp(34px,3.8vw,52px);letter-spacing:-.045em;line-height:1.04;max-width:11em}
.tfx__lead{margin-top:18px;max-width:26em;font-size:18.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* Statystyki: szklany pasek, duze cyfry tabelaryczne, cienkie separatory */
.tfx__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:36px 0 0;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tfx__st>div{padding:18px 20px 18px}
.tfx__st>div+div{box-shadow:inset .5px 0 0 rgba(255,255,255,.14)}
.tfx__st dt{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.tfx__st b{font-size:40px;font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.tfx__st b[data-do="500"],.tfx__st b[data-do="349"]{min-width:1.75ch}
.tfx__st dt span{font-size:15px;font-weight:540;color:rgba(255,255,255,.7)}
.tfx__st dd{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.62);line-height:1.35}

.tfx__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.tfx__cta>span{font-size:14px;color:rgba(255,255,255,.6)}
.tfx__btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px;border-radius:99px;background:#fff;color:#0D0D0F;font-size:16px;font-weight:580;text-decoration:none;white-space:nowrap;
  box-shadow:0 0 0 .5px rgba(255,255,255,.6),0 14px 34px -14px rgba(110,107,255,.65);transition:transform .24s cubic-bezier(.3,1.25,.6,1),background-color .2s}
.tfx__btn svg{width:18px;height:18px;transition:transform .24s cubic-bezier(.3,1.25,.6,1)}
@media (hover:hover){.tfx__btn:hover{transform:scale(1.02);background:#F1F3FF}.tfx__btn:hover svg{transform:translateX(3px)}}
.tfx__btn:active{transform:scale(.98)}
.tfx__btn:focus-visible{outline:2px solid #B9C6FF;outline-offset:3px}

/* Scena */
.tfx__scena{--w:288px;position:relative;height:calc(var(--w) * 2.06 + 8px);max-width:500px;width:100%;justify-self:center}
.tfx__scena>.pauza{position:absolute;right:0;bottom:0;z-index:5}

/* iPhone: rama tytanowa, ekran rozmowy */
.ipx{position:absolute;left:4%;top:0;width:var(--w);height:calc(var(--w) * 2.06);font-size:calc(var(--w) / 24);border-radius:17%/8.25%;padding:1.05%;
  background:linear-gradient(118deg,#9C9CA4 0%,#4A4A50 9%,#1E1E22 24%,#323237 44%,#18181B 62%,#2E2E33 80%,#7A7A82 94%,#B4B4BC 100%);
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.35),0 60px 90px -40px rgba(0,0,0,.9),0 0 0 .5px rgba(255,255,255,.06),0 30px 120px -30px rgba(80,90,255,.45)}
.ipx::before{content:"";position:absolute;left:-.25em;top:20%;width:.25em;height:9%;border-radius:.2em 0 0 .2em;background:#3A3A40}
.ipx::after{content:"";position:absolute;right:-.25em;top:27%;width:.25em;height:14%;border-radius:0 .2em .2em 0;background:#3A3A40}
.ipx__ekran{position:relative;height:100%;overflow:hidden;isolation:isolate;border-radius:15.4%/7.5%;border:.42em solid #030304;background:#0B0B12;color:#fff}
@supports (corner-shape:squircle){.ipx{corner-shape:squircle;border-radius:25%/12.1%}.ipx__ekran{corner-shape:squircle;border-radius:23%/11.2%}}
.ipx__ekran::before{content:"";position:absolute;z-index:3;top:1.6%;left:33%;width:34%;height:3.6%;border-radius:99em;background:#000}
.ipx__tlo{position:absolute;inset:-12%;z-index:-2;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(26px) saturate(1.2);opacity:.75;transform:scale(1.1)}
.ipx__ekran::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,20,.45) 0%,rgba(8,8,18,.72) 45%,rgba(6,6,14,.9) 100%)}
.ipx__sb{display:flex;justify-content:space-between;align-items:center;height:3.7em;padding:0 2.2em 0 2.5em;font-size:1em}
.ipx__sb b{font-weight:620;font-size:1.12em}
.ipx__sb span{display:flex;align-items:center;gap:.45em}
.ipx__sb svg{width:1.35em;height:.9em;fill:#fff}
.ipx__sb i{width:2em;height:.95em;border-radius:.3em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);position:relative}
.ipx__sb i::after{content:"";position:absolute;inset:2px;right:28%;border-radius:.15em;background:#fff}

.ipx__kto{display:flex;flex-direction:column;align-items:center;padding-top:1.4em;text-align:center}
.ipx__av{width:5.6em;height:5.6em;border-radius:50%;overflow:hidden;background:#F6EFE6;box-shadow:0 0 0 .5px rgba(255,255,255,.3),0 .8em 2em -.6em rgba(0,0,0,.6)}
.ipx__av img{width:100%;height:100%;object-fit:cover}
.ipx__kto b{margin-top:.75em;font-size:1.75em;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.ipx__kto small{display:flex;align-items:center;gap:.5em;margin-top:.4em;font-size:1.08em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.ipx__lok{display:inline-flex;align-items:center;gap:.3em;padding:.12em .55em .12em .4em;border-radius:99em;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);color:#fff;font-weight:560;font-size:.92em}
.ipx__lok svg{width:.95em;height:.95em}
/* Fala glosu: slupki skaluja sie tylko, gdy ktos mowi; kolor = kto mowi */
.ipx__fala{display:flex;align-items:center;gap:.28em;height:2.6em;margin-top:.9em}
.ipx__fala i{width:.26em;height:100%;border-radius:.2em;background:rgba(255,255,255,.55);transform:scaleY(.12);transition:transform .35s ease,background-color .3s}
.tfx__scena.is-ai .ipx__fala i{background:#A9B6FF}
.tfx__scena.is-ty .ipx__fala i{background:#fff}
.tfx__scena:is(.is-ai,.is-ty) .ipx__fala i{animation:ipx-fala .9s ease-in-out infinite alternate}
.ipx__fala i:nth-child(2n){animation-duration:.7s!important}
.ipx__fala i:nth-child(3n){animation-duration:1.1s!important;animation-delay:-.3s!important}
.ipx__fala i:nth-child(4n+1){animation-delay:-.5s!important}
.ipx__fala i:nth-child(5n){animation-duration:.6s!important}
@keyframes ipx-fala{0%{transform:scaleY(.18)}35%{transform:scaleY(.9)}60%{transform:scaleY(.4)}100%{transform:scaleY(.75)}}

/* Napisy rozmowy: wszystkie linie stoja w ukladzie, przewija je transform (zero CLS) */
.ipx__cz{position:relative;height:15.6em;margin:1.3em 1.1em 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.6em);mask-image:linear-gradient(180deg,transparent 0,#000 2.6em)}
.ipx__tor{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:.55em;padding-top:2.2em;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cz{padding:.7em .95em .75em;border-radius:1.2em;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:1.12em;line-height:1.36;opacity:0;transform:translate3d(0,.6em,0);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.cz em{display:block;margin-bottom:.15em;font-style:normal;font-size:.78em;font-weight:620;letter-spacing:.02em;color:rgba(255,255,255,.6)}
.cz--ai{background:rgba(70,98,255,.22);box-shadow:inset 0 0 0 .5px rgba(150,168,255,.35)}
.cz--ai em{color:#B9C6FF}
.cz.is-on{opacity:1;transform:none}
.cz.is-stara{opacity:.5}
.cz .w{display:inline-block;opacity:0;transform:translate3d(0,.25em,0);transition:opacity .28s,transform .35s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * var(--krok,190ms))}
.cz.is-on .w{opacity:1;transform:none}

/* Sterowanie rozmowa */
.ipx__ster{position:absolute;left:0;right:0;bottom:3.4em;display:flex;justify-content:center;gap:1.1em}
.ipx__ster span{display:grid;place-items:center;width:4.4em;height:4.4em;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ipx__ster span.is-on{background:#fff}
.ipx__ster span.is-on svg{stroke:#0D0D0F}
.ipx__ster svg{width:1.9em;height:1.9em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ipx__ster span:nth-child(2) svg{fill:#fff;stroke:none}
.ipx__end{background:#EB4E3D!important}
.ipx__end svg{fill:#fff!important;stroke:none!important}
.ipx__home{position:absolute;left:35%;right:35%;bottom:.75em;height:.36em;border-radius:99em;background:rgba(255,255,255,.85)}

/* Bon na kuchnie: wylatuje z telefonu, pozycje drukuja sie kolejno, status przechodzi w "W kuchni" */
.bonx{position:absolute;z-index:4;right:0;top:35%;width:244px;padding:18px 18px 22px;color:#0D0D0F;background:#FBFBF8;font-feature-settings:"tnum";
  border-radius:14px 14px 4px 4px;
  -webkit-mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/12px 100% repeat-x;mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/12px 100% repeat-x;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.5));
  opacity:0;transform:translate3d(-90px,30px,0) rotate(-10deg) scale(.86);transform-origin:20% 50%;
  transition:opacity .5s,transform .9s cubic-bezier(.34,1.32,.64,1)}
.tfx__scena.is-bon .bonx{opacity:1;transform:translate3d(0,0,0) rotate(3deg)}
.bonx__g{display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#626268;font-feature-settings:"ss01"}
.bonx__st{position:relative;display:inline-grid;align-items:center;padding:4px 9px 4px 20px;border-radius:99px;background:#EEF1FF;color:#2238D9;font-family:var(--font);font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:650;transition:background-color .3s,color .3s}
.bonx__st i{position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor}
.bonx__st span{grid-area:1/1;transition:opacity .3s}
.bonx__s2{opacity:0}
.tfx__scena.is-kuchnia .bonx__st{background:#FFF1D6;color:#8A5200}
.tfx__scena.is-kuchnia .bonx__s1{opacity:0}
.tfx__scena.is-kuchnia .bonx__s2{opacity:1}
.tfx__scena.is-kuchnia .bonx__st i{animation:bonx-puls 1.4s ease-in-out infinite}
@keyframes bonx-puls{50%{opacity:.3}}
.bonx__nr{margin-top:10px;font-size:26px;font-weight:650;letter-spacing:-.03em;line-height:1}
.bonx__nr small{margin-left:4px;font-size:12.5px;font-weight:500;letter-spacing:0;color:#626268}
.bonx__poz{margin-top:12px;padding-top:10px;border-top:1.5px dashed #D6D6DB;display:grid;gap:7px}
.bonx__poz li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;line-height:1.3}
.bonx__poz li span:last-child{font-family:var(--mono);font-size:12.5px;color:#45454B}
.bonx__suma{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1.5px solid #0D0D0F;font-size:14px;font-weight:600}
.bonx__suma b{font-size:20px;letter-spacing:-.02em}
[data-poz]{opacity:0;transform:translate3d(0,-4px,0);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
[data-poz].is-on{opacity:1;transform:none}

@media (max-width:1100px){
  .tfx{grid-template-columns:1fr;gap:56px;padding:64px 48px}
  .tfx__scena{max-width:520px}
}
@media (max-width:560px){
  .tfx{padding:44px 20px 28px;gap:40px;border-radius:var(--bx-r)}
  .tfx__lead{font-size:17px}
  .tfx__st b{font-size:30px}
  .tfx__st>div{padding:14px 12px}
  .tfx__st dt span{font-size:13px}
  .tfx__st dd{font-size:12.5px}
  .tfx__scena{--w:min(244px,calc(100vw - 132px))}
  .ipx{left:0}
  .bonx{width:192px;padding:14px 14px 18px;top:44%}
  .bonx__g{font-size:10px;letter-spacing:.04em}
  .bonx__nr{font-size:21px}
  .bonx__poz li{font-size:12px}
  .bonx__poz li span:last-child{font-size:11.5px}
  .bonx__suma b{font-size:17px}
  .tfx__scena>.pauza{bottom:auto;top:0}
}
@media (prefers-reduced-motion:reduce){
  .tfx__sw{animation:none!important}
  .cz,.cz .w,[data-poz],.bonx{transition:none!important}
}
/* H7: prawdziwe miejsce za telefonem: lada w szczycie wieczoru, przygaszona pod granatem */
.tfx__foto{position:absolute;right:0;top:0;width:66%;height:100%;object-fit:cover;opacity:.34;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%);transform:scale(1.06);animation:tfx-foto 24s ease-in-out infinite alternate var(--kl-a,paused)}
@keyframes tfx-foto{to{transform:scale(1.12) translate3d(-2%,1%,0)}}
@media (max-width:960px){.tfx__foto{width:100%;top:auto;height:62%;bottom:0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%)}}
@media (prefers-reduced-motion:reduce){.tfx__foto{animation:none}}