/*
 * NivAk Technologies
 * Hybrid Premium V3 — Services Page
 * Initial design integration
 */

/* The final page-specific styles will be developed here. */

/* NIVAK SERVICES V3 STEP 31 */

/* Typography and backgrounds */

.services-page {
  font-family: var(--v3-font-body);
  background: #ffffff;
}

.services-page h1,
.services-page h2,
.services-page h3 {
  font-family: var(--v3-font-heading);
}

/* Cinematic Services Hero */

.services-page .page-hero.services-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(23,105,210,.32), transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(255,116,23,.13), transparent 35%),
    linear-gradient(125deg,#071326,#102d59);
  padding: 85px 0;
  color: #ffffff;
}

.services-page .services-hero h1,
.services-page .services-hero .page-hero__title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(38px,4.4vw,62px);
  line-height: 1.13;
  letter-spacing: -2px;
}

.services-page .services-hero p,
.services-page .services-hero .page-hero__description {
  color: #c1d0e4;
  font-size: 17px;
  line-height: 1.8;
}

.services-page .services-hero .eyebrow {
  color: #ff9954;
}

/* Service Categories */

.services-page .services-category {
  background: #ffffff;
  padding-top: 60px;
  padding-bottom: 60px;
}

.services-page .services-category:nth-of-type(odd) {
  background: #f4f7fc;
}

.services-page .services-category + .services-category {
  margin-top: 0;
}

.services-page .services-category .section-title {
  font-weight: 800;
  font-size: clamp(28px,3vw,42px);
  letter-spacing: -1.4px;
  color: #071b3d;
}

.services-page .services-category .section-description {
  color: #586b83;
  max-width: 720px;
  line-height: 1.75;
}

/* 3-column premium service cards */

.services-page .services-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 30px;
}

.services-page .service-detail-card {
  border: 1px solid #dfe7f2;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(7,19,38,.06);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}

.services-page .service-detail-card:hover {
  transform: translateY(-5px);
  border-color: #a3c3e9;
  box-shadow: 0 20px 45px rgba(7,19,38,.12);
}

.services-page .service-detail-card .card__body {
  padding: 26px;
}

.services-page .service-detail-card .card__title {
  color: #071b3d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.services-page .service-detail-card .card__text {
  color: #60718a;
  line-height: 1.75;
  font-size: 13px;
}

.services-page .service-detail-card .text-link {
  color: #e96510;
  font-weight: 700;
  font-size: 13px;
}

/* Development process */

.services-page .section--brand-dark {
  background: #071326;
  color: #ffffff;
  padding: 65px 0;
}

.services-page .section--brand-dark h2,
.services-page .section--brand-dark h3 {
  color: #ffffff;
}

/* Why NivAk */

.services-page .services-benefits {
  background: #f4f7fc;
  padding: 65px 0;
}

.services-page .services-benefits .card {
  border-radius: 18px;
  border: 1px solid #dfe7f2;
  box-shadow: 0 10px 30px rgba(7,19,38,.05);
}

/* Contact CTA */

.services-page .services-cta-section {
  padding: 55px 0;
  background: #ffffff;
}

.services-page .services-cta-section .cta-panel {
  border-radius: 24px;
  padding: 48px;
  background:
    radial-gradient(circle at 90% 20%,rgba(255,116,23,.2),transparent 35%),
    linear-gradient(125deg,#1769d2,#071326);
}

.services-page .services-cta-section .cta-panel h2,
.services-page .services-cta-section .cta-panel p {
  color: #ffffff;
}

/* Responsive */

@media(max-width:900px) {
  .services-page .services-catalog-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px) {
  .services-page .page-hero.services-hero {
    padding: 65px 0;
  }

  .services-page .services-category {
    padding: 44px 0;
  }

  .services-page .services-catalog-grid {
    grid-template-columns: 1fr;
  }

  .services-page .section--brand-dark,
  .services-page .services-benefits {
    padding: 44px 0;
  }

  .services-page .services-cta-section .cta-panel {
    padding: 30px 24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .services-page .service-detail-card {
    transition: none;
  }
}