/* ============================================================
   INNER PAGES — Shared stylesheet
   Used by: aerospace.html, robotics.html,
            applications.html, technology.html, team.html
   ============================================================ */

/* Page body backgrounds */
.page-light { background: #F5F5F0; }
.page-dark  { background: #0A0A0A; }

/* Keep dark navbar solid on dark-bg pages */
.page-dark .navbar.scrolled {
  background: rgba(10,10,10,0.97);
}
/* Keep light navbar solid on light-bg pages */
.page-light .navbar {
  background: rgba(245,245,240,0.97);
}

/* Active link — light nav */
.nav-active {
  color: var(--color-text-dark) !important;
  font-weight: 700 !important;
}
.nav-active::after { width: 100% !important; }

/* Active link — dark nav */
.nav-active-dark {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}
.nav-active-dark::after { width: 100% !important; }

/* ---- PAGE HERO ---- */
.ph {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 100px) 40px 120px;
  background: #F5F5F0;
  position: relative;
  overflow: hidden;
  gap: 0;
}
.ph-dark { background: #0A0A0A; }

.ph-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dark-dim);
  margin-bottom: 44px;
  opacity: 0;
  animation: phFadeUp 0.7s var(--ease-out) 0.3s forwards;
}
.ph-title {
  font-size: clamp(64px, 11vw, 140px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text-dark);
  opacity: 0;
  animation: phFadeUp 0.9s var(--ease-out) 0.45s forwards;
  margin-bottom: 52px;
}
.ph-sub {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text-dark-dim);
  max-width: 540px;
  opacity: 0;
  animation: phFadeUp 0.8s var(--ease-out) 0.65s forwards;
}
@keyframes phFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ---- INTRO SPLIT ---- */
.isplit { padding: 120px 0; }
.isplit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.isplit-h {
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: 24px;
}
.isplit-h.dark { color: var(--color-text-dark); }
.isplit-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 16px;
}
.isplit-p.dark { color: var(--color-text-dark-dim); }

/* ---- SPEC TABLE ---- */
.spec-tbl {
  width: 100%;
  border-collapse: collapse;
}
.spec-tbl tr { border-top: 1px solid var(--color-border-dark); }
.spec-tbl td { padding: 16px 0; font-size: 14px; }
.spec-tbl td:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text-dark-dim);
  width: 55%;
}
.spec-tbl td:last-child { font-weight: 600; color: var(--color-text-dark); }

.spec-tbl-dark tr { border-top-color: var(--color-border); }
.spec-tbl-dark td:first-child { color: var(--color-text-dim); }
.spec-tbl-dark td:last-child  { color: var(--color-text); }

/* ---- CAPABILITY CARDS ---- */
.caps-section { padding: 120px 0; }
.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  margin-top: 56px;
}
.cap-card {
  background: #0A0A0A;
  padding: 44px 34px;
  transition: background var(--trans-med);
}
.cap-card:hover { background: #111111; }
.cap-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  margin-bottom: 20px;
  display: block;
}
.cap-card h3 { font-size: 19px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
.cap-card p  { font-size: 14px; line-height: 1.65; color: var(--color-text-dim); }

/* Light variant cap cards */
.caps-grid-light { background: var(--color-border-dark); }
.cap-card-light  { background: #EEEEE8; }
.cap-card-light:hover { background: #E4E4DC; }

/* ---- APPLICATIONS BLOCKS ---- */
.apps-list { padding: 0; }
.app-block { padding: 100px 0; }
.app-block-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.app-block-alt .app-block-inner { }
.app-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dark-dim);
  display: block;
  margin-bottom: 16px;
}
.app-heading {
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-text);
  margin-bottom: 24px;
}
.app-heading.dark { color: var(--color-text-dark); }
.app-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-dim);
  margin-bottom: 28px;
}
.app-body.dark { color: var(--color-text-dark-dim); }
.app-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-text-dim);
}
.app-list.dark { color: var(--color-text-dark-dim); }
.app-list li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.app-list.dark li { border-bottom-color: var(--color-border-dark); }
.app-list .mono { color: var(--color-dot); font-size: 12px; }
.app-block-visual {
  aspect-ratio: 4/3;
  border: 1px solid var(--color-border-dark);
}

/* ---- PAGE CTA STRIP ---- */
.page-cta-strip { padding: 100px 0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 960px) {
  .isplit-grid, .app-block-inner { grid-template-columns: 1fr; gap: 48px; }
  .app-block-alt .app-block-inner { display: flex; flex-direction: column-reverse; }
  .caps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .caps-grid { grid-template-columns: 1fr; }
  .ph-title { font-size: 60px; }
  .app-block-inner { padding: 0 24px; }
}

/* === TradingView Chart === */
.tradingview-box {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

/* === Strategy chart placeholders === */
.chart-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.chart-light { background: #DDDDD6; }
.chart-dark  { background: #1A1A1A; }

.chart-svg {
  width: 100%;
  height: 100%;
  max-width: 420px;
}