/* ============================================================
   DIGITAL MARKETING PAGE — marketing-specific parts.
   Builds on ai-agent-modern.css (tokens, sections, cards, form)
   and qa-modern.css (tabs, steps, overview strip, dark cards).
   ============================================================ */

/* ── Hero: sample campaign dashboard ─────────────────── */
.dm-dash-wrap {
  position: relative;
  width: min(100%, 520px);
  justify-self: center;
  padding: 44px 0 60px;
}

/* Digital marketing service and AI experience refresh */
.dm-services-shell{margin-top:34px;padding:12px;border:1px solid #e0e4f3;border-radius:30px;background:rgba(255,255,255,.72);box-shadow:0 28px 70px -48px rgba(30,41,90,.48)}
.dm-services-shell .qa-tabs{gap:14px}
.dm-services-shell .qa-tablist{top:92px;gap:4px;padding:8px;border:0;background:transparent}
.dm-services-shell .qa-tab{min-height:50px;border-radius:13px}
.dm-services-shell .qa-tab[aria-selected="true"]{border-color:#dfe0ff;background:linear-gradient(135deg,#fff 0%,#f2f0ff 100%);box-shadow:0 12px 28px -18px rgba(79,70,229,.65)}
.dm-services-shell .qa-panel{min-height:100%;border-color:#e4e6f2;background:radial-gradient(circle at 100% 0%,rgba(110,78,255,.09),transparent 32%),#fff;box-shadow:none}
.dm-services-shell .qa-panel-head .ag-ico{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#f1efff,#e7e8ff);color:#5b42ed}
.dm-services-shell .qa-panel-head h3{max-width:620px;font-size:clamp(24px,2.4vw,34px);line-height:1.12}
.dm-services-shell .qa-panel-intro{max-width:720px;color:#475569}
.dm-services-shell .qa-panel-list li{min-height:50px;align-items:center;padding:13px 15px;border-color:#e1e5f0;background:#f7f8fc;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.dm-services-shell .qa-panel-list li:hover{transform:translateY(-2px);border-color:#cbc9fa;background:#fff}
.dm-services-shell .qa-panel-list svg{padding:3px;width:22px;height:22px;border-radius:50%;background:#ddf8e9}
.dm-services-shell .qa-panel-img{aspect-ratio:16/10;object-fit:cover;border:5px solid #fff;border-radius:20px}

.dm-ai-section{position:relative;overflow:hidden}
.dm-ai-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 45%,rgba(59,130,246,.16),transparent 32%),radial-gradient(circle at 92% 90%,rgba(124,58,237,.2),transparent 36%)}
.dm-ai-layout{position:relative;gap:clamp(42px,6vw,84px);align-items:center}
.dm-ai-visual{overflow:visible;padding:10px;border:1px solid rgba(165,180,252,.2);border-radius:30px;background:rgba(255,255,255,.035);box-shadow:0 34px 80px -35px rgba(0,0,0,.85)}
.dm-ai-visual img{border-radius:22px}
.dm-ai-visual .ag-why-badge{top:28px;right:-14px;padding:12px 16px;border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 36px -16px rgba(15,23,42,.55)}
.dm-ai-flow{position:absolute;left:30px;right:30px;bottom:-25px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(12,17,41,.9);box-shadow:0 18px 36px -20px #000;backdrop-filter:blur(14px)}
.dm-ai-flow span{padding:11px 8px;color:#d8deef;font-size:11px;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.dm-ai-flow span+span{border-left:1px solid rgba(255,255,255,.12)}
.dm-ai-flow b{margin-right:5px;color:#9ba8ff}
.dm-ai-content h2{max-width:640px}
.dm-ai-section .dm-ai-list li{min-height:58px;padding:14px 15px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));transition:transform .2s ease,border-color .2s ease,background .2s ease}
.dm-ai-section .dm-ai-list li:hover{transform:translateY(-2px);border-color:rgba(165,180,252,.35);background:rgba(255,255,255,.085)}
.dm-ai-section .dm-ai-note{border-color:rgba(251,191,36,.24);background:linear-gradient(90deg,rgba(251,191,36,.11),rgba(251,191,36,.045))}

@media (max-width:900px){.dm-ai-layout{gap:64px}.dm-ai-visual{max-width:680px}}
@media (max-width:640px){.dm-services-shell{margin-inline:-8px;padding:7px;border-radius:22px}.dm-services-shell .qa-panel{padding:22px 16px}.dm-services-shell .qa-panel-head{align-items:flex-start}.dm-services-shell .qa-panel-img{max-width:none}.dm-ai-flow{left:18px;right:18px}.dm-ai-flow span{font-size:9px;letter-spacing:.03em}}
.dm-dash {
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #111735, #0b1026);
  color: #e2e8f0;
  box-shadow:
    0 40px 80px -28px rgba(79, 70, 229, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dm-dash-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 20px 20px 10px;
}
.dm-funnel {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.dm-funnel span {
  display: grid;
  place-items: center;
  width: var(--w);
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.9), rgba(124, 58, 237, 0.9));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transform-origin: center;
}
.dm-funnel span:nth-child(2) {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85));
}
.dm-funnel span:nth-child(3) {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.85), rgba(99, 102, 241, 0.85));
}
.dm-funnel span:nth-child(4) {
  background: linear-gradient(90deg, #10b981, #0ea5e9);
}
.ec-motion .dm-funnel span {
  animation: dmFunnel 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.5s + var(--d, 0ms));
}
.dm-chart {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.dm-chart small {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
}
.dm-chart svg {
  width: 100%;
  height: 110px;
  overflow: visible;
}
.dm-area {
  fill: url(#dmArea);
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}
.dm-line {
  fill: none;
  stroke: #a5b4fc;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s;
}
.dm-dash-wrap.is-in .dm-line,
.ag-main:not(.ec-motion) .dm-line {
  stroke-dashoffset: 0;
}
.dm-dash-wrap.is-in .dm-area,
.ag-main:not(.ec-motion) .dm-area {
  opacity: 1;
}
.dm-channels {
  display: grid;
  gap: 8px;
  padding: 8px 20px 20px !important;
}
.dm-channels li {
  display: grid;
  grid-template-columns: 18px 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.dm-channels svg {
  color: #a5b4fc;
}
.dm-channels i {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.dm-channels i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a78bfa, #38bdf8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.8s + var(--d, 0ms));
}
.dm-dash-wrap.is-in .dm-channels i::after,
.ag-main:not(.ec-motion) .dm-channels i::after {
  transform: scaleX(1);
}
.dm-float--lead {
  left: -34px;
  bottom: -4px;
  align-items: flex-start;
  animation-delay: -1.5s;
}
.dm-float--lead > svg {
  padding: 6px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #dcfce7;
  color: #059669;
}
.dm-float--lead strong {
  display: block;
  font-size: 13.5px;
}
.dm-float--lead small {
  color: var(--ag-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.dm-float--seo b {
  color: var(--ag-indigo);
}

/* Highlights: six items in a 2 × 3 grid */
.dm-highlights li:first-child {
  grid-column: auto;
}

/* ── Service tab panels with an image ───────────────── */
.qa-panel--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  column-gap: 26px;
  align-items: start;
}
.qa-panel--media > *:not(.qa-panel-img) {
  grid-column: 1 / -1;
}
.qa-panel--media .qa-panel-head {
  grid-column: 1;
}
.qa-panel--media .qa-panel-img {
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* Digital marketing v4 — growth command center */
.dm-page{--dm-ink:#07111f;--dm-lime:#b9f227;--dm-cyan:#58ddca;--dm-blue:#6d87ff}
.dm-page .dm-hero{position:relative;min-height:790px;padding:145px 0 95px;overflow:hidden;background:radial-gradient(circle at 77% 18%,rgba(49,91,181,.34),transparent 31%),radial-gradient(circle at 15% 80%,rgba(34,210,180,.11),transparent 27%),linear-gradient(135deg,#07111f 0%,#0c1930 55%,#101e42 100%);color:#fff;isolation:isolate}
.dm-page .dm-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(141,168,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(141,168,220,.07) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(#000,transparent 95%)}
.dm-page .dm-hero::after{content:"";position:absolute;z-index:-1;width:650px;height:650px;right:-190px;top:-170px;border:1px solid rgba(116,145,255,.14);border-radius:50%;box-shadow:0 0 0 80px rgba(116,145,255,.035),0 0 0 160px rgba(116,145,255,.02)}
.dm-page .dm-hero .ag-hero-bg{opacity:.38}.dm-page .dm-hero .ag-hero-grid{grid-template-columns:1.02fr .98fr;gap:clamp(55px,7vw,100px);align-items:center}.dm-page .dm-hero-copy{position:relative;z-index:2}
.dm-crumbs{display:flex;align-items:center;gap:10px;margin-bottom:30px;color:#72819e;font-size:12px}.dm-crumbs a{color:#aab6cc;text-decoration:none}.dm-crumbs b{color:var(--dm-lime)}
.dm-page .dm-hero .ag-badge{border-color:rgba(185,242,39,.22);background:rgba(185,242,39,.07);color:var(--dm-lime)}
.dm-page .dm-hero h1{max-width:720px;margin:22px 0 25px;color:#fff;font-size:clamp(54px,5.4vw,82px);line-height:.96;letter-spacing:-.062em}.dm-page .dm-hero h1 em{display:block;color:transparent;background:linear-gradient(90deg,var(--dm-lime),#6ee7d2 70%);-webkit-background-clip:text;background-clip:text;font-style:normal}
.dm-page .dm-hero .ag-lead{max-width:650px;color:#aab6ca;font-size:17px;line-height:1.75}.dm-page .dm-hero .ag-cta{background:var(--dm-lime);color:#0b1422;box-shadow:0 15px 35px rgba(185,242,39,.16)}.dm-page .dm-hero .ag-ghost{border-color:#34445f;background:rgba(255,255,255,.035);color:#fff}
.dm-hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.dm-hero-proof span{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #2b3a54;border-radius:7px;color:#a9b5c8;background:rgba(255,255,255,.025);font-size:10px;font-weight:700}.dm-hero-proof svg{color:var(--dm-lime)}
.dm-page .dm-dash-wrap{width:min(100%,570px);padding:25px 0 50px}.dm-page .dm-dash{position:relative;border:1px solid #2b3b5a;border-radius:25px;background:linear-gradient(155deg,rgba(22,36,65,.97),rgba(7,15,30,.98));box-shadow:0 45px 100px rgba(0,0,0,.42),0 0 0 10px rgba(255,255,255,.018)}
.dm-page .dm-dash::before{content:"";position:absolute;inset:50px 0 auto;height:1px;background:linear-gradient(90deg,transparent,#293a59,transparent)}
.dm-page .qa-dash-bar{height:52px;padding-inline:18px}.dm-page .qa-dash-bar span{display:flex;align-items:center;gap:10px;color:#a8b5ca;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.dm-page .qa-dash-bar b{padding:5px 7px;border-radius:99px;background:rgba(185,242,39,.1);color:var(--dm-lime);font-size:7px;letter-spacing:.1em}
.dm-page .dm-dash-body{gap:20px;padding:26px 24px 14px}.dm-page .dm-funnel span{height:38px;background:linear-gradient(90deg,#345ee0,#6d4ce7);font-size:10px}.dm-page .dm-funnel span:nth-child(4){background:linear-gradient(90deg,#78c94d,var(--dm-lime));color:#12200a}.dm-page .dm-chart{background:rgba(255,255,255,.025);border:1px solid #26344e}.dm-page .dm-line{stroke:var(--dm-lime)}.dm-page .dm-area{fill:url(#dmArea)}
.dm-dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:8px 24px 14px;overflow:hidden;border:1px solid #293750;border-radius:12px;background:#293750}.dm-dash-metrics>span{position:relative;display:flex;flex-direction:column;gap:4px;padding:13px;background:#101b31}.dm-dash-metrics small{color:#74819a;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.dm-dash-metrics strong{color:#f5f8ff;font-size:15px}.dm-dash-metrics i{position:absolute;right:12px;bottom:14px;color:var(--dm-lime);font-style:normal;font-size:12px}
.dm-page .dm-channels{padding:4px 24px 24px!important}.dm-page .dm-channels li{grid-template-columns:17px 78px 1fr;color:#bdc7d8;font-size:10px}.dm-page .dm-channels svg{color:var(--dm-cyan)}.dm-page .dm-channels i::after{background:linear-gradient(90deg,#5572ee,var(--dm-cyan),var(--dm-lime))}
.dm-page .qa-float{border-color:#dbe3ee}.dm-page .dm-float--lead{left:-26px;bottom:-12px}.dm-page .dm-float--seo{right:-16px;top:86px}
.dm-page .qa-overview{position:relative;padding:0;background:#fff}.dm-page .qa-overview-grid{grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:clamp(48px,6vw,92px);padding-block:64px}.dm-overview-intro{max-width:540px}.dm-overview-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;color:#3159d8;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.dm-overview-kicker::before{width:24px;height:2px;border-radius:99px;background:var(--dm-lime);content:""}.dm-overview-intro h2{margin:0 0 18px;color:#0b1426;font-size:clamp(34px,3.5vw,52px);line-height:1.02;letter-spacing:-.052em}.dm-overview-intro h2 em{color:#3159d8;font-style:normal}.dm-page .qa-overview-copy{margin:0;max-width:520px;color:#59657a;font-size:15px;line-height:1.75}.dm-page .dm-highlights{gap:12px}.dm-page .dm-highlights li,.dm-page .dm-highlights li:first-child{min-height:70px;padding:14px 16px;border:1px solid #dde4ef;border-radius:16px;background:#f8faff;color:#151c2b;font-size:14px;font-weight:750;box-shadow:0 8px 24px rgba(18,35,66,.035)}.dm-page .dm-highlights li:hover{border-color:#b9c8f6;background:#fff;box-shadow:0 14px 32px rgba(24,48,92,.1);transform:translateY(-2px)}.dm-page .dm-highlights li span,.dm-page .dm-highlights li:first-child span{width:40px;height:40px;border:1px solid #dfe6ff;border-radius:12px;color:#3159d8;background:#edf2ff}.dm-page .dm-highlights li:first-child span{color:#567400;background:#effbd3;border-color:#dff2ad}
.dm-page .ag-subnav{box-shadow:0 12px 30px rgba(12,24,48,.06)}
.dm-page .ag-head h2,.dm-page .ag-split h2,.dm-page .ag-consult h2{letter-spacing:-.045em}.dm-page .ag-section{padding-block:clamp(85px,8vw,120px)}
@media(max-width:980px){.dm-page .dm-hero{padding-top:125px}.dm-page .dm-hero .ag-hero-grid{grid-template-columns:1fr}.dm-page .dm-dash-wrap{margin:auto}.dm-page .dm-hero h1{font-size:clamp(52px,9vw,76px)}.dm-page .qa-overview-grid{grid-template-columns:1fr;gap:34px;padding-block:52px}.dm-overview-intro{max-width:680px}}
@media(max-width:640px){.dm-page .dm-hero{min-height:auto;padding:105px 0 70px}.dm-page .dm-hero h1{font-size:46px}.dm-page .dm-hero h1 em{display:inline}.dm-hero-proof{flex-direction:column}.dm-hero-proof span{width:fit-content}.dm-page .dm-dash-wrap{padding-top:5px}.dm-page .dm-dash-body{grid-template-columns:1fr;padding:20px}.dm-page .dm-funnel{display:none}.dm-page .dm-chart svg{height:130px}.dm-dash-metrics{margin-inline:18px}.dm-page .dm-channels{padding-inline:18px!important}.dm-page .qa-float{display:none}.dm-page .qa-overview-grid{padding-block:42px}.dm-overview-intro h2{font-size:36px}.dm-page .dm-highlights li,.dm-page .dm-highlights li:first-child{min-height:64px}}
.qa-panel--media .qa-panel-intro,
.qa-panel--media .qa-panel-label {
  grid-column: 1;
}
.qa-panel-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.45);
}

/* ── About image ─────────────────────────────────────── */
.dm-about-media img {
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

/* ── AI section ──────────────────────────────────────── */
.dm-ai-label {
  margin-top: 24px !important;
  color: #fff;
  font-weight: 700;
}
.dm-ai-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px !important;
}
.dm-ai-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.4;
}
.dm-ai-list svg {
  flex: none;
  margin-top: 2px;
  color: #a5b4fc;
}
.dm-ai-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px !important;
  padding: 14px 16px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
  font-size: 14px;
  line-height: 1.6;
}
.dm-ai-note svg {
  flex: none;
  margin-top: 2px;
}

/* ── Strategy grid ───────────────────────────────────── */
.dm-strategy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.dm-strategy li {
  position: relative;
}
.dm-strategy-n {
  position: absolute;
  top: 18px;
  right: 22px;
  color: #eef0fb;
  font: 800 48px/1 var(--font-primary, sans-serif);
  letter-spacing: -0.04em;
}
.dm-strategy li:hover .dm-strategy-n {
  color: #e0e3fb;
}

/* ── Analytics ───────────────────────────────────────── */
.dm-analytics {
  align-items: start;
}
.dm-track .qa-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Engagement models ───────────────────────────────── */
.dm-engage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ── Motion ──────────────────────────────────────────── */
@keyframes dmFunnel {
  from {
    opacity: 0;
    transform: scaleX(0.4);
  }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .dm-strategy,
  .dm-engage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dm-dash-wrap {
    padding-bottom: 76px;
  }
  .dm-float--lead {
    left: 0;
  }
  .qa-panel--media {
    grid-template-columns: minmax(0, 1fr);
  }
  .qa-panel--media .qa-panel-img {
    grid-column: 1;
    grid-row: auto;
    max-width: 320px;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .dm-dash-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-strategy,
  .dm-engage-grid,
  .dm-ai-list,
  .dm-track .qa-checks {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-channels li {
    grid-template-columns: 18px 70px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-funnel span {
    animation: none !important;
  }
  .dm-line {
    stroke-dashoffset: 0 !important;
  }
  .dm-area {
    opacity: 1 !important;
  }
  .dm-channels i::after {
    transform: scaleX(1) !important;
  }
}