.dlm, .dlm * { box-sizing:border-box; }
.dlm{
  --accent:#765cd6;
  --ink:#0b0c10;
  --muted:#2a2e3a;
  --border:rgba(0,0,0,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-sm:0 6px 20px rgba(0,0,0,.06);
  --shadow-md:0 16px 34px rgba(0,0,0,.12);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:#fff; color:var(--ink); font-weight:420; overflow-x:hidden;
}
.dlm-wrap{ position:relative; max-width:1200px; margin:0 auto; padding:clamp(26px,6vw,56px); }
.dlm-wrap > * + *{ margin-top:clamp(34px,6.5vw,74px); }
.dlm p{ line-height:1.8; }


.dlm-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(140px 90px at 12% 18%, rgba(118,92,214,.06), transparent 60%),
    radial-gradient(140px 90px at 88% 82%, rgba(86,162,255,.05), transparent 60%);
}
.dlm-bg::before{
  content:""; position:absolute; inset:-50%;
  background:
    linear-gradient(to right, rgba(118,92,214,.06) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, rgba(118,92,214,.06) 1px, transparent 1px) 0 0/40px 40px;
  animation: dlmGridPan 80s linear infinite;
}
@keyframes dlmGridPan{ to{ transform: translate3d(40px,40px,0) } }


.dlm-blob{
  position:absolute; border-radius:50%; filter: blur(24px); opacity:.22; mix-blend-mode:multiply; will-change: transform, opacity;
}
.dlm-blob--1{ width:420px;height:420px; background:radial-gradient(circle at 30% 30%, rgba(118,92,214,.6), rgba(118,92,214,0) 60%); left:-120px; top:10%; animation: dlmBlobA 55s var(--ease) infinite alternate; }
.dlm-blob--2{ width:380px;height:380px; background:radial-gradient(circle at 70% 60%, rgba(86,162,255,.55), rgba(86,162,255,0) 60%); right:-140px; top:55%; animation: dlmBlobB 65s var(--ease) infinite alternate; }
.dlm-blob--3{ width:320px;height:320px; background:radial-gradient(circle at 40% 50%, rgba(118,92,214,.5), rgba(118,92,214,0) 60%); left:55%; top:-120px; animation: dlmBlobC 72s var(--ease) infinite alternate; }
@keyframes dlmBlobA{ to{ transform: translate3d(80px,40px,0) scale(1.08) } }
@keyframes dlmBlobB{ to{ transform: translate3d(-70px,-50px,0) scale(1.06) } }
@keyframes dlmBlobC{ to{ transform: translate3d(-60px,60px,0) scale(1.07) } }


.dlm-hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:clamp(20px,6vw,60px); align-items:center;
}
@media (max-width:980px){ .dlm-hero{ grid-template-columns:1fr; } }
.dlm-eyebrow{ margin:0 0 8px; font-size:12px; letter-spacing:.18em; color:var(--accent); font-weight:700; }
.dlm-title{ margin:.1em 0 .25em; font-size:clamp(30px,6.5vw,56px); font-weight:650; letter-spacing:-.02em; }
.dlm-sub{ margin:0; color:var(--muted); font-size:clamp(15px,2.4vw,18px); }


.dlm-mock{
  position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow: var(--shadow-sm);
  min-height:260px;
  --rx:0deg; --ry:0deg; --ty:0px; --scale:1;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--scale));
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
  will-change: transform;
}
.dlm-mock::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); animation: dlmSheen 11s var(--ease) infinite;
}
.dlm-mock__img{
  display:block; width:100%; height:auto; object-fit:cover; opacity:.99; transform: scale(1);
  transition: transform 800ms var(--ease), filter 800ms var(--ease);
}

.dlm-mock.is-hover{ --ty:-3px; --scale:1.012; box-shadow:0 22px 60px rgba(0,0,0,.14); }
.dlm-mock.is-hover .dlm-mock__img{ transform: scale(1.012); }

@keyframes dlmSheen{
  0%{transform:translateX(-120%);opacity:0}
  25%{opacity:.35}
  55%{transform:translateX(120%);opacity:0}
  100%{transform:translateX(120%);opacity:0}
}


.dlm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,3.2vw,22px); }
@media (max-width:980px){ .dlm-grid{ grid-template-columns:1fr; } }

.dlm-card{
  border:1px solid var(--border); border-radius:18px; background:#fff; padding:clamp(16px,2.8vw,22px);
  box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
  --rx:0deg; --ry:0deg; --ty:0px; --scale:1;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--scale));
  transition: transform 750ms var(--ease), box-shadow 750ms var(--ease), border-color 750ms var(--ease), background 750ms var(--ease);
  will-change: transform;
}
.dlm-card::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: linear-gradient(135deg, transparent 65%, rgba(118,92,214,.08) 100%);
  opacity:0; transition:opacity 750ms var(--ease);
}

.dlm-card.is-hover{
  --ty:-3px; --scale:1.006;
  box-shadow:var(--shadow-md);
  border-color:rgba(118,92,214,.42);
  background:linear-gradient(180deg, rgba(118,92,214,.05), #fff);
}
.dlm-card.is-hover::after{ opacity:1; }
.dlm-card.is-active{ outline:2px solid var(--accent); outline-offset:2px; }

.dlm-card h3{ margin:.1em 0 .45em; font-size:18px; font-weight:650; }
.dlm-meta{ color:#394157; font-size:14px; margin:.15rem 0 1rem; }


.dlm-btn{
  --b-scale:1; --b-ty:0px;
  display:inline-grid; place-items:center; padding:.72rem 1.1rem; border-radius:12px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 14px 34px rgba(118,92,214,.26);
  transform: translateY(var(--b-ty)) scale(var(--b-scale));
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), filter 500ms var(--ease);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  position:relative; overflow:hidden;
}
.dlm-btn::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-120%); animation: dlmSheen 15s var(--ease) infinite;
}

.dlm-btn.is-hover{ --b-ty:-1.5px; --b-scale:1.01; box-shadow:0 22px 48px rgba(118,92,214,.32); }
.dlm-btn:active{ --b-ty:0px; --b-scale:.997; transition-duration:180ms; }
.dlm-btn:focus-visible{ outline:2px solid #a899ff; outline-offset:3px; }


.dlm-info{
  border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow: var(--shadow-sm);
  padding:clamp(16px,3vw,20px);
  transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease);
}
.dlm-info.is-hover{ box-shadow:0 20px 46px rgba(0,0,0,.12); border-color:rgba(118,92,214,.28); }
.dlm-info h4{ margin:.1em 0 .5em; font-size:16px; font-weight:650; }
.dlm-info p{ margin:.35rem 0; color:#2f3547; }
.dlm-small{ font-size:13px; color:#5a6278; }


.dlm-reveal{ opacity:0; transform:translateY(12px); transition:opacity 900ms var(--ease), transform 900ms var(--ease); }
.dlm-reveal.is-in{ opacity:1; transform:translateY(0); }


@media (prefers-reduced-motion: reduce){
  .dlm-reveal, .dlm-card, .dlm-mock, .dlm-bg::before, .dlm-blob, .dlm-btn::after { animation:none !important; transition:none !important; }
}