/* ============================================================
   METPL AI Cloud — Global Stylesheet
   css/styles.css
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
  color: #212529;
}

/* ---------- Navbar ---------- */
.navbar-brand { font-weight: 700; letter-spacing: -0.3px; }
.navbar .dropdown-menu {
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
}
.navbar .dropdown-item { padding: 0.5rem 1rem; }
.navbar .dropdown-item:hover { background: #f0f5ff; color: #0d6efd; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #0b1c2d 0%, #0d6efd 100%);
  color: #fff;
  padding: 6rem 0;
}
.hero h1 { font-weight: 800; }
.hero.hero-green { background: linear-gradient(135deg, #198754 0%, #0b3d1f 100%); }

.brand-badge {
  background: rgba(255,255,255,0.15);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  display: inline-block;
  letter-spacing: 0.5px;
}

/* ---------- Icon box (platform section) ---------- */
.icon-box i { font-size: 2.8rem; color: #0d6efd; }

/* ---------- Section headings ---------- */
.section-title { font-weight: 700; }

/* ---------- Feature cards ---------- */
.feature-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
}
.feature-card h5 { font-weight: 700; margin-top: 0.75rem; }
.feature-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  background: #e9ecef;
}

/* ---------- Pricing cards ---------- */
.pricing-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.10);
}
.pricing-card.featured { border: 2px solid #0d6efd; }

/* ---------- Program / content cards ---------- */
.program-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.program-card:hover {
  transform: scale(1.015);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* ---------- Workflow (number circles) ---------- */
.workflow-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
}
.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 130px;
}
.workflow-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  flex-shrink: 0;
}
.workflow-arrow { font-size: 1.4rem; color: #adb5bd; align-self: center; }

/* ---------- Workflow side-cards (SaaS) ---------- */
.workflow-card {
  border-left: 4px solid #0d6efd;
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
}
.workflow-card h6 { font-weight: 700; margin-bottom: 0.4rem; }

/* ---------- Solution tiles ---------- */
.solution-tile {
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 240px;
}
.solution-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 28px rgba(0,0,0,0.13);
}

/* ---------- Stack badges ---------- */
.badge-iaas { background-color: #0d6efd !important; color: #fff; }
.badge-paas { background-color: #6610f2 !important; color: #fff; }
.badge-saas { background-color: #198754 !important; color: #fff; }

/* ---------- Partner logos ---------- */
.partner-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  color: #6c757d;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.partner-placeholder:hover {
  border-color: #0d6efd;
  color: #0d6efd;
  background: #f0f5ff;
}

/* ---------- Comparison table ---------- */
.comparison-table thead th { background: #0b1c2d; color: #fff; }
.comparison-table td { vertical-align: middle; }

/* ---------- Configurator diagram ---------- */
#diagramPreview {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 14px;
  background: #f8f9fa;
  min-height: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diagram-block {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.diagram-block:hover { opacity: 0.82; }
.cpu-block    { background: #0d6efd; }
.ram-block    { background: #198754; }
.gpu-block    { background: #dc3545; }
.storage-block{ background: #fd7e14; }
.bandwidth-block { background: #0dcaf0; }
.network-block { background: #6f42c1; }
.backup-block  { background: #6610f2; }
.firewall-block{ background: #d63384; }
.raid-block    { background: #20c997; }
.feature-block { background: #adb5bd; }

/* ---------- EDC Dashboard ---------- */
.table-input { width: 88px; }
.sub-option  { margin-left: 18px; }

/* ---------- Access level cards ---------- */
.access-card {
  border-radius: 12px;
  padding: 1.5rem;
  color: #fff;
  height: 100%;
}

/* ---------- CTA strip ---------- */
.cta-strip {
  background: linear-gradient(135deg, #0d6efd 0%, #0b1c2d 100%);
  color: #fff;
}

/* ---------- Footer ---------- */
footer {
  background: #081622;
  color: #adb5bd;
  padding: 3rem 0 1.5rem;
  text-align: center;
}
footer a { color: #adb5bd; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: #fff; }
footer .footer-heading { color: #fff; font-weight: 600; margin-bottom: 0.6rem; font-size: 0.95rem; }
footer hr { border-color: #1a3050; margin: 1.5rem 0 1rem; }
footer ul.footer-links li { margin-bottom: 0.3rem; font-size: 0.88rem; }

/* ---------- Utilities ---------- */
.bg-dark-navy { background-color: #0b1c2d; }
.text-primary-custom { color: #0d6efd; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hero { padding: 4rem 0; }
  .solution-tile { min-width: 200px; }
}
@media (max-width: 576px) {
  .hero { padding: 3rem 0; }
  .workflow-step { max-width: 100px; }
}