@charset "UTF-8";
/* styles.css
   Modern, clean enhancements on top of Bootstrap 5
*/

html {
  --mt-radius: 1rem;
  --mt-radius-lg: 1.25rem;
  --mt-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);
  --mt-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.12);
  --mt-border: rgba(0, 0, 0, 0.08);
  --mt-text-muted: rgba(0, 0, 0, 0.62);
  --mt-focus: rgba(13, 110, 253, 0.35);

  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li {
  color: var(--mt-text-muted);
}

.lead {
  color: var(--mt-text-muted);
}

a {
  text-underline-offset: 0.18em;
}

/* Better anchor target when using sticky header */
[id] {
  scroll-margin-top: 96px;
}

/* ---------- Layout helpers ---------- */
.section-pad {
  padding: 4rem 0;
}

@media (max-width: 991.98px) {
  .section-pad {
    padding: 3rem 0;
  }
}

.container-narrow {
  max-width: 960px;
}


/* ---------- Header ---------- */
header.sticky-top {
  backdrop-filter: saturate(1.2) blur(10px);
}

.navbar-brand {
  letter-spacing: 0.2px;
}

.navbar .nav-link {
  font-weight: 500;
}

.navbar .nav-link:hover {
  opacity: 0.85;
}



/* Top info bar text */
header .bg-light .small a {
  color: inherit;
}

header .bg-light .small a:hover {
  opacity: 0.85;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  padding: 0.6rem 1rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn-lg {
  padding: 0.8rem 1.2rem;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-dark {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.btn-outline-dark:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

/* ---------- Cards / Surfaces ---------- */
.card {
  border-radius: var(--mt-radius-lg);
}

.card.shadow-sm {
  box-shadow: var(--mt-shadow-sm) !important;
}

.card:hover {
  box-shadow: var(--mt-shadow-md) !important;
}

.border,
.border-top,
.border-bottom {
  border-color: var(--mt-border) !important;
}

.rounded-4 {
  border-radius: var(--mt-radius-lg) !important;
}

/* Make “panel” blocks feel modern */
.p-4.border.rounded-4,
.p-3.border.rounded-4,
.p-4.bg-white.border.rounded-4 {
  background: #fff;
}

/* ---------- Images ---------- */
img {
  max-width: 100%;
  height: auto;
}

.object-fit-cover {
  object-fit: cover;
}

.ratio > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card-img-top,
.ratio img {
  filter: saturate(1.02) contrast(1.02);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: 12px;
  border-color: var(--mt-border);
  padding: 0.7rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 0.25rem var(--mt-focus);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

/* ---------- Lists ---------- */
ul {
  padding-left: 1.15rem;
}

ul li::marker {
  color: rgba(0, 0, 0, 0.35);
}

/* ---------- Section accents ---------- */
.bg-light {
  background-color: #f7f8fa !important;
}

.bg-dark {
  background-color: #0f1115 !important;
}

.bg-dark .text-white-50 {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* ---------- Footer ---------- */
footer a.text-white:hover,
footer a.text-white-50:hover {
  opacity: 0.85;
}

/* ---------- Micro-animations (reduced motion friendly) ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .card {
    transition: none !important;
  }
  .btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ---------- Utilities ---------- */
.hr-soft {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.12),
    transparent
  );
}

/* ========= NAV: classified style + mega menu + scroll-shrink ========= */

.navbar-classified {
  letter-spacing: 0.02em;
  transition: padding 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.navbar-classified .navbar-brand {
  gap: .6rem;
}

.navbar-logo {
  height: clamp(28px, 3.2vw, 46px);
  width: auto;
  display: block;
}

.brand-wordmark {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: .92rem;
}

.brand-tag {
  margin-left: .6rem;
  padding-left: .6rem;
  border-left: 1px solid rgba(255,255,255,.18);
  font-size: .78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

/* Subtle "classification" strip styling (not loud) */
.navbar-classified::after {
  content: "OPERATIONAL • RELIABILITY • SECURITY";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  padding: .25rem 0;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,.02), rgba(255,255,255,.06));
  border-top: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .navbar-classified::after { display: none; }
  .brand-wordmark { letter-spacing: .06em; }
}

/* Scroll shrink state */
.navbar-shrink {
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.navbar-shrink .navbar-logo {
  height: clamp(24px, 2.6vw, 38px);
}
.navbar-shrink .brand-tag {
  display: none !important;
}

/* Active page highlighting */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: #fff !important;
  position: relative;
}
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .3rem;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}

/* Contact button nav link polish */
.nav-contact {
  border-radius: 999px;
}
.nav-contact.active::after { display: none; }