/* Python DevOps / NetOps — тема курса */

.devops-page {
  --ms-accent: #1a936f;
  --ms-accent-2: #0f4c5c;
  --ms-hero-dark: #0a2e33;
  --ms-pill-icon: #5eead4;
}

.devops-page .hero-section {
  background: linear-gradient(
    135deg,
    #0a2e33 0%,
    color-mix(in srgb, #0f4c5c 80%, #0a2e33) 40%,
    color-mix(in srgb, #1a936f 45%, #12304a) 100%
  );
}

.devops-page .badge-devops {
  background: linear-gradient(135deg, #0f4c5c 0%, #1a936f 100%);
  color: #fff;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.devops-page .devops-focus-banner {
  background: linear-gradient(135deg, rgba(15, 76, 92, 0.07) 0%, rgba(26, 147, 111, 0.12) 100%);
  border: 1px solid rgba(26, 147, 111, 0.22);
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(15, 76, 92, 0.08);
}

.devops-page .focus-grade {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f4c5c;
}

.devops-page .tech-stack-devops span {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 76, 92, 0.15);
  font-size: 0.85rem;
  font-weight: 600;
}

.devops-page .tech-stack-devops .stack-highlight {
  background: linear-gradient(135deg, #0f4c5c, #1a936f);
  color: #fff;
  border-color: transparent;
}

.devops-page .hero-accent {
  color: var(--ms-pill-icon);
}

.devops-page .value-pill i {
  color: var(--ms-pill-icon);
}

.devops-page .icon-circle--ms {
  background: linear-gradient(135deg, #0f4c5c, #1a936f);
}

.devops-page .course-individual-learning {
  background: linear-gradient(180deg, #f0faf7 0%, #fff 100%);
}

.devops-page .course-individual-learning__card {
  border-color: rgba(26, 147, 111, 0.2);
  box-shadow: 0 20px 50px rgba(15, 76, 92, 0.1);
}

.devops-page .course-reviews-summary__item strong {
  color: #1a936f;
}

/* Pricing — светлая шапка «Стандарт» (перебивает microservices-page) */
.devops-page #pricing {
  background:
    radial-gradient(circle at 0% 0%, rgba(26, 147, 111, 0.07), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f0faf7 100%) !important;
}

.devops-page #pricing .course-pricing-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 76, 92, 0.1) !important;
}

.devops-page #pricing .course-pricing-card--featured {
  position: relative;
  border: 2px solid rgba(26, 147, 111, 0.45) !important;
  box-shadow:
    0 1rem 2.4rem rgba(15, 76, 92, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.devops-page #pricing .course-pricing-card--featured .card-header {
  position: relative;
  padding: 1.35rem 1.15rem 1.15rem !important;
  background:
    radial-gradient(ellipse 80% 120% at 12% 0%, rgba(26, 147, 111, 0.14), transparent 58%),
    linear-gradient(180deg, #ecfdf5 0%, #e6f7f2 52%, #ffffff 100%) !important;
  color: #0f4c5c !important;
  -webkit-text-fill-color: #0f4c5c !important;
  border-bottom: 1px solid rgba(26, 147, 111, 0.2) !important;
}

.devops-page #pricing .course-pricing-card--featured .card-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0f4c5c 0%, #1a936f 48%, #5eead4 100%);
}

.devops-page #pricing .course-pricing-card--featured .card-header h3,
.devops-page #pricing .course-pricing-card--featured .card-header h4,
.devops-page #pricing .course-pricing-card--featured .card-header * {
  color: #0f4c5c !important;
  -webkit-text-fill-color: #0f4c5c !important;
}

.devops-page #pricing .course-pricing-card--featured .card-header .price-tag {
  color: #1a936f !important;
  -webkit-text-fill-color: #1a936f !important;
  font-size: clamp(1.85rem, 4vw, 2.35rem) !important;
  font-weight: 850 !important;
}

.devops-page #pricing .course-pricing-card--featured .card-header p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
}

.devops-page #pricing .course-pricing-card--alt .card-header {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  color: #0f4c5c !important;
  border-bottom: 1px solid rgba(15, 76, 92, 0.08) !important;
}

.devops-page #pricing .course-pricing-card .card-body {
  background: #ffffff !important;
}