/* Page routing */
.page { display: none; }
.page.active { display: block; }


:root {
  --mtc-navy: #4E7388;        /* main background / headings */
  --mtc-turquoise: #38E1E8; 
  --ink: #0F172A;
  --mtc-mint: #2DD4BF;

  /* Neutrals */
  --muted: #475569;           /* slate-600-ish */
  --border: #E5E7EB;          /* slate-200-ish */
  --surface: #F8FAFC;         /* slate-50-ish */

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(2, 8, 23, 0.10);
  --shadow-lift: 0 18px 40px rgba(2, 8, 23, 0.12);
}

/* Brand helpers (used by your HTML) */
.bg-navy {
  position: relative;
  background:
    radial-gradient(
      1800px 900px at 50% -10%,
      rgba(56, 225, 232, 0.30),
      transparent 75%
    ),
    linear-gradient(
      180deg,
      #4E7388 0%,
      #3B5F73 100%
    );
}


.text-navy { color: var(--mtc-navy); }
.border-navy { border-color: var(--mtc-navy); }

.bg-turquoise { background-color: var(--mtc-turquoise); }
.text-turquoise { color: var(--mtc-turquoise); }
.border-turquoise { border-color: var(--mtc-turquoise); }

.bg-mint {
  background: linear-gradient(
    180deg,
    #2DD4BF 0%,
    #2DD4BF 100%
  );
}
.text-mint { color: var(--mtc-mint); }
.border-mint { border-color: var(--mtc-mint); }

/* Typography polish */
body { color: var(--ink); }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Optional hero gradient (use by adding class="bg-tech-gradient") */
.bg-tech-gradient {
  background: linear-gradient(135deg, #0B1F2A 0%, #143A4A 65%, rgba(56, 225, 232, 0.22) 160%);
}

/* Links / focus rings (nice modern accessibility touch) */
a, button { outline: none; }
:focus-visible {
  outline: 3px solid rgba(56, 225, 232, 0.35);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Buttons (optional but recommended)
   Keep your existing HTML classes, or swap to .btn classes if you want */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  border-radius: .75rem;
  transition: .18s ease;
}

.btn-primary {
  background: var(--mtc-mint);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--mtc-turquoise);
  border: 1px solid rgba(56, 225, 232, 0.55);
}
.btn-secondary:hover {
  border-color: rgba(56, 225, 232, 0.85);
  transform: translateY(-1px);
}

/* Card hover */
.card-hover {
  transition: .22s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Roadmap */
.roadmap-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-top: 3rem;
}
.roadmap-line {
  position: absolute;
  top: 4.5rem;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}
.roadmap-step {
  position: relative;
  z-index: 2;
  width: 13%;
  text-align: center;
}
.step-circle {
  width: 3rem;
  height: 3rem;
  background: var(--mtc-navy);
  color: white;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-weight: 800;
  border: 4px solid white;
  box-shadow: 0 6px 16px rgba(2, 8, 23, 0.14);
}
.step-circle.highlight {
  background: var(--mtc-mint);
}

input, select, textarea {
  border-color: var(--border);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(56, 225, 232, 0.55);
  box-shadow: 0 0 0 4px rgba(56, 225, 232, 0.18);
}

/* Mobile roadmap */
@media (max-width: 1024px) {
  .roadmap-container { flex-direction: column; gap: 4rem; }
  .roadmap-line { display: none; }
  .roadmap-step {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .step-circle { margin: 0; flex-shrink: 0; }
}

/* Calculator Styles */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.chart-bar { transition: height 0.5s ease-out; }

.input-label { 
  display: block; 
  font-size: 11px; 
  font-weight: 800; 
  color: var(--ink);
  margin-bottom: 0.5rem; 
  letter-spacing: 0.025em; 
  text-transform: none; 
}

.input-wrapper { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  margin-bottom: 0.5rem; 
}

.input-field { 
  width: 100%; 
  padding: 0.75rem; 
  border-radius: 0.25rem; 
  border-width: 1px; 
  font-size: 0.875rem; 
  transition: all 0.2s;
  border-color: var(--mtc-mint);
}

.input-error { 
  border-color: #ef4444 !important; 
  background-color: #fef2f2 !important; 
}

.tooltip-trigger { 
  position: relative; 
  display: inline-block; 
}

.tooltip-trigger:hover .tooltip-content { 
  display: block; 
}

.tooltip-content {
  display: none; 
  position: absolute; 
  bottom: 140%; 
  left: 50%; 
  transform: translateX(-50%);
  width: 200px; 
  background: var(--ink); 
  color: white; 
  padding: 10px; 
  border-radius: 6px;
  font-size: 10px; 
  line-height: 1.4; 
  z-index: 9999; 
  box-shadow: var(--shadow-soft);
  font-weight: normal; 
  text-transform: none; 
  text-align: center;
}

.dashboard-tooltip .tooltip-content { 
  bottom: 120%; 
  width: 220px; 
}

.tooltip-arrow {
  position: absolute; 
  top: 100%; 
  left: 50%; 
  transform: translateX(-50%);
  border-width: 5px; 
  border-style: solid; 
  border-color: var(--ink) transparent transparent transparent;
}

.pdf-page-break { 
  display: none; 
}

#pdf-container { 
  display: none; 
  width: 100%; 
  background: white; 
}