/* dt-kit.v1 (12.11.2026) — shared components for the wave 1-4 pages. Loaded only on pages that carry data-dtkit (src/middleware.ts).
   Brand: two navy tones + orange. Every component shows its final state without JS; JS only animates (and never under reduced motion).
   Immutable file: any change = dt-kit.v2.* + middleware. */
:root{--dk-n1:#002145;--dk-n2:#0a1228;--dk-card:#101a38;--dk-or:#ff7a1a;--dk-ye:#ffce26;--dk-line:rgba(255,255,255,.13);--dk-mute:#b9c4dc}
[class^="dk-"],[class*=" dk-"]{font-family:Heebo,Arial,sans-serif}
:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) :is(button,input,select,textarea,a,summary,small,b,strong){font-family:inherit}
.dk-kit{color:#fff}
:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) :is(p,li){text-wrap:pretty}
:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) :is(h2,h3){text-wrap:balance}

.dk-demo{padding:clamp(40px,6vw,72px) 0;border-top:1px solid rgba(255,255,255,.06)} .dk-demo :is(.h2x,.leadx){text-align:center}.dk-demo-sub{margin-top:clamp(40px,6vw,72px)} /* /kit-demo only: dt-lp folds sections.sx beyond 7 */

/* C7 · בקצרה */
.dk-tldr{max-width:760px;margin:0 auto;padding:18px 22px;border:1px solid var(--dk-line);border-inline-start:4px solid var(--dk-or);border-radius:16px;background:rgba(255,255,255,.05);font-size:17px;line-height:1.65}
.dk-tldr b:first-child{display:block;color:var(--dk-or);font-size:14px;font-weight:800;margin-bottom:4px}
.dk-tldr p{margin:0}

/* C1 · מסע של פנייה אחת */
.dk-flow{max-width:1100px;margin:0 auto;position:relative}
.dk-flow-lead{display:flex;white-space:nowrap;align-items:center;gap:12px;width:max-content;max-width:100%;margin:0 auto 26px;padding:10px 18px;border-radius:999px;background:#fff;color:var(--dk-n1);font-weight:800;font-size:16px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.dk-flow-lead i{width:34px;height:34px;flex:none;border-radius:50%;background:var(--dk-or);color:var(--dk-n1);display:grid;place-items:center;font-style:normal;font-weight:900}
.dk-flow-lead small{font-weight:600;color:#445372}
.dk-flow-lead [data-st]{color:var(--dk-or);font-weight:900;min-width:7.5em}
.dk-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;counter-reset:dk}
.dk-flow ol::before,.dk-flow ol::after{content:"";position:absolute;top:31px;inset-inline:12.5%;height:3px;border-radius:3px;background:var(--dk-line)}
.dk-flow ol::after{background:linear-gradient(90deg,var(--dk-or),#ffb36b);transform-origin:right;transform:scaleX(var(--dk-p,1));transition:transform .9s cubic-bezier(.4,0,.2,1)}
.dk-flow li{position:relative;z-index:1;text-align:center}
.dk-flow li a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px 14px;border-radius:18px;color:#fff;text-decoration:none}
.dk-flow li a:hover .dk-flow-i,.dk-flow li a:focus-visible .dk-flow-i{transform:translateY(-3px)}
.dk-flow-i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--dk-n2);border:2px solid var(--dk-or);box-shadow:0 0 0 6px rgba(255,122,26,.14);transition:border-color .4s,box-shadow .4s,transform .2s,background .4s;position:relative}
.dk-flow-i svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dk-flow-i::after{content:"✓";position:absolute;bottom:-4px;inset-inline-start:-4px;width:22px;height:22px;border-radius:50%;background:var(--dk-or);color:var(--dk-n1);font-size:13px;font-weight:900;display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dk-flow h3{font-size:18px;font-weight:800;margin:0}
.dk-flow p{font-size:15px;line-height:1.5;color:var(--dk-mute);margin:0;max-width:22ch}
.dk-flow-go{font-size:14px;font-weight:700;color:var(--dk-or)}
.dk-flow.dk-anim li:not(.on) .dk-flow-i{border-color:var(--dk-line);box-shadow:none;background:var(--dk-card)}
.dk-flow.dk-anim li:not(.on) .dk-flow-i::after{transform:scale(0)}
.dk-flow.dk-anim li:not(.on) :is(h3,p){opacity:.55}
.dk-flow li :is(h3,p){transition:opacity .4s}

/* C2 · בורר מערכת ניטרלי */
.dk-pick{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
.dk-pick fieldset{border:0;margin:0 0 16px;padding:0}
.dk-pick legend{font-weight:800;font-size:17px;margin-bottom:8px;padding:0}
.dk-pick .dk-opts{display:flex;flex-wrap:wrap;gap:8px}
.dk-pick label{position:relative;cursor:pointer}
.dk-pick label input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dk-pick label span{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--dk-line);background:rgba(255,255,255,.05);font-size:15px;font-weight:600;transition:background .2s,border-color .2s}
.dk-pick label:hover span{border-color:rgba(255,122,26,.6)}
.dk-pick input:checked+span{background:var(--dk-or);border-color:var(--dk-or);color:var(--dk-n1);font-weight:800}
.dk-pick input:focus-visible+span{outline:3px solid var(--dk-ye);outline-offset:2px}
.dk-pick-out{position:sticky;top:90px;padding:22px;border-radius:20px;background:linear-gradient(160deg,var(--dk-n1),var(--dk-n2));border:1px solid var(--dk-line);min-height:220px}
.dk-pick-out small{display:block;color:var(--dk-mute);font-size:14px;margin-bottom:6px}
.dk-pick-out h3{font-size:26px;font-weight:900;margin:0 0 8px;color:var(--dk-or)}
.dk-pick-out p{font-size:15px;line-height:1.6;margin:0 0 14px}
.dk-pick-out .dk-alt{font-size:14px;color:var(--dk-mute)}
.dk-pick-out .dk-alt a,.dk-pick-out .dk-more{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dk-pick-out .pill{margin:2px 0 14px}
.dk-pick-sys{display:flex;gap:6px;margin-bottom:14px}
.dk-pick-sys span{flex:1;text-align:center;padding:6px 4px;border-radius:10px;font-size:13px;font-weight:700;border:1px solid var(--dk-line);color:var(--dk-mute);transition:all .3s}
.dk-pick-sys span.on{background:rgba(255,122,26,.16);border-color:var(--dk-or);color:#fff}

/* C3 · לפני / אחרי */
.dk-ba-w{max-width:980px;margin:0 auto}
.dk-ba-chg{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:15px;font-weight:700}
.dk-ba-chg li::before{content:"✓";color:var(--dk-or);font-weight:900;margin-inline-end:6px}
.dk-ba{position:relative;aspect-ratio:16/8;border-radius:20px;overflow:hidden;user-select:none;touch-action:pan-y;--p:50%;direction:ltr;border:1px solid var(--dk-line)}
.dk-ba>.dk-l{position:absolute;inset:0;direction:rtl;padding:clamp(14px,3vw,30px);display:grid;align-content:center;gap:8px}
.dk-ba .dk-before{background:repeating-linear-gradient(45deg,#1b2440,#1b2440 14px,#18203a 14px,#18203a 28px)}
.dk-ba .dk-after{background:linear-gradient(135deg,var(--dk-n1),#0d2d5e);clip-path:inset(0 0 0 var(--p))}
.dk-ba .dk-tag{position:absolute;top:12px;font-size:13px;font-weight:800;background:rgba(0,0,0,.5);padding:3px 12px;border-radius:20px}
.dk-ba .dk-before .dk-tag{left:12px}.dk-ba .dk-after .dk-tag{right:12px}
.dk-ba .dk-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:46%}
/* before = left half, after = right half (slider is ltr) */
.dk-ba .dk-before .dk-chips{margin-inline-start:auto}
.dk-ba .dk-after .dk-chips{margin-inline-end:auto}
.dk-ba .dk-chips span{font-size:clamp(12px,1.6vw,15px);font-weight:700;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.25);color:#cfd6e6}
.dk-ba .dk-before .dk-chips span:nth-child(odd){transform:rotate(-2deg)}
.dk-ba .dk-before .dk-chips span:nth-child(even){transform:rotate(1.5deg)}
.dk-ba .dk-after .dk-chips span{border:1px solid rgba(255,122,26,.55);background:rgba(255,122,26,.12);color:#fff}
.dk-ba .dk-h{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4);pointer-events:none}
.dk-ba .dk-h::after{content:"↔";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--dk-or);color:var(--dk-n1);display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.dk-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.dk-ba:has(input:focus-visible) .dk-h::after{outline:3px solid var(--dk-ye);outline-offset:2px}

/* C4 · קיר מוצרים חיים */
.dk-wall{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dk-wall a{display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;background:var(--dk-card);border:1px solid var(--dk-line);color:#fff;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.dk-wall a:hover,.dk-wall a:focus-visible{transform:translateY(-4px);border-color:rgba(255,122,26,.6);box-shadow:0 18px 36px -18px rgba(255,122,26,.55)}
.dk-wall img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;background:var(--dk-n2)}
.dk-wall div{padding:12px 14px 14px;display:grid;gap:4px;flex:1}
.dk-wall h3{font-size:17px;font-weight:800;margin:0}
.dk-wall p{font-size:15px;line-height:1.45;color:var(--dk-mute);margin:0}
.dk-wall small{font-size:13px;font-weight:700;color:var(--dk-or);direction:ltr;text-align:right;margin-top:auto}
.dk-wall .dk-wix{font-size:12px;font-weight:700;color:var(--dk-mute)}

/* C8 · הוכחה: מונים + לוגואים */
.dk-proof{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dk-stat{display:flex;align-items:center;gap:16px;padding:18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--dk-line)}
.dk-ring{--v:87;width:96px;height:96px;flex:none;position:relative;display:grid;place-items:center}
.dk-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dk-ring circle{fill:none;stroke-width:9}
.dk-ring circle:first-child{stroke:var(--dk-line)}
.dk-ring circle+circle{stroke:var(--dk-or);stroke-linecap:round;stroke-dasharray:calc(var(--v) * 2.639) 263.9;transition:stroke-dasharray 1.4s cubic-bezier(.3,0,.2,1)}
.dk-num{font-size:30px;font-weight:900;line-height:1;direction:ltr;unicode-bidi:isolate}
.dk-stat p{font-size:15px;line-height:1.5;margin:0}
.dk-bar{flex:none;width:96px;display:grid;gap:8px;justify-items:center}
.dk-bar i{display:block;width:100%;height:10px;border-radius:6px;background:var(--dk-line);overflow:hidden}
.dk-bar i::before{content:"";display:block;height:100%;width:calc(var(--v,70) * 1%);background:linear-gradient(90deg,#ffb36b,var(--dk-or));border-radius:6px;transition:width 1.4s cubic-bezier(.3,0,.2,1);margin-inline-start:0}
.dk-anim .dk-ring circle+circle{stroke-dasharray:0 263.9}
.dk-anim .dk-bar i::before{width:0}
.dk-proof-note{grid-column:1/-1;text-align:center;font-size:14px;color:var(--dk-mute);margin:0}
.dk-logos{list-style:none;margin:22px auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.dk-logos li{display:grid;place-items:center;height:70px;padding:10px;border-radius:12px;background:#fff}
.dk-logos img{max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain}

/* C9 · כרטיס זכוכית עם אייקון מונפש */
.dk-glass{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dk-glass li{padding:20px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--dk-line);backdrop-filter:blur(6px);transition:transform .25s,border-color .25s}
.dk-glass li:hover{transform:translateY(-4px);border-color:rgba(255,122,26,.55)}
.dk-glass svg{width:40px;height:40px;fill:none;stroke:var(--dk-or);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:0;transition:stroke-dashoffset .8s}
.dk-glass li:hover svg{animation:dk-draw 1s ease}
@keyframes dk-draw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
.dk-glass h3{font-size:18px;font-weight:800;margin:10px 0 4px}
.dk-glass p{font-size:15px;line-height:1.55;color:var(--dk-mute);margin:0}

/* C10 · ציר צעדים */
.dk-steps{list-style:none;margin:0 auto;padding:0;max-width:820px;display:grid;gap:12px;counter-reset:dks}
.dk-steps li{counter-increment:dks;display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--dk-line);position:relative}
.dk-steps li::before{content:counter(dks);grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--dk-or);color:var(--dk-n1);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.dk-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:37px;top:62px;bottom:-14px;width:2px;background:linear-gradient(var(--dk-or),transparent)}
.dk-steps h3{font-size:17px;font-weight:800;margin:2px 0 0}
.dk-steps p{font-size:15px;line-height:1.5;color:var(--dk-mute);margin:0}
.dk-steps.dk-anim li:not(.on)::before{transform:scale(.4);background:var(--dk-line)}
.dk-steps.dk-anim li:not(.on){opacity:.5}
.dk-steps li{transition:opacity .4s}

/* C6 · כרטיס CTA כהה + מיני-טופס */
.dk-cta{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding:clamp(22px,4vw,40px);border-radius:24px;background:radial-gradient(90% 120% at 100% 0,rgba(255,122,26,.18),transparent 55%),linear-gradient(140deg,var(--dk-n1),var(--dk-n2));border:1px solid var(--dk-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.dk-cta h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.15;margin:0 0 10px;text-align:start}
.dk-cta>div>p{font-size:17px;line-height:1.6;margin:0 0 14px;color:#dbe2f1}
.dk-cta-wa{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:#fff;text-decoration:underline;text-underline-offset:4px}
.dk-cta-wa svg{width:22px;height:22px;fill:#25d366}
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 28px;font:inherit;font-weight:800;font-size:18px;background:var(--dk-or);color:var(--dk-n1);cursor:pointer;box-shadow:0 0 0 0 rgba(255,122,26,.55),0 10px 26px -8px rgba(255,122,26,.75);transition:transform .15s,box-shadow .3s;animation:dk-glow 2.8s ease-in-out 3}
.dk-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(255,122,26,.18),0 14px 30px -8px rgba(255,122,26,.85)}
.dk-btn:focus-visible{outline:3px solid var(--dk-ye);outline-offset:3px}
.dk-btn[disabled]{opacity:.7;cursor:wait}
@keyframes dk-glow{50%{box-shadow:0 0 0 8px rgba(255,122,26,.12),0 10px 30px -6px rgba(255,122,26,.95)}}
.dk-mf{display:grid;gap:10px;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--dk-line)}
.dk-mf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dk-mf label{display:grid;gap:4px;font-size:15px;font-weight:700}
.dk-mf input[type=text],.dk-mf input[type=tel]{width:100%;font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;min-height:48px}
.dk-mf input::placeholder{color:#9aa6c2}
.dk-mf input[aria-invalid=true]{border-color:#ff8f8f}
.dk-mf .dk-cons{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:500;line-height:1.45;color:#cfd6e6}
.dk-mf .dk-cons input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--dk-or)}
.dk-mf .dk-cons a{text-decoration:underline}
.dk-mf .dk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dk-mf-msg{min-height:1.4em;margin:0;font-size:15px;font-weight:700}
.dk-mf-msg.ok{color:#7ee2a8}.dk-mf-msg.err{color:#ff9d9d}
.dk-mf.done>:not(.dk-mf-msg){display:none}

@media (max-width:900px){
  .dk-pick{grid-template-columns:1fr}.dk-pick-out{position:static}
  .dk-proof{grid-template-columns:1fr}
  .dk-logos{grid-template-columns:repeat(4,1fr)}
  .dk-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dk-flow ol{grid-template-columns:1fr;gap:10px}
  .dk-flow ol::before,.dk-flow ol::after{top:32px;bottom:32px;inset-inline:auto;inset-inline-start:31px;width:3px;height:auto;transform-origin:top;transform:scaleY(var(--dk-p,1))}
  .dk-flow li{text-align:start}
  .dk-flow li a{flex-direction:row;align-items:center;gap:14px;padding:4px 0}
  .dk-flow li a>span{display:grid;gap:2px}
  .dk-flow p{max-width:none}
  .dk-flow li a>.dk-flow-go{display:none}
  .dk-flow-lead{font-size:14px;padding:8px 14px;gap:8px}
  .dk-ba{aspect-ratio:4/5}
  .dk-ba .dk-chips{max-width:60%}
  .dk-wall{grid-template-columns:repeat(2,1fr);gap:10px}
  .dk-wall p{display:none}
  .dk-wall div{padding:10px}
  .dk-wall h3{font-size:15px}
  .dk-logos{grid-template-columns:repeat(3,1fr)}
  .dk-logos li{height:58px}
  .dk-mf-row{grid-template-columns:1fr}
  .dk-btn{width:100%}
  .dk-stat{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  :is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr),:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) *,:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) *::before,:is(.dk-kit,.dk-flow,.dk-pick,.dk-ba-w,.dk-wall,.dk-proof,.dk-logos,.dk-glass,.dk-steps,.dk-cta,.dk-mf,.dk-tldr) *::after{animation:none!important;transition:none!important}
}