/* Site Builder /struktura — style z mockupu, zakres .sb-page */
.sb-page{
  --ec-granat-900:#060F45; --ec-granat-800:#0A1858; --ec-granat-500:#1B3FA0;
  --ec-granat-300:#607FC6; --ec-granat-200:#A0B4DB; --ec-granat-100:#D0DAF0;
  --ec-green-900:#00D563;  --ec-green-700:#00AA4F;  --ec-green-400:#33E082;
  --ec-green-300:#66EBA1;  --ec-green-200:#99F5C0;  --ec-green-50:#E6FCF0;
  --ec-text-heading:#060F45; --ec-text-body:#73848B;
  --ec-text-on-dark:#FFFFFF; --ec-text-on-dark-muted:#A0B4DB;
  --ec-surface:#FFFFFF; --ec-surface-alt:#F7F9FC; --ec-surface-dark:#060F45;
  --ec-surface-dark-raised:rgba(10,24,88,.78);
  --ec-border-light:#E6EBF2; --ec-border-on-dark:rgba(160,180,219,.25);
  --ec-border-accent-on-dark:rgba(0,213,99,.35);
  --ec-badge-bg:rgba(0,213,99,.09); --ec-badge-border:rgba(0,213,99,.45);
  --ec-badge-bg-on-dark:rgba(0,213,99,.10); --ec-badge-border-on-dark:rgba(0,213,99,.35);
  --ec-warning:#FFC107;
  --ec-font-display:'Baloo 2',system-ui,cursive;
  --ec-font-text:'Poppins',system-ui,sans-serif;
  --ec-container-max:1200px; --ec-container-pad:24px; --ec-section-py:100px;
  --ec-radius-sm:8px; --ec-radius-md:12px; --ec-radius-lg:16px; --ec-radius-xl:30px; --ec-radius-pill:100rem;
  --ec-shadow-card:0 4px 24px rgba(6,15,69,.08);
  --ec-shadow-card-hover:0 18px 44px rgba(6,15,69,.10);
  --ec-shadow-accent:0 8px 28px rgba(0,213,99,.35);
  --ec-shadow-glass:0 18px 50px rgba(0,0,0,.45);
  --ec-glow-hero:
    radial-gradient(ellipse 60% 55% at 75% 45%, rgba(0,213,99,.13) 0%, rgba(0,213,99,0) 60%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgba(27,63,160,.35) 0%, rgba(27,63,160,0) 65%);
  --ec-dotgrid:radial-gradient(rgba(160,180,219,.13) 1px, transparent 1px);
  --ec-glow-section:
    radial-gradient(ellipse 55% 60% at 80% 50%, rgba(0,213,99,.10) 0%, rgba(0,213,99,0) 60%);
  --ec-dotgrid-section:
    radial-gradient(circle 1.1px at 24px 24px, rgba(160,180,219,.28) 50%, transparent 51%);
  --ec-gradient-shine-text:linear-gradient(105deg,#00D563 0%,#00D563 40%,#C8FFE0 50%,#00D563 60%,#66EBA1 100%);
  --ec-gradient-shine-h1:linear-gradient(100deg,#00D563 20%,#99F5C0 50%,#00D563 80%);
  --ec-focus-ring:rgba(0,213,99,.35);
  box-sizing:border-box;
}
.sb-page, .sb-page *{box-sizing:border-box}
.sb-page{scroll-behavior:smooth; scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
.sb-page{margin:0; font-family:var(--ec-font-text); font-size:17px; line-height:1.53; color:var(--ec-text-body); background:#FFFFFF; -webkit-font-smoothing:antialiased}
.sb-page h1, .sb-page h2, .sb-page h3, .sb-page h4{font-family:var(--ec-font-display); color:var(--ec-text-heading); margin:0}
.sb-page a{color:var(--ec-granat-900); text-decoration:none; transition:color .3s ease}
.sb-page a:hover{color:var(--ec-green-900)}
.sb-page p, .sb-page ul{margin:0} .sb-page ul{padding:0; list-style:none}
.sb-page img, .sb-page svg{max-width:100%}
.sb-page .container{max-width:var(--ec-container-max); margin:0 auto; padding:0 var(--ec-container-pad)}
.sb-page .section{padding:var(--ec-section-py) 0}
@media(max-width:768px){.sb-page .section{padding:70px 0}}
.sb-page .sec--light{background:var(--ec-surface-alt)}

/* Badge */
.sb-page .badge{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:7px 16px; border-radius:var(--ec-radius-pill);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:22px}
.sb-page .badge .dot{width:7px; height:7px; border-radius:50%; background:var(--ec-green-900); flex:none}
.sb-page .badge--light{color:var(--ec-granat-900); background:var(--ec-badge-bg); border:1px solid var(--ec-badge-border)}
.sb-page .badge--dark{color:var(--ec-green-200); background:var(--ec-badge-bg-on-dark); border:1px solid var(--ec-badge-border-on-dark)}
.sb-page .badge--pulse .dot{animation:ecHeroPulse 2s infinite}

/* Buttons */
.sb-page .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none; font-family:var(--ec-font-text); font-weight:600; font-size:15px;
  padding:14px 32px; border-radius:var(--ec-radius-pill); transition:transform .3s ease, background .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease}
.sb-page .btn svg{width:16px; height:16px; flex:none}
.sb-page .btn--green{background:var(--ec-green-900); color:var(--ec-granat-900); box-shadow:var(--ec-shadow-accent)}
.sb-page .btn--green:hover{background:var(--ec-green-400); transform:translateY(-2px); color:var(--ec-granat-900)}
.sb-page .btn--granat{background:transparent; color:var(--ec-granat-900); border:1.5px solid var(--ec-granat-900)}
.sb-page .btn--granat:hover{background:var(--ec-green-900); border-color:var(--ec-green-900); color:var(--ec-granat-900); transform:translateY(-2px)}
.sb-page .btn--white{background:rgba(255,255,255,.04); color:#fff; border:1px solid rgba(255,255,255,.35)}
.sb-page .btn--white:hover{border-color:var(--ec-green-900); color:var(--ec-green-900); transform:translateY(-2px)}
.sb-page .btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ec-focus-ring)}

/* Header */
.sb-page .site-header{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:100; transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom:1px solid transparent}
.sb-page .site-header.stuck{background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 4px 24px rgba(6,15,69,.08); border-bottom:1px solid #E3E7E8}
.sb-page .header-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.sb-page .wordmark{display:inline-flex; align-items:center; gap:10px; font-family:var(--ec-font-display); font-weight:700; font-size:20px; color:#fff; transition:color .3s ease}
.sb-page .stuck .wordmark{color:var(--ec-granat-900)}
.sb-page .sygnet{width:30px; height:30px; flex:none}
.sb-page .wordmark .os{color:var(--ec-green-900)}
.sb-page .header-nav{display:flex; align-items:center; gap:26px}
.sb-page .header-nav a.nav-link{font-size:14px; font-weight:500; color:rgba(255,255,255,.85)}
.sb-page .header-nav a.nav-link:hover{color:var(--ec-green-900)}
.sb-page .stuck .header-nav a.nav-link{color:#717684}
.sb-page .stuck .header-nav a.nav-link:hover{color:var(--ec-green-900)}
@media(max-width:900px){.sb-page .header-nav .nav-link{display:none}}

/* Navy atmosphere (sections only) */
.sb-page .sec--dark{position:relative; overflow:hidden; background:var(--ec-surface-dark); color:#fff}
.sb-page .sec--dark h2, .sb-page .sec--dark h3, .sb-page .sec--dark h4{color:#fff}
.sb-page .hero-bg{position:absolute; inset:0; pointer-events:none; background-image:var(--ec-glow-hero),var(--ec-dotgrid); background-size:auto,auto,28px 28px; background-repeat:no-repeat,no-repeat,repeat}
.sb-page .section-bg{position:absolute; inset:0; pointer-events:none; background-image:var(--ec-glow-section),var(--ec-dotgrid-section); background-size:auto,48px 48px; background-repeat:no-repeat,repeat}
.sb-page .sec-inner{position:relative; z-index:1}

/* Headings */
.sb-page .section-head{display:flex; flex-direction:column; align-items:flex-start; max-width:820px}
.sb-page .section-head.center{margin:0 auto; align-items:center; text-align:center}
.sb-page .section-title{font-family:var(--ec-font-display); font-weight:400; font-size:clamp(28px,3vw,42px); line-height:1.2; color:var(--ec-text-heading); max-width:820px}
.sb-page .sec--dark .section-title{color:#fff}
.sb-page .section-title em{font-style:normal; font-weight:700; color:inherit}
.sb-page .sec--dark .section-title em{font-weight:700; background-image:var(--ec-gradient-shine-text); background-size:280% 100%; background-position:100% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sb-page .lead{font-size:19px; line-height:1.75; color:var(--ec-text-body); max-width:720px; margin-top:20px}
.sb-page .sec--dark .lead{color:var(--ec-text-on-dark-muted)}
.sb-page .lead strong{color:var(--ec-text-heading); font-weight:600}
.sb-page .sec--dark .lead strong{color:#fff}

/* Cards */
.sb-page .grid{display:grid; gap:24px}
.sb-page .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sb-page .g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sb-page .card{background:var(--ec-surface); border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border-light); box-shadow:var(--ec-shadow-card); padding:28px}
.sb-page .card h3{font-size:21px; line-height:1.3; margin-bottom:10px}
.sb-page .card p{font-size:15px; line-height:1.65}
.sb-page .card .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--ec-green-50); color:var(--ec-green-700); margin-bottom:18px}
.sb-page .card .ic svg{width:22px; height:22px}
.sb-page .card--navy{background:var(--ec-surface-dark); border:1px solid var(--ec-border-accent-on-dark)}
.sb-page .card--navy h3{color:#fff} .sb-page .card--navy p{color:var(--ec-granat-200)}
.sb-page .card--navy .ic{background:rgba(0,213,99,.12); color:var(--ec-green-300)}
.sb-page .card--glass{background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); box-shadow:var(--ec-shadow-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff}
.sb-page .card--glass h3{color:#fff} .sb-page .card--glass p{color:var(--ec-granat-200)}
.sb-page .spark-list li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15px; line-height:1.6; color:var(--ec-text-body)}
.sb-page .spark-list li::before{content:'\2726'; position:absolute; left:0; top:1px; color:var(--ec-green-900); font-size:13px}
.sb-page .sec--dark .spark-list li{color:var(--ec-granat-200)}
.sb-page .stats{display:flex; flex-wrap:wrap; gap:40px; margin-top:44px}
.sb-page .stat .num{font-family:var(--ec-font-display); font-weight:700; font-size:clamp(34px,4vw,52px); line-height:1; background-image:var(--ec-gradient-shine-text); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sb-page .stat .cap{font-size:13.5px; color:var(--ec-granat-200); margin-top:8px}
.sb-page .sec--light .stat .cap{color:var(--ec-text-body)}

/* ---------- HERO ---------- */
.sb-page .hero{min-height:100vh; display:flex; align-items:center}
.sb-page .hero-grid{display:grid; grid-template-columns:1fr; gap:56px; padding:128px 0 96px; align-items:center}
@media(min-width:1024px){.sb-page .hero-grid{grid-template-columns:1fr 1.05fr}}
.sb-page .hero-left{display:flex; flex-direction:column; align-items:flex-start}
.sb-page .hero h1{font-family:var(--ec-font-display); font-weight:700; font-size:clamp(30px,3.2vw,46px); line-height:1.22; color:#fff; max-width:600px; margin:4px 0 20px}
.sb-page .hero h1 .nowrap{white-space:nowrap}
.sb-page .hero h1 em{font-style:normal; font-weight:700; background-image:var(--ec-gradient-shine-h1); background-size:280% 100%; background-position:30% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sb-page .hero h1 .spk{font-size:.5em; vertical-align:super; margin-left:8px; color:var(--ec-green-300); display:inline-block; animation:ecHeroSpark 4.5s infinite}
.sb-page .hero-lead{font-size:16px; line-height:1.75; color:var(--ec-granat-200); max-width:540px; margin-bottom:32px}
.sb-page .hero-lead strong{color:#fff; font-weight:600}
.sb-page .hero-lead u{text-decoration-color:var(--ec-green-900); text-underline-offset:3px}
.sb-page .hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.sb-page .hero-feats{display:flex; flex-direction:column; gap:10px; margin-top:32px; max-width:540px; width:100%}
.sb-page .feat-row{display:flex; align-items:center; gap:12px; border-radius:var(--ec-radius-md); background:rgba(10,24,88,.5); border:1px solid rgba(160,180,219,.2); padding:11px 16px; font-size:14px; color:#fff}
.sb-page .feat-row .fdot{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); flex:none}
.sb-page .feat-row .ftag{margin-left:auto; color:var(--ec-green-200); font-size:12px; font-weight:600; white-space:nowrap}

/* Hero product mock */
.sb-page .hero-right{position:relative}
.sb-page .builder{position:relative; border-radius:var(--ec-radius-lg); background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark);
  box-shadow:var(--ec-shadow-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:18px; overflow:visible}
.sb-page .builder-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(160,180,219,.18); margin-bottom:14px}
.sb-page .builder-title{display:flex; align-items:center; gap:10px; font-family:var(--ec-font-display); font-weight:700; font-size:15px; color:#fff}
.sb-page .builder-title svg{width:18px; height:18px; color:var(--ec-green-900)}
.sb-page .builder-title .ag-mark{width:22px; height:22px; color:#fff}
.sb-page .builder-stats{display:flex; gap:12px; flex-wrap:wrap}
.sb-page .bstat{font-size:11px; color:var(--ec-granat-200)}
.sb-page .bstat b{font-family:var(--ec-font-display); font-weight:700; color:var(--ec-green-300); font-size:13px}
.sb-page .tree-wrap{position:relative; overflow:hidden; border-radius:10px}
.sb-page .scanline{position:absolute; left:0; right:0; top:-6px; height:3px; background:linear-gradient(90deg,transparent,var(--ec-green-900),transparent); box-shadow:0 0 18px rgba(0,213,99,.7); opacity:0; pointer-events:none}
.sb-page .scanline.run{animation:ecScan 1.6s cubic-bezier(0.4,0.26,0,0.97) forwards}
.sb-page .tree{display:flex; flex-direction:column; gap:7px; font-size:13px}
.sb-page .node{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; background:rgba(6,15,69,.4); border:1px solid rgba(160,180,219,.14);
  opacity:0; transform:translateX(-10px); transition:opacity .45s ease, transform .45s ease, border-color .3s ease, background .3s ease, max-height .5s ease}
.sb-page .node.in{opacity:1; transform:translateX(0)}
.sb-page .node.lvl2{margin-left:22px} .sb-page .node.lvl3{margin-left:44px}
.sb-page .node.new{border-color:var(--ec-green-900); background:rgba(0,213,99,.08); box-shadow:0 0 0 0 rgba(0,213,99,.5); animation:ecNodePop .9s ease}
.sb-page .grip{display:grid; grid-template-columns:repeat(2,3px); gap:3px; flex:none; opacity:.5}
.sb-page .grip i{width:3px; height:3px; border-radius:50%; background:var(--ec-granat-200)}
.sb-page .node svg.ico{width:15px; height:15px; color:var(--ec-green-300); flex:none}
.sb-page .node .nname{color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-page .node-meta{margin-left:auto; display:flex; align-items:center; gap:7px; flex:none}
.sb-page .kw{display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ec-green-200); background:rgba(0,213,99,.10); border:1px solid rgba(0,213,99,.28); border-radius:var(--ec-radius-pill); padding:2px 9px}
.sb-page .chip{font-size:10.5px; color:var(--ec-granat-200); background:rgba(160,180,219,.10); border:1px solid rgba(160,180,219,.18); border-radius:6px; padding:2px 7px; white-space:nowrap}
.sb-page .chip b{color:var(--ec-green-300); font-weight:600}
.sb-page .chip.warn{color:#FFE08A; border-color:rgba(255,193,7,.35); background:rgba(255,193,7,.10)}
.sb-page .prio{font-size:10.5px; color:var(--ec-granat-900); background:var(--ec-green-900); font-weight:600; border-radius:var(--ec-radius-pill); padding:2px 9px}
.sb-page .status{font-size:10.5px; font-weight:600; border-radius:var(--ec-radius-pill); padding:2px 9px}
.sb-page .status--wip{color:#3d2f00; background:rgba(255,193,7,.85)}
.sb-page .status--idea{color:var(--ec-green-200); background:rgba(0,213,99,.10); border:1px solid rgba(0,213,99,.3)}
.sb-page .status--new{color:var(--ec-granat-900); background:var(--ec-green-300)}
.sb-page .builder-cap{margin-top:12px; font-size:11px; color:var(--ec-granat-300); display:flex; align-items:center; gap:8px}
.sb-page .builder-cap .live{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); animation:ecHeroPulse 2s infinite}
.sb-page .weight-callout{position:absolute; right:2px; bottom:-30px; z-index:3; background:rgba(10,24,88,.94); border:1px solid var(--ec-border-accent-on-dark); border-radius:var(--ec-radius-md);
  box-shadow:var(--ec-shadow-glass); padding:12px 15px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); max-width:270px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.sb-page .weight-callout.in{opacity:1; transform:translateY(0)}
.sb-page .weight-callout .wc-eye{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-green-200); font-weight:600; margin-bottom:5px}
.sb-page .weight-callout .wc-eye .dot{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); animation:ecHeroPulse 2s infinite}
.sb-page .weight-callout p{font-size:12px; color:#fff; line-height:1.5}
@media(max-width:1023px){.sb-page .hero-right{display:none} .sb-page .hero-grid{padding:120px 0 70px} .sb-page .hero{min-height:auto}}
@media(max-width:1200px){.sb-page .node .chip.hide-sm{display:none}}
.sb-page .scroll-ind{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; width:24px; height:36px; border:2px solid rgba(255,255,255,.35); border-radius:var(--ec-radius-pill); display:flex; justify-content:center; padding-top:8px}
.sb-page .scroll-ind i{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); animation:ecScrollDot 1.8s infinite}
@media(max-width:1023px){.sb-page .scroll-ind{display:none}}

/* ---------- PROBLEM: interactive demo ---------- */
.sb-page .demo{margin-top:52px; background:#fff; border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-xl); box-shadow:var(--ec-shadow-card); padding:26px; overflow:hidden}
.sb-page .demo-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px}
.sb-page .demo-q{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ec-text-heading); background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-pill); padding:9px 16px}
.sb-page .demo-q svg{width:15px; height:15px; color:var(--ec-green-700)}
.sb-page .demo-q b{font-weight:600}
.sb-page .toggle{display:inline-flex; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-pill); padding:4px; position:relative}
.sb-page .toggle button{position:relative; z-index:1; border:none; background:transparent; font-family:var(--ec-font-text); font-weight:600; font-size:13px; padding:9px 18px; border-radius:var(--ec-radius-pill); cursor:pointer; color:var(--ec-text-body); transition:color .3s ease}
.sb-page .toggle button[aria-pressed="true"]{color:var(--ec-granat-900)}
.sb-page .toggle .knob{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--ec-radius-pill); background:#fff; box-shadow:var(--ec-shadow-card); transition:transform .35s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .toggle.b .knob{transform:translateX(100%)}
.sb-page .toggle button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ec-focus-ring)}
.sb-page .toggle.hint{animation:ecToggleRing 2.8s ease infinite}
.sb-page .toggle.hint .knob{animation:ecToggleNudge 2.8s cubic-bezier(0.4,0.26,0,0.97) infinite}
.sb-page .toggle.hint button[aria-pressed="false"]{animation:ecToggleLabel 2.8s ease infinite}
@keyframes ecToggleNudge{0%,40%{transform:translateX(0)}55%,78%{transform:translateX(42%)}100%{transform:translateX(0)}}
@keyframes ecToggleLabel{0%,40%{color:var(--ec-text-body)}55%,78%{color:var(--ec-green-700)}100%{color:var(--ec-text-body)}}
@keyframes ecToggleRing{0%,40%{box-shadow:0 0 0 0 rgba(0,213,99,0)}55%,78%{box-shadow:0 0 0 8px rgba(0,213,99,.2)}100%{box-shadow:0 0 0 0 rgba(0,213,99,0)}}
@media (prefers-reduced-motion: reduce){
  .sb-page .toggle.hint, .sb-page .toggle.hint .knob, .sb-page .toggle.hint button[aria-pressed="false"]{animation:none}
}
.sb-page .panes{position:relative; display:grid}
.sb-page .pane{grid-area:1/1; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none}
.sb-page .pane.on{opacity:1; transform:translateY(0); pointer-events:auto}
.sb-page .browser{border:1px solid var(--ec-border-light); border-radius:14px; background:var(--ec-surface-alt); overflow:hidden; position:relative}
.sb-page .browser-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--ec-border-light)}
.sb-page .browser-bar i{width:9px; height:9px; border-radius:50%; background:var(--ec-border-light)}
.sb-page .browser-bar .url{margin-left:8px; font-size:12px; color:var(--ec-text-body); background:var(--ec-surface-alt); border-radius:6px; padding:5px 10px; flex:1; max-width:380px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-page .browser-bar .url b{color:var(--ec-text-heading); font-weight:500}
.sb-page .browser-body{padding:18px 20px 20px; display:grid; gap:16px}
@media(min-width:820px){.sb-page .browser-body{grid-template-columns:1fr 1.2fr}}
.sb-page .crumb{font-size:12px; color:var(--ec-text-body); margin-bottom:8px}
.sb-page .crumb b{color:var(--ec-text-heading); font-weight:500}
.sb-page .ptitle{font-family:var(--ec-font-display); font-weight:700; font-size:22px; color:var(--ec-text-heading); line-height:1.2}
.sb-page .ptitle small{font-family:var(--ec-font-text); font-weight:400; font-size:13px; color:var(--ec-text-body); margin-left:8px}
.sb-page .filters{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.sb-page .fgroup{font-size:12px; color:var(--ec-text-body)}
.sb-page .fgroup .fl{display:block; margin-bottom:5px; color:var(--ec-text-heading); font-weight:500}
.sb-page .fchips{display:flex; flex-wrap:wrap; gap:6px}
.sb-page .fchip{font-size:12px; border:1px solid var(--ec-border-light); background:#fff; border-radius:var(--ec-radius-pill); padding:4px 11px; color:var(--ec-text-body); transition:background .3s ease, color .3s ease, border-color .3s ease}
.sb-page .fchip.picked{background:var(--ec-granat-900); color:#fff; border-color:var(--ec-granat-900)}
.sb-page .pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:start}
.sb-page .ptile{background:#fff; border:1px solid var(--ec-border-light); border-radius:10px; padding:10px; transition:opacity .35s ease, filter .35s ease}
.sb-page .ptile .img{height:56px; border-radius:6px; background:linear-gradient(135deg,#EEF2F8,#DDE4F0); margin-bottom:8px; position:relative; overflow:hidden}
.sb-page .ptile .img::after{content:''; position:absolute; inset:auto 8px 8px auto; width:16px; height:16px; border-radius:50%; background:#C9CED8}
.sb-page .ptile.gold .img::after{background:linear-gradient(135deg,#E6C25A,#B8912E)}
.sb-page .ptile .l1{height:8px; width:80%; border-radius:4px; background:#E6EBF2; margin-bottom:6px}
.sb-page .ptile .l2{height:8px; width:45%; border-radius:4px; background:#E6EBF2}
.sb-page .pane-a .ptile:not(.gold){opacity:.55; filter:grayscale(.2)}
.sb-page .pane-a.filtered .ptile:not(.gold){opacity:.12}
.sb-page .cursor{position:absolute; width:14px; height:14px; border-radius:50%; background:var(--ec-green-900); box-shadow:0 0 0 4px rgba(0,213,99,.25); z-index:3; opacity:0; transition:left .55s cubic-bezier(0.4,0.26,0,0.97), top .55s cubic-bezier(0.4,0.26,0,0.97), opacity .3s ease; pointer-events:none}
.sb-page .cursor.on{opacity:1}
.sb-page .cursor.click{animation:ecClick .35s ease}
.sb-page .pane-foot{display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px; border-radius:var(--ec-radius-md); font-size:14px}
.sb-page .pane-foot .n{font-family:var(--ec-font-display); font-weight:700; font-size:26px; line-height:1}
.sb-page .pane-foot--bad{background:#FFF6F6; border:1px solid #FFD5D9; color:#7A1F27}
.sb-page .pane-foot--bad .n{color:#DC3545}
.sb-page .pane-foot--good{background:var(--ec-green-50); border:1px solid var(--ec-badge-border); color:var(--ec-granat-900)}
.sb-page .pane-foot--good .n{color:var(--ec-green-700)}
.sb-page .lchain{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.sb-page .lc{display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:var(--ec-radius-pill); font-size:12.5px; font-weight:600; background:#fff; border:1px solid var(--ec-border-light); color:var(--ec-text-heading); white-space:nowrap}
.sb-page .lc-ar{width:15px; height:15px; flex:none; color:var(--ec-granat-300)}
.sb-page .lchain--bad .lc:last-child{color:#DC3545; border-color:rgba(220,53,69,.35); background:rgba(220,53,69,.06)}
.sb-page .lchain--good .lc:last-child{color:var(--ec-green-700); border-color:var(--ec-badge-border); background:var(--ec-green-50)}
.sb-page .lchain--good .lc-ar{color:var(--ec-green-900)}
.sb-page .demo.lc-anim .pane .lc, .sb-page .demo.lc-anim .pane .lc-ar{opacity:0; transform:translateX(-6px); transition:opacity .4s ease, transform .5s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .demo.lc-anim.seen .pane.on .lc, .sb-page .demo.lc-anim.seen .pane.on .lc-ar{opacity:1; transform:none; transition-delay:calc(var(--i) * 160ms + 250ms)}
@media(max-width:600px){
  .sb-page .lchain{flex-direction:column; align-items:flex-start; gap:4px}
  .sb-page .lc-ar{transform:rotate(90deg); margin-left:14px}
  .sb-page .demo.lc-anim .pane .lc-ar{transform:rotate(90deg) translateY(6px)}
  .sb-page .demo.lc-anim.seen .pane.on .lc-ar{transform:rotate(90deg)}
}
@media (prefers-reduced-motion: reduce){ .sb-page .lc, .sb-page .lc-ar{opacity:1 !important; transform:none !important} }
.sb-page .node-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.sb-page .node-chips .kw{color:var(--ec-green-700); background:var(--ec-green-50); border-color:var(--ec-badge-border)}
.sb-page .node-chips .chip{color:var(--ec-text-body); background:#fff; border-color:var(--ec-border-light)} .sb-page .node-chips .chip b{color:var(--ec-green-700)}

/* ---------- WIDZIMY: mini visuals ---------- */
.sb-page .mini{background:rgba(6,15,69,.45); border:1px solid rgba(160,180,219,.16); border-radius:12px; padding:14px; margin-bottom:18px; min-height:118px}
.sb-page .rank-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:#fff; padding:6px 0; border-bottom:1px dashed rgba(160,180,219,.16)}
.sb-page .rank-list li:last-child{border-bottom:none}
.sb-page .rank-list .r{font-size:10.5px; font-weight:600; border-radius:6px; padding:2px 7px; background:rgba(0,213,99,.14); color:var(--ec-green-200); border:1px solid rgba(0,213,99,.3)}
.sb-page .rank-list .r.none{background:rgba(255,193,7,.12); color:#FFE08A; border-color:rgba(255,193,7,.35)}
.sb-page .attr-list{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sb-page .attr-list li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ec-granat-200); padding:6px 9px; border-radius:8px; border:1px solid rgba(160,180,219,.16); transition:border-color .4s ease, color .4s ease, background .4s ease}
.sb-page .attr-list li i{width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(160,180,219,.4); flex:none; display:flex; align-items:center; justify-content:center; transition:background .4s ease, border-color .4s ease}
.sb-page .attr-list li i svg{width:9px; height:9px; opacity:0; transition:opacity .3s ease}
.sb-page .attr-list li.on{border-color:rgba(0,213,99,.4); color:#fff; background:rgba(0,213,99,.06)}
.sb-page .attr-list li.on i{background:var(--ec-green-900); border-color:var(--ec-green-900)} .sb-page .attr-list li.on i svg{opacity:1}
.sb-page .attr-list li.gap{border-color:rgba(255,193,7,.4); color:#FFE08A}
.sb-page .attr-list li.gap i{border-style:dashed; border-color:rgba(255,193,7,.6)}
.sb-page .gapbars{display:flex; flex-direction:column; gap:10px}
.sb-page .gapbar{font-size:12px; color:var(--ec-granat-200)}
.sb-page .gapbar .lbl{display:flex; justify-content:space-between; margin-bottom:5px} .sb-page .gapbar .lbl b{color:#fff; font-weight:500}
.sb-page .gapbar .bar{height:8px; border-radius:4px; background:rgba(160,180,219,.14); overflow:hidden}
.sb-page .gapbar .bar span{display:block; height:100%; width:0; border-radius:4px; background:var(--ec-granat-300); transition:width 1.1s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .gapbar.you .bar span{background:var(--ec-green-900)}
.sb-page .gapbar .gap-tag{font-size:10.5px; color:#FFE08A; margin-top:6px}
.sb-page .on .gapbar .bar span{width:var(--w)}

/* ---------- PANEL tour ---------- */
.sb-page .tour{display:grid; grid-template-columns:1fr; gap:34px; margin-top:54px; align-items:start}
@media(min-width:960px){.sb-page .tour{grid-template-columns:420px 1fr; gap:56px}}
.sb-page .ndwrap{position:relative}
.sb-page .ndpanel{background:#fff; border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border-light); box-shadow:0 18px 44px rgba(6,15,69,.12); padding:22px; color:var(--ec-text-heading)}
.sb-page .ndp-head{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--ec-border-light); margin-bottom:16px}
.sb-page .ndp-ic{width:30px; height:30px; border-radius:8px; background:var(--ec-green-50); color:var(--ec-green-700); display:flex; align-items:center; justify-content:center; flex:none}
.sb-page .ndp-ic svg{width:17px; height:17px}
.sb-page .ndp-title{font-family:var(--ec-font-display); font-weight:700; font-size:16px}
.sb-page .ndp-hot{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ec-green-700); background:var(--ec-green-50); border:1px solid var(--ec-badge-border); border-radius:var(--ec-radius-pill); padding:4px 10px}
.sb-page .ndp-hot i{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); animation:ecHeroPulse 2s infinite}
.sb-page .ndp-field{margin-bottom:14px; position:relative; border-radius:10px; transition:box-shadow .3s ease, background .3s ease; padding:6px; margin-left:-6px; margin-right:-6px}
.sb-page .ndp-field.lit{background:var(--ec-green-50); box-shadow:0 0 0 1.5px var(--ec-green-900)}
.sb-page .ndp-field > label{display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ec-granat-300); margin-bottom:6px}
.sb-page .ndp-val{font-size:14px; font-weight:500}
.sb-page .ndp-url{font-size:13px; color:var(--ec-granat-500); background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:8px; padding:8px 12px}
.sb-page .ndp-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.sb-page .ndp-row2 .ndp-field{margin:0}
.sb-page .ndp-pill2{font-size:13px; font-weight:500; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:8px; padding:7px 12px}
.sb-page .ndp-prio{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; background:var(--ec-green-50); border:1px solid var(--ec-badge-border); border-radius:var(--ec-radius-pill); padding:5px 14px}
.sb-page .ndp-prio svg{width:13px; height:13px; color:var(--ec-green-700)}
.sb-page .ndp-scores{display:flex; align-items:center; gap:15px; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:12px; padding:14px 16px}
.sb-page .ring{position:relative; width:48px; height:48px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; background:conic-gradient(var(--ec-green-900) var(--pct,0%), var(--ec-border-light) 0); transition:--pct 1s ease}
.sb-page .ring::after{content:''; position:absolute; inset:4px; border-radius:50%; background:#fff}
.sb-page .ring b{position:relative; z-index:1; font-family:var(--ec-font-display); font-weight:700; font-size:15px; line-height:1}
.sb-page .ring span{position:relative; z-index:1; font-size:8.5px; color:var(--ec-granat-300); margin-top:1px}
.sb-page .ndp-scmeta{font-size:12px; color:var(--ec-text-body); line-height:1.5}
.sb-page .ndp-tags{display:flex; flex-wrap:wrap; gap:6px}
.sb-page .ndp-tags span{font-size:12px; color:var(--ec-green-700); background:var(--ec-green-50); border:1px solid var(--ec-badge-border); border-radius:var(--ec-radius-pill); padding:3px 10px}
.sb-page .ndp-ai{font-size:13px; font-style:italic; background:var(--ec-surface-alt); border-left:2px solid var(--ec-green-900); border-radius:0 8px 8px 0; padding:8px 12px; margin-bottom:6px}
.sb-page .ndp-analytics{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ec-text-body)}
.sb-page .ndp-analytics b{font-family:var(--ec-font-display); color:var(--ec-green-700); font-weight:700}
.sb-page .hs{position:absolute; width:26px; height:26px; border-radius:50%; background:var(--ec-green-900); color:var(--ec-granat-900); font-family:var(--ec-font-display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 4px 14px rgba(0,213,99,.45); cursor:pointer; z-index:2; transition:transform .3s ease, background .3s ease}
.sb-page .hs:hover, .sb-page .hs.act{transform:scale(1.18); background:var(--ec-green-400)}
.sb-page .hs.act::before{content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(0,213,99,.5); animation:ecHeroPulse 2s infinite}
.sb-page .hs:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ec-focus-ring)}
.sb-page .tour-notes{display:flex; flex-direction:column; gap:10px}
.sb-page .tnote{display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border-light); background:#fff; cursor:pointer; transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease}
.sb-page .tnote .tn{flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--ec-badge-border); color:var(--ec-green-700); font-family:var(--ec-font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease}
.sb-page .tnote h4{font-size:17px; color:var(--ec-text-heading); margin-bottom:4px}
.sb-page .tnote p{font-size:14.5px; line-height:1.6; color:var(--ec-text-body); max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .35s ease}
.sb-page .tnote.act{border-color:var(--ec-green-900); box-shadow:var(--ec-shadow-card-hover); transform:translateX(4px)}
.sb-page .tnote.act .tn{background:var(--ec-green-900); color:var(--ec-granat-900); border-color:var(--ec-green-900)}
.sb-page .tnote.act p{max-height:200px; opacity:1}
.sb-page .tnote:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ec-focus-ring)}

/* ---------- PROCES: sticky stepper ---------- */
.sb-page .proc{display:grid; grid-template-columns:1fr; gap:40px; margin-top:54px; align-items:start}
@media(min-width:960px){.sb-page .proc{grid-template-columns:360px 1fr; gap:64px}}
.sb-page .proc-nav{position:sticky; top:calc(96px + env(safe-area-inset-top,0px)); display:none; flex-direction:column; gap:4px}
@media(min-width:960px){.sb-page .proc-nav{display:flex}}
.sb-page .pn{display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:12px; color:var(--ec-granat-200); font-size:14.5px; transition:color .3s ease, background .3s ease}
.sb-page .pn .pnn{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--ec-border-on-dark); display:flex; align-items:center; justify-content:center; font-family:var(--ec-font-display); font-weight:700; font-size:13px; color:var(--ec-granat-200); transition:background .3s ease, color .3s ease, border-color .3s ease}
.sb-page .pn.act{color:#fff; background:rgba(0,213,99,.07)}
.sb-page .pn.act .pnn{background:var(--ec-green-900); color:var(--ec-granat-900); border-color:var(--ec-green-900)}
.sb-page .pn.done .pnn{border-color:var(--ec-green-900); color:var(--ec-green-300)}
.sb-page .proc-steps{display:flex; flex-direction:column; gap:18px}
.sb-page .pstep{background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); border-radius:var(--ec-radius-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:26px 28px; transition:border-color .35s ease}
.sb-page .pstep.act{border-color:var(--ec-border-accent-on-dark)}
.sb-page .pstep-top{display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap}
.sb-page .pstep .pnn{width:32px; height:32px; border-radius:50%; background:rgba(0,213,99,.12); border:1px solid var(--ec-border-accent-on-dark); color:var(--ec-green-300); font-family:var(--ec-font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none}
.sb-page .pstep h3{font-size:22px}
.sb-page .who{margin-left:auto; display:inline-flex; gap:6px}
.sb-page .who span{font-size:11px; font-weight:600; border-radius:var(--ec-radius-pill); padding:3px 10px; letter-spacing:.02em}
.sb-page .who .my{background:rgba(0,213,99,.14); color:var(--ec-green-200); border:1px solid rgba(0,213,99,.3)}
.sb-page .who .ty{background:rgba(160,180,219,.12); color:var(--ec-granat-200); border:1px solid rgba(160,180,219,.25)}
.sb-page .pstep p{font-size:15px; line-height:1.65; color:var(--ec-granat-200); max-width:640px}
.sb-page .pstep .out{margin-top:12px; font-size:13px; color:var(--ec-green-200); display:flex; gap:8px; align-items:flex-start}
.sb-page .pstep .out::before{content:'\2726'; color:var(--ec-green-900); font-size:12px; margin-top:2px}

/* ---------- UCZCIWIE ---------- */
.sb-page .duty{display:grid; grid-template-columns:1fr; gap:24px; margin-top:52px}
@media(min-width:820px){.sb-page .duty{grid-template-columns:1fr 1fr}}
.sb-page .duty-col{background:#fff; border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-card); padding:28px}
.sb-page .duty-col h3{font-size:20px; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.sb-page .duty-col h3 .tagx{font-size:11px; font-weight:600; border-radius:var(--ec-radius-pill); padding:3px 10px; letter-spacing:.04em; text-transform:uppercase}
.sb-page .duty-col--my h3 .tagx{background:var(--ec-green-50); color:var(--ec-green-700); border:1px solid var(--ec-badge-border)}
.sb-page .duty-col--ty h3 .tagx{background:var(--ec-surface-alt); color:var(--ec-text-heading); border:1px solid var(--ec-border-light)}
.sb-page .duty-col li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--ec-text-body); padding:9px 0; border-bottom:1px dashed var(--ec-border-light)}
.sb-page .duty-col li:last-child{border-bottom:none}
.sb-page .duty-col li svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--ec-green-700)}
.sb-page .duty-col--ty li svg{color:var(--ec-granat-300)}
.sb-page .duty-col li b{color:var(--ec-text-heading); font-weight:500}
.sb-page .disarm{display:grid; grid-template-columns:1fr; gap:24px; margin-top:24px}
@media(min-width:820px){.sb-page .disarm{grid-template-columns:1fr 1fr}}

/* ---------- AI: stack + answer + SoV ---------- */
.sb-page .ai-grid{display:grid; grid-template-columns:1fr; gap:40px; margin-top:54px; align-items:center}
@media(min-width:1000px){.sb-page .ai-grid{grid-template-columns:1.05fr 1fr; gap:64px}}
.sb-page .stack{display:flex; flex-direction:column-reverse; gap:12px; position:relative}
.sb-page .layer{background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); border-radius:14px; padding:18px 20px; display:flex; gap:16px; align-items:flex-start; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .stack.on .layer{opacity:1; transform:translateY(0)}
.sb-page .stack.on .layer:nth-child(1){transition-delay:.05s} .sb-page .stack.on .layer:nth-child(2){transition-delay:.3s} .sb-page .stack.on .layer:nth-child(3){transition-delay:.55s}
.sb-page .layer .ln{flex:none; width:34px; height:34px; border-radius:10px; background:rgba(0,213,99,.12); border:1px solid var(--ec-border-accent-on-dark); color:var(--ec-green-300); display:flex; align-items:center; justify-content:center}
.sb-page .layer .ln svg{width:18px; height:18px}
.sb-page .layer h4{font-size:17px; color:#fff; margin-bottom:4px}
.sb-page .layer p{font-size:14px; line-height:1.6; color:var(--ec-granat-200)}
.sb-page .layer--base{border-color:var(--ec-border-accent-on-dark); background:rgba(0,213,99,.06)}
.sb-page .layer .lt{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-green-200); font-weight:600; margin-bottom:3px}
.sb-page .ai-card{border-radius:16px; background:rgba(10,24,88,.82); border:1px solid var(--ec-border-on-dark); box-shadow:var(--ec-shadow-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:18px 20px; max-width:440px}
.sb-page .ai-eye{display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-green-200); font-weight:600; margin-bottom:10px}
.sb-page .ai-eye i{width:6px; height:6px; border-radius:50%; background:var(--ec-green-900); animation:ecHeroPulse 2s infinite}
.sb-page .ai-q{font-size:12.5px; color:var(--ec-granat-200); margin-bottom:8px}
.sb-page .ai-a{font-size:13.5px; color:#fff; line-height:1.6; min-height:68px}
.sb-page .ai-a .caret{display:inline-block; width:2px; height:14px; background:var(--ec-green-900); vertical-align:-2px; margin-left:2px; animation:ecHeroBlink 1s infinite}
.sb-page .ai-a b{color:var(--ec-green-300); font-weight:600}
.sb-page .ai-src{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(160,180,219,.18); font-size:12px; color:var(--ec-granat-200)}
.sb-page .ai-src svg{width:15px; height:15px; flex:none}
.sb-page .ai-src strong{color:var(--ec-green-900); font-weight:600}
.sb-page .measure{margin-top:56px; display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:960px){.sb-page .measure{grid-template-columns:1.2fr 1fr}}
.sb-page .sov{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.sb-page .sov-row{font-size:13px; color:var(--ec-granat-200)}
.sb-page .sov-row .lbl{display:flex; justify-content:space-between; margin-bottom:6px} .sb-page .sov-row .lbl b{color:#fff; font-weight:500}
.sb-page .sov-row .bar{height:10px; border-radius:5px; background:rgba(160,180,219,.14); overflow:hidden}
.sb-page .sov-row .bar span{display:block; height:100%; width:0; border-radius:5px; background:var(--ec-granat-300); transition:width 1.2s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .sov-row.you .bar span{background:var(--ec-green-900)}
.sb-page .on .sov-row .bar span{width:var(--w)}
.sb-page .prompts{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.sb-page .prompts span{font-size:12px; color:var(--ec-green-200); background:rgba(0,213,99,.10); border:1px solid rgba(0,213,99,.28); border-radius:var(--ec-radius-pill); padding:4px 11px}
.sb-page .honest{border:1px solid rgba(255,193,7,.35); background:rgba(255,193,7,.06); border-radius:var(--ec-radius-lg); padding:22px 24px}
.sb-page .honest h4{font-size:17px; color:#FFE08A; margin-bottom:6px; display:flex; align-items:center; gap:8px}
.sb-page .honest h4 svg{width:16px; height:16px}
.sb-page .honest p{font-size:14.5px; line-height:1.65; color:var(--ec-granat-200)}
.sb-page .mcap{font-size:11px; color:var(--ec-granat-300); margin-top:10px}

/* ---------- SCEPTYCY ---------- */
.sb-page .obj{display:grid; grid-template-columns:1fr; gap:24px; margin-top:52px}
@media(min-width:960px){.sb-page .obj{grid-template-columns:1fr 1fr}}
.sb-page .obj-card{border-radius:var(--ec-radius-xl); padding:32px; background:#fff; border:1px solid var(--ec-border-light); box-shadow:var(--ec-shadow-card)}
.sb-page .obj-card .q{font-family:var(--ec-font-display); font-weight:700; font-size:22px; line-height:1.3; color:var(--ec-text-heading); margin-bottom:18px}
.sb-page .obj-card .q::before{content:'\2726'; color:var(--ec-green-900); margin-right:10px; font-size:16px}
.sb-page .chain{display:flex; flex-direction:column; gap:10px; margin:6px 0 16px}
.sb-page .chain li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--ec-text-body); padding:12px 14px; border-radius:12px; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light)}
.sb-page .chain li b{color:var(--ec-text-heading); font-weight:500}
.sb-page .chain li .cn{flex:none; width:24px; height:24px; border-radius:50%; background:var(--ec-green-50); border:1px solid var(--ec-badge-border); color:var(--ec-green-700); font-family:var(--ec-font-display); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:1px}
.sb-page .obj-card .fin{font-size:15px; color:var(--ec-text-heading); line-height:1.6}
.sb-page .obj-card--navy{background:var(--ec-surface-dark); border:1px solid var(--ec-border-accent-on-dark)}
.sb-page .obj-card--navy .q{color:#fff}
.sb-page .obj-card--navy .fin{color:var(--ec-granat-200)}
.sb-page .obj-card--navy .fin strong{color:#fff; font-weight:600}
.sb-page .quote{margin-top:20px; padding:20px 22px; border-radius:var(--ec-radius-lg); background:rgba(10,24,88,.6); border:1px solid var(--ec-border-on-dark)}
.sb-page .quote p{font-size:15px; line-height:1.7; color:#fff; font-style:italic}
.sb-page .quote .who2{display:flex; align-items:center; gap:12px; margin-top:14px}
.sb-page .mono{width:40px; height:40px; border-radius:50%; background:rgba(0,213,99,.12); border:2px solid var(--ec-green-900); color:var(--ec-green-200); font-family:var(--ec-font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none}
.sb-page .who2 b{display:block; font-size:14px; color:#fff; font-weight:600}
.sb-page .who2 small{font-size:12px; color:var(--ec-granat-200)}
.sb-page .proofs{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.sb-page .proofs span{font-size:12.5px; color:var(--ec-green-200); background:rgba(0,213,99,.10); border:1px solid rgba(0,213,99,.28); border-radius:var(--ec-radius-pill); padding:5px 12px}

/* ---------- EARLY ACCESS ---------- */
.sb-page .ea{display:grid; grid-template-columns:1fr; gap:40px; margin-top:54px; align-items:start}
@media(min-width:1000px){.sb-page .ea{grid-template-columns:1fr 1fr; gap:64px}}
.sb-page .steps3{display:flex; flex-direction:column; gap:12px}
.sb-page .s3{display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:var(--ec-radius-lg); background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.sb-page .s3 .sn{flex:none; width:32px; height:32px; border-radius:50%; background:var(--ec-green-900); color:var(--ec-granat-900); font-family:var(--ec-font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center}
.sb-page .s3 h4{font-size:17px; color:#fff; margin-bottom:4px}
.sb-page .s3 p{font-size:14px; line-height:1.6; color:var(--ec-granat-200)}
.sb-page .nolock{margin-top:16px; padding:18px 20px; border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border-accent-on-dark); background:rgba(0,213,99,.06)}
.sb-page .nolock h4{font-size:16px; color:#fff; margin-bottom:6px; display:flex; align-items:center; gap:8px}
.sb-page .nolock h4 svg{width:16px; height:16px; color:var(--ec-green-300)}
.sb-page .nolock p{font-size:14px; line-height:1.6; color:var(--ec-granat-200)}
.sb-page .nolock p strong{color:#fff; font-weight:600}
.sb-page .ea-form{background:rgba(10,24,88,.6); border:1px solid var(--ec-border-on-dark); border-radius:var(--ec-radius-xl); padding:32px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.sb-page .ea-form h3{font-size:24px; margin-bottom:6px}
.sb-page .ea-form .price{font-size:14px; line-height:1.6; color:var(--ec-green-200); margin-bottom:22px; padding:12px 14px; border-radius:10px; background:rgba(0,213,99,.08); border:1px solid rgba(0,213,99,.25)}
.sb-page .ea-form .price strong{color:#fff; font-weight:600}
.sb-page .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.sb-page .field label{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ec-granat-200)}
.sb-page .field input{font-family:var(--ec-font-text); font-size:15px; color:#fff; background:rgba(6,15,69,.5); border:1px solid var(--ec-border-on-dark); border-radius:var(--ec-radius-sm); padding:14px 16px; transition:border-color .3s ease, box-shadow .3s ease; width:100%}
.sb-page .field input::placeholder{color:var(--ec-granat-300)}
.sb-page .field input:focus{outline:none; border-color:var(--ec-green-900); box-shadow:0 0 0 3px var(--ec-focus-ring)}
.sb-page .ea-form .btn{width:100%; justify-content:center; margin-top:6px}
.sb-page .form-note{font-size:12.5px; color:var(--ec-granat-300); margin-top:14px; text-align:center}
.sb-page .err{color:#FFC7CD; font-size:13px; margin-top:8px; display:none} .sb-page .err.show{display:block}
.sb-page .success{display:none; margin-top:18px; padding:18px 20px; border-radius:var(--ec-radius-md); background:rgba(0,213,99,.10); border:1px solid var(--ec-border-accent-on-dark); color:#fff; font-size:15px; line-height:1.6}
.sb-page .success.show{display:flex; align-items:flex-start; gap:12px}
.sb-page .success svg{width:22px; height:22px; flex:none; margin-top:2px}

/* Footer */
.sb-page .footer{background:var(--ec-surface-dark); color:var(--ec-granat-200); padding:48px 0}
.sb-page .footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.sb-page .footer .wordmark{color:#fff}
.sb-page .footer small{font-size:13px; color:var(--ec-granat-300)}
.sb-page .footer-tag{font-size:13px; color:var(--ec-granat-200)} .sb-page .footer-tag .spk{color:var(--ec-green-300)}

/* reveal (used sparingly: stats + data visuals only) */
.sb-page .rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .rv.on{opacity:1; transform:translateY(0)}

@keyframes ecHeroPulse{0%{box-shadow:0 0 0 0 rgba(0,213,99,.55)}70%{box-shadow:0 0 0 9px rgba(0,213,99,0)}100%{box-shadow:0 0 0 0 rgba(0,213,99,0)}}
@keyframes ecHeroBlink{50%{opacity:0}}
@keyframes ecHeroSpark{0%,55%,100%{opacity:0;transform:scale(.3) rotate(0)}62%{opacity:1;transform:scale(1.3) rotate(20deg)}72%{opacity:.85;transform:scale(1) rotate(50deg)}82%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes ecScrollDot{0%{transform:translateY(0);opacity:1}60%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes ecScan{0%{top:-6px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes ecNodePop{0%{box-shadow:0 0 0 0 rgba(0,213,99,.6)}100%{box-shadow:0 0 0 14px rgba(0,213,99,0)}}
@keyframes ecClick{0%{transform:scale(1)}50%{transform:scale(.6)}100%{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .sb-page{scroll-behavior:auto}
  .sb-page, .sb-page *{animation:none !important; transition:none !important}
  .sb-page .node, .sb-page .weight-callout, .sb-page .pane, .sb-page .layer, .sb-page .rv{opacity:1 !important; transform:none !important}
  .sb-page .pane:not(.on){display:none}
  .sb-page .tnote p{max-height:none !important; opacity:1 !important}
  .sb-page .gapbar .bar span, .sb-page .sov-row .bar span{width:var(--w) !important}
  .sb-page .scanline{display:none}
}


/* Integracja z motywem */
.sb-page .card { display: block; min-width: 0; }
.sb-page .btn { appearance: none; -webkit-appearance: none; line-height: 1.2; text-decoration: none; }
.sb-page .badge { line-height: 1.2; }
.sb-page .hero-grid { padding-top: 148px; }
html:has(.sb-page) { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html:has(.sb-page) { scroll-behavior: auto; }
}

.heroAi-logo-white { display: none; }
body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) .colLogo img:not(.heroAi-logo-white) { display: none; }
body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) .colLogo .heroAi-logo-white { display: inline-block; }
body.page-struktura.heroAi-dark .nav-header.fixedNav .colLogo .heroAi-logo-white { display: none !important; }
body.page-struktura.heroAi-dark .nav-header.fixedNav .colLogo img:not(.heroAi-logo-white) { display: inline-block !important; }

body.page-struktura .nav-header .sb-nav-cta {
  background: #00D563;
  color: #060F45;
  border: 1.5px solid #00D563;
  box-shadow: none;
  animation: none;
}
body.page-struktura .nav-header .sb-nav-cta:hover {
  background: #3DFF9A;
  color: #060F45;
  border-color: #3DFF9A;
}

body.page-struktura .nav-header .colLogo {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
body.page-struktura .ag-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  --ag-mu: #607FC6;
}
body.page-struktura .ag-brand .ag-mark { width: 32px; height: 32px; flex: none; }
body.page-struktura .ag-brand .ag-mark .s-fg { stroke: currentColor; }
body.page-struktura .ag-brand .ag-mark .f-fg { fill: currentColor; }
body.page-struktura .ag-brand .ag-mark .s-mu { stroke: var(--ag-mu); }
body.page-struktura .ag-brand .ag-mark .f-mu { fill: var(--ag-mu); }
body.page-struktura .ag-brand .ag-mark .s-ac { stroke: #00D563; }
body.page-struktura .ag-brand .ag-mark .f-ac { fill: #00D563; }
body.page-struktura .ag-word {
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  line-height: .9;
  letter-spacing: -.025em;
  white-space: nowrap;
}
body.page-struktura .ag-l { font-weight: 400; }
body.page-struktura .ag-b { font-weight: 700; }
body.page-struktura .ag-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
body.page-struktura .ag-eclogo { height: 14px; width: auto; display: block; }
body.page-struktura .nav-header.fixedNav .ag-brand,
body.page-struktura .nav-header.nav-mobile-open .ag-brand {
  color: #060F45;
  --ag-mu: #D0DAF0;
}
body.page-struktura .nav-header.fixedNav .ag-by,
body.page-struktura .nav-header.nav-mobile-open .ag-by {
  color: #717684;
  border-left-color: #D0DAF0;
}
@media (max-width: 560px) {
  body.page-struktura .ag-brand {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
  }
  body.page-struktura .ag-brand .ag-mark { grid-row: 1 / 3; width: 30px; height: 30px; }
  body.page-struktura .ag-word { font-size: 20px; }
  body.page-struktura .ag-by { margin: 0; padding: 0; border: 0; gap: 5px; font-size: 10px; }
  body.page-struktura .ag-eclogo { height: 10px; }
}

@media (min-width: 1200px) {
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) .ec-btn-granat {
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
  }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) .ec-btn-granat:hover {
    border-color: #00D563;
    color: #060F45;
    background: #00D563;
  }
  body.page-struktura #navigation #navList li.nav-on-dark a { color: rgba(255, 255, 255, 0.45); }
  body.page-struktura #navigation #navList li.nav-on-dark a:hover { color: rgba(255, 255, 255, 0.85); opacity: 1; }
  body.page-struktura #navigation #navList li.nav-on-dark a::before { background-color: rgba(255, 255, 255, 0.35); }
  body.page-struktura #navigation #navList li.nav-on-dark.active a { color: #fff; opacity: 1; }
  body.page-struktura #navigation #navList li.nav-on-dark.active a::before {
    background-color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    width: 12px;
    height: 12px;
    left: -20px;
    top: 8px;
  }
}

@media (max-width: 1199px) {
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav) #nav-icon3 span { background: #fff; }
  body.page-struktura.heroAi-dark .nav-header.fixedNav #nav-icon3 span { background: #060F45; }
  body.page-struktura.heroAi-dark .nav-header .colNav.openedNavMobile .main-navigation > li > a { color: #060F45; }
  body.page-struktura.heroAi-dark .nav-header .colNav.openedNavMobile .main-navigation > li > a:hover { color: #00D563; }
  body.page-struktura.heroAi-dark .nav-header .colNav.openedNavMobile .buttonMobile .ec-btn-granat {
    border-color: #060F45;
    color: #060F45;
    background: transparent;
  }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav).nav-mobile-open { background: #fff !important; }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav).nav-mobile-open #nav-icon3 span { background: #060F45; }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav).nav-mobile-open .colLogo img:not(.heroAi-logo-white) { display: inline-block !important; }
  body.page-struktura.heroAi-dark .nav-header:not(.fixedNav).nav-mobile-open .colLogo .heroAi-logo-white { display: none !important; }
}

body.page-struktura.heroAi-dark .d-none.d-xl-flex > nav { opacity: 0; pointer-events: none; }
body.page-struktura.heroAi-dark .callForm {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

/* Stopka jak na new.ecommerceo.pl, bez banera newslettera — formularz skanu jest wyżej. */
body.page-struktura .newsletterFooter { display: none; }
body.page-struktura footer { padding-top: 72px; }
@media (min-width: 1200px) {
  body.page-struktura footer { padding-top: 96px; }
}

/* Pionowe linie tła (.line, z-index 0) zostają w pustych polach — nie przecinają treści. */
body.page-struktura .sb-page .container { position: relative; z-index: 1; }
body.page-struktura .sb-page .sec--light .section-head {
  background: var(--ec-surface-alt);
  box-shadow: 0 0 0 14px var(--ec-surface-alt);
}
body.page-struktura .sb-page .sec--dark .section-head {
  background: var(--ec-surface-dark);
  box-shadow: 0 0 0 14px var(--ec-surface-dark);
}
body.page-struktura .sb-page .card--glass,
body.page-struktura .sb-page .ds-src,
body.page-struktura .sb-page .ds-node,
body.page-struktura .sb-page .builder,
body.page-struktura .sb-page .pstep,
body.page-struktura .sb-page .layer,
body.page-struktura .sb-page .s3,
body.page-struktura .sb-page .ai-card,
body.page-struktura .sb-page .ea-form {
  background-color: var(--ec-surface-dark);
  background-image: linear-gradient(var(--ec-surface-dark-raised), var(--ec-surface-dark-raised));
}
body.page-struktura .sb-page .honest {
  background-color: var(--ec-surface-dark);
  background-image: linear-gradient(rgba(255, 193, 7, .06), rgba(255, 193, 7, .06));
}
body.page-struktura .sb-page .nolock {
  background-color: var(--ec-surface-dark);
  background-image: linear-gradient(rgba(0, 213, 99, .06), rgba(0, 213, 99, .06));
}
body.page-struktura .sb-page .ai-grid > div > p {
  background: var(--ec-surface-dark);
  box-shadow: 0 0 0 10px var(--ec-surface-dark);
}

/* reveal (used sparingly: stats + data visuals only) */
.sb-page .soon{display:inline-flex; align-items:center; vertical-align:middle; margin-left:8px; font-family:var(--ec-font-text); font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--ec-granat-500); background:var(--ec-granat-100); border-radius:var(--ec-radius-pill); padding:2px 9px; white-space:nowrap}
.sb-page .sec--dark .soon{color:var(--ec-granat-100); background:rgba(160,180,219,.16); border:1px solid rgba(160,180,219,.3)}
.sb-page .soon-legend{font-size:13px; color:var(--ec-text-body); margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sb-page .sec--dark .soon-legend{color:var(--ec-granat-200)}
.sb-page .soon-legend .soon{margin-left:0}

/* ---------- WIDOKI STRUKTURY + PODGLĄD MENU (sekcja #panel) ---------- */
.sb-page .vw{margin-top:48px; background:var(--ec-surface); border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-card-hover); overflow:hidden}
.sb-page .vw-bar{display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid var(--ec-border-light); flex-wrap:wrap}
.sb-page .vw-id{display:flex; align-items:center; gap:10px; min-width:0}
.sb-page .vw-id .ic{width:34px; height:34px; border-radius:10px; background:var(--ec-green-50); color:var(--ec-green-700); display:flex; align-items:center; justify-content:center; flex:none}
.sb-page .vw-id .ic svg{width:18px; height:18px}
.sb-page .vw-id b{display:block; font-family:var(--ec-font-display); font-size:15px; line-height:1.2; color:var(--ec-text-heading)}
.sb-page .vw-id span{font-size:12px; color:var(--ec-text-body)}
.sb-page .vw-tabs{display:flex; align-items:center; gap:2px; padding:4px; margin-left:auto; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); border-radius:var(--ec-radius-pill); overflow-x:auto; max-width:100%; scrollbar-width:none}
.sb-page .vw-tabs::-webkit-scrollbar{display:none}
.sb-page .vw-sep{width:1px; align-self:stretch; background:var(--ec-border-light); margin:6px 4px; flex:none}
.sb-page .vw-tab{flex:none; position:relative; display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; font-family:var(--ec-font-text); font-size:13px; font-weight:600; color:var(--ec-text-body); padding:8px 14px; border-radius:var(--ec-radius-pill); cursor:pointer; white-space:nowrap; overflow:hidden; transition:color .3s ease, background .3s ease, box-shadow .3s ease}
.sb-page .vw-tab svg{width:15px; height:15px; flex:none}
.sb-page .vw-tab:hover{color:var(--ec-text-heading)}
.sb-page .vw-tab.act{background:var(--ec-surface); color:var(--ec-text-heading); box-shadow:0 2px 8px rgba(6,15,69,.08)}
.sb-page .vw-tab.act svg{color:var(--ec-green-700)}
.sb-page .vw-tab:focus-visible, .sb-page .vw-seo:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ec-focus-ring)}
.sb-page .vw-tab .prog{position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--ec-green-900); transform:scaleX(0); transform-origin:left center}
.sb-page .vw.auto .vw-tab.act .prog{animation:vwProg var(--dur,6s) linear forwards}
@keyframes vwProg{to{transform:scaleX(1)}}
.sb-page .vw-seo{display:inline-flex; align-items:center; gap:10px; border:0; background:none; cursor:pointer; font-family:var(--ec-font-text); font-size:13px; font-weight:600; color:var(--ec-text-heading); padding:4px 6px; border-radius:var(--ec-radius-pill)}
.sb-page .vw-sw{position:relative; width:36px; height:20px; border-radius:var(--ec-radius-pill); background:var(--ec-granat-100); transition:background .3s ease; flex:none}
.sb-page .vw-sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(6,15,69,.2); transition:transform .3s ease}
.sb-page .vw.seo .vw-sw{background:var(--ec-green-900)}
.sb-page .vw.seo .vw-sw::after{transform:translateX(16px)}
.sb-page .sd{transition:opacity .35s ease}
.sb-page .vw:not(.seo) .sd{opacity:0}
.sb-page .vw-stage{position:relative; height:480px; background:var(--ec-surface-alt)}
.sb-page .vw-pane{position:absolute; inset:0; padding:24px; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; overflow:hidden}
.sb-page .vw-pane.on{opacity:1; visibility:visible; transition:opacity .45s ease}
.sb-page .vw-foot{display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--ec-border-light); font-size:12.5px; color:var(--ec-text-body)}
.sb-page .vw-foot b{color:var(--ec-text-heading); font-weight:600}
.sb-page .vw-foot .spk{color:var(--ec-green-900)}
.sb-page .st{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .5s cubic-bezier(0.4,0.26,0,0.97); transition-delay:calc(var(--i,0) * 70ms)}
.sb-page .vw-pane.play .st{opacity:1; transform:none}
.sb-page .new-tag{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--ec-green-700); background:var(--ec-green-50); border:1px solid var(--ec-badge-border); border-radius:var(--ec-radius-pill); padding:1px 8px; white-space:nowrap}
.sb-page .vw-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--ec-granat-300)}

/* Graf */
.sb-page .g-svg{display:block; width:100%; height:100%}
.sb-page .g-line{fill:none; stroke:var(--ec-granat-100); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s ease; transition-delay:calc(var(--i,0) * 90ms)}
.sb-page .g-line.hi{stroke:var(--ec-green-900)}
.sb-page .play .g-line{stroke-dashoffset:0}
.sb-page .g-node{opacity:0; transition:opacity .5s ease; transition-delay:calc(var(--i,0) * 90ms + 120ms)}
.sb-page .play .g-node{opacity:1}
.sb-page .g-node rect{fill:#fff; stroke:var(--ec-border-light); stroke-width:1}
.sb-page .g-node.hi rect{fill:var(--ec-green-50); stroke:var(--ec-green-900); stroke-width:1.5}
.sb-page .g-ty{font:600 9px var(--ec-font-text); letter-spacing:.08em; fill:var(--ec-granat-300)}
.sb-page .g-nm{font:600 12.5px var(--ec-font-text); fill:var(--ec-text-heading)}
.sb-page .g-mt{font:500 10.5px var(--ec-font-text); fill:var(--ec-text-body)}
.sb-page .g-node.hi .g-mt{fill:var(--ec-green-700)}
.sb-page .g-chip rect{fill:var(--ec-surface-alt); stroke:var(--ec-border-light)}
.sb-page .g-chip text{font:600 10.5px var(--ec-font-text); fill:var(--ec-text-body)}
.sb-page .g-note{font:600 11.5px var(--ec-font-text); fill:var(--ec-green-700); opacity:0; transition:opacity .6s ease 1.5s}
.sb-page .play .g-note{opacity:1}

/* Drzewko */
.sb-page .tr{display:flex; flex-direction:column; gap:4px}
.sb-page .tr-row{display:grid; grid-template-columns:minmax(0,1fr) 170px 120px 84px; align-items:center; gap:12px; background:#fff; border:1px solid var(--ec-border-light); border-radius:10px; padding:6px 12px 6px calc(12px + var(--lv,0) * 22px); min-height:37px}
.sb-page .tr-row.hi{border-color:var(--ec-green-900); background:var(--ec-green-50)}
.sb-page .tr-nm{display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; color:var(--ec-text-heading)}
.sb-page .tr-nm svg{width:12px; height:12px; flex:none; color:var(--ec-granat-300)}
.sb-page .tr-nm .cnt{font-size:11px; font-weight:600; color:var(--ec-text-body); background:var(--ec-surface-alt); border-radius:var(--ec-radius-pill); padding:0 7px}
.sb-page .tr-nm .vw-path{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400}
.sb-page .tr-kw{font-size:12px; color:var(--ec-text-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-page .tr-seo{font-size:12px; font-weight:600; color:var(--ec-text-heading); text-align:right; white-space:nowrap}
.sb-page .tr-row.hi .tr-seo{color:var(--ec-green-700)}
.sb-page .stt{justify-self:end; font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--ec-radius-pill); white-space:nowrap}
.sb-page .stt.ok{color:var(--ec-green-700); background:var(--ec-green-50)}
.sb-page .stt.wip{color:var(--ec-granat-500); background:var(--ec-granat-100)}
.sb-page .stt.idea{color:var(--ec-text-body); background:var(--ec-surface-alt); border:1px solid var(--ec-border-light)}

/* Klastry */
.sb-page .cl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; height:100%}
.sb-page .cl-col{background:#fff; border:1px solid var(--ec-border-light); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; min-width:0}
.sb-page .cl-hd{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sb-page .cl-hd b{font-family:var(--ec-font-display); font-size:15px; color:var(--ec-text-heading)}
.sb-page .cl-hd .n{font-size:12px; font-weight:600; color:var(--ec-text-body); background:var(--ec-surface-alt); border-radius:var(--ec-radius-pill); padding:1px 9px}
.sb-page .cl-sub{font-size:11.5px; color:var(--ec-text-body); padding-bottom:8px; border-bottom:1px solid var(--ec-border-light)}
.sb-page .cl-card{border:1px solid var(--ec-border-light); border-radius:10px; padding:10px 12px; background:var(--ec-surface)}
.sb-page .cl-card.hi{border-color:var(--ec-green-900); background:var(--ec-green-50)}
.sb-page .cl-card .t{font-size:12.5px; font-weight:600; color:var(--ec-text-heading); line-height:1.35; display:flex; align-items:center; justify-content:space-between; gap:6px}
.sb-page .cl-card .vw-path{display:block; margin:3px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-page .cl-card .k{display:flex; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--ec-text-body)}
.sb-page .cl-card .k b{font-weight:600; color:var(--ec-text-heading)}

/* Lista */
.sb-page .ls-wrap{height:100%; overflow:auto; background:#fff; border:1px solid var(--ec-border-light); border-radius:12px}
.sb-page .ls{width:100%; border-collapse:collapse; font-size:12.5px; min-width:640px}
.sb-page .ls th{position:sticky; top:0; background:#fff; text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-granat-300); padding:12px 14px; border-bottom:1px solid var(--ec-border-light)}
.sb-page .ls td{padding:10px 14px; border-bottom:1px solid var(--ec-border-light); color:var(--ec-text-body); white-space:nowrap}
.sb-page .ls td:first-child{font-weight:600; color:var(--ec-text-heading)}
.sb-page .ls .num{text-align:right; font-weight:600; color:var(--ec-text-heading)}
.sb-page .ls tr.hi td{background:var(--ec-green-50)}
.sb-page .ls tr.hi td:first-child{box-shadow:inset 3px 0 0 var(--ec-green-900)}
.sb-page .ls tr:last-child td{border-bottom:0}

/* Megamenu */
.sb-page .mm{position:relative; height:100%; background:#fff; border:1px solid var(--ec-border-light); border-radius:12px; overflow:hidden}
.sb-page .mm-top{display:flex; align-items:center; gap:18px; padding:14px 20px; border-bottom:1px solid var(--ec-border-light)}
.sb-page .mm-logo{display:flex; align-items:center; gap:8px; font-family:var(--ec-font-display); font-weight:700; font-size:15px; color:var(--ec-text-heading)}
.sb-page .mm-logo i{width:22px; height:22px; border-radius:7px; background:var(--ec-granat-100)}
.sb-page .mm-search{flex:1; max-width:320px; height:32px; border-radius:var(--ec-radius-pill); background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); display:flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; color:var(--ec-granat-300)}
.sb-page .mm-search svg, .sb-page .mm-icons svg{width:15px; height:15px}
.sb-page .mm-icons{margin-left:auto; display:flex; gap:14px; color:var(--ec-granat-300)}
.sb-page .mm-nav{display:flex; gap:4px; padding:0 14px; border-bottom:1px solid var(--ec-border-light); overflow:hidden}
.sb-page .mm-nav span{position:relative; padding:12px 12px; font-size:13px; font-weight:600; color:var(--ec-text-heading); white-space:nowrap}
.sb-page .mm-nav span.act{color:var(--ec-green-700)}
.sb-page .mm-nav span.act::after{content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--ec-green-900); border-radius:2px}
.sb-page .mm-drop{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 24px; padding:18px 20px 20px; box-shadow:0 12px 24px -12px rgba(6,15,69,.12)}
.sb-page .mm-col{transition:opacity .35s ease}
.sb-page .mm-drop.pop .mm-col:not(:first-child){opacity:.3}
.sb-page .mm-col h5{margin:0 0 8px; padding-bottom:7px; border-bottom:1px solid var(--ec-border-light); font-family:var(--ec-font-display); font-size:14px; font-weight:700; color:var(--ec-text-heading)}
.sb-page .mm-col li{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:5px 8px; margin:0 -8px; border-radius:8px; transition:background .3s ease}
.sb-page .mm-col li .nm{display:block; font-size:12.5px; font-weight:500; color:var(--ec-text-heading); line-height:1.3}
.sb-page .mm-col li .vw-kw{display:block; font-size:10.5px; color:var(--ec-text-body); line-height:1.3}
.sb-page .mm-col li .v{font-size:10.5px; font-weight:600; color:var(--ec-text-body); background:var(--ec-surface-alt); border-radius:var(--ec-radius-pill); padding:0 7px; flex:none; margin-top:2px}
.sb-page .mm-col li.hi .nm{color:var(--ec-green-700); font-weight:600}
.sb-page .mm-col li.hi .v{color:var(--ec-green-700); background:var(--ec-green-50)}
.sb-page .mm-col li.hov{background:var(--ec-green-50)}
.sb-page .mm-pop{position:absolute; top:16px; left:calc(25% + 10px); width:300px; max-width:calc(75% - 20px); background:#fff; border:1px solid var(--ec-border-light); border-radius:14px; box-shadow:var(--ec-shadow-card-hover); padding:14px 16px; opacity:0; transform:translateY(6px) scale(.98); transform-origin:left top; transition:opacity .35s ease, transform .45s cubic-bezier(0.4,0.26,0,0.97); pointer-events:none; z-index:2}
.sb-page .mm-drop.pop .mm-pop{opacity:1; transform:none}
.sb-page .mm-pop .ph{display:flex; align-items:center; gap:8px; font-family:var(--ec-font-display); font-weight:700; font-size:15px; color:var(--ec-text-heading)}
.sb-page .mm-pop .ph .tg{font-family:var(--ec-font-text); font-size:10.5px; font-weight:600; color:var(--ec-granat-500); background:var(--ec-granat-100); border-radius:var(--ec-radius-pill); padding:1px 8px}
.sb-page .mm-pop .vw-path{display:block; margin:3px 0 10px}
.sb-page .mm-pop .main{background:var(--ec-green-50); border:1px solid var(--ec-badge-border); border-radius:10px; padding:9px 11px}
.sb-page .mm-pop .main small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-green-700)}
.sb-page .mm-pop .main b{display:block; font-size:14px; color:var(--ec-text-heading); margin:2px 0}
.sb-page .mm-pop .main span, .sb-page .mm-pop .xk span{font-size:11.5px; color:var(--ec-text-body)}
.sb-page .mm-pop .xh{font-size:11px; font-weight:600; color:var(--ec-text-body); margin:10px 0 6px}
.sb-page .mm-pop .xk{display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:500; color:var(--ec-text-heading); background:var(--ec-surface-alt); border-radius:8px; padding:6px 10px; margin-bottom:4px}
.sb-page .vw-cur{position:absolute; left:0; top:0; width:22px; height:22px; color:var(--ec-granat-900); opacity:0; z-index:3; pointer-events:none; transition:transform 1.1s cubic-bezier(0.4,0.26,0,0.97), opacity .3s ease; filter:drop-shadow(0 2px 3px rgba(6,15,69,.25))}
.sb-page .vw-cur.on{opacity:1}
.sb-page .vw-cur.clk svg{animation:ecClick .35s ease}

/* Mobile */
.sb-page .mb{display:grid; grid-template-columns:auto minmax(0,340px); gap:40px; align-items:center; justify-content:center; height:100%}
.sb-page .ph-frame{position:relative; width:226px; height:420px; border:2px solid var(--ec-granat-100); border-radius:34px; background:#fff; padding:10px; box-shadow:var(--ec-shadow-card-hover)}
.sb-page .ph-notch{width:70px; height:16px; border-radius:var(--ec-radius-pill); background:var(--ec-surface-alt); margin:0 auto 6px}
.sb-page .ph-scr{position:relative; height:calc(100% - 22px); overflow:hidden; border-radius:22px}
.sb-page .ph-lv{position:absolute; inset:0; background:#fff; transition:transform .5s cubic-bezier(0.4,0.26,0,0.97), opacity .5s ease; transform:translateX(100%); opacity:0}
.sb-page .ph-lv.on{transform:none; opacity:1}
.sb-page .ph-lv.out{transform:translateX(-30%); opacity:0}
.sb-page .ph-hd{padding:8px 10px 10px; font-family:var(--ec-font-display); font-weight:700; font-size:15px; color:var(--ec-text-heading); text-align:center}
.sb-page .ph-back{display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:11.5px; font-weight:600; color:var(--ec-granat-500); border-bottom:1px solid var(--ec-border-light)}
.sb-page .ph-back svg{width:11px; height:11px}
.sb-page .ph-li{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; border-bottom:1px solid var(--ec-border-light)}
.sb-page .ph-li .nm{display:block; font-size:12px; font-weight:600; color:var(--ec-text-heading); line-height:1.3}
.sb-page .ph-li .vw-kw{display:block; font-size:10px; color:var(--ec-text-body)}
.sb-page .ph-li svg{width:11px; height:11px; color:var(--ec-granat-300); flex:none}
.sb-page .ph-li .v{font-size:10px; font-weight:600; color:var(--ec-text-body); background:var(--ec-surface-alt); border-radius:var(--ec-radius-pill); padding:0 6px}
.sb-page .ph-li.hi{background:var(--ec-green-50)}
.sb-page .ph-li.hi .nm{color:var(--ec-green-700)}
.sb-page .ph-li.hi .v{color:var(--ec-green-700); background:#fff}
.sb-page .ph-tap{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:rgba(0,213,99,.25); border:1.5px solid var(--ec-green-900); opacity:0; pointer-events:none; z-index:2}
.sb-page .ph-tap.go{animation:vwTap .6s ease}
@keyframes vwTap{0%{opacity:0; transform:scale(.4)}35%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1.5)}}
.sb-page .mb-side{background:#fff; border:1px solid var(--ec-border-light); border-radius:14px; padding:20px}
.sb-page .mb-side h4{font-size:18px; margin-bottom:12px}
.sb-page .mb-path{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.sb-page .mb-step{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ec-granat-300); transition:color .35s ease}
.sb-page .mb-step i{width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; background:var(--ec-surface-alt); border:1px solid var(--ec-border-light); color:var(--ec-text-body); transition:background .35s ease, color .35s ease, border-color .35s ease}
.sb-page .mb-step.lit{color:var(--ec-text-heading)}
.sb-page .mb-step.lit i{background:var(--ec-green-50); border-color:var(--ec-green-900); color:var(--ec-green-700)}
.sb-page .mb-side p{font-size:13.5px; line-height:1.6}

/* pod oknem */
.sb-page .vw-points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px}
.sb-page .vw-points li{margin-bottom:0}
.sb-page .vw-points b{color:var(--ec-text-heading); font-weight:600}
.sb-page .sub-head{margin-top:110px}

@media (max-width:1100px){
  .sb-page .cl{grid-template-columns:repeat(2,minmax(0,1fr)); height:auto}
  .sb-page .cl-col:nth-child(n+3){display:none}
}
@media (max-width:900px){
  .sb-page .vw-tabs{margin-left:0; width:100%}
  .sb-page .vw-stage{height:auto}
  .sb-page .vw-pane{position:relative; inset:auto; display:none; padding:16px}
  .sb-page .vw-pane.on{display:block}
  .sb-page #vwp-graf{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .sb-page .g-svg{min-width:760px; height:auto}
  .sb-page .mm-pop{width:250px; max-width:calc(100% - 24px)}
  .sb-page .mm-pop .xh, .sb-page .mm-pop .xk{display:none}
  .sb-page .tr-row{grid-template-columns:minmax(0,1fr) 84px}
  .sb-page .tr-kw, .sb-page .tr-seo{display:none}
  .sb-page .mm-drop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-page .mm-col:nth-child(n+3){display:none}
  .sb-page .mm-pop{left:auto; right:12px; top:auto; bottom:12px}
  .sb-page .mm-search{display:none}
  .sb-page .mb{grid-template-columns:1fr; justify-items:center; gap:20px}
  .sb-page .ls-wrap{height:auto}
  .sb-page .vw-points{grid-template-columns:1fr; gap:4px}
  .sb-page .sub-head{margin-top:80px}
}
@media (max-width:600px){ .sb-page .cl{grid-template-columns:1fr} .sb-page .cl-col:nth-child(n+2){display:none} }
@media (prefers-reduced-motion: reduce){
  .sb-page .st, .sb-page .g-node, .sb-page .g-note{opacity:1 !important; transform:none !important}
  .sb-page .g-line{stroke-dashoffset:0 !important}
  .sb-page .vw-tab .prog, .sb-page .vw-cur, .sb-page .ph-tap{display:none}
}

/* v3: karty problemu, przepływ danych, tour, proces, pytania */
.sb-page .tnote{position:relative; overflow:hidden}
.sb-page .tnote .tbar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ec-green-900); transform:scaleX(0); transform-origin:left center}
.sb-page .tour.auto .tnote.act .tbar{animation:vwProg var(--tdur,5s) linear forwards}
.sb-page .tnote .tn{transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease}
.sb-page .tnote.act .tn{transform:scale(1.08)}
.sb-page .tour-hint{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ec-text-body); margin-top:6px}
.sb-page .tour-hint i{width:7px; height:7px; border-radius:50%; background:var(--ec-green-900); animation:ecHeroPulse 2s infinite}
.sb-page .tour:not(.auto) .tour-hint{opacity:0; transition:opacity .3s ease}
@media(min-width:960px){.sb-page .proc-steps.live .pstep{opacity:.5}}
.sb-page .proc-steps.live .pstep.act{opacity:1; border-color:rgba(0,213,99,.6); box-shadow:0 0 0 1px rgba(0,213,99,.25), var(--ec-shadow-glass); transform:translateX(4px)}
.sb-page .card--pain{display:flex; flex-direction:column}
.sb-page .card--pain p{margin-bottom:20px}
.sb-page .card--pain .fix{margin-top:auto; padding-top:16px; border-top:1px solid var(--ec-border-light); display:flex; gap:10px; font-size:14px; line-height:1.55; font-weight:500; color:var(--ec-text-heading)}
.sb-page .card--pain .fix::before{content:'\2726'; color:var(--ec-green-900); font-size:12px; line-height:1.9; flex:none}
.sb-page .card--pain .fix b{font-weight:700}
.sb-page .pains-sum{margin-top:36px; text-align:center; font-family:var(--ec-font-display); font-weight:400; font-size:clamp(22px,2.2vw,28px); line-height:1.3; color:var(--ec-text-heading)}
.sb-page .pains-sum b{font-weight:700}
.sb-page .card--pain{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.sb-page .card--pain:hover{transform:translateY(-4px); box-shadow:var(--ec-shadow-card-hover); border-color:var(--ec-badge-border)}
.sb-page .pv{display:flex; align-items:center; align-content:center; flex-wrap:wrap; gap:8px 10px; min-height:72px; margin-bottom:18px}
@media (min-width:901px) and (max-width:1320px){.sb-page .pv .pv-note{display:none}}
.sb-page .pv-chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--ec-radius-pill); border:1px solid var(--ec-border-light); background:var(--ec-surface-alt); font-size:12px; font-weight:600; color:var(--ec-text-heading); white-space:nowrap}
.sb-page .pv-chip svg{width:13px; height:13px; flex:none; color:var(--ec-granat-300)}
.sb-page .pv-arr{width:18px; height:18px; flex:none; color:var(--ec-granat-100); transition:color .5s ease, transform .5s ease}
.sb-page .pv-swap{display:inline-grid; justify-items:start}
.sb-page .pv-swap>*{grid-area:1/1; transition:opacity .45s ease, transform .55s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .pv-bad{background:#fff; color:var(--ec-text-body)}
.sb-page .pv-good, .sb-page .pv-good-t{opacity:0; transform:translateY(7px)}
.sb-page .pv-good{background:var(--ec-green-50); border-color:var(--ec-badge-border); color:var(--ec-green-700)}
.sb-page .pv-stack{display:inline-grid; justify-items:start}
.sb-page .pv-a{transition:opacity .45s ease, transform .55s cubic-bezier(0.4,0.26,0,0.97), background .45s ease, border-color .45s ease, color .45s ease}
.sb-page .pv-b{background:#fff; color:var(--ec-text-body); margin-top:6px; max-height:30px; max-width:260px; overflow:hidden; transition:opacity .3s ease, max-height .5s ease .15s, max-width .5s ease .15s, margin .5s ease .15s, padding .5s ease .15s, border-width .5s ease .15s}
.sb-page .pv-note{font-size:12px; font-weight:600; color:var(--ec-text-body)}
.sb-page .pv-note .pv-good-t{color:var(--ec-green-700)}
.sb-page .card--pain.done .pv-arr{color:var(--ec-green-900); transform:translateX(2px)}
.sb-page .card--pain.done .pv-bad, .sb-page .card--pain.done .pv-bad-t{opacity:0; transform:translateY(-7px)}
.sb-page .card--pain.done .pv-good, .sb-page .card--pain.done .pv-good-t{opacity:1; transform:none}
.sb-page .card--pain.done .pv-b{opacity:0; max-height:0; max-width:0; margin-top:0; padding:0; border-width:0}
.sb-page .card--pain.done .pv-a{background:var(--ec-green-50); border-color:var(--ec-badge-border); color:var(--ec-green-700)}
.sb-page .card--pain .fix{position:relative; transition:color .45s ease}
.sb-page .card--pain .fix::after{content:''; position:absolute; left:0; top:-1px; width:56px; height:2px; border-radius:2px; background:var(--ec-green-900); transform:scaleX(0); transform-origin:left center; transition:transform .7s cubic-bezier(0.4,0.26,0,0.97) .25s}
.sb-page .card--pain.done .fix::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .sb-page .card--pain .pv-bad, .sb-page .card--pain .pv-bad-t{opacity:0 !important}
  .sb-page .card--pain .pv-b{display:none}
  .sb-page .card--pain .pv-good, .sb-page .card--pain .pv-good-t{opacity:1 !important; transform:none !important}
  .sb-page .card--pain .fix::after{transform:scaleX(1) !important}
}
/* Zanim zdecydujesz — animacja */
.sb-page .proofs b{font-weight:600; color:#fff}
.sb-page .chain{position:relative}
.sb-page .chain::before{content:''; position:absolute; left:26px; top:26px; bottom:26px; width:2px; border-radius:2px; background:var(--ec-green-900); transform:scaleY(0); transform-origin:top center; transition:transform 1.3s cubic-bezier(0.4,0.26,0,0.97) .2s; z-index:1}
.sb-page .chain li{position:relative}
.sb-page .obj.anim .chain li, .sb-page .obj.anim .obj-card .fin, .sb-page .obj.anim .proofs span{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .obj.anim .obj-card{transition:opacity .6s ease, transform .7s cubic-bezier(0.4,0.26,0,0.97)}
.sb-page .obj.anim .obj-card:first-child{opacity:0; transform:translateX(-18px)}
.sb-page .obj.anim .obj-card--navy{opacity:0; transform:translateX(18px)}
.sb-page .obj.on .obj-card{opacity:1 !important; transform:none !important}
.sb-page .obj.on .chain::before{transform:scaleY(1)}
.sb-page .obj.on .chain li{opacity:1; transform:none}
.sb-page .obj.on .chain li:nth-child(1){transition-delay:.25s} .sb-page .obj.on .chain li:nth-child(2){transition-delay:.7s} .sb-page .obj.on .chain li:nth-child(3){transition-delay:1.15s}
.sb-page .obj.on .chain li:nth-child(1) .cn{transition-delay:.45s} .sb-page .obj.on .chain li:nth-child(2) .cn{transition-delay:.9s} .sb-page .obj.on .chain li:nth-child(3) .cn{transition-delay:1.35s}
.sb-page .obj.on .chain li .cn{background:var(--ec-green-900); color:var(--ec-granat-900); border-color:var(--ec-green-900)}
.sb-page .obj.on .obj-card:first-child .fin{opacity:1; transform:none; transition-delay:1.7s}
.sb-page .obj.on .obj-card--navy .fin{opacity:1; transform:none; transition-delay:.35s}
.sb-page .quote .w{display:inline-block; opacity:1; transition:opacity .45s ease, filter .45s ease, transform .45s ease}
.sb-page .obj.anim .quote .w{opacity:0; filter:blur(4px); transform:translateY(4px)}
.sb-page .obj.on .quote .w{opacity:1; filter:none; transform:none}
.sb-page .quote .who2 .mono{transition:box-shadow .4s ease}
.sb-page .obj.on .quote .who2 .mono{animation:ecHeroPulse 1.6s ease 2.4s 2}
.sb-page .obj.on .proofs span{opacity:1; transform:none}
.sb-page .obj.on .proofs span:nth-child(1){transition-delay:2.3s} .sb-page .obj.on .proofs span:nth-child(2){transition-delay:2.5s} .sb-page .obj.on .proofs span:nth-child(3){transition-delay:2.7s}
@media (prefers-reduced-motion: reduce){ .sb-page .chain::before{transform:scaleY(1) !important} }
/* Źródła danych — przepływ */
.sb-page .ds{display:grid; grid-template-columns:minmax(0,360px) minmax(80px,1fr) minmax(0,400px); align-items:center; margin-top:52px}
.sb-page .ds-col{display:flex; flex-direction:column; gap:12px}
.sb-page .ds-src{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--ec-radius-md); background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .4s ease, box-shadow .4s ease}
.sb-page .ds-src.hot{border-color:rgba(0,213,99,.55); box-shadow:0 0 0 1px rgba(0,213,99,.2)}
.sb-page .ds-ic{width:32px; height:32px; flex:none; border-radius:10px; background:rgba(0,213,99,.12); color:var(--ec-green-300); display:flex; align-items:center; justify-content:center}
.sb-page .ds-ic svg{width:16px; height:16px}
.sb-page .ds-src b{display:block; font-size:14px; font-weight:600; color:#fff; line-height:1.3}
.sb-page .ds-src div > span{display:block; font-size:12.5px; line-height:1.45; color:var(--ec-granat-200); margin-top:2px}
.sb-page .ds-src em{display:block; font-style:normal; font-size:12px; font-weight:600; color:var(--ec-green-200); margin-top:6px}
.sb-page .ds-wire{position:relative; align-self:stretch}
.sb-page .ds-wire svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sb-page .ds-line{fill:none; stroke:rgba(160,180,219,.28); stroke-width:1.5}
.sb-page .ds-pulse{fill:var(--ec-green-900); filter:drop-shadow(0 0 4px rgba(0,213,99,.8))}
.sb-page .ds-node{border-radius:var(--ec-radius-lg); background:var(--ec-surface-dark-raised); border:1px solid rgba(0,213,99,.45); box-shadow:var(--ec-shadow-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:20px 22px}
.sb-page .ds-node-hd{padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--ec-border-on-dark)}
.sb-page .ds-tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ec-green-200)}
.sb-page .ds-node-hd b{display:block; font-family:var(--ec-font-display); font-size:22px; color:#fff; line-height:1.25}
.sb-page .ds-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--ec-granat-300)}
.sb-page .ds-rows li{display:flex; justify-content:space-between; gap:12px; padding:8px 8px; margin:0 -8px; border-radius:8px; font-size:13px; color:var(--ec-granat-200); transition:background .4s ease}
.sb-page .ds-rows li b{color:#fff; font-weight:600; white-space:nowrap}
.sb-page .ds-rows li.hot{background:rgba(0,213,99,.08)}
.sb-page .ds-rows li.hot b{color:var(--ec-green-200)}
.sb-page .ds-dec{margin-top:12px; padding-top:12px; border-top:1px solid var(--ec-border-on-dark); font-size:13.5px; line-height:1.55; font-weight:500; color:var(--ec-green-200)}
.sb-page .ds-note{margin-top:16px; font-size:12.5px; color:var(--ec-granat-300)}
.sb-page .ds.rv .ds-src{opacity:0; transform:translateX(-12px); transition:opacity .5s ease calc(var(--i)*120ms), transform .6s cubic-bezier(0.4,0.26,0,0.97) calc(var(--i)*120ms), border-color .4s ease, box-shadow .4s ease}
.sb-page .ds.rv .ds-node{opacity:0; transform:translateX(12px); transition:opacity .6s ease .5s, transform .7s cubic-bezier(0.4,0.26,0,0.97) .5s}
.sb-page .ds.rv.on .ds-src, .sb-page .ds.rv.on .ds-node{opacity:1; transform:none}
.sb-page .src-line{margin-top:14px; padding-top:12px; border-top:1px solid var(--ec-border-on-dark); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ec-green-200)}
@media (max-width:959px){
  .sb-page .ds{grid-template-columns:1fr; gap:14px}
  .sb-page .ds-wire{height:36px; align-self:auto}
  .sb-page .ds-wire svg{display:none}
  .sb-page .ds-wire::after{content:''; position:absolute; left:50%; top:4px; bottom:4px; width:2px; margin-left:-1px; background:linear-gradient(var(--ec-green-900),rgba(0,213,99,0))}
}
@media (prefers-reduced-motion: reduce){ .sb-page .ds.rv .ds-src, .sb-page .ds.rv .ds-node{opacity:1 !important; transform:none !important} }
.sb-page .proc-cta{display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-top:64px; padding-top:36px; border-top:1px solid var(--ec-border-on-dark)}
.sb-page .proc-cta p{font-size:17px; line-height:1.6; color:var(--ec-granat-200); max-width:680px}
.sb-page .proc-cta p b{color:#fff; font-weight:600}

/* Zamówienie skanu */
.sb-page .tl .when{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ec-green-200); margin-bottom:4px}
.sb-page .tl{position:relative}
.sb-page .tl::before{content:''; position:absolute; left:36px; top:40px; bottom:40px; width:2px; background:linear-gradient(var(--ec-green-900),rgba(0,213,99,.15)); z-index:0}
.sb-page .tl .s3{position:relative; z-index:1}
.sb-page .tl .s3 .sn{position:relative; z-index:1}
.sb-page .order{padding:30px 32px}
@media(max-width:600px){.sb-page .order{padding:24px 18px} .sb-page .order .btn{white-space:nowrap; padding-left:16px; padding-right:16px; font-size:14.5px}}
.sb-page .ord-top{padding-bottom:18px; border-bottom:1px solid var(--ec-border-on-dark)}
.sb-page .ord-tag{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ec-green-200)}
.sb-page .ord-price{display:flex; align-items:baseline; gap:10px; margin-top:6px}
.sb-page .ord-price b{font-family:var(--ec-font-display); font-weight:700; font-size:clamp(44px,5vw,56px); line-height:1; background-image:var(--ec-gradient-shine-text); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sb-page .ord-price span{font-size:16px; font-weight:600; color:#fff}
.sb-page .ord-sub{font-size:13px; color:var(--ec-granat-200); margin-top:6px}
.sb-page .ord-rebate{font-size:13px; line-height:1.55; color:var(--ec-green-200); margin-top:10px}
.sb-page .order form{margin-top:22px}
.sb-page .ord-secure{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--ec-granat-300); margin-top:12px; text-align:center}
.sb-page .ord-secure svg{width:13px; height:13px; flex:none; color:var(--ec-green-300)}
.sb-page .ord-or{display:flex; align-items:center; gap:12px; margin:22px 0 16px; font-size:12px; color:var(--ec-granat-300)}
.sb-page .ord-or::before, .sb-page .ord-or::after{content:''; flex:1; height:1px; background:var(--ec-border-on-dark)}
.sb-page .ord-talk p{font-size:14px; line-height:1.6; color:var(--ec-granat-200); margin-bottom:12px}
.sb-page .ord-talk p b{color:#fff; font-weight:600}
.sb-page .ea-form .ord-talk .btn{margin-top:0}

/* aislegraph */
.sb-page .ag-n{display:inline !important; font-size:inherit !important; font-family:inherit !important; line-height:inherit !important; color:inherit !important; margin:0 !important; padding:0 !important; font-weight:400 !important; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap}
.sb-page .ag-n b{display:inline !important; font-size:inherit !important; font-family:inherit !important; line-height:inherit !important; color:inherit !important; margin:0 !important; padding:0 !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important}
.sb-page .ag-mark{width:32px; height:32px; flex:none}
.sb-page .ag-mark .s-fg{stroke:currentColor} .sb-page .ag-mark .f-fg{fill:currentColor}
.sb-page .ag-mark .s-mu{stroke:var(--ag-mu, var(--ec-granat-300))} .sb-page .ag-mark .f-mu{fill:var(--ag-mu, var(--ec-granat-300))}
.sb-page .ag-mark .s-ac{stroke:var(--ec-green-900)} .sb-page .ag-mark .f-ac{fill:var(--ec-green-900)}
.sb-page .vw-id .ic.ic--ag{background:var(--ec-surface); border:1px solid var(--ec-border-light); color:var(--ec-granat-900); --ag-mu:var(--ec-granat-100)}
.sb-page .vw-id .ic.ic--ag .ag-mark{width:24px; height:24px}
.sb-page a.badge--ctx{text-decoration:none; color:var(--ec-green-200)}
.sb-page a.badge--ctx .spk{color:var(--ec-green-900); font-size:13px; line-height:1}
.sb-page a.badge--ctx:hover{color:var(--ec-green-200); border-color:var(--ec-green-900)}
.sb-page .ds-note b{color:#fff; font-weight:600}
.sb-page .toggle-wrap{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sb-page .toggle-hint{font-size:13px; font-weight:600; color:var(--ec-text-heading)}
.sb-page .ctx{display:grid; grid-template-columns:minmax(0,380px) minmax(48px,110px) minmax(0,1fr); align-items:center; margin-top:48px}
.sb-page .ctx .ds-node .ds-rows li span{color:var(--ec-granat-200)}
.sb-page .ctx-wire{position:relative; align-self:stretch}
.sb-page .ctx-wire svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sb-page .ctx-wire path{fill:none; stroke:rgba(0,213,99,.55); stroke-width:1.5; stroke-dasharray:4 6; animation:ctxFlow 1.6s linear infinite}
@keyframes ctxFlow{to{stroke-dashoffset:-20}}
.sb-page .ctx-chs{display:flex; flex-direction:column; gap:12px}
.sb-page .ctx-ch{padding:18px 20px; border-radius:var(--ec-radius-lg); background:var(--ec-surface-dark-raised); border:1px solid var(--ec-border-on-dark); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.sb-page .ctx-hd{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:6px}
.sb-page .ctx-tag{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ec-granat-900); background:var(--ec-green-900); border-radius:var(--ec-radius-pill); padding:3px 10px}
.sb-page .ctx-who{font-size:12.5px; color:var(--ec-granat-200)}
.sb-page .ctx-ch h4{font-size:17px; color:#fff; margin-bottom:4px}
.sb-page .ctx-ch p{font-size:14px; line-height:1.6; color:var(--ec-granat-200)}
.sb-page .ctx-ch p b{color:var(--ec-green-200); font-weight:600}
.sb-page .ctx-now{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px}
.sb-page .ctx-now .card--glass .when{display:block; font-family:var(--ec-font-display); font-weight:700; font-size:30px; line-height:1; letter-spacing:0; text-transform:none; color:var(--ec-green-300); margin-bottom:12px}
.sb-page .ctx-help{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 40px; margin-top:40px}
.sb-page .ctx-help b{color:#fff; font-weight:600}
.sb-page .ctx-h3{font-family:var(--ec-font-display); font-weight:400; font-size:clamp(22px,2.2vw,28px); line-height:1.3; color:#fff; margin-top:64px}
.sb-page .ctx-h3 b{font-weight:700}
.sb-page .ctx-key{display:flex; gap:10px; margin-top:18px; max-width:720px; padding:16px 18px; border-radius:var(--ec-radius-md); background:rgba(0,213,99,.06); border:1px solid var(--ec-border-accent-on-dark); font-size:16px; line-height:1.6; color:#fff}
.sb-page .ctx-key .spk{color:var(--ec-green-900); flex:none}
.sb-page .cases{margin-top:56px}
.sb-page .cases-top{display:flex; flex-direction:column; align-items:flex-start; margin-bottom:24px}
.sb-page .cases-top .badge{margin-bottom:16px}
.sb-page .cases-title{font-family:var(--ec-font-display); font-weight:400; font-size:clamp(24px,2.4vw,32px); line-height:1.25; color:var(--ec-text-heading)}
.sb-page .cases-title em{font-style:normal; font-weight:700}
.sb-page .cases-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.sb-page .cases .case{display:flex; flex-direction:column; gap:8px; padding:28px; border-radius:var(--ec-radius-xl); background:#fff; border:1px solid var(--ec-border-light); box-shadow:var(--ec-shadow-card); color:var(--ec-text-heading); text-decoration:none; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease}
.sb-page .cases .case:hover{border-color:var(--ec-badge-border); transform:translateY(-3px); box-shadow:var(--ec-shadow-card-hover); color:var(--ec-text-heading)}
.sb-page .case-tag{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ec-granat-300)}
.sb-page .case-num{font-family:var(--ec-font-display); font-weight:700; font-size:56px; line-height:1; color:var(--ec-text-heading)}
.sb-page .case-lbl{font-size:15px; line-height:1.5; color:var(--ec-text-heading); font-weight:500}
.sb-page .case-pt{font-size:14px; line-height:1.55; color:var(--ec-text-body)}
.sb-page .case-more{margin-top:auto; padding-top:10px; font-size:14px; font-weight:600; color:var(--ec-text-heading)}
.sb-page .cases .case:hover .case-more{color:var(--ec-green-700)}
.sb-page .cases-note{font-size:13px; line-height:1.6; color:var(--ec-text-body); margin-top:16px; max-width:820px}
.sb-page .cases-all{display:inline-flex; margin-top:14px}
.sb-page .paths{margin-top:16px; padding:18px 20px; border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border-on-dark); background:rgba(10,24,88,.45)}
.sb-page .paths-hd{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ec-green-200); margin-bottom:10px}
.sb-page .path{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px dashed var(--ec-border-on-dark)}
.sb-page .path:first-of-type{border-top:0}
.sb-page .path-n{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--ec-border-accent-on-dark); color:var(--ec-green-300); font-family:var(--ec-font-display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center}
.sb-page .path h4{font-size:15px; color:#fff; margin-bottom:2px}
.sb-page .path p{font-size:13.5px; line-height:1.55; color:var(--ec-granat-200)}
.sb-page .path p b{color:#fff; font-weight:600}
.sb-page .ord-what{font-size:14px; line-height:1.55; color:#fff; margin-top:10px}
@media (max-width:959px){
  .sb-page .ctx{grid-template-columns:1fr; gap:14px}
  .sb-page .ctx-wire{height:36px; align-self:auto}
  .sb-page .ctx-wire svg{display:none}
  .sb-page .ctx-wire::after{content:''; position:absolute; left:50%; top:4px; bottom:4px; width:2px; margin-left:-1px; background:linear-gradient(var(--ec-green-900),rgba(0,213,99,0))}
  .sb-page .ctx-now{grid-template-columns:1fr; gap:14px}
  .sb-page .ctx-help{grid-template-columns:1fr}
}
@media(max-width:700px){.sb-page .cases-grid{grid-template-columns:1fr} .sb-page .case-num{font-size:46px}}
@media (prefers-reduced-motion: reduce){
  .sb-page .ctx-wire path{animation:none}
  .sb-page .cases .case{transition:none}
}