/* DM stage 2+3 (25.10.26): ads funnel, websites blueprint, SEO peak, GEO particle cloud, blog stacked cards.
   Section shells are printed server-side by Code Snippet "DM - stage 2 3D sections"; dm-stage2.js only animates them. */
.dmx .dm2{position:relative;overflow:hidden;isolation:isolate;color:#EAF0FF;padding:clamp(56px,7vw,96px) 0;
  background:radial-gradient(70% 70% at 80% 10%,#1b3a85 0,#0B1F45 55%,#06122b 100%)}
.dmx .dm2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 40% at 8% 90%,rgba(242,101,34,.16),transparent 70%),radial-gradient(40% 45% at 95% 95%,rgba(46,95,209,.22),transparent 70%)}
.dmx .dm2 .kick{color:#FFB48E}
.dmx .dm2 .h2{color:#fff}
.dmx .dm2 .lead{color:#AFC0DD}
.dm2-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.dm2-txt{min-width:0;display:flex;flex-direction:column;gap:14px;direction:rtl;text-align:right}
.dm2-stage{position:relative;min-width:0;height:clamp(300px,36vw,460px);border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.7)}
.dm2-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dm2-note{position:absolute;bottom:10px;inset-inline-start:14px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;color:rgba(234,240,255,.55);z-index:2}
.dm2-legend{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.dm2-legend li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.dm2-legend i{width:12px;height:12px;border-radius:50%;flex:none;background:#AFC3FF;box-shadow:0 0 12px rgba(175,195,255,.7)}
.dm2-legend li:nth-child(2) i{background:#5B8DEF;box-shadow:0 0 12px rgba(91,141,239,.8)}
.dm2-legend li:nth-child(3) i{background:#F26522;box-shadow:0 0 14px rgba(242,101,34,.9)}
.dm2-legend b{color:#fff;font-weight:700;white-space:nowrap}
.dm2-legend span{color:#AFC0DD;font-size:.95em}
.dm2-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.dm2-chips::-webkit-scrollbar{display:none}
.dm2-chips span{white-space:nowrap;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#EAF0FF}
.dm2-chips span b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:7px;vertical-align:middle}

/* blueprint */
.dm2-bp .dm2-stage{background:#0a1d48;display:grid;place-items:center;padding:clamp(14px,2.5vw,28px)}
.dm2-brw{position:relative;width:100%;max-width:640px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0d2357;border:1.5px dashed rgba(110,149,240,.75)}
.dm2-brw.is-live{border-style:solid;border-color:rgba(255,255,255,.85);box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
.dm2-brw .bar{position:absolute;inset:0 0 auto 0;height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.08);z-index:3}
.dm2-brw .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.dm2-brw img{position:absolute;inset:28px 0 0 0;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:50% 0;clip-path:inset(0 0 calc(var(--p,0) * -1% + 100%) 0);z-index:1}
.dm2-wire{position:absolute;inset:28px 0 0 0;z-index:2;opacity:calc(1 - var(--p,0) / 100);
  background-image:linear-gradient(rgba(110,149,240,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(110,149,240,.16) 1px,transparent 1px);background-size:22px 22px}
.dm2-wire span{position:absolute;border:1.5px solid rgba(147,177,255,.85);border-radius:6px}
.dm2-scan{position:absolute;left:0;right:0;height:2px;z-index:3;top:calc(28px + (100% - 28px) * var(--p,0) / 100);background:linear-gradient(90deg,transparent,#F26522,transparent);box-shadow:0 0 18px #F26522;opacity:var(--so,1)}
.dm2-pill{position:absolute;top:40px;inset-inline-end:14px;z-index:4;font:600 12px/1 Rubik,system-ui,sans-serif;padding:6px 11px;border-radius:999px;background:rgba(110,149,240,.25);color:#fff;backdrop-filter:blur(6px)}
.dm2-pill.is-live{background:#16A34A}
.dm2-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.dm2-steps li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);color:#8EA0C0;transition:all .5s cubic-bezier(.19,1,.22,1)}
.dm2-steps li b{font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);flex:none}
.dm2-steps li.on{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.dm2-steps li.on b{background:#F26522;border-color:#F26522;color:#fff}

/* blog stack */
.dmx .dm2.dm2-stack{overflow:clip}   /* overflow:hidden would make this the sticky scroll container and kill the stacking */
.dm2-stack .dm2-grid{align-items:start}
.dm2-stack .dm2-txt{position:sticky;top:120px}
.dm2-cards{display:grid;gap:26px;padding-bottom:40px}
.dm2-card{position:sticky;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);height:clamp(230px,24vw,300px);border-radius:22px;overflow:hidden;background:#10285e;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 -18px 40px -22px rgba(0,0,0,.75);text-decoration:none;color:#fff;transform-origin:50% 0;transition:filter .3s}
.dm2-card:nth-child(1){top:110px}.dm2-card:nth-child(2){top:124px}.dm2-card:nth-child(3){top:138px}.dm2-card:nth-child(4){top:152px}.dm2-card:nth-child(5){top:166px}
.dm2-card .ci{position:relative;background:#0d1f4a}
.dm2-card .ci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm2-card .cb{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(16px,2.4vw,28px);direction:rtl;text-align:right;min-width:0}
.dm2-card .cc{font-size:12.5px;font-weight:700;color:#FFB48E}
.dm2-card .ct{font-size:clamp(17px,1.7vw,22px);font-weight:800;line-height:1.3;color:#fff;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dm2-card .cm{font-size:13px;color:#AFC0DD}
.dm2-card:focus-visible{outline:3px solid #F26522;outline-offset:3px}
@media (max-width:900px){
  .dm2-grid{grid-template-columns:1fr}
  .dm2-stack .dm2-txt{position:relative;top:0}
  .dm2-card{grid-template-columns:1fr;grid-template-rows:42% 1fr;height:340px}
}
@media (prefers-reduced-motion:reduce){.dm2-steps li{transition:none}}