:root {
  --sim-hub-ink: var(--text-accent);
  --sim-hub-paper: var(--bg-main);
}

.page-simulators-hub main {
  background: var(--sim-hub-paper);
  color: var(--sim-hub-ink);
}

.sim-hub-main { min-height: 0; }

.sim-hub {
  min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  padding: clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--sim-hub-ink);
}

.sim-hub-shell {
  width: 100%;
  min-height: calc(100svh - var(--header-h) - clamp(32px, 4vw, 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
}

.sim-hub-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  padding-bottom: clamp(14px, 1.8vw, 24px);
  border-bottom: 1px solid var(--sim-hub-ink);
}

.sim-hub-heading h1 {
  margin: 6px 0 0;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .9;
  letter-spacing: -.055em;
}

.sim-hub-heading > p {
  max-width: 520px;
  margin: 0;
  color: rgba(16, 16, 16, .64);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}

.sim-hub-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 14px);
}

.sim-hub-card {
  min-width: 0;
  min-height: 360px;
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--sim-hub-ink);
  border-radius: clamp(16px, 1.7vw, 24px);
  background: var(--sim-hub-paper);
  color: var(--sim-hub-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  transition: background-color .16s ease, color .16s ease;
}

.sim-hub-card--generate { background: var(--sim-hub-ink); color: #fff; }

.sim-hub-card:hover,
.sim-hub-card:focus-visible {
  background: var(--sim-hub-ink);
  color: #fff;
  outline: none;
}

.sim-hub-card--generate:hover,
.sim-hub-card--generate:focus-visible { background: #fff; color: var(--sim-hub-ink); }

.sim-hub-card:focus-visible { box-shadow: inset 0 0 0 3px currentColor; }
.sim-hub-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.sim-hub-index { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.sim-hub-arrow { font-size: clamp(24px, 2.4vw, 36px); line-height: 1; }
.sim-hub-card-copy { display: grid; gap: 12px; }

.sim-hub-card-copy strong {
  font-size: clamp(34px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.055em;
}

.sim-hub-card-copy > span {
  max-width: 620px;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.5;
  opacity: .66;
}

@media (max-width: 620px) {
  .sim-hub { height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); min-height: 0; padding: 10px; }
  .sim-hub-shell { min-height: 0; height: 100%; gap: 10px; }
  .sim-hub-heading { grid-template-columns: minmax(0, 1fr) minmax(120px, .85fr); gap: 12px; padding: 2px 2px 10px; }
  .sim-hub-heading .label { font-size: 8px; }
  .sim-hub-heading h1 { margin-top: 4px; font-size: clamp(28px, 10vw, 42px); }
  .sim-hub-heading > p { font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sim-hub-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .sim-hub-card { min-height: 0; padding: 16px; border-radius: 14px; gap: 14px; }
  .sim-hub-arrow { font-size: 21px; }
  .sim-hub-card-copy { gap: 7px; }
  .sim-hub-card-copy strong { font-size: clamp(25px, 9vw, 38px); }
  .sim-hub-card-copy > span { font-size: clamp(9px, 2.7vw, 11px); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-hub-card { transition: none; }
}