/* ==========================================================
   Dynatrace case study extras (utility/dynatrace.html)
   Builds on case-study.css · behaviour: js/dynatrace.js
   ========================================================== */
.cs{--dt-violet:#5b4ff0;--dt-deep:#1b1446;--dt-soft:#efedff;--dt-ink:#2a1f7a}

/* scroll reveal (only when JS + motion allowed) */
.dt-anim .dt-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.dt-anim .dt-reveal.in{opacity:1;transform:none}

/* small helpers */
.dt-chips span{background:var(--dt-soft);color:var(--dt-ink)}
.dt-red .cs-chips span{background:#fdecea;color:#9b2c22}
.dt-round{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--dt-soft);color:var(--dt-ink);margin-bottom:.9rem}
.dt-round.r1{background:#ecebe8;color:#57524d}

/* two rounds timeline */
.dt-rounds{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);align-items:stretch;margin:2rem 0}
.dt-rounds>div{border-radius:22px;padding:1.5rem;background:var(--cs-soft)}
.dt-rounds>div.mid{background:#fdecea}
.dt-rounds>div.end{background:var(--dt-deep)}
.dt-rounds>div.end h4,.dt-rounds>div.end .cs-k{color:#fff}
.dt-rounds>div.end p{color:rgba(255,255,255,.72)}
.dt-rounds>.ar{background:none;padding:0;display:grid;place-items:center;color:var(--dt-violet);font-size:1.5rem}
.dt-rounds p{font-size:1rem!important;margin:0}
.dt-rounds .cs-k{color:var(--dt-violet)}
.dt-rounds .mid .cs-k{color:#b8382b}

/* journey */
.dt-journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:2rem 0 0;counter-reset:j}
.dt-journey>div{position:relative;border-radius:18px;padding:1.1rem 1rem 1.2rem;background:var(--cs-soft);counter-increment:j}
.dt-journey>div::before{content:counter(j);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dt-violet);color:#fff;font-size:.78rem;font-weight:700;margin-bottom:.7rem}
.dt-journey h4{font-size:1rem}
.dt-journey p{font-size:.92rem!important;line-height:1.45;margin:0 0 .6rem}
.dt-journey .pain,.dt-journey .opp{display:block;font-size:.85rem;line-height:1.4;padding:.5rem .6rem;border-radius:10px;margin-top:.4rem}
.dt-journey .pain{background:#fdecea;color:#8a2a20}
.dt-journey .opp{background:var(--dt-soft);color:var(--dt-ink)}
.dt-journey .pain b,.dt-journey .opp b{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}

/* information architecture tree */
.dt-ia{margin:2rem 0 0;padding:2rem;border-radius:24px;background:linear-gradient(150deg,#f3f1ff 0%,#f6f5f2 70%)}
.dt-ia-root{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:14px;background:var(--dt-deep);color:#fff;font-weight:600}
.dt-ia-root i{width:10px;height:10px;border-radius:3px;background:#8f86ff}
.dt-ia-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;margin-top:1.25rem;position:relative;padding-top:1.25rem}
.dt-ia-cols::before{content:"";position:absolute;left:6%;right:6%;top:0;height:1px;background:#cfcaf6}
.dt-ia-cols>div{position:relative;background:#fff;border:1px solid #e3e0fb;border-radius:14px;padding:.8rem .75rem}
.dt-ia-cols>div::before{content:"";position:absolute;left:50%;top:-1.25rem;height:1.25rem;width:1px;background:#cfcaf6}
.dt-ia-cols b{display:block;font-size:.88rem;color:var(--cs-ink);line-height:1.25;margin-bottom:.45rem}
.dt-ia-cols ul{list-style:none;padding:0;margin:0;font-size:.78rem!important;line-height:1.35}
.dt-ia-cols li{margin:0 0 .25rem;color:var(--cs-gray)}
.dt-ia-cols>div.focus{border-color:var(--dt-violet);box-shadow:0 0 0 3px rgba(91,79,240,.15)}
.dt-ia-cols>div.focus b{color:var(--dt-violet)}
.dt-ia-cols>div.focus li.k{color:var(--cs-ink);font-weight:600}
.dt-ia-note{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.25rem;font-size:.9rem;color:var(--cs-gray)}
.dt-ia-note span{display:inline-flex;align-items:center;gap:.45rem}
.dt-ia-note i{display:inline-block;width:12px;height:12px;border-radius:4px;border:2px solid var(--dt-violet)}

/* dashboard tiers */
.dt-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0}
.dt-tiers>div{border-radius:20px;padding:1.4rem;background:var(--cs-soft);border-top:4px solid var(--c,#5b4ff0)}
.dt-tiers p{font-size:1rem!important;margin:0}
.dt-tiers .cs-k{color:var(--c,#5b4ff0)}

/* desktop state explorer */
.dt-explore{margin-top:2rem}
.dt-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.dt-tabs button{font:500 .9rem/1 "DM Sans",Raleway,sans-serif;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--cs-line);background:#fff;color:var(--cs-ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dt-tabs button:hover{border-color:var(--dt-violet)}
.dt-tabs button[aria-selected="true"]{background:var(--dt-violet);border-color:var(--dt-violet);color:#fff}
.dt-stage{position:relative;border:1px solid var(--cs-line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -40px rgba(27,20,70,.45)}
.dt-stage img{display:block;width:100%;height:auto}
.dt-stage img+img{position:absolute;inset:0}
.dt-stage img{opacity:0;transition:opacity .45s ease}
.dt-stage img.on{opacity:1}
.dt-stage img:first-child{position:relative}
.dt-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;margin-top:1rem;padding:1rem 1.2rem;border-radius:16px;background:var(--dt-soft);min-height:4.6rem}
.dt-note b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--dt-violet);color:#fff;font-size:.85rem}
.dt-note p{font-size:1rem!important;color:var(--dt-ink)!important;margin:0!important}
.dt-auto{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;font:500 .85rem/1 "DM Sans",sans-serif;color:var(--cs-gray);background:none;border:0;cursor:pointer;padding:.65rem .4rem}
.dt-auto i{width:8px;height:8px;border-radius:50%;background:#bdb8f6}
.dt-auto[aria-pressed="true"] i{background:var(--dt-violet);animation:dt-blink 1.2s ease-in-out infinite}
@keyframes dt-blink{50%{opacity:.3}}

/* cards vs table verdict */
.dt-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0}
.dt-vs>div{border-radius:20px;padding:1.4rem;border:1px solid var(--cs-line);background:#fff}
.dt-vs .plus,.dt-vs .minus{display:block;font-size:.98rem;line-height:1.45;padding-left:1.4rem;position:relative;margin-top:.4rem;color:var(--cs-gray)}
.dt-vs .plus::before{content:"+";position:absolute;left:0;color:var(--cs-green);font-weight:700}
.dt-vs .minus::before{content:"–";position:absolute;left:0;color:#c0392b;font-weight:700}

/* contrast chart */
.dt-contrast{margin-top:2rem;padding:1.75rem;border-radius:24px;background:var(--cs-soft)}
.dt-bars{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.55rem;align-items:end;height:220px;padding-top:1rem}
.dt-bars>div:not(.dt-line){position:relative;z-index:1;height:calc(var(--v) / 12 * 100%);border-radius:10px 10px 4px 4px;background:var(--dt-violet);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.dt-bars>div.lg{background:#b3acf8}
.dt-bars>div:not(.dt-line) span{position:absolute;left:0;right:0;top:.55rem;text-align:center;font-size:.78rem;font-weight:700;color:#fff}.dt-bars>div.lg span{color:#2d2580}
.dt-anim .dt-contrast:not(.in) .dt-bars>div:not(.dt-line){transform:scaleY(0)}
.dt-bars>.dt-line{position:absolute;left:0;right:0;bottom:calc(4.5 / 12 * (100% - 1rem));border-top:1.5px dashed #c0392b;z-index:0;pointer-events:none}
.dt-line span{position:absolute;right:0;top:-1.4rem;font-size:.72rem;font-weight:600;color:#c0392b;background:var(--cs-soft);padding:0 .3rem}
.dt-legend{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;margin-top:1.1rem;font-size:.9rem;color:var(--cs-gray)}
.dt-legend span{display:inline-flex;align-items:center;gap:.45rem}
.dt-legend i{width:12px;height:12px;border-radius:4px;background:var(--dt-violet)}
.dt-legend i.lg{background:#b3acf8}

/* ---------- phones ---------- */
.dt-phone{position:relative;width:324px;max-width:100%;margin:0 auto;padding:12px;border-radius:46px;background:#1e1b2e;box-shadow:0 40px 70px -40px rgba(27,20,70,.6),inset 0 0 0 2px #3a3550}
.dt-screen{position:relative;width:300px;max-width:100%;aspect-ratio:784/1692;border-radius:34px;overflow:hidden;background:#fff;font-family:"DM Sans",Arial,sans-serif;color:#1d1b2b;-webkit-font-smoothing:antialiased}

/* ---------- interactive prototype ---------- */
.dt-proto{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3rem;align-items:start;margin-top:2.5rem;padding:2.5rem;border-radius:28px;background:linear-gradient(150deg,#ecebff 0%,#f6f5f2 55%,#f3eefe 100%)}
.dt-view{position:absolute;inset:0;display:none;flex-direction:column;background:#fff}
.dt-view.on{display:flex;animation:dt-in .35s ease}
.dt-view.back.on{animation-name:dt-in-back}
.dt-view.up.on{animation:none}
.dt-view.up.on .dt-sheet{animation:dt-up .4s cubic-bezier(.2,.8,.2,1)}
@keyframes dt-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes dt-in-back{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes dt-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
.dt-shot{position:relative;width:100%;height:100%}
.dt-shot>img{display:block;width:100%;height:100%;object-fit:cover}
.dt-sheet{position:absolute;inset:0}
.dt-sheet>img{display:block;width:100%;height:100%;object-fit:cover}
.dt-hot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:8px;padding:0}
.dt-hot:focus-visible{outline:2px solid var(--dt-violet);outline-offset:1px}
.dt-hints .dt-hot{box-shadow:0 0 0 2px rgba(91,79,240,.8);animation:dt-pulse 1.6s ease-in-out infinite}
@keyframes dt-pulse{0%,100%{box-shadow:0 0 0 2px rgba(91,79,240,.85)}50%{box-shadow:0 0 0 5px rgba(91,79,240,.25)}}
.dt-rec{position:absolute;left:40.8%;top:87.7%;width:20%;height:9.2%;border-radius:50%;pointer-events:none}
.dt-rec::before,.dt-rec::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(91,79,240,.6);animation:dt-ring 1.6s ease-out infinite}
.dt-rec::after{animation-delay:.8s}
@keyframes dt-ring{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
.dt-timer{position:absolute;left:0;right:0;top:54.1%;text-align:center;font:500 11px/1 "DM Sans",sans-serif;color:var(--dt-violet);letter-spacing:.02em}
.dt-timer span{display:inline-block;background:#fff;padding:2px 14px;border-radius:4px;font-variant-numeric:tabular-nums}
.dt-wave{position:absolute;left:0;right:0;top:58.9%;height:11.9%;overflow:hidden;pointer-events:none;background:#fff}
.dt-wave i{position:absolute;top:50%;width:2px;border-radius:2px;background:var(--dt-violet);transform:translateY(-50%);animation:dt-wv .9s ease-in-out infinite alternate}
@keyframes dt-wv{from{height:12%}to{height:var(--h,80%)}}
.dt-spin{position:absolute;left:34%;top:55.4%;width:32%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center}
.dt-spin::after{content:"";width:58%;aspect-ratio:1;border-radius:50%;border:4px solid #dedbfd;border-top-color:var(--dt-violet);animation:dt-rot .8s linear infinite}
@keyframes dt-rot{to{transform:rotate(360deg)}}

/* HTML search view inside the phone */
.dt-sv{position:absolute;inset:0;display:flex;flex-direction:column;background:#f7f7fb}
.dt-sv-top{flex:0 0 auto;background:#fff;padding:36px 12px 10px;box-shadow:0 1px 0 #ececf3}
.dt-sv-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--dt-violet);margin-bottom:10px}
.dt-sv-brand i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#8f86ff,#5b4ff0)}
.dt-sv-row{display:flex;align-items:center;gap:6px}
.dt-sv-back{flex:0 0 30px;height:30px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:#3b3852}
.dt-sv-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dt-sv-field{flex:1;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;border:1.5px solid var(--dt-violet);background:#fff}
.dt-sv-field svg{flex:0 0 14px;width:14px;height:14px;stroke:#6f6b85;fill:none;stroke-width:2}
.dt-sv-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 13px/1 "DM Sans",sans-serif;color:#1d1b2b;padding:0}
.dt-sv-field button{border:0;background:transparent;color:#8a86a0;font-size:14px;cursor:pointer;padding:0 2px}
.dt-sv-chips{display:flex;gap:5px;overflow-x:auto;margin-top:9px;scrollbar-width:none}
.dt-sv-chips::-webkit-scrollbar{display:none}
.dt-sv-chips button{flex:0 0 auto;font:600 9px/1 "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid #d9d6ea;background:#fff;color:#3b3852;cursor:pointer}
.dt-sv-chips button.on{background:var(--dt-violet);border-color:var(--dt-violet);color:#fff}
.dt-sv-list{flex:1;overflow-y:auto;padding:8px 10px 60px;scrollbar-width:thin}
.dt-sv-meta{font-size:10px;color:#6f6b85;margin:4px 2px 8px}
.dt-pt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;border:0;background:#fff;border-radius:12px;padding:9px 10px;margin-bottom:6px;box-shadow:0 1px 0 #ececf3,0 4px 10px -8px rgba(27,20,70,.35);cursor:pointer;font-family:inherit;color:inherit}
.dt-pt:hover{box-shadow:0 0 0 1.5px var(--dt-violet)}
.dt-pt .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#efedff;color:var(--dt-violet);font-size:10px;font-weight:700}
.dt-pt .nm{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-pt .sub{display:block;font-size:10px;color:#6f6b85;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-pt .dob{font-size:10px;color:#6f6b85;text-align:right;line-height:1.3}
.dt-pt .dob b{display:block;font-size:8.5px;letter-spacing:.06em;color:var(--dt-violet)}
.dt-pt mark{background:#dedbfd;color:var(--dt-ink);border-radius:3px;padding:0 1px}
.dt-sv-empty{text-align:center;font-size:12px;color:#6f6b85;padding:30px 10px}
.dt-sv-tabs{position:absolute;left:0;right:0;bottom:0;height:9.3%}
.dt-sv-tabs img{display:block;width:100%;height:100%;object-fit:cover;object-position:bottom}

/* toast */
.dt-toast{position:absolute;left:50%;bottom:14%;z-index:9;transform:translate(-50%,16px);opacity:0;background:#1d1b2b;color:#fff;font-size:12px;padding:10px 16px;border-radius:20px;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .25s;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.dt-toast.show{opacity:1;transform:translate(-50%,0)}

/* prototype side panel */
.dt-panel h3{margin-bottom:.5rem}
.dt-panel>p{font-size:1rem}
.dt-tasks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
.dt-tasks li{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border-radius:16px;padding:.9rem 1rem;margin:0;font-size:1rem;line-height:1.45;border:1px solid var(--cs-line);transition:border-color .25s,background .25s}
.dt-tasks li i{font-style:normal;flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cs-soft);color:var(--cs-ink);font-size:.75rem;font-weight:700;transition:background .25s,color .25s}
.dt-tasks li b{display:block;color:var(--cs-ink);font-weight:600}
.dt-tasks li.done{border-color:#d9d5fb;background:#f6f5ff}
.dt-tasks li.done i{background:var(--dt-violet);color:#fff}
.dt-tasks li.done i{font-size:0}.dt-tasks li.done i::after{content:"\2713";font-size:.8rem}.dt-tasks li.done b{color:var(--dt-violet)}
.dt-progress{display:flex;gap:6px;margin:1.5rem 0 .5rem}
.dt-progress span{flex:1;height:6px;border-radius:6px;background:#e3dfd9;transition:background .3s}
.dt-progress span.on{background:var(--dt-violet)}
.dt-where{font-size:.9rem;color:var(--cs-gray)}
.dt-where b{color:var(--cs-ink)}
.dt-ctrl{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.dt-ctrl button,.dt-ctrl a{font:500 .9rem/1 "DM Sans",Raleway,sans-serif;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--cs-ink);background:#fff;color:var(--cs-ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.dt-ctrl button:hover,.dt-ctrl a:hover{background:var(--cs-ink);color:#fff}
.dt-ctrl button[aria-pressed="true"]{background:var(--cs-ink);color:#fff}
.dt-proto [hidden]{display:none!important}

/* phone figures */
.dt-phones .cs-fig .frame{background:#f3f2fb;max-width:300px;margin:0 auto}
.dt-phones .cs-fig figcaption{max-width:300px;margin-left:auto;margin-right:auto}
.cs-flow.dt-flow{background:linear-gradient(135deg,#5b4ff0,#2a1f7a)}
.cs-flow.dt-flow .ph i{color:var(--dt-violet)}

/* metrics */
.dt-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0}
.dt-metrics>div{border:1px dashed #cfcaf6;border-radius:18px;padding:1.25rem 1.4rem}
.dt-metrics h4{margin-bottom:.3rem}
.dt-metrics p{font-size:1rem;margin:0}

/* related work: three cards */
.dt-port{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-column-gap:1.5rem}
.dt-port>div{grid-area:auto!important}

@media (max-width:991px){
  .dt-proto{grid-template-columns:1fr;padding:1.5rem}
  .dt-port{grid-template-columns:1fr!important}
  .dt-journey{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-ia-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dt-ia-cols::before,.dt-ia-cols>div::before{display:none}
  .dt-rounds{grid-template-columns:1fr;gap:.25rem}
  .dt-rounds>.ar{transform:rotate(90deg);height:40px}
  .dt-tiers{grid-template-columns:1fr}
}
@media (max-width:600px){
  .dt-metrics,.dt-vs,.dt-journey{grid-template-columns:1fr}
  .dt-ia{padding:1.25rem}
  .dt-ia-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-proto{padding:1rem;border-radius:22px}
  .dt-phone{padding:10px;border-radius:42px}
  .dt-bars{gap:.3rem;height:180px}
  .dt-bars>div:not(.dt-line) span{font-size:.6rem}
  .dt-contrast{padding:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .dt-view.on,.dt-view.up.on .dt-sheet{animation:none}
  .dt-hints .dt-hot,.dt-rec::before,.dt-rec::after,.dt-wave i,.dt-auto i{animation:none}
  .dt-stage img,.dt-bars>div:not(.dt-line){transition:none}
}

/* ---------- hero: browser + phone mockup ---------- */
.image-wrapper.start:has(.dt-hero){height:auto;overflow:visible}
.dt-hero{--mx:0;--my:0;position:relative;width:100%;height:clamp(420px,46vw,640px);border-radius:1.75rem;overflow:hidden;isolation:isolate;
  background:radial-gradient(110% 90% at 85% 5%,#5b4ff0 0%,rgba(91,79,240,0) 55%),radial-gradient(70% 70% at 5% 100%,#3a2fa8 0%,rgba(58,47,168,0) 60%),linear-gradient(160deg,#241a63 0%,#120d33 100%);
  box-shadow:0 30px 80px -30px rgba(18,13,51,.6)}
.dt-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.dt-hero-glow{position:absolute;width:44%;aspect-ratio:1;left:34%;top:30%;border-radius:50%;background:radial-gradient(circle,rgba(167,155,255,.55),rgba(167,155,255,0) 65%);filter:blur(30px);z-index:-1}
.dt-hero-tilt{position:absolute;inset:0;perspective:2200px;display:flex;align-items:center;justify-content:center}
.dt-hero-row{position:relative;width:min(74%,900px);transform-style:preserve-3d;
  transform:translate(-4%,2%) rotateX(calc(18deg + var(--my)*-4deg)) rotateY(calc(-16deg + var(--mx)*6deg)) rotateZ(4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dt-win{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),-30px 50px 80px -30px rgba(5,3,20,.7);animation:dtFloat 8s ease-in-out infinite}
.dt-win img{display:block;width:100%;height:auto;aspect-ratio:2000/1194;object-fit:cover}
.dt-hp{position:absolute;right:-9%;bottom:-16%;width:25%;padding:1.2%;border-radius:18%/8.5%;background:linear-gradient(145deg,#3a3550 0%,#141220 45%,#2a2638 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),-20px 30px 50px -14px rgba(0,0,0,.6);transform:translateZ(90px);animation:dtFloat 7s ease-in-out infinite;animation-delay:-2.5s}
.dt-hp img{display:block;width:100%;height:auto;aspect-ratio:784/1692;object-fit:cover;border-radius:15%/7%}
@keyframes dtFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.dt-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:999px;font:500 .95rem/1.2 "DM Sans",Raleway,sans-serif;color:#fff;
  background:rgba(24,18,70,.62);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);animation:dtBob 6s ease-in-out infinite;
  transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-10px))}
.dt-chip b{color:#c9c3ff;font-weight:700}
.dt-chip .ok{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#5b4ff0;font-style:normal;font-size:.8rem}
.dt-chip.c1{left:4%;top:7%}
.dt-chip.c2{left:5%;bottom:9%;animation-delay:-2s}
.dt-chip.c3{right:4%;top:8%;animation-delay:-4s}
@keyframes dtBob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:767px){
  .dt-hero{height:360px;border-radius:1.25rem}
  .dt-hero-row{width:84%;transform:translate(-5%,4%) rotateX(18deg) rotateY(-16deg) rotateZ(4deg)}
  .dt-chip{font-size:.78rem;padding:.5rem .75rem}
  .dt-chip.c3{display:none}
}
@media (prefers-reduced-motion:reduce){.dt-win,.dt-hp,.dt-chip{animation:none}.dt-hero-row{transition:none}}