/* dt-top.v2 (11.11.2026): top service pages only (html.dtop, set by top1111.py). Loaded last via src/middleware.ts.
   Immutable for a year: any change = new file name (dt-top.v2.css) + middleware. Brand: navy #0a1630 / #0e1f45 + orange #FF6E00. */
html.dtop{--tp-or:#FF6E00;--tp-n1:#0a1630;--tp-n2:#0e1f45}

/* 1. hero aurora: slow drifting glow behind the hero (span injected by dt-top.v1.js) */
html.dtop .tpaur{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
html.dtop .tpaur i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.32;animation:tpdrift 22s ease-in-out infinite alternate}
html.dtop .tpaur i:nth-child(1){background:radial-gradient(circle,rgba(255,110,0,.55),transparent 65%);top:-22vmax;inset-inline-start:-12vmax}
html.dtop .tpaur i:nth-child(2){background:radial-gradient(circle,rgba(46,92,200,.7),transparent 65%);bottom:-26vmax;inset-inline-end:-14vmax;animation-delay:-9s}
@keyframes tpdrift{to{transform:translate3d(8vmax,5vmax,0) scale(1.12)}}
html.dtop header.hero>*:not(.tpaur),html.dtop section.hx>*:not(.tpaur){position:relative;z-index:1}

/* 2. strip headings: orange bar that draws in when the heading enters the viewport */
html.dtop main h2.h2x.h2x:not(.sr-only)::after{content:"";display:block;width:64px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--tp-or),#ffb15c);transform-origin:center;transform:scaleX(1);transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s}
html.dtop.tpjs main h2.h2x.h2x:not(.tpin)::after{transform:scaleX(0)}

/* 3. cards: injected animated icon + cursor spotlight + lift (no more "dry grid") */
html.dtop .tpcard{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
html.dtop .tpcard:hover{transform:translateY(-4px);border-color:rgba(255,110,0,.55)!important;box-shadow:0 18px 40px -18px rgba(255,110,0,.35)}
html.dtop .tpsp{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,110,0,.16),transparent 62%)}
html.dtop .tpcard:hover .tpsp{opacity:1}
html.dtop .tpi{display:grid;place-items:center;width:46px;height:46px;margin:16px auto 6px;border-radius:14px;color:var(--tp-or);background:rgba(255,110,0,.1);border:1px solid rgba(255,110,0,.35);box-shadow:inset 0 0 18px rgba(255,110,0,.12)}
html.dtop .tpi svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.dtop .tpi svg *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease}
html.dtop.tpjs .tpcard:not(.tpin) .tpi svg *{stroke-dashoffset:1}
html.dtop .tpcard:hover .tpi{animation:tpbob .9s ease}
@keyframes tpbob{40%{transform:translateY(-4px) rotate(-6deg)}}
html.dtop .tpcard h3{text-align:center}
html.dtop .tpcard .cb2 p{text-align:center}

/* 4. "קראו גם" inside the FAQ strip: air above it, chips row */
html.dtop #rel-h{margin-top:44px!important}
html.dtop .rel-list a{transition:border-color .25s,background .25s,transform .25s}
html.dtop .rel-list a:hover{background:rgba(255,110,0,.1);transform:translateY(-2px)}

/* 5. mobile: fewer screens */
@media (max-width:900px){
  /* footer link columns become an accordion (links stay in the DOM) */
  html.dtop footer .fcol.tpc h3{display:flex;justify-content:space-between;align-items:center;cursor:pointer;margin:0;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  html.dtop footer .fcol.tpc h3::after{content:"+";color:var(--tp-or);font-size:20px;line-height:1;transition:transform .25s}
  html.dtop footer .fcol.tpc.tpo h3::after{transform:rotate(45deg)}
  html.dtop footer .fcol.tpc:not(.tpo) ul{display:none}
  html.dtop footer .fcols{display:block!important}
  /* related links: one swipeable row */
  html.dtop .rel-list{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px!important;scrollbar-width:none}
  html.dtop .rel-list::-webkit-scrollbar{display:none}
  html.dtop .rel-list li{flex:0 0 auto;scroll-snap-align:start}
  html.dtop .rel-list a{white-space:nowrap}
  html.dtop #rel-h{margin-top:28px!important}
  /* icon cards (.ck of .ci): one swipeable row with a peek of the next card */
  html.dtop main .ck:has(> .ci){display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;padding:4px 2px 12px!important;scrollbar-width:none;grid-template-columns:none!important}
  html.dtop main .ck:has(> .ci)::-webkit-scrollbar{display:none}
  html.dtop main .ck:has(> .ci) > .ci{flex:0 0 80%!important;max-width:80%!important;scroll-snap-align:start;margin:0!important}
  /* tab pills: one swipeable row instead of 2-3 wrapped rows */
  html.dtop .dttabs .dttl{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;gap:8px!important;padding:2px 2px 8px!important}
  html.dtop .dttabs .dttl::-webkit-scrollbar{display:none}
  html.dtop .dttabs .dttl > button{flex:0 0 auto;white-space:nowrap}
  /* service heroes: smaller visual, trust chips in one wrapped row */
  html.dtop section.hx .hgx > .hv,html.dtop .s26-cb .s26-phone{zoom:.8}
  html.dtop section.hx .trust-chips{display:flex!important;flex-wrap:wrap;justify-content:center;gap:6px!important;margin-top:14px!important}
  html.dtop section.hx .trust-chips li{margin:0!important;font-size:13px!important}
  /* free tools strip: tabs only until one is tapped (dt-top.v1.js) */
  html.dtop #resources.tpshut .dttp{display:none}
  html.dtop #resources.tpshut .dttl{margin-bottom:0!important}
  /* home: services carousel visual and hero flow a bit smaller on phones */
  html.dtop #services .shv{height:200px!important;overflow:hidden}
  html.dtop #services .shv > *{transform:scale(.74);transform-origin:top center}
  html.dtop #services .shl{padding-top:8px!important}
  html.dtop .geo-ans{padding:12px 14px!important;margin-top:14px!important}
  html.dtop .geo-ans p.ans{font-size:14px!important;line-height:1.6!important}
  html.dtop .ofr-cta{display:flex!important;flex-wrap:wrap;gap:8px!important;justify-content:center;align-items:center}
  html.dtop .cfcard textarea{min-height:64px!important;height:64px}
  html.dtop .cfcard .cfoot{margin-top:4px!important;padding-top:6px!important}
  html.dtop .cfcard .nqhint{font-size:13px!important;margin:2px 0!important}
  /* footer contact buttons: 2 per row */
  html.dtop footer .fcm2{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  html.dtop footer .fcm2 li:nth-child(n+3){grid-column:1/-1}
  /* calculator and contact card: tighter */
  html.dtop .s26-calc .s26-in,html.dtop .s26-calc .s26-out{padding:16px 14px!important}
  html.dtop .s26-calc .s26-f{margin:6px 0!important}
  html.dtop .s26-calc .s26-lead,html.dtop .s26-calc .s26-note{font-size:14px!important;margin:2px 0 6px!important}
  html.dtop .s26-calc .s26-big{font-size:46px!important;line-height:1.05!important}
  html.dtop .s26-calc .s26-split{margin:10px 0!important}
  html.dtop .cfcard .mascot{width:44px!important;height:44px!important;margin:0 auto 4px!important}
  html.dtop .cfcard .leadx{margin-bottom:10px!important}
  /* client logos: 4 per row */
  html.dtop .clg{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
}

/* 6. home: answer box under the hero, "how it works" moved into the first tabs strip */
html.dtop header.hero .tp-ans{padding-bottom:28px}
@media (max-width:900px){html.dtop header.hero .tp-ans{padding-bottom:6px}html.dtop header.hero .tp-ans .geo-ans{margin-inline:auto!important}}
html.dtop header.hero .tp-ans .geo-ans{display:block;max-width:760px!important;margin:4px 0 0!important;margin-inline-end:auto!important;padding:14px 18px!important;border-radius:14px!important;border:1px solid rgba(143,176,255,.22)!important;border-inline-start:3px solid var(--tp-or)!important;background:rgba(14,31,69,.55)!important}
html.dtop .tphow h2.sr-only+*{margin-top:0}

@media (prefers-reduced-motion:reduce){
  html.dtop .tpaur i,html.dtop .tpcard:hover .tpi{animation:none}
  html.dtop main h2.h2x.h2x::after,html.dtop .tpi svg *{transition:none;transform:none!important;stroke-dashoffset:0!important}
  html.dtop .tpcard,html.dtop .tpcard:hover,html.dtop .rel-list a:hover{transform:none;transition:none}
}