/* ============ DIGITAL MARKETING AGENCY PAGE ============ */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:46px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:.3s;position:relative;overflow:hidden}
.bcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-deep));transition:width .4s}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.bcard:hover::after{width:100%}
.bcard .bi{width:48px;height:48px;border-radius:13px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin-bottom:15px}
.bcard .bi svg{width:24px;height:24px}
.bcard h4{font-size:1.08rem;margin-bottom:8px}
.bcard p{color:var(--slate);font-size:.9rem;margin-bottom:14px}
.bcard .more{font-size:.84rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;transition:gap .2s;cursor:pointer}
.bcard:hover .more{gap:9px}

/* ============ DM HERO ============ */
.dmhero{position:relative;padding:calc(var(--h-head) + 46px) 0 34px;background:#fff;overflow:hidden;text-align:center}
.dmhero .hero-mesh{position:absolute;inset:0;z-index:0;overflow:hidden}
.dmhero .hero-mesh .blob{position:absolute;border-radius:50%;filter:blur(64px)}
.dmhero .hero-mesh .h1b{width:540px;height:540px;background:radial-gradient(circle,rgba(24,104,251,.2),transparent 70%);top:-200px;right:8%;animation:meshfloat 14s ease-in-out infinite}
.dmhero .hero-mesh .h2b{width:420px;height:420px;background:radial-gradient(circle,rgba(24,104,251,.1),transparent 70%);bottom:-180px;left:4%;animation:meshfloat 17s ease-in-out infinite 1.5s}
@keyframes meshfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-26px) scale(1.08)}}

.dmhero .hero-gridbg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 72% 42%,#000,transparent 72%);mask-image:radial-gradient(circle at 72% 42%,#000,transparent 72%);opacity:.5}
.dmhero .inner{position:relative;z-index:2;max-width:840px;margin:0 auto}
.dmhero h1{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:16px;letter-spacing:-.03em;line-height:1.1}
.dmhero h1 .grad{background:linear-gradient(110deg,var(--blue),var(--blue-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.dmhero .sub{font-size:1.08rem;color:var(--slate);max-width:620px;margin:0 auto 28px}
.dmhero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.dm-badges{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.dm-badge{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--slate)}
.dm-badge svg{width:16px;height:16px;color:var(--blue)}
.dm-chips{position:relative;max-width:1000px;margin:46px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;z-index:2}
.dm-chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 14px;box-shadow:var(--shadow-soft);animation:floaty 6s ease-in-out infinite;transition:.3s;text-align:center}
.dm-chip:hover{box-shadow:var(--shadow-blue);border-color:var(--blue-18);transform:translateY(-4px)}
.dm-chip:nth-child(2){animation-delay:.5s}.dm-chip:nth-child(3){animation-delay:1s}.dm-chip:nth-child(4){animation-delay:1.5s}
.dm-chip:nth-child(5){animation-delay:.8s}.dm-chip:nth-child(6){animation-delay:.2s}.dm-chip:nth-child(7){animation-delay:1.3s}.dm-chip:nth-child(8){animation-delay:.4s}
.dm-chip .ci{width:44px;height:44px;border-radius:12px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin:0 auto 12px}
.dm-chip .ci svg{width:22px;height:22px}
.dm-chip span{font-size:.82rem;font-weight:700;color:var(--ink);display:block}

/* ============ SERVICES GRID ============ */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:10px}

/* ============ PROCESS ============ */
.dm-process{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.dm-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 18px;text-align:center;position:relative;transition:.3s}
.dm-step:hover{box-shadow:var(--shadow-blue);border-color:var(--blue-18);transform:translateY(-4px)}
.dm-step .stepnum{width:38px;height:38px;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;margin:0 auto 14px;font-size:.95rem}
.dm-step h4{font-size:.98rem;margin-bottom:8px}
.dm-step p{font-size:.83rem;color:var(--slate)}
.dm-step:not(:last-child)::after{content:"";position:absolute;top:38px;right:-9px;width:18px;height:2px;background:var(--blue-18)}

/* ============ RESULTS STRIP ============ */
.dm-results{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dm-result{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 20px;transition:.3s;text-align:center}
.dm-result:hover{box-shadow:var(--shadow-blue);border-color:var(--blue-18);transform:translateY(-4px)}
.dm-result .num{font-family:var(--font-head);font-weight:800;font-size:2.8rem;color:var(--blue);letter-spacing:-.03em;margin-bottom:6px;line-height:1.1}
.dm-result .lbl{font-size:.88rem;color:var(--slate);font-weight:600}

/* RESPONSIVE (DM sections) */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .dm-chips{grid-template-columns:repeat(2,1fr)}
  .dm-process{grid-template-columns:repeat(1,1fr);max-width:420px;margin:0 auto}
  .dm-step:not(:last-child)::after{display:none}
  .dm-results{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .bcard{padding:20px;border-radius:12px}
  .bcard .bi{width:42px;height:42px;border-radius:10px;margin-bottom:12px}
  .bcard .bi svg{width:20px;height:20px}
  .bcard h4{font-size:1.02rem;margin-bottom:6px}
  .bcard p{font-size:.85rem;line-height:1.5;margin-bottom:12px}
  .dm-chips{grid-template-columns:1fr;gap:12px}
  .dm-badges{gap:12px 18px}
  .dm-results{grid-template-columns:1fr;gap:16px}
  .dm-result{padding:20px 16px}
  .dm-result .num{font-size:2.3rem}
  .dm-result .lbl{font-size:.84rem}
}
@media(max-width:480px){
  .bcard{padding:16px}
  .svc-grid{gap:12px}
}