/* ===== Landing page (widok dla niezalogowanych) ===== */
.land{--bg:#05050a;--card:#15151c;--text:#f5f5f7;--sub:#9a9aa5;--line:#26262f;--fill:#1e1e27;--blue:#2997ff;
  background:#05050a;color:var(--text);min-height:100vh;overflow-x:hidden;position:relative}
.land *{box-sizing:border-box}
.land h1,.land h2,.land h3{margin:0}
.land p{margin:0}
.l-grad{background:linear-gradient(100deg,#7cc4ff 0%,#a78bfa 45%,#ff7ac6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* progress */
.l-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#0a84ff,#a78bfa,#ff7ac6);z-index:60}

/* nav */
.l-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:66px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.l-nav.scrolled{background:rgba(8,8,14,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-color:var(--line)}
.l-nav .brand{padding:0;cursor:pointer}
.l-links{display:flex;gap:6px}
.l-links a{color:var(--sub);font-size:14px;padding:8px 14px;border-radius:980px;text-decoration:none;transition:color .2s,background .2s}
.l-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.l-actions{display:flex;gap:10px;align-items:center;position:relative}
.l-actions .btn{padding:9px 20px}
.l-actions .btn.plain{background:none;color:var(--text)}
.l-actions .btn.plain:hover{background:rgba(255,255,255,.07);opacity:1}

/* login panel (prawy górny róg) */
.lg-panel{position:absolute;top:calc(100% + 14px);right:0;width:340px;background:rgba(24,24,32,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .22s,transform .22s}
.lg-panel.open{opacity:1;transform:none;pointer-events:auto}
.lg-panel form{display:grid;gap:14px}
.lg-panel h3{font-size:21px;font-weight:700}
.lg-panel .sub{color:var(--sub);font-size:13.5px}
.lg-panel .btn{justify-content:center;padding:12px}
.lg-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--fill);border-radius:11px;padding:3px;gap:3px}
.lg-tabs button{border:0;background:none;color:var(--sub);padding:8px;border-radius:9px;font-size:13.5px;font-weight:500;transition:all .2s}
.lg-tabs button.on{background:#2c2c38;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* sections */
.l-sec{max-width:1120px;margin:0 auto;padding:120px clamp(18px,4vw,32px)}
.l-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.l-h2{font-size:clamp(30px,4.6vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.l-lead{font-size:clamp(16px,1.6vw,19px);color:var(--sub);line-height:1.55;max-width:620px;margin-top:18px}
.l-head{text-align:center;margin:0 auto 64px}
.l-head .l-lead{margin-left:auto;margin-right:auto}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* hero */
.l-hero{min-height:100vh;display:grid;align-items:center;position:relative;padding:130px clamp(18px,4vw,32px) 80px}
.l-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.l-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 14s ease-in-out infinite}
.l-blob.a{width:620px;height:620px;background:#5e5ce6;top:-160px;left:-120px}
.l-blob.b{width:520px;height:520px;background:#0a84ff;bottom:-120px;right:-80px;animation-delay:-5s}
.l-blob.c{width:380px;height:380px;background:#ff3d9a;top:35%;left:48%;opacity:.28;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-34px)}}
.l-hero-in{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.l-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:980px;background:rgba(255,255,255,.04);color:#cfcfd8;margin-bottom:26px}
.l-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);display:block}
.l-hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.l-hero .l-lead{font-size:clamp(17px,1.7vw,20px);margin-top:24px}
.l-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.l-cta .btn{padding:14px 28px;font-size:16px}
.l-cta .btn.outline{background:none;border:1px solid #3a3a46;color:var(--text)}
.l-cta .btn.outline:hover{background:rgba(255,255,255,.06);opacity:1}
.l-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--sub);font-size:12px;display:grid;gap:6px;justify-items:center;cursor:pointer;background:none;border:0}
.l-scroll svg{width:22px;height:22px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* mock window */
.mock{background:linear-gradient(160deg,#1a1a24,#12121a);border:1px solid #2c2c3a;border-radius:24px;padding:22px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.mock-hero{animation:tilt 9s ease-in-out infinite;transform-origin:center}
@keyframes tilt{0%,100%{transform:perspective(1200px) rotateY(-6deg) rotateX(3deg)}50%{transform:perspective(1200px) rotateY(4deg) rotateX(-2deg)}}
.mock-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.m-ring{--p:85;--c:#34c759;width:84px;height:84px;border-radius:50%;flex:none;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center;transition:background .4s}
.m-ring>div{width:68px;height:68px;border-radius:50%;background:#14141c;display:grid;place-items:center;font-weight:700;font-size:19px;text-align:center;line-height:1}
.m-ring small{display:block;font-size:9.5px;font-weight:500;color:var(--sub);margin-top:3px}
.mock-top b{font-size:17px;display:block}
.mock-top span{font-size:13px;color:var(--sub)}
.m-les{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:#1b1b25;border-radius:14px;margin-top:9px;font-size:14px;border:1px solid transparent;transition:border-color .25s,background .25s}
.m-les .t{color:var(--sub);font-size:12.5px;font-variant-numeric:tabular-nums}
.m-badge{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:980px;white-space:nowrap}
.m-badge.g{background:rgba(52,199,89,.16);color:#4ae070}
.m-badge.o{background:rgba(255,159,10,.16);color:#ffb340}
.m-badge.r{background:rgba(255,59,48,.16);color:#ff6b61}
.m-badge.p{background:rgba(175,82,222,.2);color:#c77df0}
.float-chip{position:absolute;background:#1d1d29;border:1px solid #33334a;border-radius:16px;padding:12px 16px;font-size:13px;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:float 7s ease-in-out infinite}
.float-chip b{display:block;font-size:20px}
.float-chip span{color:var(--sub);font-size:12px}
.hero-vis{position:relative}

/* steps */
.l-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.l-step{background:linear-gradient(170deg,#16161f,#101017);border:1px solid var(--line);border-radius:24px;padding:28px 24px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.l-step:hover{transform:translateY(-6px);border-color:#3b3b52}
.l-step .n{font-size:64px;font-weight:800;line-height:1;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;position:absolute;top:12px;right:18px}
.l-step .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;background:linear-gradient(135deg,#0a84ff,#5e5ce6);color:#fff}
.l-step .ic svg{width:22px;height:22px}
.l-step h3{font-size:19px;margin-bottom:8px}
.l-step p{font-size:14.5px;color:var(--sub);line-height:1.55}

/* showcase rows */
.l-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:70px 0}
.l-row.flip .l-copy{order:2}
.l-copy .l-h2{font-size:clamp(28px,3.6vw,42px)}
.l-list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.l-list li{display:flex;gap:12px;align-items:flex-start;color:#cfcfd8;font-size:15.5px;line-height:1.5}
.l-list li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;background:rgba(52,199,89,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ae070' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.seg span{text-align:center;font-size:12.5px;font-weight:600;padding:8px 4px;border-radius:9px;border:1px solid #2f2f3d;color:var(--sub)}
.seg span.y{background:#34c759;border-color:#34c759;color:#fff}
.seg span.n{background:#ff3b30;border-color:#ff3b30;color:#fff}
.sim-line{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-top:14px}
.sim-line b{color:var(--text)}
.bar{height:10px;border-radius:99px;background:#26262f;overflow:hidden;margin-top:10px;display:flex}
.bar i{display:block;height:100%}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wr{border-radius:18px;padding:22px 16px;text-align:center;color:#fff;min-height:118px;display:flex;flex-direction:column;justify-content:center}
.wr small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;opacity:.9}
.wr b{font-size:19px;margin:6px 0 2px}
.wr span{font-size:12.5px;opacity:.9}
.wr.w1{background:linear-gradient(135deg,#8e2de2,#4a00e0);grid-column:1/-1}
.wr.w1 b{font-size:34px}
.wr.w2{background:linear-gradient(135deg,#f6d365,#fda085)}
.wr.w3{background:linear-gradient(135deg,#ff5f6d,#ffc371)}

/* interactive demo */
.l-demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;background:linear-gradient(160deg,#14141d,#0d0d14);border:1px solid var(--line);border-radius:36px;padding:clamp(24px,4vw,56px)}
.demo-card{background:#0c0c13;border:1px solid #2a2a38;border-radius:24px;padding:22px}
.demo-card .m-ring{width:110px;height:110px}
.demo-card .m-ring>div{width:90px;height:90px;font-size:24px}
.demo-stats{display:flex;gap:18px;align-items:center;margin-bottom:12px}
.demo-stats b{font-size:18px;display:block}
.demo-stats span{font-size:13px;color:var(--sub)}
.demo-btn{border:1px solid #34344a;background:none;color:var(--sub);font-size:12px;padding:6px 13px;border-radius:980px;transition:all .2s;white-space:nowrap}
.demo-btn:hover{color:var(--text);border-color:#55556e}
.demo-btn.on{background:#af52de;border-color:#af52de;color:#fff}
.demo-btn:disabled{opacity:.4;cursor:not-allowed}
.demo-hint{font-size:12.5px;color:var(--sub);margin-top:14px;text-align:center}

/* security */
.l-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.l-card{background:linear-gradient(170deg,#16161f,#101017);border:1px solid var(--line);border-radius:24px;padding:28px 26px}
.l-card .ic{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:18px;color:#8ec9ff}
.l-card .ic svg{width:22px;height:22px}
.l-card h3{font-size:18px;margin-bottom:8px}
.l-card p{font-size:14.5px;color:var(--sub);line-height:1.55}

/* faq */
.l-faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.l-faq details{background:#12121a;border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.l-faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1;transition:transform .2s}
.l-faq details[open] summary::after{transform:rotate(45deg)}
.l-faq details p{color:var(--sub);font-size:15px;line-height:1.6;margin-top:12px}

/* final cta */
.l-final{text-align:center;position:relative;overflow:hidden;border-radius:36px;padding:clamp(48px,8vw,100px) 24px;border:1px solid var(--line);
  background:radial-gradient(700px 300px at 20% 0,rgba(94,92,230,.45),transparent 70%),radial-gradient(700px 300px at 90% 100%,rgba(10,132,255,.4),transparent 70%),#0d0d14}
.l-final .l-cta{justify-content:center}
.l-foot{text-align:center;color:var(--sub);font-size:12.5px;padding:30px 20px 50px;max-width:680px;margin:0 auto;line-height:1.6}

@media(max-width:960px){
  .l-hero-in{grid-template-columns:1fr;gap:40px}
  .l-links{display:none}
  .l-steps{grid-template-columns:1fr 1fr}
  .l-row{grid-template-columns:1fr;gap:36px;padding:44px 0}.l-row.flip .l-copy{order:0}
  .l-demo{grid-template-columns:1fr;gap:32px}
  .l-cards{grid-template-columns:1fr}
  .float-chip{display:none}
  .mock-hero{animation:none}
}
@media(max-width:560px){
  .l-steps{grid-template-columns:1fr}
  .lg-panel{position:fixed;top:74px;left:14px;right:14px;width:auto}
  .l-actions .btn.plain{display:none}
  .l-sec{padding-top:80px;padding-bottom:80px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.l-blob,.mock-hero,.float-chip,.l-scroll svg{animation:none!important}}

/* beta gate (okno z hasłem dostępu) */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(3,3,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s}
.gate.open{opacity:1}
.gate-card{width:100%;max-width:400px;background:linear-gradient(170deg,#1a1a24,#12121a);border:1px solid #2c2c3a;border-radius:24px;padding:30px 28px;box-shadow:0 40px 100px rgba(0,0,0,.65);
  transform:translateY(14px) scale(.97);transition:transform .25s}
.gate.open .gate-card{transform:none}
.beta-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;padding:4px 10px;border-radius:980px;background:rgba(175,82,222,.2);color:#c77df0;margin-bottom:14px}
.gate-card h3{font-size:22px;font-weight:700;margin-bottom:8px}
.gate-card p{color:var(--sub);font-size:14.5px;line-height:1.5;margin-bottom:20px}
.gate-card form{display:grid;gap:12px}
.gate-card .btn{justify-content:center;padding:12px}
.gate-card .link{justify-self:center}