/* NivAk Technologies — Services Development Workspace */

.services-page .services-hero > .container {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  align-items: center;
  gap: 34px;
}

.services-page .services-hero .page-hero__content {
  min-width: 0;
}

.services-page .services-hero h1 {
  font-size: clamp(32px,3.5vw,49px);
  letter-spacing: -.04em;
}

.services-workspace {
  position: relative;
  height: 330px;
  min-width: 0;
  isolation: isolate;
}

.services-workspace__glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(40,125,225,.30),
    transparent 68%
  );
}

.services-workspace__editor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 235px;
  max-width: 60%;
  transform: translate(-50%,-50%) rotate(-5deg);
  background: #0b2546;
  border: 2px solid #508bc9;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  animation: workspaceFloat 6s ease-in-out infinite;
}

.services-workspace__toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px;
  background: #163a66;
}

.services-workspace__toolbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7417;
}

.services-workspace__toolbar i:nth-child(2) {
  background: #f7bf55;
}

.services-workspace__toolbar i:nth-child(3) {
  background: #65c6a1;
}

.services-workspace__toolbar span {
  margin-left: 9px;
  color: #c2d4ec;
  font-size: 9px;
}

.services-workspace__code {
  padding: 20px 15px;
  color: #c2defe;
  font: 10px/1.9 monospace;
  white-space: nowrap;
}

.services-workspace__code .indent { padding-left: 12px; }
.services-workspace__code .indent2 { padding-left: 24px; }
.services-workspace__code .token-blue { color: #77c1ff; }
.services-workspace__code .token-orange { color: #ffab71; }

.services-workspace__bottom {
  padding: 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  background: #173c68;
}

.services-workspace__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 105px;
  padding: 11px;
  border: 1px solid #466d9c;
  border-radius: 13px;
  background: #102949;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  animation: workspaceNodeFloat 5s ease-in-out infinite alternate;
}

.services-workspace__node-icon {
  color: #ff9954;
  font-size: 18px;
}

.services-workspace__node--one {
  left: 0;
  top: 8%;
}

.services-workspace__node--two {
  right: 0;
  top: 12%;
  animation-delay: -2s;
}

.services-workspace__node--three {
  left: 0;
  bottom: 9%;
  animation-delay: -3s;
}

.services-workspace__node--four {
  right: 0;
  bottom: 9%;
  animation-delay: -1s;
}

@keyframes workspaceFloat {
  0%,100% {
    transform: translate(-50%,-50%) rotate(-5deg);
  }
  50% {
    transform: translate(-50%,-50%) rotate(-2deg) translateY(-9px);
  }
}

@keyframes workspaceNodeFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-9px); }
}

@media (max-width: 900px) {
  .services-page .services-hero > .container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .services-workspace {
    height: 290px;
    width: min(100%,500px);
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .services-workspace { height: 265px; }
  .services-workspace__editor { width: 210px; max-width: 60%; }
  .services-workspace__node {
    min-width: 0;
    padding: 7px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-workspace__editor,
  .services-workspace__node {
    animation: none;
  }
}

/* NIVAK SERVICES HERO LAYOUT STEP 67 */

.services-page .page-hero.services-hero {
  padding: 40px 0 !important;
  min-height: 0 !important;
}

.services-page .services-hero > .container {
  display: grid !important;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  align-items: center;
  gap: 30px;
}

.services-page .services-hero .page-hero__content {
  max-width: 100%;
}

.services-page .services-workspace {
  width: 100%;
  height: 320px;
  min-width: 0;
}

.services-page .services-hero__actions .button:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #ff7417 !important;
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none;
}

.services-page .services-hero__actions .button:not(:first-child) {
  background: #ffffff !important;
  color: #071326 !important;
}

@media (max-width: 900px) {
  .services-page .services-hero > .container {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .services-page .services-workspace {
    height: 280px;
  }
}


/* NIVAK SERVICES TYPING STEP 68 */

/* Hide the previous floating technology cards */
.services-page .services-workspace__node {
    display: none !important;
}

/* Compact single-screen editor */
.services-page .services-workspace {
    position: relative;
    width: 100%;
    height: 310px;
    min-width: 0;
}

.services-page .services-workspace__editor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, 360px);
    max-width: calc(100% - 16px);
    min-height: 270px;
    transform: translate(-50%, -50%) rotate(-3deg);
    animation: servicesEditorFloat 6s ease-in-out infinite;
}

.services-page .services-workspace__code {
    min-height: 208px;
    padding: 18px;
    overflow: hidden;
    font: 12px/1.75 Consolas, "Courier New", monospace;
    white-space: normal;
}

.services-page .services-workspace__typing {
    display: inline;
    margin: 0;
    color: #b9dbff;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.services-page .services-workspace__cursor {
    display: inline-block;
    width: 2px;
    height: 13px;
    margin-left: 2px;
    background: #ff9954;
    vertical-align: -2px;
    animation: servicesCursorBlink .8s steps(1) infinite;
}

@keyframes servicesEditorFloat {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-3deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-1deg) translateY(-7px);
    }
}

@keyframes servicesCursorBlink {
    50% { opacity: 0; }
}

@media (max-width: 600px) {
    .services-page .services-workspace {
        height: 290px;
    }

    .services-page .services-workspace__editor {
        width: min(100%, 320px);
    }

    .services-page .services-workspace__code {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-page .services-workspace__editor,
    .services-page .services-workspace__cursor {
        animation: none !important;
    }
}


/* NIVAK REAL CODE EDITOR STEP 69 */

/* Wider editor, fixed visible code window */

.services-page .services-hero > .container {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 30px;
}

.services-page .services-workspace {
  position: relative;
  height: 355px !important;
  min-width: 0;
  overflow: hidden;
}

.services-page .services-workspace__editor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%,470px) !important;
  max-width: calc(100% - 14px) !important;
  height: 330px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: none !important;
}

.services-page .services-workspace__toolbar {
  flex: 0 0 auto;
}

.services-page .services-workspace__code {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: #42648d transparent;
  font: 12px/1.65 Consolas, "Courier New", monospace;
}

.services-page .services-workspace__typing {
  display: inline;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: #c6e2ff;
}

.services-page .services-workspace__bottom {
  flex: 0 0 auto;
}

.services-page .code-token-keyword {
  color: #ffad73;
}

.services-page .code-token-type {
  color: #80c9ff;
}

.services-page .code-token-string {
  color: #9ee6aa;
}

.services-page .code-token-number {
  color: #dfb4ff;
}

@media (max-width: 900px) {
  .services-page .services-hero > .container {
    grid-template-columns: 1fr !important;
  }

  .services-page .services-workspace {
    height: 315px !important;
  }

  .services-page .services-workspace__editor {
    height: 295px;
  }
}

@media (max-width: 600px) {
  .services-page .services-workspace {
    height: 285px !important;
  }

  .services-page .services-workspace__editor {
    height: 265px;
    width: min(100%,360px) !important;
  }

  .services-page .services-workspace__code {
    font-size: 10px;
    padding: 13px;
  }
}