/* ============================================================
   Devive - home.css
   Strona glowna w ukladzie mailforge (paleta cieplego papieru od 26.09 wieczorem):
   hero z ekranem na pomaranczowym
   pasie, szesc kafli, cztery kroki z szachownica, drogi wejscia,
   pas migracji, pakiet szesciu automatyzacji, wpisy, FAQ. Tokeny w site.css.
   ============================================================ */

/* ============ HERO ============ */
.hero{padding-top:82px}
.hero-text{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;color:var(--tx-2)}
.hero-badge-sq{display:inline-grid;grid-template-columns:repeat(3,7px);grid-template-rows:7px 7px;gap:2px}
.hero-badge-sq i{background:var(--orange)}
.hero-badge-sq i:nth-child(2){opacity:.45}
.hero-badge-sq i:nth-child(1){grid-area:1/1}
.hero-badge-sq i:nth-child(2){grid-area:2/2}
.hero-badge-sq i:nth-child(3){grid-area:1/3}
.hero .t-h1{margin-top:24px;max-width:1000px}
.hero-lead{margin-top:24px;max-width:580px}
.hero-btns{margin-top:40px;justify-content:center}
.hero-btns .btn--dark{min-width:249px}

/* stare: */
.hero-band{position:absolute;left:0;right:0;top:107px;bottom:0;background:var(--grad)}
.hero-sq{position:absolute;width:94px;height:94px}
.hero-sq--l1,.hero-sq--r1{top:-94px;background:var(--orange)}
.hero-sq--l2,.hero-sq--r2{top:0;background:var(--bg)}
.hero-sq--l1,.hero-sq--l2{left:calc(50% - 658px)}
.hero-sq--r1,.hero-sq--r2{left:calc(50% + 658px)}

.hero-media{position:relative;z-index:1;aspect-ratio:1160/652;background:var(--ink);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:400px 1fr;grid-template-rows:1fr auto;column-gap:40px;padding:48px 56px 0}
.hero-media::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 40%,rgba(246,80,22,.22),transparent 70%);pointer-events:none}
.hero-flow{position:relative;align-self:center;background:var(--bg);border-radius:var(--r);padding:22px 22px 18px;color:var(--ink)}
.flow-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--tx-2);padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.flow-head em{font-style:normal;margin-left:auto;font-size:12px;color:#15803D;background:#EEF8F1;padding:3px 9px;border-radius:40px}
.flow-live{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.15);animation:live 2s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.flow-steps{display:flex;flex-direction:column;align-items:stretch}
.flow-step{display:flex;flex-direction:column;gap:2px;background:var(--card);border-radius:4px;padding:10px 14px}
.flow-step b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.flow-step span{font-size:13px;line-height:1.35;color:var(--tx-2)}
.flow-step--trigger{background:var(--ink);color:#fff}
.flow-step--trigger span{color:var(--on-ink-2)}
.flow-wait{position:relative;font-size:12px;color:var(--tx-2);padding:7px 0 7px 26px}
.flow-wait::before{content:"";position:absolute;left:14px;top:0;bottom:0;border-left:1.5px dashed #CFCBBF}
.flow-wait::after{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:1px;background:var(--orange)}
.hero-mails{position:relative}
.hm{position:absolute;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.5);width:auto}
.hm--2{width:44%;left:28%;top:28px;z-index:3;animation:float 7s ease-in-out infinite}
.hm--1{width:36%;left:0;top:92px;z-index:2;transform:rotate(-6deg);opacity:.92}
.hm--3{width:36%;right:0;top:92px;z-index:2;transform:rotate(6deg);opacity:.92}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-media-stats{position:relative;z-index:4;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-ink);background:var(--ink);margin:0 -56px;padding:18px 56px}
.hero-media-stats div{display:flex;align-items:baseline;gap:12px;color:var(--on-ink-2);font-size:14px}
.hero-media-stats b{font-size:32px;font-weight:400;letter-spacing:-.04em;color:#fff}

.hero-stage{position:relative;margin-top:52px} /* odlozone, patrz partials/odlozone/hero-stage.php */
/* Pas platform pod hero: neutralne tlo, wyciszone logotypy (27.09.2026, zamiast bialego na pomaranczowym). */
.hero-trust{position:relative;margin-top:72px;padding:28px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:40px;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
.hero-trust-label{flex:0 0 auto;font-size:14px;line-height:1.4;color:var(--tx-2);max-width:150px}
.hero-trust .marquee{flex:1;min-width:0}
.trust-logo{display:inline-flex;align-items:center;gap:10px;margin:0 28px;font-size:20px;font-weight:600;letter-spacing:-.04em;color:var(--tx-3);white-space:nowrap}
.trust-logo svg{width:22px;height:22px;fill:var(--orange)}

/* ============ CO ROBIE ============ */
.sec--svc{padding-top:120px}
.svc-head .t-h2{max-width:880px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 12px}
.svc-img{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.03)}
.svc-mark{position:absolute;left:49.8%;top:74.9%;width:10.5%;transform:translate(-50%,-50%);color:#fff}
.svc-mark svg{width:100%;height:auto}
.svc .t-h5{margin-top:20px}
.svc .t-body{margin-top:12px;color:var(--tx-2)}

/* ============ KROKI ============ */
#proces{padding-top:160px}
#proces .head .t-h2{max-width:900px}
.steps{display:flex;flex-direction:column;gap:20px}
.step{display:grid;grid-template-columns:550px 1fr;gap:60px;align-items:center}
.step-art{position:relative;aspect-ratio:550/640;background:var(--card);border-radius:var(--r);overflow:hidden;display:grid;place-items:center}
.step-text{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.step-text > div{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.step-text .t-small{margin-bottom:0}
.step-text .t-body{color:var(--tx-2)}

.ui-card{position:relative;z-index:1;background:var(--bg);border-radius:var(--r);box-shadow:0 24px 60px rgba(37,32,25,.12)}
.ui-bars{width:64%;padding:24px 24px 18px;display:flex;flex-direction:column;gap:20px}
.ui-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ui-bar-top span{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.ui-bar-top em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12px;font-weight:600;color:var(--orange-tx)}
.ui-bar-top em svg{width:8px;height:5px}
.ui-bars-head{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);padding-bottom:14px;margin-bottom:-4px;border-bottom:1px solid var(--line-2)}
.ui-bars-head span{font-size:12px;font-weight:500;color:var(--tx-3)}
.ui-bar-top span b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;border-radius:4px;background:var(--card);font-size:11px;font-weight:600;color:var(--ink)}
.ui-bars .ui-bar-track{height:18px}
.ui-bars .ui-bar-track i{background:var(--grad-x)}
.ui-bars .ui-bar-top em{color:var(--tx-2)}
.ui-bars .ui-bar-top em svg{color:var(--orange)}
.ui-bar-track{height:28px;background:var(--card);border-radius:3px;overflow:hidden}
.ui-bar-track i{display:block;height:100%;background:var(--orange);border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.is-visible .ui-bar-track i{transform:scaleX(1)}
.ui-note{font-size:11px;color:var(--tx-3);margin-top:-6px}
.ui-todo{width:72%;background:var(--card-2);padding:6px;display:flex;flex-direction:column;gap:7px}
.ui-todo-row{display:flex;align-items:center;gap:16px;background:var(--bg);border-radius:4px;padding:22px 20px;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.ui-check{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);flex:0 0 auto}
.ui-check svg{width:18px;height:18px}
.is-done .ui-check{background:var(--orange);border-color:var(--orange)}
.ui-todo-l{font-size:17px;letter-spacing:-.01em;color:var(--ink);flex:1}
.is-done .ui-todo-l{text-decoration:line-through;color:var(--tx-3)}
.ui-todo-row em{font-style:normal;font-size:14px;font-weight:600;color:var(--orange-tx);white-space:nowrap}
.ui-shot{position:relative;z-index:1;width:90%;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(37,32,25,.16)}
.ui-shot img{width:100%;height:auto}
.ui-chart{width:76%;padding:36px 32px 22px;background:var(--bg) repeating-linear-gradient(180deg,transparent 0 29px,var(--card) 29px 30px)}
.ui-chart-bars{display:flex;justify-content:space-around;align-items:flex-end;height:220px}
.ui-col{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%}
.ui-col-bar{position:relative;width:7px;flex:1;border-radius:4px;background:var(--orange-4);display:flex;align-items:flex-end;overflow:hidden}
.ui-col-bar i{display:block;width:100%;border-radius:4px;background:var(--orange);transform-origin:bottom;transform:scaleY(0);transition:transform 1.2s var(--ease) .25s}
.is-visible .ui-col-bar i{transform:scaleY(1)}
.ui-col em{font-style:normal;font-size:10px;color:var(--ink)}

/* ============ DROGI WEJSCIA ============ */
#oferta{padding-top:160px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--ink);color:#fff;border-radius:var(--r);padding:56px 30px 0;overflow:hidden}
.path .t-h3{color:#fff;margin-top:20px}
.path-txt{margin-top:12px;max-width:440px;font-size:14px;line-height:1.5;color:var(--on-ink-2)}
.path-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.path-pills span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.5;color:var(--on-ink-2)}
.path-pills span::before{content:"";width:6px;height:6px;background:var(--orange)}
.path-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;font-weight:500;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .2s}
.path-more svg{width:16px;height:16px;color:var(--orange);transition:transform .3s var(--ease)}
.path:hover .path-more{border-color:var(--orange)}
.path:hover .path-more svg{transform:translateX(3px)}
.path-art{position:relative;width:calc(100% + 60px);height:300px;margin-top:36px}
/* Numer drogi ulozony z kwadratow (dv_digit w ui.php): blada siatka w tle, cyfra w pelnym pomaranczu. */
.digit{position:absolute;inset:0;width:100%;height:100%}
.digit-bg{fill:#fff;fill-opacity:.035;transition:fill-opacity .5s var(--ease)}
.path:hover .digit-bg{fill-opacity:.06}
.digit-sq{fill:var(--orange);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease)}
.path.is-visible .digit-sq{transform:scale(1)}
.center-btn{display:flex;justify-content:center;margin-top:44px}

/* ============ DLACZEGO ============ */
#dlaczego{padding-top:160px}
.why{display:grid;grid-template-columns:550px 1fr;gap:60px;align-items:center}
.why-art{position:relative;height:700px;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.why-cols{position:absolute;left:50%;top:50%;width:170%;height:170%;display:flex;gap:18px;transform:translate(-50%,-50%) rotate(20deg)}
.why-col{flex:1;overflow:hidden}
.why-track{display:flex;flex-direction:column;gap:18px;animation:why-up 60s linear infinite}
.why-col--1 .why-track{animation-direction:reverse;animation-duration:70s}
.why-track img{width:100%;height:auto;border-radius:4px}
@keyframes why-up{to{transform:translateY(-50%)}}
.why-text{display:flex;flex-direction:column;align-items:flex-start}
.why-text .t-h2{margin-top:20px}
.why-lead{margin-top:32px;font-size:16px}
.checks{display:flex;flex-direction:column;gap:12px;margin:24px 0 32px}
.checks li{position:relative;padding-left:34px;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:2px;top:4px;width:16px;height:16px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC3022' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E")}

/* ============ MIGRACJA ============ */
#migracja{padding-top:160px}
.stack .marquee-track{gap:10px}
.stack-item{display:flex;flex-direction:column;gap:8px;width:294px}
.stack-item p{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;line-height:1.5;padding-left:14px}
.stack-card{display:grid;place-items:center;height:160px;background:var(--card);border-radius:var(--r)}
.stack-card span{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.stack-card svg{width:26px;height:26px;color:var(--orange)}

/* ============ PYTANIA ============ */
#pytania{padding-top:160px}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qcard{display:flex;flex-direction:column;min-height:340px;background:var(--card);border-radius:var(--r);padding:32px}
.qcard-top{display:flex;align-items:center;justify-content:space-between}
.qcard-tag{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.qcard-tag svg{width:36px;height:36px;padding:8px;border-radius:6px;background:var(--paper);color:var(--orange)}
.qcard-q{margin-top:40px;font-size:32px;line-height:1.1;letter-spacing:-.03em}
.qcard-n{font-size:14px;font-weight:500;color:var(--tx-3);font-variant-numeric:tabular-nums}
.qcard-a{margin-top:auto;padding-top:32px}
.qcard-a strong{display:block;font-size:14px;font-weight:500;line-height:1.5}
.qcard-a p{font-size:14px;line-height:1.5;color:var(--tx-2)}
#faq{padding-top:160px;padding-bottom:140px}
#automatyzacje,#wiedza,#porownanie{padding-top:160px}
#wiedza .blog-grid{grid-template-columns:repeat(3,1fr)}
/* ============ KROK 05: SKALOWANIE ============ */
.step-art--grow{place-items:start center}
.grow-stairs{position:absolute;left:6%;right:6%;bottom:5%;width:88%;height:52%}
.grow-stairs rect{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);transition:transform .55s var(--ease)}
.grow-stairs .is-low{fill:var(--orange-4)}
.grow-stairs .is-mid{fill:var(--orange-3)}
.grow-stairs .is-top{fill:var(--orange)}
.step.is-visible .grow-stairs rect{transform:scaleY(1)}
.ui-grow{width:72%;margin-top:9%;padding:18px 18px 12px}
.ui-grow-head{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3);padding:0 4px 12px}
.ui-grow-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid var(--line-2);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.step.is-visible .ui-grow-row{opacity:1;transform:none}
.ui-grow-row .ui-check{width:24px;height:24px;border-color:var(--orange);color:var(--orange-tx)}
.ui-grow-row .ui-check svg{width:14px;height:14px}
.ui-grow-row.is-done .ui-check{color:var(--ink)}
.ui-grow-row .ui-todo-l{font-size:16px}
.ui-grow-row em{font-style:normal;font-size:13px;font-weight:600;color:var(--orange-tx);white-space:nowrap}
.ui-grow-row.is-done em{color:var(--tx-3)}

/* ============ DEVIVE VS ALTERNATYWY ============ */
.vs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:14px}
.vs{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.4}
.vs th,.vs td{padding:15px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.vs thead th{vertical-align:bottom;border-bottom:0;padding-top:26px;padding-bottom:18px}
.vs tbody th{font-weight:600;color:var(--ink);width:17%;padding-left:0}
.vs td{color:var(--tx);width:20.75%}
.vs-name{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.vs-sub{display:block;margin-top:2px;font-size:13px;color:var(--tx-3)}
.vs .vs-us{background:var(--ink);color:var(--on-ink);border-bottom-color:var(--line-ink);width:24%}
.vs thead .vs-us{border-radius:10px 10px 0 0}
.vs thead .vs-us .vs-name{color:#fff}
.vs thead .vs-us .vs-sub{color:var(--on-ink-2)}
.vs-c{display:flex;align-items:flex-start;gap:10px}
.vs-yes,.vs-no{width:16px;height:16px;margin-top:1px;border-radius:3px;flex:0 0 auto}
.vs-yes{background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252019' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/12px}
.vs-no{background:var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C867A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") no-repeat center/10px}
.vs-bottom th,.vs-bottom td{border-bottom:0;vertical-align:top;padding-top:22px;padding-bottom:26px}
.vs-bottom td strong{font-weight:500;color:var(--ink)}
.vs-bottom .vs-us{border-radius:0 0 10px 10px}
.vs-bottom .vs-us strong{display:block;color:#fff}
.vs-bottom .vs-us .btn{margin-top:18px}

/* ============ TABLET ============ */
@media (max-width:1199px){
  .hero{padding-top:56px}
  .hero-sq{display:none}
  .hero-band{top:80px}
  .hero-media{aspect-ratio:auto;grid-template-columns:1fr 1fr;padding:40px 40px 0}
  .hero-mails{min-height:420px}
  .hero-media-stats{margin:32px -40px 0;padding:16px 40px}
  .sec--svc,#proces,#oferta,#dlaczego,#migracja,#automatyzacje,#wiedza,#porownanie,#faq{padding-top:110px}
  .hero-trust{margin-top:56px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:1fr 1fr;gap:40px}
  .why{grid-template-columns:1fr 1fr;gap:40px}
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .ui-todo-row{padding:16px 14px}
  .ui-todo-l{font-size:15px}
}

/* ============ TELEFON ============ */
@media (max-width:809px){
  .hero{padding-top:24px}
  .hero .t-h1{margin-top:16px}
  .hero-lead{margin-top:16px}
  .hero-btns{margin-top:28px;width:100%}
  .hero-btns .btn{width:100%;min-width:0}
  .hero-stage{margin-top:40px}
  .hero-band{top:60px}
  .hero-media{grid-template-columns:1fr;padding:20px 16px 0;gap:0}
  .hero-flow{padding:16px 14px 12px}
  .flow-step{padding:8px 12px}
  .hero-mails{display:none}
  .hero-media-stats{grid-template-columns:1fr;gap:6px;margin:20px -16px 0;padding:14px 16px}
  .hero-media-stats b{font-size:24px;min-width:32px}
  .sec--svc,#proces,#oferta,#dlaczego,#migracja,#automatyzacje,#wiedza,#porownanie,#faq{padding-top:72px}
  .hero-trust{margin-top:40px;flex-direction:column;align-items:stretch;gap:16px;text-align:center;padding-left:0;padding-right:0}
  .hero-trust-label{max-width:none}
  .trust-logo{font-size:17px;margin:0 16px}
  #wiedza .blog-grid{grid-template-columns:1fr}
  .qcard-q{font-size:26px;margin-top:28px}
  .vs-scroll{margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut)}
  #faq{padding-bottom:72px}
  .svc-grid{grid-template-columns:1fr;gap:36px}
  .step{grid-template-columns:1fr;gap:24px}
  .steps{gap:48px}
  .step-text{gap:24px}
  .step-text > div{margin-top:0}
  .ui-todo{width:86%}
  .ui-todo-row{padding:12px 10px;gap:10px}
  .ui-todo-l{font-size:13px}
  .ui-todo-row em{font-size:11px}
  .ui-check{width:20px;height:20px}
  .ui-bars{width:78%;padding:16px;gap:12px}
  .ui-bar-track{height:18px}
  .ui-chart{width:84%;padding:20px 16px 14px}
  .ui-chart-bars{height:150px}
  .paths{grid-template-columns:1fr}
  .path{padding:40px 20px 0}
  .path-art{width:calc(100% + 40px);height:220px}
  .ui-grow{width:84%;padding:12px 12px 6px}
  .ui-grow-row{padding:9px 2px;gap:10px}
  .ui-grow-row .ui-todo-l{font-size:13px}
  .ui-grow-row em{font-size:11px}
  .ui-grow-row .ui-check{width:20px;height:20px}
  .why{grid-template-columns:1fr}
  .why-art{height:420px}
  .stack-item{width:230px}
  .stack-card{height:120px}
  .stack-card span{font-size:20px}
  .qgrid{grid-template-columns:1fr}
  .qcard{min-height:0;padding:24px}
  .qcard-q{margin-top:28px}
}

/* ============ MAKIETY (06.10.2026) ============
   Zamiast grafik z szablonu z mailami cudzych marek. Markup: partials/mocks.php. */
/* Krok 03: podsumowanie tygodnia */
.ui-week{width:76%;padding:18px 18px 10px}
.ui-week .ui-todo-row{padding:12px 4px;gap:14px;border-radius:0;box-shadow:none;border-top:1px solid var(--line-2)}
.ui-week .ui-check{width:24px;height:24px}
.ui-week .ui-check.is-on{background:var(--orange);border-color:var(--orange)}
.ui-week .ui-check svg{width:14px;height:14px}
.ui-week .ui-todo-l{font-size:15px}
.ui-week .ui-todo-row em{font-size:13px;color:var(--tx-3)}
.ui-week .is-now em{color:var(--orange-tx)}
.ui-week .is-now .ui-check{border-color:var(--orange);border-style:dashed}

/* Mini mail */
.mk-mail{background:#fff;color:var(--ink);border-radius:10px;padding:14px;font-size:12px;line-height:1.35;text-align:left}
.mk-top{display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:11px}
.mk-logo{display:inline-grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(3,5px);gap:1px}
.mk-logo i{background:var(--orange)}
.mk-logo i:nth-child(1){grid-area:1/1}.mk-logo i:nth-child(2){grid-area:2/2;opacity:.45}.mk-logo i:nth-child(3){grid-area:3/1}
.mk-hero{margin-top:12px;border-radius:8px;padding:16px 14px}
.mk-hero--or{background:var(--grad);color:#fff}
.mk-hero--ink{background:var(--ink);color:#fff}
.mk-hero--soft{background:var(--orange-4);color:var(--ink)}
.mk-k{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.mk-h{margin-top:6px;font-size:19px;line-height:1.1;letter-spacing:-.03em}
.mk-t{margin-top:8px;font-size:11px;opacity:.9}
.mk-prod{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px;border-radius:8px;background:var(--card)}
.mk-img{width:40px;height:40px;border-radius:6px;flex:0 0 auto;background:linear-gradient(135deg,#fff 0 30%,var(--orange-3) 30% 70%,var(--orange-2) 70%)}
.mk-pl{display:flex;flex-direction:column;gap:2px;min-width:0}
.mk-pl b{font-weight:600;font-size:11px}
.mk-pl em{font-style:normal;font-size:10px;color:var(--tx-2)}
.mk-stars{display:flex;gap:5px;justify-content:center;margin-top:12px}
.mk-stars i{width:18px;height:18px;background:var(--orange);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mk-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mk-list li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;background:var(--card);font-size:11px}
.mk-list li::before{content:"";width:6px;height:6px;background:var(--orange);flex:0 0 auto}
.mk-btn{display:block;margin-top:12px;padding:10px;border-radius:6px;background:var(--ink);color:#fff;text-align:center;font-weight:600;font-size:11px}
.mk-foot{margin-top:9px;text-align:center;font-size:9px;color:var(--tx-3)}
.why-track .mk-mail{flex:0 0 auto}

/* Kafle uslug */
.svc-img .sa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9%;transition:transform .8s var(--ease)}
.svc:hover .svc-img .sa{transform:scale(1.03)}
.svc-img{background:var(--ink) radial-gradient(120% 70% at 50% 110%,rgba(246,80,22,.32),transparent 60%)}
.sa-card{width:100%;max-width:300px;background:var(--bg);border-radius:10px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sa-cap{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3)}
/* strategia */
.sa-flow{gap:0}
.sa-node{width:230px;max-width:100%;background:var(--bg);border-radius:8px;padding:10px 14px;font-size:14px;color:var(--ink);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.sa-node em{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-tx);margin-bottom:2px}
.sa-node--trig{background:var(--orange);color:#fff}.sa-node--trig em{color:#fff;opacity:.85}
.sa-node--wait{width:auto;background:transparent;color:var(--on-ink-2);box-shadow:none;border:1px dashed var(--line-ink);font-size:12px;padding:6px 14px}
.sa-line{width:1.5px;height:18px;background:var(--orange-2)}
.sa-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:330px;position:relative;padding-top:4px}
.sa-node--sm{width:auto;font-size:12px;padding:9px 8px}
/* copy */
.sa-inbox{width:100%;max-width:320px;background:var(--bg);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sa-msg{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-top:1px solid var(--line-2);font-size:12px;color:var(--tx-2);background:#FFF4EE}
.sa-msg b{font-size:12px;color:var(--ink)}
.sa-subj{font-size:15px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.sa-msg--dim{background:var(--bg);opacity:.55}
.sa-msg:first-child{border-top:0}
.sa-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
.sa-tags span{font-size:11px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--on-ink)}
/* design */
.sa-design{justify-content:flex-end;padding-bottom:0}
.sa-phone{width:78%;max-width:300px;padding:9px 9px 0;border-radius:30px 30px 0 0;background:#0E0E0E;border:1.5px solid #3A3A3A;border-bottom:0;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.sa-phone .mk-mail{border-radius:22px 22px 0 0;padding-top:18px}
/* wdrozenie */
.sa-sys{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sa-box{padding:9px 16px;border-radius:8px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:600}
.sa-box--or{background:var(--orange);color:#fff}
.sa-sync{display:flex;gap:4px}
.sa-sync i{width:6px;height:6px;background:var(--orange-2)}
.sa-sync i:nth-child(2){opacity:.6}.sa-sync i:nth-child(3){opacity:.3}
.sa-ev{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink)}
.sa-ev:first-of-type{margin-top:10px}
.sa-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--orange);color:var(--ink);flex:0 0 auto}
.sa-ok svg{width:13px;height:13px}
/* raporty */
.sa-big{margin-top:6px;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.sa-bars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-top:14px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.sa-bars span{flex:1;background:var(--orange-3);border-radius:3px 3px 0 0}
.sa-bars span.is-on{background:var(--orange)}
.sa-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.sa-kpi span{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;background:var(--card);font-size:11px;color:var(--tx-2)}
.sa-kpi em{font-style:normal;font-weight:600;font-size:12px;color:var(--ink)}
/* testy */
.sa-var{display:grid;grid-template-columns:24px 1fr;gap:4px 10px;align-items:center;margin-top:14px}
.sa-l{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;background:var(--card-2);font-size:12px;font-weight:600;color:var(--ink);grid-row:span 2}
.sa-vt{font-size:13px;color:var(--ink)}
.sa-track{height:8px;border-radius:4px;background:var(--card)}
.sa-track i{display:block;height:100%;border-radius:4px;background:var(--orange-3)}
.is-win .sa-l{background:var(--orange);color:#fff}
.is-win .sa-track i{background:var(--orange)}
.sa-note{margin-top:14px;font-size:12px;color:var(--tx-2)}
@media (max-width:1199px){.sa-node{width:200px;font-size:13px}.sa-card{padding:14px}.sa-bars{height:80px}}

/* Tabela porownawcza na telefonie: kazdy wiersz jako karta, bez przewijania w bok. */
@media (max-width:809px){
  .vs-scroll{overflow:visible;margin:0;padding:0}
  .vs{min-width:0;display:block}
  .vs thead{display:none}
  .vs tbody,.vs tr{display:block}
  .vs tr{padding:18px 0;border-bottom:1px solid var(--line-2)}
  .vs th,.vs td{display:block;width:auto!important;padding:0;border:0}
  .vs tbody th{font-size:16px;margin-bottom:10px}
  .vs td{font-size:14px;padding:8px 0 8px 0}
  .vs td::before{content:attr(data-col);display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);margin-bottom:4px}
  .vs td.vs-us{padding:12px 14px;border-radius:8px;margin-bottom:6px}
  .vs td.vs-us::before{color:var(--orange-2)}
  .vs-bottom{border-bottom:0}
  .vs-bottom .vs-us{border-radius:8px}
  .vs-bottom td strong{font-weight:400}
}
/* Drogi wejscia: karta jest linkiem, pigulki to tylko opis, wiec nie udaja przyciskow. */
.path-pills span{pointer-events:none}
.sa-design{justify-content:flex-start;padding-top:12%}

/* ============ 10.10.2026: dowod pod przyciskami w hero, trzy drogi w rzedzie ============ */
.hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:28px}
.hero-proof li{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;color:var(--tx-2)}
.hero-proof li::before{content:"";flex:none;width:6px;height:6px;background:var(--orange)}
.paths--3{grid-template-columns:repeat(3,1fr)}
.paths--3 .path{padding:48px 24px 0}
.paths--3 .path-art{width:calc(100% + 48px);height:240px}
#program .ostack{margin-top:0}
@media (max-width:1199px){.paths--3{grid-template-columns:1fr}}
@media (max-width:809px){.hero-proof{flex-direction:column;align-items:center;gap:6px}}