/* ═══════════════ TOKENS ═══════════════ */
:root{
  --ink:#0a0714;
  --ink-2:#120c22;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:#f4f2fa;
  --muted:#a79ec0;
  --orange:#ff8a2a; --coral:#ff6a5f; --pink:#ff5faf; --purple:#b66cff; --blue:#3d78ff;
  --grad:linear-gradient(100deg,#ff8a2a 0%,#ff6a5f 22%,#ff5faf 46%,#b66cff 72%,#3d78ff 100%);
  --font-d:'Plus Jakarta Sans',sans-serif;
  --font-b:'Inter',sans-serif;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow-glow:0 20px 70px -20px rgba(182,108,255,.35);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="light"]){}
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  background:var(--ink);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%}
a{color:inherit}
::selection{background:rgba(182,108,255,.35)}

h1,h2,h3,.display{font-family:var(--font-d)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ═══════════════ GLOBAL BACKGROUND AURA ═══════════════ */
.bg-aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-aura .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.blob-a{width:900px;height:900px;top:-320px;right:-260px;
  background:radial-gradient(circle at 35% 35%,rgba(255,138,42,.5),rgba(255,95,175,.32) 40%,rgba(182,108,255,.18) 65%,transparent 78%)}
.blob-b{width:820px;height:820px;top:20vh;left:-360px;
  background:radial-gradient(circle at 60% 40%,rgba(61,120,255,.4),rgba(182,108,255,.25) 55%,transparent 76%)}
.blob-c{width:700px;height:700px;top:150vh;right:-200px;opacity:.35;
  background:radial-gradient(circle,rgba(255,95,175,.35),rgba(61,120,255,.2) 60%,transparent 78%)}
.bg-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}

main,nav,footer{position:relative;z-index:1}

/* ═══════════════ NAV ═══════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(10,7,20,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:34px;display:block}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--muted);text-decoration:none;transition:color .25s}
.nav-links a:hover{color:var(--text)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-d);font-weight:700;font-size:.98rem;
  padding:13px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:none;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.2),box-shadow .3s,filter .3s;
  position:relative;
}
.btn-primary{
  color:#fff;background:var(--grad);background-size:180% 100%;
  box-shadow:0 8px 30px -8px rgba(255,95,175,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 14px rgba(0,0,0,.18);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 40px -8px rgba(182,108,255,.6),inset 0 1px 0 rgba(255,255,255,.5);background-position:100% 0}
.btn-ghost{
  color:var(--text);background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:var(--panel-2);transform:translateY(-2px)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}

/* ═══════════════ HERO ═══════════════ */
.hero{min-height:100svh;display:flex;align-items:center;padding:130px 0 60px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;font-size:.85rem;font-weight:600;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  margin-bottom:26px;color:var(--muted);
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:pulse 2s infinite}
.hero-badge a{color:var(--text);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.hero-badge a:hover{border-color:var(--pink)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,95,175,.55)}55%{box-shadow:0 0 0 8px rgba(255,95,175,0)}}

.hero h1{
  font-size:clamp(2.5rem,5.2vw,4.1rem);
  font-weight:800;line-height:1.06;letter-spacing:-.02em;margin-bottom:22px;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:riseIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes riseIn{to{transform:translateY(0)}}

.grad-anim{
  background:var(--grad);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:gradShift 7s ease-in-out infinite alternate;
}
@keyframes gradShift{to{background-position:100% 0}}

.hero-sub{font-size:1.1rem;color:var(--muted);max-width:520px;margin-bottom:14px;opacity:0;animation:fadeUp .8s .45s forwards}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 44px;opacity:0;animation:fadeUp .8s .6s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-stats{display:flex;gap:0;opacity:0;animation:fadeUp .8s .75s forwards}
.hstat{padding:0 28px;border-left:1px solid var(--line)}
.hstat:first-child{padding-left:0;border-left:none}
.hstat b{font-family:var(--font-d);font-size:1.7rem;font-weight:800;display:block;line-height:1.1}
.hstat span{font-size:.82rem;color:var(--muted)}

/* — orb scene — */
.orb-scene{position:relative;height:560px;display:flex;align-items:center;justify-content:center;perspective:1100px}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.orb-wrap{position:relative;width:min(370px,74vw);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.orb-vid{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:2;
  mix-blend-mode:screen;filter:drop-shadow(0 34px 70px rgba(182,108,255,.4));
  animation:orbFloat 7s ease-in-out infinite}
.orb-3d{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;animation:orbFloat 7s ease-in-out infinite}
.orb-img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 34px 70px rgba(182,108,255,.4));
  animation:orbTurn 12s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(-10px)}50%{transform:translateY(14px)}}
@keyframes orbTurn{0%,100%{transform:rotateY(-7deg) rotateX(3deg) scale(1)}25%{transform:rotateY(5deg) rotateX(-2deg) scale(1.015)}50%{transform:rotateY(8deg) rotateX(4deg) scale(1)}75%{transform:rotateY(-4deg) rotateX(-3deg) scale(1.015)}}
.orb-shade{position:absolute;inset:2.5%;border-radius:50%;z-index:3;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(circle at 34% 30%,transparent 42%,rgba(38,20,70,.16) 72%,rgba(20,10,45,.4) 96%)}
.orb-spec{position:absolute;inset:2.5%;border-radius:50%;z-index:4;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.orb-spec::before{content:"";position:absolute;top:-15%;left:-65%;width:70%;height:130%;transform:rotate(18deg);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.1) 58%,transparent 75%);
  filter:blur(6px);animation:specSweep 6.5s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes specSweep{0%,58%{left:-75%}88%,100%{left:125%}}
.orb-spec::after{content:"";position:absolute;top:9%;left:20%;width:34%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.5),transparent 70%);filter:blur(7px)}
.orb-ground{position:absolute;left:14%;right:14%;bottom:-9%;height:11%;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse at center,rgba(10,5,25,.65),rgba(120,70,220,.22) 55%,transparent 75%);
  filter:blur(13px);animation:groundPulse 7s ease-in-out infinite}
@keyframes groundPulse{0%,100%{transform:scale(1.06);opacity:.85}50%{transform:scale(.88);opacity:.55}}
.orb-halo{position:absolute;inset:-18%;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(255,95,175,.28),rgba(182,108,255,.18) 45%,transparent 70%);
  filter:blur(30px);animation:haloBreath 5s ease-in-out infinite}
@keyframes haloBreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.orb-ring{position:absolute;inset:-6%;border-radius:50%;z-index:1;
  border:1px dashed rgba(255,255,255,.09);
  animation:ringSpin 26s linear infinite}
.orb-ring.r2{inset:-16%;border-color:rgba(182,108,255,.12);animation-duration:40s;animation-direction:reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.chip{
  position:absolute;z-index:5;display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:14px;font-size:.82rem;font-weight:600;white-space:nowrap;
  background:rgba(18,12,34,.72);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px) scale(.92);
  transition:opacity .5s,transform .55s cubic-bezier(.2,.8,.3,1.15);
}
.chip.on{opacity:1;transform:none}
.chip .ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:.85rem}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.chip-1{top:6%;left:-6%}.chip-2{top:28%;right:-12%}.chip-3{bottom:24%;left:-14%}.chip-4{bottom:4%;right:-4%}
.chip .sc{font-family:var(--font-d);font-weight:800}
.i-eye{background:rgba(255,138,42,.18);color:var(--orange)}
.i-chat{background:rgba(255,95,175,.18);color:var(--pink)}
.i-star{background:rgba(182,108,255,.18);color:var(--purple)}
.i-call{background:rgba(61,120,255,.18);color:var(--blue)}

.score-pill{
  position:absolute;top:-3%;right:6%;z-index:6;
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(18,12,34,.78);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-glow);
  opacity:0;transform:scale(.6);transition:opacity .6s .3s,transform .6s .3s cubic-bezier(.2,.8,.3,1.3);
}
.score-pill.on{opacity:1;transform:scale(1)}
.score-pill svg{position:absolute;inset:0;transform:rotate(-90deg)}
.score-pill circle{fill:none;stroke-width:5}
.score-pill .track{stroke:rgba(255,255,255,.1)}
.score-pill .prog{stroke:url(#scoreGrad);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1)}
.score-pill b{font-family:var(--font-d);font-size:1.35rem;font-weight:800}
.score-pill span{position:absolute;bottom:14px;font-size:.58rem;letter-spacing:.06em;color:var(--muted);font-weight:600}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.78rem;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 1s 1.4s forwards}
.scroll-hint .mouse{width:22px;height:36px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:3px;background:var(--pink);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;
  background:rgba(255,255,255,.02);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted);font-weight:500;white-space:nowrap}
.marquee i{width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ═══════════════ SECTIONS ═══════════════ */
section{padding:110px 0}
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted);padding:7px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);margin-bottom:18px}
.sec-kicker i{width:7px;height:7px;border-radius:50%;background:var(--grad)}
section h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px}
.sec-head p{color:var(--muted);font-size:1.05rem}
@media(min-width:760px){.sec-head p.oneline{white-space:nowrap}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ═══════════════ SCROLLYTELLING — JAK DZIAŁAM ═══════════════ */
.story{position:relative}
.story-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;width:100%}
.story-orb{position:relative;display:flex;align-items:center;justify-content:center;perspective:900px}
.story-orb-inner{width:min(300px,60vw);aspect-ratio:1;position:relative;transform-style:preserve-3d;transition:transform .1s linear}
.story-orb-inner img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 50px rgba(182,108,255,.35))}
.story-orb-inner .orb-shade,.story-orb-inner .orb-spec{inset:3%}
.story-aura{position:absolute;inset:-25%;border-radius:50%;filter:blur(44px);transition:background 1s;
  background:radial-gradient(circle,rgba(255,138,42,.35),transparent 70%)}
.story-steps{display:flex;flex-direction:column;gap:14px}
.step{
  padding:24px 26px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all .5s cubic-bezier(.2,.7,.2,1);
  opacity:.38;transform:scale(.97);
}
.step.active{opacity:1;transform:scale(1);background:var(--panel-2);box-shadow:var(--shadow-glow);border-color:rgba(255,255,255,.2)}
.step-top{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.step-num{font-family:var(--font-d);font-weight:800;font-size:.9rem;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:all .5s}
.step.active .step-num{background:var(--grad);color:#fff;border-color:transparent}
.step h3{font-size:1.2rem;font-weight:800}
.step p{color:var(--muted);font-size:.95rem}
.step .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:16px;overflow:hidden}
.step .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s linear}
.story-spacer{height:320vh}

/* ═══════════════ INTERACTIVE SCORING DEMO ═══════════════ */
.demo-card{
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:44px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
}
.demo-actions{display:flex;flex-direction:column;gap:12px}
.demo-actions h3{font-size:1.25rem;font-weight:800;margin-bottom:6px}
.demo-actions p{color:var(--muted);font-size:.92rem;margin-bottom:10px}
.act-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-b);font-size:.93rem;font-weight:500;
  transition:all .3s cubic-bezier(.2,.8,.3,1.1);
}
.act-btn:hover{background:rgba(255,255,255,.1);transform:translateX(5px);border-color:rgba(255,255,255,.22)}
.act-btn:active{transform:translateX(5px) scale(.98)}
.act-btn b{font-family:var(--font-d);font-weight:800;color:var(--pink);flex:none}
.act-btn.used{opacity:.45;pointer-events:none}
.demo-reset{align-self:flex-start;margin-top:6px;background:none;border:none;color:var(--muted);font-size:.83rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.demo-reset:hover{color:var(--text)}

.lead-panel{display:flex;flex-direction:column;gap:18px}
.lead-card{
  border-radius:var(--r-md);border:1px solid var(--line);padding:24px;
  background:rgba(10,7,20,.5);position:relative;overflow:hidden;transition:box-shadow .6s,border-color .6s;
}
.lead-card.hot{border-color:rgba(255,95,175,.5);box-shadow:0 0 50px -10px rgba(255,95,175,.35)}
.lead-id{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lead-ava{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--font-d);font-weight:800;color:#fff;transition:filter .6s}
.lead-card:not(.known) .lead-ava{filter:grayscale(1) brightness(.7)}
.lead-name{font-weight:700;font-family:var(--font-d)}
.lead-tag{font-size:.76rem;color:var(--muted)}
.score-line{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.score-line b{font-family:var(--font-d);font-size:2rem;font-weight:800}
.lead-status{font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);transition:all .5s}
.lead-status.warm{background:rgba(255,138,42,.16);color:var(--orange)}
.lead-status.hot{background:rgba(255,95,175,.18);color:var(--pink)}
.meter{height:10px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.meter i{display:block;height:100%;width:0%;border-radius:8px;background:var(--grad);background-size:300% 100%;transition:width .7s cubic-bezier(.2,.8,.3,1)}
.lead-log{margin-top:16px;display:flex;flex-direction:column;gap:7px;min-height:88px}
.log-item{font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center;animation:logIn .45s cubic-bezier(.2,.8,.3,1.2)}
.log-item i{width:5px;height:5px;border-radius:50%;background:var(--grad);flex:none}
@keyframes logIn{from{opacity:0;transform:translateX(-10px)}}
.handoff{
  display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(255,95,175,.14),rgba(61,120,255,.14));
  border:1px solid rgba(255,95,175,.35);
  opacity:0;transform:translateY(12px);transition:all .6s cubic-bezier(.2,.8,.3,1.15);pointer-events:none;
}
.handoff.on{opacity:1;transform:none}
.handoff .ico{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;flex:none;color:#fff}
.handoff b{display:block;font-family:var(--font-d);font-size:.95rem}
.handoff span{font-size:.8rem;color:var(--muted)}

/* ═══════════════ CHAT DEMO ═══════════════ */
.chat-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.chat-copy h2{margin-bottom:18px}
.chat-copy p{color:var(--muted);margin-bottom:14px}
.chat-copy ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.chat-copy li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.chat-copy li i{width:22px;height:22px;border-radius:8px;background:rgba(182,108,255,.16);color:var(--purple);display:grid;place-items:center;flex:none;font-style:normal;font-size:.75rem;margin-top:2px}
.chat-shell{
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),var(--shadow-glow);
  overflow:hidden;
}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.chat-head img{width:34px;height:34px}
.chat-head b{font-family:var(--font-d);font-size:.95rem}
.chat-head .st{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#7ee2a8}
.chat-head .st i{width:7px;height:7px;border-radius:50%;background:#7ee2a8;animation:pulse 2s infinite}
.chat-body{padding:22px 20px;height:380px;display:flex;flex-direction:column;gap:12px;overflow:hidden;justify-content:flex-end}
.msg{max-width:82%;padding:12px 16px;border-radius:16px;font-size:.9rem;line-height:1.5;animation:msgIn .5s cubic-bezier(.2,.8,.3,1.15)}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.user{align-self:flex-end;background:linear-gradient(120deg,rgba(255,95,175,.28),rgba(182,108,255,.28));border:1px solid rgba(255,95,175,.3);border-bottom-right-radius:5px}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.typing{display:inline-flex;gap:5px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ═══════════════ BENEFITS ═══════════════ */
.bene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bene{
  padding:30px 28px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s,background .4s;
}
.bene::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(182,108,255,.14),transparent 45%)}
.bene:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);background:var(--panel-2)}
.bene:hover::before{opacity:1}
.bene .glyph{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;font-size:1.15rem}
.bene h3{font-size:1.08rem;font-weight:800;margin-bottom:8px}
.bene p{color:var(--muted);font-size:.92rem}
.bene.span2{grid-column:span 2}

/* ═══════════════ METRICS BAND ═══════════════ */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.metrics-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.metric b{font-family:var(--font-d);font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;display:block;line-height:1.05;margin-bottom:8px}
.metric span{color:var(--muted);font-size:.98rem}

/* ═══════════════ CTA / FORM ═══════════════ */
.cta{position:relative}
.cta-card{
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:56px;max-width:760px;margin:0 auto;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6);position:relative;overflow:hidden;
}
.cta-card::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:520px;height:280px;border-radius:50%;filter:blur(70px);pointer-events:none;
  background:radial-gradient(circle,rgba(255,95,175,.3),rgba(61,120,255,.15) 60%,transparent 75%)}
.cta-card h2{text-align:center}
.cta-card>p{text-align:center;color:var(--muted);margin-bottom:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.field{display:flex;flex-direction:column;gap:7px}
.form-grid .full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:var(--muted)}
.field input{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;color:var(--text);font-family:var(--font-b);font-size:.95rem;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(182,108,255,.18);background:rgba(255,255,255,.08)}
.radio-row{display:flex;gap:14px;align-items:center}
.radio-row label{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--text);cursor:pointer;font-weight:500}
.radio-row input{accent-color:#b66cff;width:17px;height:17px}
.form-note{font-size:.83rem;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;line-height:1.55}
.form-note b{color:var(--text)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.55}
.check input{margin-top:3px;accent-color:#b66cff;width:16px;height:16px;flex:none}
.check a{color:var(--text)}
.cta-submit{width:100%;justify-content:center;margin-top:6px;font-size:1.02rem;padding:16px}


/* ═══════════════ LIVE PIPELINE (TV-ad style) ═══════════════ */
.pipe-grid{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch}
.mock,.dash{
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
}
.mock-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.mock-url{flex:1;text-align:center;font-size:.76rem;color:var(--muted);background:rgba(255,255,255,.05);border-radius:8px;padding:6px 12px;border:1px solid var(--line)}
.mock-body{position:relative;padding:20px;flex:1;min-height:330px}
.mock-hero{height:74px;border-radius:12px;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(255,138,42,.3),rgba(255,95,175,.28),rgba(61,120,255,.3));background-size:220% 100%;animation:gradShift 8s ease-in-out infinite alternate}
.mock-hero::after{content:"Osiedle Nowe Wzgórza";position:absolute;left:16px;bottom:12px;font-family:var(--font-d);font-weight:800;font-size:.95rem}
.mock-flats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flat{border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:10px;transition:all .4s}
.flat b{font-family:var(--font-d);font-size:.8rem;display:block}
.flat span{font-size:.68rem;color:var(--muted)}
.flat.viewed{border-color:rgba(255,95,175,.6);background:rgba(255,95,175,.1);box-shadow:0 0 22px -6px rgba(255,95,175,.5)}
.mock-cursor{position:absolute;z-index:8;width:18px;height:18px;pointer-events:none;transition:top 1.1s cubic-bezier(.45,.05,.3,1),left 1.1s cubic-bezier(.45,.05,.3,1);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.mock-chat{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;align-items:center;gap:9px;
  padding:9px 14px 9px 9px;border-radius:999px;background:rgba(18,12,34,.85);border:1px solid rgba(255,95,175,.4);
  backdrop-filter:blur(10px);box-shadow:0 10px 30px -8px rgba(255,95,175,.5)}
.mock-chat img{width:30px;height:30px}
.mock-chat span{font-size:.74rem;font-weight:600;max-width:150px}
.mock-chat .bub{position:absolute;right:6px;bottom:110%;background:rgba(18,12,34,.92);border:1px solid var(--line);border-radius:12px 12px 4px 12px;padding:8px 12px;font-size:.7rem;color:var(--text);white-space:nowrap;opacity:0;transform:translateY(8px);transition:all .5s}
.mock-chat .bub.on{opacity:1;transform:none}

.pipe-stream{position:relative}
.pipe-stream svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pipe-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--grad);z-index:5;
  box-shadow:0 0 14px 3px rgba(255,95,175,.65);opacity:0}
@keyframes flyDot{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1;transform:translate(6px,10%) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate(0,340px) scale(.6)}}

.dash-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dash-head b{font-family:var(--font-d);font-size:.92rem;display:flex;align-items:center;gap:9px}
.dash-live{display:flex;align-items:center;gap:7px;font-size:.72rem;color:#7ee2a8;font-weight:600}
.dash-live i{width:7px;height:7px;border-radius:50%;background:#7ee2a8;animation:pulse 2s infinite}
.dash-count{font-size:.74rem;color:var(--muted)}
.dash-count b{color:var(--text);font-family:var(--font-d)}
.dash-rows{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1;overflow:hidden;min-height:330px}
.drow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:all .5s}
.drow.flash{animation:rowIn .7s cubic-bezier(.2,.85,.3,1.1);border-color:rgba(255,95,175,.55);box-shadow:0 0 26px -8px rgba(255,95,175,.5)}
@keyframes rowIn{0%{opacity:0;transform:translateY(-26px) scale(.94)}60%{transform:translateY(3px) scale(1.01)}100%{opacity:1;transform:none}}
.drow.leaving{opacity:0;transform:translateY(10px)}
.drow .ava{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:.72rem;color:#fff;flex:none}
.drow .who{flex:1;min-width:0}
.drow .who b{font-family:var(--font-d);font-size:.82rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .who span{font-size:.68rem;color:var(--muted);white-space:nowrap}
.drow .sc{font-family:var(--font-d);font-weight:800;font-size:.95rem;flex:none}
.drow .tag{flex:none;font-size:.66rem;font-weight:700;padding:4px 10px;border-radius:999px}
.tag.hot{background:rgba(255,95,175,.18);color:var(--pink)}
.tag.warm{background:rgba(255,138,42,.16);color:var(--orange)}
.tag.cold{background:rgba(255,255,255,.07);color:var(--muted)}
@media(max-width:980px){
  .pipe-grid{grid-template-columns:1fr}
  .pipe-stream{height:70px}
  .mock-body{min-height:290px}
  .dash-rows{min-height:290px}
}





/* ═══════════════ PROBLEMY — CZAT ═══════════════ */
.pchat-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:40px 0}
.pchat-spacer{height:300vh}
.pchat-col{max-width:720px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px}
.pmsg{display:flex;align-items:flex-end;gap:12px;opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .55s,transform .6s cubic-bezier(.2,.8,.3,1.1)}
.pmsg.on{opacity:1;transform:none}
.pmsg.dev{flex-direction:row-reverse}
.pava{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden}
.pmsg.dev .pava{background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.25)}
.pmsg.dev .pava svg{width:22px;height:22px;fill:#fff;opacity:.9}
.pmsg.lid .pava{background:rgba(18,12,34,.8);border:1px solid var(--line);padding:5px}
.pmsg.lid .pava img{width:100%;height:100%;object-fit:contain}
.pbub{max-width:78%;padding:15px 20px;border-radius:20px;font-size:1rem;line-height:1.5;font-weight:500}
.pmsg.dev .pbub{background:linear-gradient(115deg,#8f6cf5,#4a7bf7);color:#fff;border-bottom-right-radius:6px;
  box-shadow:0 12px 34px -12px rgba(96,110,255,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.pmsg.lid .pbub{background:#eef0f5;color:#22203a;border-bottom-left-radius:6px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.5)}
@media(max-width:980px){
  .pchat-pin{position:relative;min-height:0}
  .pchat-spacer{display:none}
}
@media(max-width:640px){.pbub{max-width:84%;font-size:.93rem}}

/* ═══════════════ LIVE v2: wideo + TV panel ═══════════════ */
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;position:relative}
.live-grid>*{min-width:0}
.tvp,.tvp-fit,.stage-holder{min-width:0;max-width:100%}
.live-tile{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6);display:flex;flex-direction:column}
.live-tile .mock-bar{flex:none}
.mock-stage{flex:1;position:relative;background:#0b0b10;min-height:280px}
.mock-stage video,.mock-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.lparticle{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--grad);z-index:9;pointer-events:none;
  box-shadow:0 0 16px 4px rgba(255,95,175,.7)}
.tvp{position:relative;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}
.tvp-fit{position:relative;overflow:hidden;width:100%}
.tvp-fit .stage-holder{width:1180px;max-width:none;transform-origin:top left;overflow:hidden}
.tvp{--panel:#121218;--panel2:#17171f;--line:#26262f;--text:#e8e8ee;--muted:#8b8b99;
  --violet:#a855f7;--magenta:#ec4899;--orange:#f59e0b;--hot:#f43f5e;--blue:#60a5fa;--cyan:#38bdf8}
/* ===== panel section (scaled 1180x660 stage) ===== */
  
  
  .tvp .stage{
    width:1180px;height:660px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    position:relative;overflow:hidden;
    box-shadow:0 40px 120px rgba(0,0,0,.6);
  }
  .tvp .glow{
    position:absolute;right:-220px;top:-120px;width:640px;height:900px;
    background:
      radial-gradient(closest-side at 40% 30%, rgba(168,85,247,.28), transparent 70%),
      radial-gradient(closest-side at 60% 70%, rgba(236,72,153,.22), transparent 70%),
      radial-gradient(closest-side at 30% 85%, rgba(245,158,11,.14), transparent 70%);
    filter:blur(10px);pointer-events:none;
  }
  .tvp .top{display:flex;align-items:center;gap:14px;padding:20px 28px 14px;position:relative;z-index:2;}
  .tvp .logo{width:38px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
  .tvp .logo img{width:100%;height:100%;object-fit:contain;display:block;}
  .tvp .brand{font-weight:700;font-size:17px;letter-spacing:.2px;}
  .tvp .brand small{display:block;font-weight:400;color:var(--muted);font-size:11px;letter-spacing:.4px;}
  .tvp .top .spacer{flex:1;}
  .tvp .counter{font-size:13px;color:var(--text);background:var(--panel2);border:1px solid var(--line);padding:7px 14px;border-radius:999px;}
  .tvp .counter b{color:var(--violet);font-variant-numeric:tabular-nums;}
  .tvp .table{position:relative;z-index:2;padding:4px 28px 0;}
  .tvp .thead{
    display:grid;grid-template-columns:150px 1fr 190px 170px 110px 100px;gap:12px;
    padding:10px 18px;font-size:11px;letter-spacing:1.1px;color:var(--muted);
    border-bottom:1px solid var(--line);
  }
  .tvp .rows{position:relative;}
  .tvp .row{border-bottom:1px solid var(--line);overflow:hidden;transition:background .3s;}
  .tvp .row-main{
    display:grid;grid-template-columns:150px 1fr 190px 170px 110px 100px;gap:12px;align-items:center;
    padding:13px 18px;font-size:14px;min-height:58px;
  }
  .tvp .row.enter{animation:slideIn .55s cubic-bezier(.2,.9,.25,1.15) both;}
  @keyframes slideIn{from{opacity:0;transform:translateY(-26px);}to{opacity:1;transform:translateY(0);}}
  .row.flash{animation:slideIn .55s cubic-bezier(.2,.9,.25,1.15) both, flash 1.4s ease-out .1s;}
  @keyframes flash{0%{background:rgba(168,85,247,.20);}100%{background:transparent;}}
  .row.leaving{animation:rowOut .45s ease both;}
  @keyframes rowOut{to{opacity:0;transform:translateY(14px);}}
  .score-badge{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:7px;border:1px solid;transition:all .4s;white-space:nowrap;}
  .b-hot{color:var(--hot);border-color:rgba(244,63,94,.55);background:rgba(244,63,94,.08);}
  .b-int{color:var(--orange);border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.07);}
  .b-obs{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03);}
  .b-search{color:var(--cyan);border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.07);}
  .lead-name{font-weight:600;display:flex;align-items:center;gap:8px;}
  .lead-sub{font-size:12px;color:var(--muted);margin-top:2px;}
  .phone{width:20px;height:20px;border-radius:5px;flex:0 0 auto;background:linear-gradient(135deg,var(--magenta),var(--violet));display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
  .inv{color:#cfcfda;font-size:13.5px;}
  .lokale{color:var(--violet);font-size:13px;}
  .status{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:7px;transition:all .35s;}
  .s-new{color:var(--blue);background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.4);}
  .s-contact{color:var(--orange);background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.45);}
  .time{color:var(--muted);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;}
  .detail{max-height:0;opacity:0;transition:max-height .6s cubic-bezier(.4,0,.2,1), opacity .45s;background:linear-gradient(180deg, rgba(168,85,247,.05), transparent 80%);}
  .row.open .detail{max-height:320px;opacity:1;}
  .detail-inner{display:grid;grid-template-columns:340px 1fr;gap:34px;padding:10px 24px 24px;}
  .radar-wrap{position:relative;}
  .radar-wrap svg{width:100%;height:auto;display:block;overflow:visible;}
  .axis-label{fill:var(--muted);font-size:11.5px;}
  .grid-line{stroke:#2c2c38;stroke-width:1;fill:none;}
  .radar-poly{fill:rgba(168,85,247,.22);stroke:url(#radgrad);stroke-width:2;stroke-linejoin:round;}
  .radar-dot{fill:#fff;stroke:var(--magenta);stroke-width:2;}
  .stats{padding-top:6px;}
  .score-line{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
  .score-big{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;}
  .score-big small{font-size:13px;color:var(--muted);font-weight:400;margin-left:4px;}
  .bar-row{display:grid;grid-template-columns:150px 1fr 48px;gap:12px;align-items:center;margin:9px 0;}
  .bar-label{font-size:11.5px;letter-spacing:1px;color:#c6c6d2;}
  .bar-track{height:5px;border-radius:3px;background:#26262f;overflow:hidden;}
  .bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--magenta));width:0%;}
  .bar-val{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
  .caption{position:absolute;left:28px;bottom:18px;z-index:3;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;}
  .caption .tchip{color:var(--text);background:var(--panel2);border:1px solid var(--line);padding:6px 13px;border-radius:999px;font-size:12.5px;transition:opacity .4s, transform .4s;}

  
@media(max-width:980px){
  .live-grid{grid-template-columns:1fr}
  .mock-stage{min-height:230px}
}
@media(min-width:981px){
  #na-zywo .live-grid{
    width:100%;margin-left:0;transform:none;
    grid-template-columns:1fr;gap:30px
  }
  #na-zywo .live-tile:first-child .mock-stage{aspect-ratio:1896/1008;min-height:0;flex:none}
}

/* ═══════════════ PROBLEMY / ROZWIĄZANIA ═══════════════ */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flip{perspective:1200px;min-height:230px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;min-height:230px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.25,.8,.3,1)}
.flip:hover .flip-inner,.flip.tapped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:var(--r-md);padding:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.face-p{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.face-r{transform:rotateY(180deg);background:linear-gradient(150deg,rgba(255,95,175,.14),rgba(61,120,255,.14));border-color:rgba(255,95,175,.35);box-shadow:var(--shadow-glow)}
.face .tagline{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;padding:5px 13px;border-radius:999px;width:max-content}
.face-p .tagline{background:rgba(255,106,95,.14);color:var(--coral)}
.face-r .tagline{background:var(--grad);color:#fff}
.face p{font-size:1.02rem;line-height:1.5;font-weight:600;font-family:var(--font-d)}
.face-r p{font-weight:500;font-family:var(--font-b)}
.face .hint{margin-top:auto;font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:7px}
@media(max-width:980px){.prob-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.prob-grid{grid-template-columns:1fr}}

/* ═══════════════ DEMO MODAL ═══════════════ */
.modal-ov{position:fixed;inset:0;z-index:2147483000;background:#080512;isolation:isolate;overscroll-behavior:contain;
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
.modal-ov.on{opacity:1;pointer-events:auto}
.modal{
  width:min(560px,100%);max-height:92svh;overflow-y:auto;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,#1e1434,#0e091c);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8),var(--shadow-glow);
  padding:40px;position:relative;
  transform:translateY(26px) scale(.96);transition:transform .4s cubic-bezier(.2,.8,.3,1.15);
}
.modal-ov.on .modal{transform:none}
html.lidiana-modal-open,body.lidiana-modal-open{overflow:hidden!important}
.modal h3{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.modal>p{color:var(--muted);font-size:.93rem;margin-bottom:26px}
.modal-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--muted);font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:all .3s}
.modal-x:hover{color:var(--text);background:rgba(255,255,255,.12);transform:rotate(90deg)}
.modal .form-grid{grid-template-columns:1fr 1fr}
.modal .field label b{color:var(--pink)}
.slot-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field select{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;color:var(--text);font-family:var(--font-b);font-size:.95rem;transition:border-color .3s,box-shadow .3s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a79ec0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(182,108,255,.18)}
.field input::-webkit-calendar-picker-indicator{filter:invert(.8)}
@media(max-width:560px){.modal{padding:28px 20px}.modal .form-grid,.slot-row{grid-template-columns:1fr}}

/* ═══════════════ FOOTER ═══════════════ */
footer{border-top:1px solid var(--line);padding:70px 0 34px;background:rgba(0,0,0,.25)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:50px}
.foot-brand img{height:38px;margin-bottom:16px}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:300px}
.foot-col h4{font-family:var(--font-d);font-size:.95rem;font-weight:700;margin-bottom:16px}
.foot-col p,.foot-col a{color:var(--muted);font-size:.9rem;text-decoration:none;display:block;margin-bottom:8px}
.foot-col a:hover{color:var(--text)}
.foot-social{display:flex;gap:10px;margin-top:14px}
.foot-social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);transition:all .3s;margin:0}
.foot-social a:hover{background:var(--panel-2);transform:translateY(-3px);border-color:rgba(255,255,255,.25)}
.foot-social svg{width:17px;height:17px;fill:var(--muted)}
.foot-social a:hover svg{fill:var(--text)}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;color:var(--muted)}
.foot-bottom a{color:var(--muted);text-decoration:none}
.foot-bottom a:hover{color:var(--text)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:980px){
  .hero-grid,.story-grid,.chat-grid{grid-template-columns:1fr}
  .orb-scene{height:440px;order:-1}
  .demo-card{grid-template-columns:1fr;padding:30px}
  .bene-grid{grid-template-columns:1fr 1fr}
  .bene.span2{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .story-pin{position:relative;min-height:0;padding:0}
  .story-spacer{display:none}
  .story-orb{margin-bottom:40px}
  .step{opacity:1;transform:none}
}
@media(max-width:640px){
  section{padding:80px 0}
  .hero{padding-top:110px}
  .hero-stats{flex-wrap:wrap;gap:18px}
  .hstat{padding:0 18px}
  .chip-1{left:0}.chip-2{right:0}.chip-3{left:0}.chip-4{right:0}
  .bene-grid,.metrics-inner,.form-grid,.foot-grid{grid-template-columns:1fr}
  .cta-card{padding:34px 22px}
  .nav-links a:not(.btn){display:none}
  .chat-body{height:330px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .hero h1 .line span{transform:none}
  .hero-sub,.hero-ctas,.hero-stats{opacity:1}
}

/* ═══════════════ MOBILE POLISH ═══════════════ */
@media(max-width:980px){
  /* wydajność: bez kosztownych filtrów na słabszych GPU */
  nav.scrolled{background:rgba(10,7,20,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-badge,.chat-shell,.demo-card,.cta-card,.modal,.bene,.step,.live-tile,.btn-ghost,.chip,.sec-kicker,.mock-chat{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .bg-aura .blob{filter:blur(60px);opacity:.38}
  .bg-grain{display:none}
  .scroll-hint{display:none}
  /* hero: najpierw treść, potem kula */
  .orb-scene{order:2;height:400px;margin-top:8px}
  .hero{padding-top:104px;min-height:0}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  section{padding:64px 0}
  /* iOS: 16px w polach = brak przybliżania przy fokusie */
  .field input,.field select{font-size:16px}
  /* HERO */
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.6rem)}
  .hero-sub{font-size:1rem}
  .hero-ctas{margin:24px 0 30px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .hstat{padding:0 10px}
  .hstat:first-child{padding-left:0}
  .hstat b{font-size:1.25rem}
  .hstat span{font-size:.7rem;line-height:1.35;display:block}
  .orb-scene{height:330px}
  .orb-wrap{width:min(230px,58vw)}
  .chip{padding:8px 11px;font-size:.7rem;border-radius:11px;gap:8px}
  .chip small{font-size:.62rem}
  .chip .ico{width:22px;height:22px;border-radius:7px;font-size:.7rem}
  .chip-1{top:0;left:0}.chip-2{top:22%;right:0}.chip-3{bottom:20%;left:0}.chip-4{bottom:0;right:0}
  .score-pill{width:70px;height:70px;top:0;right:2%}
  .score-pill b{font-size:1.05rem}
  .score-pill span{bottom:10px;font-size:.5rem}
  /* PROBLEMY — czat */
  .pchat-pin{padding:56px 0}
  .pava{width:36px;height:36px}
  .pbub{padding:12px 15px;border-radius:16px}
  /* JAK DZIAŁAM */
  .story-grid{gap:26px}
  .story-orb-inner{width:min(230px,56vw)}
  .step{padding:19px 18px}
  .step h3{font-size:1.05rem}
  .step p{font-size:.88rem}
  .step-num{width:32px;height:32px;border-radius:10px;font-size:.8rem}
  /* SCORING */
  .demo-card{padding:22px 16px;gap:26px}
  .act-btn{padding:13px 14px;font-size:.87rem}
  .lead-card{padding:18px}
  .score-line b{font-size:1.6rem}
  /* CZAT DEMO */
  .chat-head{padding:13px 16px}
  .chat-body{height:310px;padding:18px 14px}
  .msg{max-width:88%;font-size:.87rem}
  /* KORZYŚCI */
  .bene{padding:22px 20px}
  .bene .glyph{width:40px;height:40px;border-radius:12px;margin-bottom:14px}
  /* NA ŻYWO: panel przewijany palcem w poziomie */
  .tvp-fit{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tvp-swipe{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 0 2px;font-size:.72rem;color:var(--muted)}
  /* METRYKI */
  .metrics-inner{gap:28px}
  .metric b{font-size:2.4rem;margin-bottom:4px}
  .metric span{font-size:.86rem}
  /* FORMULARZ / MODAL */
  .cta-card{padding:30px 18px}
  .cta-card h2{font-size:1.55rem}
  .modal{padding:26px 18px;border-radius:22px}
  .modal h3{font-size:1.3rem}
  .btn{font-size:.95rem;padding:13px 22px}
  .cta-submit{padding:15px}
  /* STOPKA */
  footer{padding:52px 0 28px}
  .foot-grid{gap:30px;margin-bottom:36px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(min-width:641px){
  .tvp-swipe{display:none}
}
@media(max-width:380px){
  .hero h1{font-size:2rem}
  .chip-2{top:26%}
  .hstat b{font-size:1.1rem}
}

/* ═══════════════ MOBILE REBUILD — dedykowany układ telefonu ═══════════════ */
@media(max-width:900px){
  /* HERO: kolumna — treść, potem kula z JEDNYM rotującym chipem pod spodem */
  .orb-scene{order:2;height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:6px 0 0;margin-top:4px}
  #heroCanvas{height:100%}
  .orb-ring{display:none}
  .orb-wrap{width:min(205px,54vw);margin-bottom:74px}
  .orb-ground{bottom:-7%}
  /* chipy: wszystkie w jednym miejscu pod kulą — widoczny tylko aktywny */
  .orb-wrap .chip{left:50%;right:auto;top:100%;bottom:auto;margin-top:26px;
    transform:translate(-50%,14px) scale(.95);white-space:nowrap;max-width:88vw}
  .orb-wrap .chip.on{transform:translate(-50%,0) scale(1)}
  .score-pill{width:64px;height:64px;top:-8px;right:-10px}
  .score-pill b{font-size:1rem}
  .score-pill span{bottom:9px;font-size:.48rem}
  .btn{min-height:46px}
  /* kroki "Jak działam": zapalają się podczas scrolla */
  .step{opacity:.45;transform:scale(.985)}
  .step.active{opacity:1;transform:none}
}
@media(max-width:640px){
  /* NA ŻYWO: zamiast pomniejszanej sceny TV — natywny mobilny panel */
  .tvp-fit,.tvp-swipe{display:none !important}
  .m-dash{display:flex}
  /* MODAL jako dolny arkusz */
  .modal-ov{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;max-height:94svh;border-radius:24px 24px 0 0;
    padding:26px 18px calc(30px + env(safe-area-inset-bottom));
    transform:translateY(46px) scale(1)}
  .modal-ov.on .modal{transform:none}
}
/* mobilny panel leadów */
.m-dash{display:none;flex-direction:column;flex:1;min-height:340px}
.m-dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.m-dash-head b{font-family:var(--font-d);font-size:.88rem;display:flex;align-items:center;gap:8px}
.m-dash-head b i{width:8px;height:8px;border-radius:50%;background:var(--grad);display:inline-block}
.m-live{display:flex;align-items:center;gap:6px;font-size:.68rem;color:#7ee2a8;font-weight:600;white-space:nowrap}
.m-live i{width:6px;height:6px;border-radius:50%;background:#7ee2a8;animation:pulse 2s infinite}
.m-count{font-size:.7rem;color:var(--muted);white-space:nowrap}
.m-count b{color:var(--text);font-family:var(--font-d)}
.m-rows{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1;overflow:hidden}
.m-cap{margin:0 12px 12px;padding:9px 13px;border-radius:999px;text-align:center;
  font-size:.72rem;font-weight:600;color:var(--text);
  background:linear-gradient(120deg,rgba(255,95,175,.16),rgba(61,120,255,.16));
  border:1px solid rgba(255,95,175,.3)}
.m-dash .drow{padding:10px 12px;gap:10px}
.m-dash .drow .ava{width:31px;height:31px;font-size:.66rem}
.m-dash .drow .who b{font-size:.78rem}
.m-dash .drow .who span{font-size:.64rem}
.m-dash .drow .sc{font-size:.88rem}
.m-dash .drow .tag{font-size:.6rem;padding:3px 8px}

/* ═══════════════ MOBILE FINAL — kolejność i minimalizm wg makiety ═══════════════ */
@media(max-width:900px){
  /* HERO: kula → hasło → jeden przycisk */
  .hero{padding-top:92px}
  .hero-grid{display:flex;flex-direction:column;gap:6px}
  .orb-scene{order:-1;margin-top:0;padding-top:6px}
  .orb-wrap{width:min(215px,56vw);margin-bottom:78px}
  /* score poza kulą: narożnik sceny, z dala od okręgu */
  .score-pill{top:-18px;right:-18px}
  .hero-sub{display:none}
  .hero-stats{display:none}
  .hero h1{font-size:clamp(2.3rem,10vw,3rem);line-height:1.04;margin-bottom:18px}
  .hero-ctas{margin:6px 0 10px}
  .hero-ctas .btn-primary{display:none}
  .hero-ctas .btn-ghost{
    width:100%;justify-content:center;border:none;color:#fff;font-weight:700;
    background:var(--grad);background-size:180% 100%;text-shadow:0 1px 6px rgba(0,0,0,.3);
    box-shadow:0 8px 30px -8px rgba(255,95,175,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 14px rgba(0,0,0,.18);
  }
  /* PROBLEMY: przypięty czat, jedna para naraz */
  .pchat-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:20px 0}
  .pchat-spacer{display:block;height:230vh}
  .pchat-col{min-height:210px;justify-content:center;gap:14px}
  /* JAK DZIAŁAM: bez kuli */
  .story-orb{display:none}
  .story-grid{gap:0}
  /* ROZMOWA: najpierw okno czatu */
  .chat-grid .chat-shell{order:-1}
  /* NA ŻYWO: wideo, pod spodem identyczny panel TV dopasowany do szerokości */
  .tvp-fit{display:block !important;overflow:hidden}
  .tvp-swipe,.m-dash{display:none !important}
}

/* ═══════════════ MOBILE FIX 2 — czat w miejscu, panel poprawnie skalowany ═══════════════ */
@media(max-width:900px){
  /* PROBLEMY: zwarta sekcja, para podmienia się w tym samym miejscu */
  .pchat-pin{position:relative;min-height:0;padding:56px 0 10px;justify-content:flex-start}
  .pchat-spacer{display:none !important}
  .pchat-col{min-height:236px;justify-content:flex-start}
  /* NA ŻYWO: kafelki niezależne, wideo w proporcji nagrania */
  .live-grid{align-items:start}
  .mock-stage{aspect-ratio:1896/1008;min-height:0;flex:none}
  .live-tile{width:100%}
}

/* ═══════════════ AUDYT MOBILE — pasek zaufania, kropki, skróty ═══════════════ */
.trust{position:relative;z-index:1;padding:0 0 10px}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 24px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.trust-lead{color:var(--muted);font-size:.95rem}
.trust-lead b{color:var(--text)}
.trust-chips{display:flex;gap:8px;flex-wrap:wrap}
.tchip2{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.pchat-dots{display:none;justify-content:center;gap:8px;margin-top:20px}
.pchat-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .3s}
.pchat-dots i.act{background:var(--grad);transform:scale(1.3)}
.weights-toggle{display:none}
.cta-mobile{display:none}
@media(max-width:900px){
  .marquee{display:none}
  .orb-wrap{width:min(168px,46vw);margin-bottom:64px}
  .orb-scene{padding-top:0}
  .hero{padding-top:88px}
  .pchat-dots{display:flex}
  .pchat-col{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .demo-actions{display:none}
  .demo-card.show-w .demo-actions{display:flex}
  .weights-toggle{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);
    padding:10px 16px;font:600 .84rem var(--font-b);cursor:pointer}
  .weights-toggle svg{transition:transform .3s}
  .demo-card.show-w .weights-toggle svg{transform:rotate(180deg)}
  #contactForm{display:none}
  .cta-mobile{display:block}
  .cta-mail{margin-top:14px;text-align:center;font-size:.85rem;color:var(--muted)}
  .cta-mail a{color:var(--text)}
  .trust-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .tvp-fit{display:none !important}
  .m-dash{display:flex !important}
}

/* ═══════════════ PROBLEMY NA MOBILE: 3 pary statycznie ═══════════════ */
@media(max-width:900px){
  .pchat-dots{display:none !important}
  .pchat-pin{padding:56px 0 20px}
  .pchat-col{min-height:0;gap:13px;cursor:default}
  /* zostają pary: 1 (ruch→kontakty), 3 (handlowcy na ślepo), 4 (wieczory→24/7) */
  .pmsg:nth-child(3),.pmsg:nth-child(4),
  .pmsg:nth-child(9),.pmsg:nth-child(10),
  .pmsg:nth-child(11),.pmsg:nth-child(12){display:none}
}

/* Desktop: sekcja sticky mieści nagłówek i wszystkie cztery kroki pod nawigacją. */
@media(min-width:901px) and (max-width:1100px){
  .orb-halo{inset:-4%}
  .orb-ring{inset:3%}
  .orb-ring.r2{inset:3%}
}
@media(min-width:981px){
  html{scroll-padding-top:78px}
  .story-pin{top:78px;min-height:calc(100svh - 78px);overflow:visible}
  .story-grid{gap:44px}
  .story h2{margin-bottom:22px!important}
  .story-steps{gap:10px}
  .step{padding:16px 20px;opacity:.65;transform:scale(.985)}
  .step-top{margin-bottom:5px}
  .step p{font-size:.88rem;line-height:1.45}
  .step .bar{margin-top:10px}
}