/* ===== LAYOUT (FULL WIDTH) ===== */
.container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 56px 48px 120px; }
@media (max-width: 1200px) { .container { padding: 40px 32px 100px; } }

.view { display: none; }
.view.active { display: block; }
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 12px;
}
.page-sub {
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.8;
  max-width: 800px;
}
.card { background: var(--surface); border: 1px solid var(--border); padding: 32px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.card-desc { 
  color: var(--text-muted); 
  font-size: 13px; 
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 26px; 
  line-height: 1.7; 
}