/* Lokamo :: podstrona Telefon LokamoAI (/telefon). Uklad i rytm jak /menu-qr
   (hero na ciemnym tle, sekcje .ch z home.css), scena: iPhone goscia w rozmowie,
   obok zamowienie skladane na zywo i bon w kasie. Scena w em, skaluje sie jak obraz. */

.tf-hero{position:relative;background:var(--ink);color:var(--paper);padding:112px 0 64px;overflow:clip}
.tf-hero__bg{position:absolute;inset:0;pointer-events:none}
.tf-hero__ring{position:absolute;top:50%;left:calc((100vw - min(1240px,100vw - 48px)) / 2 + min(1240px,100vw - 48px) * .75);width:min(56vw,800px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(90deg);background:var(--tone);-webkit-mask:var(--ring) center/contain no-repeat;mask:var(--ring) center/contain no-repeat}
.tf-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.tf-hero__copy{position:relative;z-index:2;padding:12px 0 24px}
.tf-hero .hero__title{font-size:clamp(40px,4.3vw,70px)}
.tf-hero__vis{position:relative;container-type:inline-size}
.tf-hero__in{position:relative;width:40em;height:35em;font-size:calc(100cqw / 40)}
.tf-hero__pause{position:absolute;right:0;bottom:.4em;z-index:6}

/* iPhone: ekran polaczenia iOS */
.tf-phone{position:absolute;left:1.5em;top:1.2em;width:15.6em;z-index:3;box-shadow:0 2.6em 4.6em -1.6em rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.tf-phone .phone__screen{font-size:.8em;background:#111}
.tf-call{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:4.6em 1.3em 1.6em;color:#fff;background:radial-gradient(120% 70% at 50% 0%,#3B3550 0%,#1D1B26 46%,#0E0E12 100%)}
.tf-call .gx__status{color:#fff}
.tf-call__who{display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center}
.tf-call__av{display:grid;place-items:center;width:3.6em;height:3.6em;border-radius:50%;background:linear-gradient(160deg,#8E8E96,#55555C);font-size:1.25em;font-weight:600;color:#fff}
.tf-call__who b{margin-top:.3em;font-size:1.45em;font-weight:560;letter-spacing:-.02em}
.tf-call__time{font-size:.9em;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.tf-call__subs{position:relative;flex:1;width:100%;margin-top:1.4em;overflow:hidden}
.tf-sub{position:absolute;left:0;right:0;bottom:0;padding:.7em .85em .75em;border-radius:1em;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.98em;line-height:1.38;opacity:0;transform:translateY(.8em);transition:opacity .45s var(--ease),transform .6s var(--ease-out)}
.tf-sub i{display:block;margin-bottom:.25em;font-style:normal;font-size:.72em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tf-sub--ai{background:rgba(46,75,255,.32);border:1px solid rgba(143,160,255,.35)}
.tf-sub--ai i{color:#B9C4FF}
.tf-sub.is-on{opacity:1;transform:none}
.tf-sub.is-old{opacity:0;transform:translateY(-.8em)}
.tf-call__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;width:100%;margin-top:1.1em}
.tf-call__keys span{display:flex;flex-direction:column;align-items:center;gap:.35em;font-size:.72em;color:rgba(255,255,255,.75)}
.tf-call__keys i{display:grid;place-items:center;width:3.6em;height:3.6em;border-radius:50%;background:rgba(255,255,255,.14)}
.tf-call__keys i.is-on{background:#fff;color:#111}
.tf-call__keys .ico{width:1.5em;height:1.5em}
.tf-call__end{display:grid;place-items:center;width:3.4em;height:3.4em;margin-top:1em;border-radius:50%;background:#FF3B30;color:#fff}
.tf-call__end .ico{width:1.7em;height:1.7em;stroke:none}
.tf-sms{position:absolute;left:.7em;right:.7em;top:3.1em;z-index:20;display:flex;gap:.65em;padding:.75em .8em;border-radius:1.25em;background:rgba(245,245,247,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#111;box-shadow:0 .8em 2em -.6em rgba(0,0,0,.55);opacity:0;transform:translateY(-130%);transition:opacity .4s,transform .6s var(--ease-out)}
.tf-sms.is-on{opacity:1;transform:none}
.tf-sms__app{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.6em;background:linear-gradient(#5BF675,#2CD34B);color:#fff}
.tf-sms__app .ico{width:1.2em;height:1.2em}
.tf-sms__txt{font-size:.82em;line-height:1.35}
.tf-sms__txt b{display:flex;justify-content:space-between;font-weight:600}
.tf-sms__txt small{font-weight:400;color:#6E6E73}

/* Panel lokalu: zamowienie skladane w trakcie rozmowy */
.tf-panel{position:absolute;left:18.6em;top:5.4em;width:20.6em;z-index:2;padding:1.1em 1.2em 1.2em;border-radius:1.2em;background:#fff;color:var(--ink);box-shadow:0 2em 4em -1.6em rgba(0,0,0,.7)}
.tf-panel__top{display:flex;align-items:center;gap:.55em;padding-bottom:.8em;border-bottom:1px solid #ECECEF}
.tf-panel__top b{font-size:.95em;font-weight:600;letter-spacing:-.01em}
.tf-panel__dot{width:.55em;height:.55em;border-radius:50%;background:#A1A1A6}
.tf-panel__live{margin-left:auto;font-size:.75em;color:#6E6E73}
.tf-panel.is-live .tf-panel__dot{background:#34C759;box-shadow:0 0 0 .3em rgba(52,199,89,.18);animation:tf-puls 1.6s ease-in-out infinite}
.tf-panel__cart{padding-top:.9em}
.tf-panel__k{font-size:.68em;letter-spacing:.07em;text-transform:uppercase;color:#8A8A90}
.tf-lines{list-style:none;margin:.5em 0 0;padding:0;display:grid;gap:.15em}
.tf-lines li{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;font-size:.9em;border-bottom:1px dashed #ECECEF;opacity:0;transform:translateX(.6em);transition:opacity .4s,transform .5s var(--ease-out)}
.tf-lines li.is-on{opacity:1;transform:none}
.tf-lines .mono{font-size:.95em;white-space:nowrap}
.tf-panel__sum{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-top:.8em;font-size:.82em;color:#6E6E73;opacity:0;transition:opacity .4s}
.tf-panel__sum b{white-space:nowrap;font-size:1.45em;font-weight:560;letter-spacing:-.02em;color:var(--ink)}
.tf-panel__sum.is-on{opacity:1}

/* Bon w kasie: moment prawdy */
.tf-bon{position:absolute;left:21.4em;top:24.2em;width:17.8em;z-index:4;padding:1em 1.15em;border-radius:1.1em;background:#10120F;color:#fff;border:1px solid rgba(52,199,89,.5);box-shadow:0 0 2.4em -.4em rgba(52,199,89,.45),0 1.8em 3em -1.4em rgba(0,0,0,.8);opacity:0;transform:translateY(1.2em) scale(.96);transition:opacity .45s,transform .7s var(--ease-out)}
.tf-bon.is-on{opacity:1;transform:none}
.tf-bon__h{display:flex;align-items:center;justify-content:space-between}
.tf-bon__h b{font-size:1.35em;font-weight:500;letter-spacing:-.02em}
.tf-chip{display:inline-flex;align-items:center;gap:.35em;padding:.25em .6em;border-radius:99em;background:rgba(255,255,255,.1);font-size:.72em}
.tf-chip .ico{width:1.1em;height:1.1em}
.tf-bon__m{margin-top:.35em;font-size:.84em;color:rgba(255,255,255,.7)}
.tf-bon__ok{display:flex;align-items:center;gap:.45em;margin-top:.7em;font-size:.84em;font-weight:560;color:#6BE38A}
.tf-bon__ok .ico{width:1.15em;height:1.15em}

.tf-note{position:absolute;left:calc(var(--x) * 1em);top:calc(var(--y) * 1em);z-index:5;width:11.6em;padding:.75em .9em .8em;border-radius:.95em;background:rgba(24,24,28,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.09);box-shadow:0 1.2em 2.6em -1.2em rgba(0,0,0,.75);color:#fff;opacity:0;transform:translateY(.4em);transition:opacity .5s,transform .6s var(--ease-out),border-color .5s}
.tf-note.is-on{opacity:1;transform:none;border-color:rgba(46,75,255,.8)}
.tf-note b{display:flex;align-items:center;gap:.5em;font-size:.8em;font-weight:600;white-space:nowrap}
.tf-note .ico{width:1.2em;height:1.2em;color:#8FA0FF}
.tf-note span{display:block;margin-top:.45em;font-size:.74em;line-height:1.4;color:var(--d-text)}
.tf-now{display:none}

@keyframes tf-puls{50%{box-shadow:0 0 0 .55em rgba(52,199,89,0)}}

.tf-facts{padding:72px 0 0}
.tf-facts .facts{margin:0}

/* Porownanie */
.tf-cmp{margin-top:56px;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}
.tf-cmp__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr);gap:24px;padding:20px 28px;border-top:1px solid var(--line);font-size:16px;line-height:1.45;align-items:baseline}
.tf-cmp__row:first-child{border-top:0}
.tf-cmp__row--h{padding-block:16px;background:var(--paper2,#F6F6F7);font:500 12px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}
.tf-cmp__row [role=rowheader]{font-weight:560}
.tf-cmp__row [role=cell]:nth-child(2){color:var(--text2)}
.tf-cmp__row b{font-weight:560}

/* Kroki i funkcje */
.tf-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:56px 0 0;padding:0}
.tf-step{padding:28px 28px 30px;border:1px solid var(--line);border-radius:22px;background:#fff}
.tf-step__n{font-size:13px;color:var(--cobalt)}
.tf-step h3{margin-top:14px;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.022em;line-height:1.2}
.tf-step p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--text2)}
.tf-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin-top:40px}
.tf-feat{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.tf-feat>.ico{flex:none;width:22px;height:22px;margin-top:2px;color:var(--cobalt)}
.tf-feat b{font-size:17px;font-weight:560;letter-spacing:-.01em}
.tf-feat p{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--text2)}

/* Cennik */
.tf-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;align-items:stretch}
.tf-plan{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:22px;background:#fff}
.tf-plan--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.tf-plan__k{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}
.tf-plan--dark .tf-plan__k{color:var(--mist)}
.tf-plan__for{margin-top:8px;font-size:15.5px;color:var(--text2)}
.tf-plan--dark .tf-plan__for{color:var(--d-text)}
.tf-plan__p{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.tf-plan__p b{font-size:60px;font-weight:500;letter-spacing:-.05em;line-height:1}
.tf-plan__p span{font-size:14.5px;color:var(--text2)}
.tf-plan--dark .tf-plan__p span{color:var(--mist)}
.tf-plan__p .tf-plan__od{font-size:17px}
.tf-plan__y{margin-top:6px;font-size:14px;color:var(--steel)}
.tf-plan__list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:22px 0 26px;padding-top:20px;border-top:1px solid var(--line)}
.tf-plan--dark .tf-plan__list{border-color:var(--d-line2)}
.tf-plan__list li{position:relative;padding-left:30px;line-height:1.5;font-size:15.5px}
.tf-plan__list li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;background:#EBEBEF 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='%230D0D0F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tf-plan--dark .tf-plan__list li{color:var(--d-text)}
.tf-plan--dark .tf-plan__list li::before{background-color:rgba(255,255,255,.1);background-image: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='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tf-plan .btn{margin-top:auto}
.tf-price__note{max-width:760px;margin-top:24px;font-size:15px;line-height:1.6;color:var(--text2)}

@media (max-width:999px){
  .tf-hero{padding:104px 0 40px}
  .tf-hero__grid{grid-template-columns:1fr;gap:8px}
  .tf-hero__ring{top:auto;bottom:-14%;left:50%;width:140vw;transform:translate(-50%,0) rotate(90deg)}
  .tf-hero__in{width:26em;height:37em;margin:0 auto;font-size:calc(100cqw / 26)}
  .tf-phone{left:.2em;top:2.6em;width:14.2em}
  .tf-panel{left:12em;top:7.2em;width:13.9em;z-index:4;padding:.9em .95em 1em}
  .tf-lines li{font-size:.8em}
  .tf-panel__sum{font-size:.74em}
  .tf-panel__live{display:none}
  .tf-bon{left:10.2em;top:26.2em;width:15.6em;z-index:5}
  .tf-note{display:none}
  .tf-now{display:block;position:absolute;left:50%;top:0;z-index:6;max-width:25em;padding:.5em .95em;border-radius:99em;background:rgba(24,24,28,.85);border:1px solid rgba(46,75,255,.7);box-shadow:0 0 1.6em -.3em rgba(46,75,255,.5);color:#fff;font-size:.85em;white-space:nowrap;opacity:0;transform:translateX(-50%);transition:opacity .35s}
  .tf-now.is-show{opacity:1}
  .tf-steps,.tf-plans{grid-template-columns:1fr}
  .tf-feats{grid-template-columns:1fr}
}
@media (max-width:760px){
  .tf-cmp{border-radius:18px}
  .tf-cmp__row{grid-template-columns:1fr 1fr;gap:6px 16px;padding:16px 18px;font-size:15px}
  .tf-cmp__row [role=rowheader]{grid-column:1/-1}
  .tf-cmp__row--h [role=columnheader]:first-child{display:none}
}
@media (max-width:640px){
  .tf-hero .hero__title{font-size:clamp(36px,9.6vw,58px)}
  .tf-facts{padding:56px 0 0}
  .tf-plan{padding:24px}
  .tf-plan__p b{font-size:52px}
  .tf-step{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .tf-panel.is-live .tf-panel__dot{animation:none}
}

/* Demo: zadzwon i zobacz rozmowe na zywo */
.tf-demo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.tf-demo__form{margin-top:32px}
.tf-demo__lbl{display:block;font-size:15px;font-weight:560}
.tf-demo__row{display:flex;gap:10px;margin-top:10px}
.tf-demo__row input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;font-size:17px}
.tf-demo__row input:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.tf-demo__err{margin-top:10px;font-size:15px;color:var(--err)}
.tf-demo__fine{margin-top:12px;font-size:14px;line-height:1.55;color:var(--text2)}
.tf-demo__call{margin-top:32px}
.tf-demo__num{display:inline-block;margin-top:8px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.tf-live{min-height:420px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.tf-live__top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:15px}
.tf-live__dot{width:9px;height:9px;border-radius:50%;background:#C7C7CC}
.tf-live__dot.is-on{background:#34C759;box-shadow:0 0 0 4px rgba(52,199,89,.18)}
.tf-live__list{list-style:none;display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;margin:16px 0 0;padding:0 2px 0 0;overscroll-behavior:contain}
.tf-live__list li{max-width:88%;padding:10px 14px;border-radius:16px;background:#F2F2F4;font-size:15px;line-height:1.45}
.tf-live__list li.is-ai{align-self:flex-start;background:rgba(46,75,255,.08)}
.tf-live__list li.is-gosc{align-self:flex-end}
.tf-live__list li b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--steel)}
.tf-live__bon{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--ink);color:#fff;font-size:15px}
.tf-live__bon b{font-size:20px;font-weight:500}
@media (max-width:999px){.tf-demo__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){.tf-demo__row{flex-direction:column}.tf-demo__row .btn{width:100%}}