/* ============================================================
   DZIGNN MOTION & INTERACTION SYSTEM / V4
   Additive creative layer. No layout dependency, no external CDN.
   ============================================================ */
:root{
  --dz-accent:#ff512b;
  --dz-accent-rgb:255,81,43;
  --dz-motion-ease:cubic-bezier(.22,.74,.24,1);
  --dz-motion-fast:220ms;
  --dz-motion-mid:520ms;
  --dz-motion-slow:900ms;
}
body.cat-development{--dz-accent:#ff512b;--dz-accent-rgb:255,81,43}
body.cat-marketing{--dz-accent:#b8ef2f;--dz-accent-rgb:184,239,47}
body.cat-design{--dz-accent:#3355ff;--dz-accent-rgb:51,85,255}
body.cat-ai{--dz-accent:#7f48d6;--dz-accent-rgb:127,72,214}
body.insights-page{--dz-accent:#3355ff;--dz-accent-rgb:51,85,255}
body.configurator-page{--dz-accent:#7f48d6;--dz-accent-rgb:127,72,214}
body.trust-page{--dz-accent:#a8db2f;--dz-accent-rgb:168,219,47}
body.industry-detail,body.industries-page{--dz-accent:#ff512b;--dz-accent-rgb:255,81,43}
body.talent-detail,body.hire-page{--dz-accent:#b8ef2f;--dz-accent-rgb:184,239,47}
body.about-page,body.contact-page,body.agency-page{--dz-accent:#ff512b;--dz-accent-rgb:255,81,43}
body.work-page,body.blueprint-detail{--dz-accent:#3355ff;--dz-accent-rgb:51,85,255}
body.insight-detail{--dz-accent:#7f48d6;--dz-accent-rgb:127,72,214}

/* ---------- fixed signal rail ---------- */
.dz-signal-rail{
  position:fixed;right:11px;top:50%;transform:translateY(-50%);
  width:18px;height:42vh;min-height:230px;max-height:430px;
  z-index:92;pointer-events:none;display:flex;align-items:center;justify-content:center;
  opacity:.72;mix-blend-mode:multiply;
}
.dz-signal-rail__track{position:absolute;left:8px;top:0;bottom:0;width:1px;background:rgba(17,16,15,.2)}
.dz-signal-rail__fill{position:absolute;left:7px;top:0;width:3px;height:var(--dz-progress,0%);background:var(--dz-accent);transform-origin:top;transition:height 80ms linear}
.dz-signal-rail__dot{position:absolute;left:4px;top:calc(var(--dz-progress,0%) - 5px);width:9px;height:9px;background:var(--ink,#11100f);border:2px solid var(--paper,#f2efe8);box-shadow:0 0 0 2px var(--dz-accent);transition:top 80ms linear}
.dz-signal-rail__label{position:absolute;right:13px;top:50%;width:max-content;transform:translateY(-50%) rotate(-90deg);font:800 8px/1 monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#11100f)}
body.dz-dark-rail .dz-signal-rail{mix-blend-mode:screen}.dz-signal-rail strong{color:var(--dz-accent)}

/* ---------- pointer signal ---------- */
.dz-pointer-field{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:90;opacity:0;background:radial-gradient(circle,rgba(var(--dz-accent-rgb),.11) 0,rgba(var(--dz-accent-rgb),.045) 29%,transparent 68%);transform:translate3d(var(--dz-pointer-x,-400px),var(--dz-pointer-y,-400px),0);transition:opacity .35s;mix-blend-mode:multiply}
html.dz-motion-ready body:hover .dz-pointer-field{opacity:1}

/* ---------- hero system overlay ---------- */
.home-hero,.detail-hero,.category-hero,.page-hero,.about-hero,.work-hero,.hire-hero,.agency-hero,.contact-hero{position:relative;isolation:isolate;overflow:hidden}
.dz-hero-signal{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5}
.dz-hero-signal:before{content:"";position:absolute;inset:-20%;background-image:linear-gradient(rgba(17,16,15,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,16,15,.055) 1px,transparent 1px);background-size:38px 38px;transform:rotate(.001deg)}
.dz-hero-signal .dz-track{position:absolute;height:1px;width:78%;right:-16%;background:linear-gradient(90deg,transparent 0,var(--dz-accent) 33%,rgba(var(--dz-accent-rgb),.2) 70%,transparent 100%);transform:rotate(-24deg);transform-origin:right center;animation:dz-track-flow 10s linear infinite}
.dz-hero-signal .dz-track.t1{top:18%;animation-delay:-1.8s}.dz-hero-signal .dz-track.t2{top:50%;width:60%;animation-delay:-5.2s}.dz-hero-signal .dz-track.t3{top:78%;width:92%;animation-delay:-8.1s}
.dz-hero-signal .dz-node{position:absolute;right:9%;top:16%;width:12px;height:12px;background:var(--dz-accent);box-shadow:0 0 0 7px rgba(var(--dz-accent-rgb),.14);animation:dz-node-pulse 3.6s ease-in-out infinite}
.dz-hero-signal .dz-node.n2{right:24%;top:72%;width:7px;height:7px;animation-delay:-1.7s}
.dz-hero-signal .dz-cross{position:absolute;right:16%;top:40%;width:42px;height:42px;border:1px solid rgba(17,16,15,.24);transform:rotate(45deg)}
.dz-hero-signal .dz-cross:before,.dz-hero-signal .dz-cross:after{content:"";position:absolute;background:var(--dz-accent)}
.dz-hero-signal .dz-cross:before{width:20px;height:2px;left:10px;top:19px}.dz-hero-signal .dz-cross:after{width:2px;height:20px;left:19px;top:10px}
.dz-hero-meta{position:absolute;right:max(var(--pad,25px),4vw);bottom:22px;z-index:4;display:flex;align-items:center;gap:10px;font:800 8px/1 monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;color:currentColor;opacity:.62}
.dz-hero-meta i{display:block;width:6px;height:6px;background:var(--dz-accent);box-shadow:0 0 0 4px rgba(var(--dz-accent-rgb),.18);animation:dz-meta-pulse 2.4s ease-in-out infinite}
.home-hero>.hero-copy,.home-hero>.hero-machine,.detail-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.category-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.page-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.about-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.work-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.hire-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.agency-hero>*:not(.dz-hero-signal):not(.dz-hero-meta),.contact-hero>*:not(.dz-hero-signal):not(.dz-hero-meta){position:relative;z-index:1}
.hero-machine .dz-hero-meta{color:var(--paper,#f2efe8)}

/* ---------- section reveal / vertical rhythm ---------- */
html.dz-motion-ready .dz-reveal{opacity:0;transform:translateY(34px);clip-path:inset(0 0 20px 0);transition:opacity .8s var(--dz-motion-ease),transform .8s var(--dz-motion-ease),clip-path .8s var(--dz-motion-ease)}
html.dz-motion-ready .dz-reveal.is-visible{opacity:1;transform:none;clip-path:inset(0)}
html.dz-motion-ready .dz-reveal[data-dz-delay="1"]{transition-delay:.05s}html.dz-motion-ready .dz-reveal[data-dz-delay="2"]{transition-delay:.1s}
.section-title{position:relative}
.section-title:after{content:"";position:absolute;left:var(--pad);bottom:28px;width:clamp(72px,10vw,150px);height:3px;background:linear-gradient(90deg,var(--dz-accent) 0 37%,var(--ink,#11100f) 37% 40%,transparent 40%);transform-origin:left;transform:scaleX(.15);opacity:.35;transition:transform .9s var(--dz-motion-ease),opacity .9s var(--dz-motion-ease)}
.dz-section-active .section-title:after,.section-title.dz-section-active:after{transform:scaleX(1);opacity:1}
.section-title h2{position:relative;text-wrap:balance}
.section-title small,.section-no{transition:color .35s var(--dz-motion-ease)}
.dz-section-active .section-title small,.dz-section-active .section-no{color:var(--dz-accent)}

/* ---------- cards: signal spotlight + engineered edge ---------- */
.dz-card{position:relative!important;isolation:isolate;overflow:hidden}
.dz-card>*:not(.dz-card-glow):not(.dz-card-signal){position:relative;z-index:1}
.dz-card-glow{position:absolute;z-index:0;pointer-events:none;width:320px;height:320px;left:calc(var(--dz-mx,50%) - 160px);top:calc(var(--dz-my,50%) - 160px);opacity:0;border-radius:50%;background:radial-gradient(circle,rgba(var(--dz-accent-rgb),.2),rgba(var(--dz-accent-rgb),.07) 35%,transparent 70%);transition:opacity .32s var(--dz-motion-ease)}
.dz-card-signal{position:absolute!important;z-index:3!important;pointer-events:none;right:0;top:0;width:4px;height:0;background:var(--dz-accent);transition:height .4s var(--dz-motion-ease)}
.dz-card:hover .dz-card-glow,.dz-card:focus-within .dz-card-glow{opacity:1}.dz-card:hover .dz-card-signal,.dz-card:focus-within .dz-card-signal{height:100%}
.dz-card svg{transition:transform .3s var(--dz-motion-ease)}.dz-card:hover svg{transform:translateX(4px)}
.atlas-row.dz-card:hover,.service-line.dz-card:hover{padding-left:calc(var(--pad) + 6px)}

/* ---------- image / diagram behaviour ---------- */
.service-visual,.detail-signal,.category-visual,.about-machine,.work-visual,.start-svg-frame,.intent-visual{position:relative;isolation:isolate}
.service-visual:after,.detail-signal:after,.category-visual:after,.about-machine:after,.work-visual:after{content:"DZ / LIVE SYSTEM";position:absolute;right:10px;bottom:10px;padding:6px 8px;background:var(--ink,#11100f);color:var(--paper,#f2efe8);font:800 7px/1 monospace;letter-spacing:.1em;opacity:.74;pointer-events:none}
.service-visual img,.detail-signal img,.category-visual img,.work-visual img{transition:transform .7s var(--dz-motion-ease),filter .7s var(--dz-motion-ease)}
.service-visual:hover img,.detail-signal:hover img,.category-visual:hover img,.work-visual:hover img{transform:scale(1.018);filter:contrast(1.03)}

/* ---------- enhanced component language ---------- */
.primary a,.nav-services,.text-link{transition:color .25s var(--dz-motion-ease)}
.primary a:hover,.nav-services:hover,.text-link:hover{color:var(--dz-accent)}
.button,.contact-link,.start-button{position:relative;overflow:hidden;isolation:isolate}
.button:before,.contact-link:before,.start-button:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.3) 48%,transparent 54%);transform:translateX(-130%);transition:transform .7s var(--dz-motion-ease)}
.button:hover:before,.contact-link:hover:before,.start-button:hover:before{transform:translateX(130%)}
.button svg,.contact-link svg,.start-button svg{transition:transform .25s var(--dz-motion-ease)}
.button:hover svg,.contact-link:hover svg,.start-button:hover svg{transform:translateX(5px)}

/* FAQs / forms / configurator */
.faq-row,.config-options label,.brief-form label,.contact-form label{position:relative}
.faq-row:before,.config-options label:before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--dz-accent);transition:width .24s var(--dz-motion-ease)}
.faq-row:hover:before,.config-options label:hover:before,.config-options label:has(input:checked):before{width:4px}
.config-progress span.active{position:relative;overflow:hidden}.config-progress span.active:after{content:"";position:absolute;left:-35%;bottom:0;width:35%;height:3px;background:var(--dz-accent);animation:dz-config-scan 1.7s ease-in-out infinite}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(var(--dz-accent-rgb),.16);outline-color:var(--dz-accent)!important}

/* About founder: bring existing signature system to life without changing layout */
.about-founder .founder-identity:after{animation:dz-founder-signal 10s ease-in-out infinite alternate}
.about-founder .founder-mark:before{animation:dz-founder-line 4s ease-in-out infinite alternate}
.about-founder .founder-mark:after{animation:dz-founder-line-y 4.6s ease-in-out infinite alternate}

/* Work / blueprint / editorial typography */
.work-piece h3,.insight-card h2,.industry-directory h3,.talent-directory h3,.module-cards h3,.trust-grid h2{transition:letter-spacing .35s var(--dz-motion-ease)}
.work-piece:hover h3,.insight-card:hover h2,.industry-directory a:hover h3,.talent-directory a:hover h3,.module-cards article:hover h3,.trust-grid article:hover h2{letter-spacing:-.06em}
.work-piece,.insight-card,.trust-grid article,.module-cards article,.article-body>div{background-image:linear-gradient(135deg,rgba(var(--dz-accent-rgb),0) 0 78%,rgba(var(--dz-accent-rgb),.055) 78% 100%)}

/* ---------- header micro-state ---------- */
.site-head{transition:box-shadow .35s var(--dz-motion-ease),background-color .35s var(--dz-motion-ease)}
body.dz-has-scrolled .site-head{box-shadow:0 8px 28px rgba(17,16,15,.055)}
.head-line{position:relative}.head-line:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--dz-progress,0%);background:var(--dz-accent);transition:width 80ms linear}

/* ---------- start landing additive treatment ---------- */
.start-page{--dz-accent:#ff512b;--dz-accent-rgb:255,81,43}
.start-page .start-section{position:relative}
.start-page .section-head:after{content:"";display:block;width:90px;height:3px;margin-top:22px;background:linear-gradient(90deg,var(--dz-accent),var(--dz-accent) 55%,transparent 55%)}
.start-page .quick-links a,.start-page .capability-card,.start-page .intent-choice,.start-page .route-card{transition:transform .3s var(--dz-motion-ease),box-shadow .3s var(--dz-motion-ease),background-color .3s var(--dz-motion-ease)}
.start-page .quick-links a:hover,.start-page .capability-card:hover,.start-page .route-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink,#11100f)}

@keyframes dz-track-flow{0%{transform:translate3d(10%,0,0) rotate(-24deg)}50%{transform:translate3d(-8%,0,0) rotate(-24deg)}100%{transform:translate3d(10%,0,0) rotate(-24deg)}}
@keyframes dz-node-pulse{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.25);opacity:1}}
@keyframes dz-meta-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes dz-config-scan{0%{transform:translateX(0)}100%{transform:translateX(390%)}}
@keyframes dz-founder-signal{0%{transform:rotate(30deg) translateY(-2%)}100%{transform:rotate(30deg) translateY(2%)}}
@keyframes dz-founder-line{0%{transform:translateX(-8px)}100%{transform:translateX(18px)}}
@keyframes dz-founder-line-y{0%{transform:translateY(8px)}100%{transform:translateY(-14px)}}

@media(max-width:1050px){
  .dz-signal-rail{display:none}.dz-pointer-field{display:none}.dz-hero-meta{right:var(--pad,25px);bottom:14px}
  .dz-hero-signal{opacity:.34}.dz-hero-signal .dz-cross{right:8%}
}
@media(max-width:720px){
  .dz-hero-signal{opacity:.22}.dz-hero-signal:before{background-size:28px 28px}.dz-hero-signal .dz-track{width:110%;right:-55%}.dz-hero-signal .dz-cross{display:none}.dz-hero-meta{font-size:7px;bottom:10px;opacity:.52}
  .section-title:after{bottom:18px}
  .dz-card-glow,.dz-card-signal{display:none}.atlas-row.dz-card:hover,.service-line.dz-card:hover{padding-left:var(--pad)}
  .service-visual:after,.detail-signal:after,.category-visual:after,.about-machine:after,.work-visual:after{font-size:6px;padding:5px 6px}
}
@media(pointer:coarse){.dz-pointer-field{display:none}.dz-card-glow{display:none}}
@media(prefers-reduced-motion:reduce){
  html.dz-motion-ready .dz-reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .dz-hero-signal .dz-track,.dz-hero-signal .dz-node,.dz-hero-meta i,.config-progress span.active:after,.about-founder .founder-identity:after,.about-founder .founder-mark:before,.about-founder .founder-mark:after{animation:none!important}
  .dz-pointer-field{display:none!important}.dz-card-glow{display:none!important}
  .button:before,.contact-link:before,.start-button:before{display:none!important}
}
