/* SKY IT – services as a DNA helix (assets/dna.js). The original card grid stays in the HTML
   for search engines and visitors with reduced motion; it is hidden only while the DNA is on. */
.dna-on .areas-grid { display: none; }
.dna-on { overflow-x: clip; }                 /* full-width background without a horizontal scrollbar (keeps sticky working) */

/* floating dots + glow across the whole width of the section */
.dna-bg { position: absolute; top: 0; height: 100%; left: calc(50% - 50vw); width: 100vw; pointer-events: none; z-index: 0; }
.dna-stage, .dna-panels { z-index: 1; }

.dna-scroll { position: relative; margin-top: 48px; }
.dna-sticky {
  position: sticky; top: 64px; height: calc(100vh - 64px); min-height: 520px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.dna-stage { position: relative; height: 100%; max-height: 760px; }
.dna-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.dna-steps { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.dna-step {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border, #E8E0F0);
  background: #fff; color: var(--gray, #6B6B7B); font: 700 12px/1 'Inter', sans-serif; cursor: pointer;
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}
.dna-step:hover { border-color: #E5007E; color: #E5007E; }
.dna-step.on { background: linear-gradient(135deg, #E5007E, #7B2D8B); border-color: transparent; color: #fff; transform: scale(1.12); box-shadow: 0 8px 22px rgba(229, 0, 126, .3); }

.dna-panels { position: relative; height: 380px; }
.dna-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(26px); pointer-events: none;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
.dna-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.dna-panel.past { transform: translateY(-26px); }
.dna-count { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #E5007E; margin-bottom: 18px; }
.dna-count b { font-size: 44px; letter-spacing: -1px; margin-right: 8px; background: linear-gradient(135deg, #E5007E, #7B2D8B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; vertical-align: -6px; }
.dna-panel .area-icon { margin-bottom: 22px; background: linear-gradient(135deg, #E5007E, #7B2D8B); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(229, 0, 126, .25); }
.dna-panel .area-title { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #111; margin-bottom: 16px; }
.dna-panel .area-desc { font-size: 17px; line-height: 1.75; color: var(--gray, #6B6B7B); max-width: 520px; margin-bottom: 28px; text-align: left; }
.dna-more { align-self: flex-start; }

@media (max-width: 900px) {
  .dna-sticky { grid-template-columns: 1fr; grid-template-rows: 42% 58%; gap: 0; top: 60px; height: calc(100vh - 60px); }
  .dna-stage { max-height: none; }
  .dna-steps { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); flex-direction: row; gap: 8px; }
  .dna-step { width: 30px; height: 30px; font-size: 11px; }
  .dna-panels { height: 100%; }
  .dna-panel { justify-content: flex-start; padding-top: 22px; }
  .dna-count { margin-bottom: 10px; }
  .dna-count b { font-size: 30px; }
  .dna-panel .area-icon { display: none; }
  .dna-panel .area-title { font-size: 24px; margin-bottom: 10px; }
  .dna-panel .area-desc { font-size: 15px; margin-bottom: 18px; }
}