/* PREDITE V5 FINAL POLISH
   Distinct scrollytelling visuals + locked work-card typography/layout.
*/

/* --- Work cards: one clean alignment system --- */
.workGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
.workCard--wide,.workCard--system{min-height:0!important}
.workContent{
  box-sizing:border-box!important;
  min-height:238px!important;
  padding:28px 30px 30px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
.workContent .workMeta{
  display:block!important;
  width:100%!important;
  padding:0!important;
  margin:0 0 12px!important;
  line-height:1.2!important;
}
.workContent h3{
  display:block!important;
  width:100%!important;
  max-width:18ch!important;
  margin:0 0 12px!important;
  padding:0!important;
  color:#101923!important;
  text-align:left!important;
  font-size:clamp(27px,2.15vw,34px)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
}
.workContent p{
  display:block!important;
  width:100%!important;
  max-width:58ch!important;
  margin:0!important;
  padding:0!important;
  color:#566573!important;
  text-align:left!important;
  font-size:14px!important;
  line-height:1.68!important;
}
.workContent .btn{
  margin:22px 0 0!important;
  align-self:flex-start!important;
}
.workCard{height:100%!important}
.workVisual{flex:0 0 430px!important}

/* --- Shared scrollytelling stage art --- */
.stageVisual{background:#f8fbfd!important}
.stageArt{position:absolute;inset:48px 0 0;overflow:hidden}
.stageArt *{box-sizing:border-box}
.artGrid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,25,35,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,25,35,.035) 1px,transparent 1px);background-size:28px 28px}
.artGlow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(47,159,244,.18),rgba(47,159,244,0) 68%);filter:blur(2px);pointer-events:none}

/* 01 — intake / signal */
.art-intake .artGlow{left:35%;top:20%}
.intakeCard{position:absolute;left:10%;top:15%;width:42%;padding:16px;border:1px solid rgba(16,25,35,.11);border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(16,25,35,.08);animation:artFloat 5s ease-in-out infinite}
.intakeLabel{font:8px var(--mono);letter-spacing:.12em;color:#168fe0;text-transform:uppercase}
.intakeMessage{margin-top:11px;font:600 17px/1.18 var(--display);letter-spacing:-.045em;color:#101923}
.intakeSub{margin-top:10px;font:9px/1.5 var(--mono);color:#758591}
.intakeSignal{position:absolute;right:13%;top:23%;width:180px;height:180px;border:1px solid rgba(47,159,244,.22);border-radius:50%;animation:artSpin 16s linear infinite}
.intakeSignal:before,.intakeSignal:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.intakeSignal:before{width:78px;height:78px;border:1px solid rgba(47,159,244,.35);box-shadow:0 0 0 14px rgba(47,159,244,.04)}
.intakeSignal:after{width:12px;height:12px;background:#2f9ff4;box-shadow:0 0 25px rgba(47,159,244,.5)}
.intakeRoute{position:absolute;left:18%;right:16%;bottom:23%;height:48px;border-top:1px solid rgba(47,159,244,.28)}
.intakeRoute:before{content:"";position:absolute;left:0;top:-3px;width:6px;height:6px;border-radius:50%;background:#2f9ff4;box-shadow:0 0 0 6px rgba(47,159,244,.08)}
.intakeRoute:after{content:"";position:absolute;right:0;top:-5px;width:9px;height:9px;border-right:1px solid #2f9ff4;border-top:1px solid #2f9ff4;transform:rotate(45deg)}
.intakeRoute span{position:absolute;top:12px;left:0;font:8px var(--mono);letter-spacing:.1em;color:#71818d;text-transform:uppercase}
.intakeRoute b{position:absolute;right:0;top:12px;font:8px var(--mono);letter-spacing:.1em;color:#168fe0}
.intakePulse{position:absolute;left:31%;bottom:22%;width:8px;height:8px;border-radius:50%;background:#2f9ff4;animation:routePulse 2.4s ease-in-out infinite}

/* 02 — conversation */
.art-dialogue .artGlow{right:20%;top:12%}
.dialogueWindow{position:absolute;left:9%;right:9%;top:12%;bottom:16%;border:1px solid rgba(16,25,35,.11);border-radius:13px;background:rgba(255,255,255,.8);box-shadow:0 18px 45px rgba(16,25,35,.07);overflow:hidden}
.dialogueHead{height:42px;border-bottom:1px solid rgba(16,25,35,.08);display:flex;align-items:center;justify-content:space-between;padding:0 15px;font:8px var(--mono);letter-spacing:.1em;color:#71818d;text-transform:uppercase}
.dialogueHead b{color:#168fe0;font-weight:500}
.bubble{position:absolute;max-width:48%;padding:11px 13px;border-radius:11px;font:10px/1.45 var(--display);box-shadow:0 10px 24px rgba(16,25,35,.05)}
.bubble.customer{left:8%;top:28%;background:#f2f7fa;color:#344653;border:1px solid rgba(16,25,35,.06)}
.bubble.ai{right:8%;top:45%;background:#eaf6ff;color:#163b55;border:1px solid rgba(47,159,244,.18);animation:bubbleLift 4s ease-in-out infinite}
.bubble.question{left:8%;top:65%;background:#fff;color:#53636f;border:1px solid rgba(16,25,35,.08)}
.replyDots{position:absolute;right:11%;top:76%;display:flex;gap:4px}.replyDots i{width:5px;height:5px;border-radius:50%;background:#2f9ff4;animation:typingDots 1.2s ease-in-out infinite}.replyDots i:nth-child(2){animation-delay:.15s}.replyDots i:nth-child(3){animation-delay:.3s}
.dialogueTag{position:absolute;right:12%;top:20%;padding:7px 9px;border:1px solid rgba(47,159,244,.18);border-radius:999px;background:#fff;color:#168fe0;font:7px var(--mono);letter-spacing:.1em}

/* 03 — automation / timeline */
.art-automation .artGlow{left:42%;top:36%}
.timeline{position:absolute;left:12%;right:12%;top:17%;bottom:18%;}
.timelineLine{position:absolute;left:13px;top:12px;bottom:12px;width:1px;background:linear-gradient(#2f9ff4 0%,rgba(47,159,244,.18) 100%);overflow:hidden}
.timelineLine:after{content:"";position:absolute;left:-1px;top:-20%;width:3px;height:42%;background:#2f9ff4;box-shadow:0 0 15px rgba(47,159,244,.45);animation:timelineRun 3.8s linear infinite}
.timeItem{position:relative;margin-bottom:18px;padding-left:42px}
.timeDot{position:absolute;left:8px;top:3px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #2f9ff4;box-shadow:0 0 0 5px rgba(47,159,244,.07)}
.timeItem:last-child .timeDot{background:#2f9ff4}
.timeItem small{display:block;font:7px var(--mono);letter-spacing:.1em;color:#168fe0;text-transform:uppercase}.timeItem strong{display:block;margin-top:4px;font:600 14px var(--display);letter-spacing:-.035em;color:#101923}.timeItem span{display:block;margin-top:4px;font:8px var(--mono);color:#7b8a95}
.scheduleBadge{position:absolute;right:10%;bottom:16%;padding:10px 12px;border-left:2px solid #2f9ff4;background:rgba(255,255,255,.86);font:7px var(--mono);letter-spacing:.08em;color:#73828d}.scheduleBadge b{display:block;margin-top:4px;color:#101923;font-size:10px}

/* 04 — handoff / job ticket */
.art-handoff .artGlow{right:17%;top:28%}
.jobTicket{position:absolute;left:11%;top:12%;width:53%;padding:16px;border:1px solid rgba(16,25,35,.11);border-radius:13px;background:#fff;box-shadow:0 20px 50px rgba(16,25,35,.08);transform:rotate(-1deg);animation:ticketFloat 5.5s ease-in-out infinite}
.jobTicketHead{display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:.1em;color:#71818d}.jobTicketHead b{color:#168fe0}
.jobTicket h3{margin:13px 0 4px;font:600 22px/1 var(--display);letter-spacing:-.05em;color:#101923}.jobTicket p{margin:0 0 13px;font:9px/1.5 var(--mono);color:#71818d}
.ticketRows{border-top:1px solid rgba(16,25,35,.07)}.ticketRows span{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(16,25,35,.07);font:8px var(--mono);color:#7b8993}.ticketRows b{color:#101923;font-weight:500}
.handoffStack{position:absolute;right:9%;top:18%;width:25%;display:grid;gap:10px}.handoffChip{padding:11px;border:1px solid rgba(16,25,35,.1);border-radius:9px;background:rgba(255,255,255,.86);box-shadow:0 10px 25px rgba(16,25,35,.06);font:7px var(--mono);letter-spacing:.06em;color:#778691}.handoffChip b{display:block;margin-top:5px;font:600 12px var(--display);letter-spacing:-.03em;color:#101923}.handoffChip.active{border-color:rgba(47,159,244,.3)}

/* 05 — insight / optimization */
.art-insight .artGlow{left:50%;top:32%;transform:translateX(-50%)}
.metricTop{position:absolute;left:10%;right:10%;top:12%;display:flex;justify-content:space-between;align-items:end}.metricTop small{font:7px var(--mono);letter-spacing:.1em;color:#758591}.metricTop strong{display:block;margin-top:4px;font:650 27px var(--display);letter-spacing:-.06em;color:#101923}.metricTop b{font:8px var(--mono);color:#168fe0}
.chart{position:absolute;left:10%;right:10%;top:35%;height:43%;border-left:1px solid rgba(16,25,35,.08);border-bottom:1px solid rgba(16,25,35,.08);background-image:linear-gradient(rgba(16,25,35,.03) 1px,transparent 1px);background-size:100% 25%}.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chart path{fill:none;stroke:#2f9ff4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:280;stroke-dashoffset:280;animation:drawChart 3.8s ease-in-out infinite}.chart circle{fill:#fff;stroke:#2f9ff4;stroke-width:2}
.metricChips{position:absolute;left:10%;right:10%;bottom:12%;display:flex;gap:8px}.metricChip{flex:1;padding:9px;border:1px solid rgba(16,25,35,.09);background:rgba(255,255,255,.8);font:7px var(--mono);color:#778691}.metricChip b{display:block;margin-top:4px;color:#101923;font-size:10px}

@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes artSpin{to{transform:rotate(360deg)}}
@keyframes routePulse{0%,100%{transform:translateX(0);box-shadow:0 0 0 0 rgba(47,159,244,.2)}50%{transform:translateX(150px);box-shadow:0 0 0 7px rgba(47,159,244,.06)}}
@keyframes bubbleLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes typingDots{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes timelineRun{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
@keyframes ticketFloat{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(.5deg) translateY(-5px)}}
@keyframes drawChart{0%{stroke-dashoffset:280}55%,100%{stroke-dashoffset:0}}

@media(max-width:900px){
  .workGrid{grid-template-columns:1fr!important}
  .workVisual{flex-basis:410px!important}
  .workContent{min-height:0!important}
}
@media(max-width:650px){
  .workVisual{flex-basis:365px!important}
  .workContent{padding:22px 20px 24px!important}
  .workContent h3{font-size:27px!important;max-width:16ch!important}
  .stageArt{inset:42px 0 0}
  .intakeCard{left:7%;width:55%;padding:12px}.intakeMessage{font-size:14px}.intakeSignal{right:5%;width:130px;height:130px}
  .dialogueWindow{left:5%;right:5%}.bubble{max-width:58%}.handoffStack{right:5%;width:29%}.jobTicket{left:6%;width:60%}
  .metricTop{left:6%;right:6%}.chart{left:6%;right:6%}.metricChips{left:6%;right:6%}
}
@media(prefers-reduced-motion:reduce){.stageArt *{animation:none!important}.chart path{stroke-dashoffset:0}}