/*
  Macteck — 06 Utility System / Production Layer
*/

.mck-hidden { display: none !important; }
.mck-text-center { text-align: center; }
.mck-text-right { text-align: right; }
.mck-mx-auto { margin-left: auto; margin-right: auto; }

.mck-p-0 { padding: 0 !important; }
.mck-p-24 { padding: 24px !important; }
.mck-p-32 { padding: 32px !important; }
.mck-p-48 { padding: 48px !important; }

.mck-mt-0 { margin-top: 0 !important; }
.mck-mt-16 { margin-top: 16px !important; }
.mck-mt-24 { margin-top: 24px !important; }
.mck-mt-48 { margin-top: 48px !important; }

.mck-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mck-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mck-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.mck-panel-glass {
  border: 1px solid var(--mck-border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--mck-surface) 86%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: var(--mck-shadow-card);
}

.mck-panel-charcoal {
  border: 1px solid #203144;
  border-radius: 28px;
  background:
    radial-gradient(circle at 80% 10%, rgba(23,158,217,.14), transparent 24rem),
    #07111C;
  color: #F2F4F7;
  box-shadow: var(--mck-shadow-dark);
}

.mck-panel-charcoal h1,
.mck-panel-charcoal h2,
.mck-panel-charcoal h3,
.mck-panel-charcoal h4,
.mck-panel-charcoal h5 {
  color: #F2F4F7;
}

.mck-panel-charcoal p {
  color: #AEB6BF;
}

.mck-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mck-quick-action {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 22px;
  border: 1px solid var(--mck-border);
  border-radius: 22px;
  background: var(--mck-surface);
  color: var(--mck-text);
  text-decoration: none;
  box-shadow: var(--mck-shadow-card);
}

.mck-quick-action span {
  color: var(--mck-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mck-quick-action strong {
  font-family: var(--mck-font-display);
  font-size: 18px;
}

.mck-quick-action.is-orange span {
  color: var(--mck-orange);
}

.mck-contact-card {
  display: grid;
  gap: 10px;
}

.mck-contact-card a {
  color: var(--mck-blue);
  font-weight: 700;
  text-decoration: none;
}

.mck-page-404 {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 80px 0;
}

@media (max-width: 980px) {
  .mck-grid-2,
  .mck-grid-3,
  .mck-grid-4,
  .mck-quick-actions {
    grid-template-columns: 1fr;
  }
}