/* ---------- Umów się na DEMO ---------- */
.d-sec{padding:clamp(120px,17vh,170px) 0 clamp(70px,10vh,120px)}
.d-box{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5.4fr);gap:clamp(36px,4.4vw,80px);align-items:start;
  padding:clamp(44px,6vh,72px) clamp(28px,3vw,48px);background:rgba(13,14,18,.6);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
.d-left .sub-h{margin-top:18px;max-width:32em}

/* formularz */
.d-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:clamp(28px,4vh,40px)}
.d-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.d-f.full{grid-column:1/-1}
.d-f>span{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--mut);transition:color .3s}
.d-f em{font-style:normal;color:var(--mut2)}
.d-f input,.d-f textarea{width:100%;min-width:0;padding:13px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;
  font:400 15px/1.4 Outfit,sans-serif;outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.d-f textarea{resize:vertical;min-height:110px}
.d-f input:hover,.d-f textarea:hover{border-color:rgba(255,255,255,.24)}
.d-f input:focus,.d-f textarea:focus{border-color:#8143F0;background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(129,67,240,.22)}
.d-f:focus-within>span{color:#fff}
.d-f.err input,.d-f.err textarea{border-color:#F84D88;box-shadow:0 0 0 4px rgba(248,76,137,.16)}
.d-f.err>span{color:#FF8DB3}
.d-consent{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--mut2)}
.d-consent a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.d-form .btn2{grid-column:1/-1;justify-self:start;border:0;cursor:pointer;margin-top:6px}
.d-form.sent input,.d-form.sent textarea{opacity:.55}
.d-form.sent .btn2{--bg:#2a8a4f;--bgh:#2a8a4f;cursor:default}

/* co dalej: pionowa oś z tymi samymi znacznikami co etapy wdrożenia */
.d-right{position:sticky;top:120px;padding-top:6px}
.d-next-h{font-size:13px;color:var(--mut2);letter-spacing:.02em}
.d-next{list-style:none;margin-top:22px}
/* linia od znacznika do następnego; po przejściu kroku robi się biała */
.d-next li:not(:last-child)::before,.d-next li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:24px;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.d-next li:not(:last-child)::after{background:rgba(255,255,255,.75);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.d-next li.done::after{transform:none}
.d-next li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:20px;padding-bottom:34px}
.d-next li:last-child{padding-bottom:0}
.d-next .n{position:relative;z-index:1;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:12px;line-height:1;color:var(--mut2);background:#000;border:1px solid rgba(255,255,255,.2);transition:color .5s,border-color .5s}
.d-next b{display:block;font-weight:400;font-size:clamp(17px,1.25vw,20px);line-height:1.25;color:rgba(243,243,245,.55);transition:color .5s}
.d-next li p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.d-next li.on .n{color:#fff;border-color:rgba(255,255,255,.75)}
.d-next li.on b{color:#fff}

/* karta zadania tylko po wysłaniu: potwierdzenie, że zgłoszenie do nas trafiło */
.d-card{display:none;margin-top:clamp(30px,4.4vh,44px);padding:1.2em 1.3em 1.3em;border-radius:.8em;background:rgba(36,37,43,.84);border:1px solid rgba(160,110,255,.5);
  font:400 clamp(13px,.95vw,14.5px)/1.35 Lato,sans-serif;color:#e6e6e8;box-shadow:0 0 0 4px rgba(129,67,240,.12),0 40px 80px -40px rgba(0,0,0,.85)}
.d-card.show{display:block;animation:dcard .8s var(--ease) both}
@keyframes dcard{from{opacity:0;transform:translateY(14px) scale(.98)}}
.d-card-h{display:flex;align-items:center;gap:.6em;font-size:.92em;color:#bdbdc2}
.d-card-h .sq{width:1.9em;height:1.9em;border-radius:.35em;display:grid;place-items:center;font-size:.66em;font-weight:700;color:#fff;background:#FF5722}
.d-state{margin-left:auto;padding:.3em .75em;border-radius:999px;font-size:.88em;background:rgba(59,209,59,.16);color:#7fe08f}
.d-title{display:flex;align-items:flex-start;gap:.7em;margin-top:1.1em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.22em;line-height:1.3;color:#fff}
.d-title .cb{width:.9em;height:.9em;margin-top:.2em;border:1px solid #9a9ca1;border-radius:.15em;flex:none}
.d-rows{display:grid;gap:.15em;margin-top:.8em}
.d-row{display:grid;grid-template-columns:1.2em minmax(0,8.5em) minmax(0,1fr);gap:.7em;align-items:center;padding:.45em 0}
.d-row svg,.d-note svg{width:1.15em;height:1.15em;fill:none;stroke:#9a9ca1;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.d-row span{color:#9a9ca1}
.d-row b{font-weight:400;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-note{display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:.7em;margin-top:.6em;padding:.85em .9em;border-radius:.5em;background:rgba(0,0,0,.18)}
.d-note[hidden]{display:none}
.d-note p{color:#e6e6e8;line-height:1.45;white-space:pre-line;max-height:7.3em;overflow:hidden}
.d-tags{display:flex;gap:.9em;margin-top:1em}
.d-tags .tg{font-size:.86em}

/* animacja powstawania zadania */
.d-card .d-card-h,.d-card .d-title{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.d-card.show .d-card-h{opacity:1;transform:none;transition-delay:.15s}
.d-card.show .d-title{opacity:1;transform:none;transition-delay:.3s}
.d-card .d-title{min-height:2.6em}
.d-card.typing #pTitle::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:#8143F0;animation:caret .7s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.d-card .d-row,.d-card .d-note,.d-card .d-tags .tg{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.d-card .d-tags .tg{transform:scale(.6)}
.d-card .d-row.in,.d-card .d-note.in{opacity:1;transform:none}
.d-card .d-tags .tg.in{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.d-card .d-state{opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.d-card.done .d-state{opacity:1;transform:none}
.d-card .d-title .cb{transition:background .5s,border-color .5s}
.d-card .d-state::before{content:"";display:inline-block;width:.45em;height:.45em;margin-right:.45em;border-radius:50%;background:#3BD13B;vertical-align:.08em;box-shadow:0 0 0 0 rgba(59,209,59,.6)}
.d-card.done .d-state::before{animation:livegr 1.6s .2s 2}
@keyframes livegr{70%{box-shadow:0 0 0 6px rgba(59,209,59,0)}100%{box-shadow:0 0 0 0 rgba(59,209,59,0)}}
.d-card{transition:border-color .8s,box-shadow .8s}
.d-card:not(.done){border-color:rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}

/* wysyłka do WordPressa: komunikat błędu, Turnstile, stan wysyłania */
.d-err{grid-column:1/-1;margin:0;color:#ffb3b3;font-size:14px;line-height:1.4}
.d-ts{grid-column:1/-1;min-height:65px}
.d-form.busy button{opacity:.6;pointer-events:none}

/* komunikat po wysłaniu, w miejscu formularza */
.d-form.done{display:none}
.d-ok{margin-top:clamp(28px,4vh,40px);padding:clamp(24px,3vw,36px);border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04);opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.d-ok.in{opacity:1;transform:none}
.d-ok-i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#2a8a4f;margin-bottom:20px}
.d-ok-i svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.d-ok h2{font-size:clamp(26px,2.3vw,36px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0}
.d-ok p{margin:12px 0 0;max-width:34em;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:rgba(243,243,245,.82)}