/* v4 polish — additive layer over dir-desk-v3 styles. Adds depth, texture, motion
   and one inverted band. Remove this file's <link> to revert entirely. */

/* 2. texture — faint dot grid on tinted bands, so flat fills read as paper not void */
.dsk-band.tint{position:relative;background-image:radial-gradient(circle at 1px 1px,rgba(22,24,29,.055) 1px,transparent 0);background-size:22px 22px}
.dsk-band.tint>*{position:relative}

/* 3. hero — soft accent wash behind the visual, gives the fold depth */
.dsk-hero{position:relative;overflow:hidden}
.dsk-hero::after{content:"";position:absolute;right:-140px;top:-180px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(47,76,204,.09),rgba(47,76,204,0) 66%);pointer-events:none;z-index:0}
.dsk-hero>*{position:relative;z-index:1}

/* 4. cards lift and pick up the accent hairline on hover */
.dsk-prob-card,.v4-fit-col,.v4-adv-card,.nc-row{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.dsk-prob-card:hover,.v4-fit-col:hover,.v4-adv-card:hover{transform:translateY(-3px);border-color:#cdd6f5;box-shadow:0 22px 44px -34px rgba(22,24,29,.34)}
.v4-fit-col.no:hover{border-color:var(--line);box-shadow:0 18px 38px -34px rgba(22,24,29,.22)}

/* 5. inverted band — one dark stretch gives the page a spine */
.dsk-band.invert{background:#12141a;color:#f4f5f8;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0);background-size:22px 22px}
.dsk-band.invert .dsk-kick{color:#8fa6ff}
.dsk-band.invert>.dsk-kick::before{color:#8fa6ff;opacity:.34}
.dsk-band.invert .dsk-h2{color:#fff}
.dsk-band.invert .dsk-h2 .mut{color:#6f7486}
.dsk-band.invert .dsk-lead,.dsk-band.invert p{color:#a8adbd}
.dsk-band.invert .v4-plat-card,.dsk-band.invert .v4-adv-card,.dsk-band.invert .nc-row{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.dsk-band.invert h3,.dsk-band.invert h4,.dsk-band.invert strong,.dsk-band.invert b{color:#fff}
.dsk-band.invert li,.dsk-band.invert span,.dsk-band.invert div{color:inherit}
.dsk-band.invert .dsk-micro,.dsk-band.invert small{color:#8b90a2}
.dsk-band.invert svg{stroke:currentColor}
.dsk-band.invert a.dsk-cta{background:#fff;color:#12141a}
.dsk-band.invert a.dsk-cta:hover{background:#dfe3f6}
.dsk-band.invert .dsk-ghost{color:#f4f5f8}
.dsk-band.invert .dsk-ghost:hover{color:#8fa6ff}

/* 6. reveal on scroll — 12px rise, staggered by child, motion-safe */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
}

/* 7. links and CTA get a touch more life */
a.dsk-cta{box-shadow:0 12px 26px -18px rgba(47,76,204,.9)}
a.dsk-nav-cta{box-shadow:0 10px 22px -16px rgba(47,76,204,.9)}

@media (max-width:1099px){.dsk-band{padding-left:56px}}
@media (max-width:900px){.dsk-band{padding-left:24px}}
@media (max-width:560px){.dsk-band{padding-left:18px}}

/* hero: tighter fold, proof strip, sequenced ring */
.dsk-net-hero.dsk-v4-hero{padding-bottom:44px}
.hero-proof{list-style:none;display:flex;gap:34px;margin:28px 0 0;padding:0}
.hero-proof li{display:flex;flex-direction:column;gap:2px}
.hero-proof b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
.hero-proof span{font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .rt-seat{opacity:0;animation:seatIn .5s cubic-bezier(.2,.7,.3,1) forwards}
  .rt-seat:nth-child(2){animation-delay:.12s}.rt-seat:nth-child(3){animation-delay:.19s}.rt-seat:nth-child(4){animation-delay:.26s}
  .rt-seat:nth-child(5){animation-delay:.33s}.rt-seat:nth-child(6){animation-delay:.4s}.rt-seat:nth-child(7){animation-delay:.47s}
  .rt-seat:nth-child(8){animation-delay:.54s}.rt-seat:nth-child(9){animation-delay:.61s}.rt-seat:nth-child(10){animation-delay:.68s}
  .rt-seat:nth-child(11){animation-delay:.75s}.rt-seat:nth-child(12){animation-delay:.82s}
  .rt-focus{opacity:0;animation:seatIn .6s cubic-bezier(.2,.7,.3,1) .95s forwards}
  @keyframes seatIn{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
}
@media (max-width:560px){.hero-proof{gap:22px}.hero-proof b{font-size:19px}}

/* mobile touch targets — 44px minimum on phones */
@media (max-width:860px) and (pointer:coarse){
  .dsk-launch a,a.dsk-nav-login,.dsk-nav-links .lk,.dsk-net-foot a,.v4-budget a{display:inline-flex;align-items:center;min-height:44px}
  .v4-curr button{min-height:44px;padding-top:11px;padding-bottom:11px}
  .dsk summary,.dsk details>summary{min-height:44px;padding-top:13px;padding-bottom:13px}
  .dsk-foot a,.foot-links a{display:inline-flex;align-items:center;min-height:40px}
  .v4-route a,.v4-teams a,.v4-pt a,.v4-intel a{display:inline-flex;align-items:center;min-height:44px}
}