:root {
  --homnox-ink: #000000;
  --homnox-ink-soft: #1b252f;
  --homnox-muted: #55606a;
  --homnox-line: rgba(27, 37, 47, 0.12);
  --homnox-line-strong: rgba(27, 37, 47, 0.2);
  --homnox-panel: rgba(255, 255, 255, 0.9);
  --homnox-panel-strong: rgba(255, 255, 255, 0.97);
  --homnox-accent: #336c51;
  --homnox-accent-soft: rgba(51, 108, 81, 0.12);
  --homnox-accent-glow: rgba(51, 108, 81, 0.16);
  --homnox-warm: #f3efe8;
  --homnox-shadow: 0 24px 58px rgba(27, 37, 47, 0.08);
  --page-accent: var(--homnox-accent);
  --page-accent-soft: var(--homnox-accent-soft);
  --page-accent-glow: var(--homnox-accent-glow);
  --theme-positive: #336c51;
  --theme-risk: #8b4c4c;
  --theme-slate: #5c6d7b;
  --theme-warm-accent: #a18866;
  --theme-baseline: #9aa5af;
  --theme-grid: rgba(27, 37, 47, 0.12);
}

body.page-landing,
body.page-frontier {
  --page-accent: #336c51;
  --page-accent-soft: rgba(51, 108, 81, 0.12);
  --page-accent-glow: rgba(51, 108, 81, 0.16);
}

body.page-resilience {
  --page-accent: #5a727e;
  --page-accent-soft: rgba(90, 114, 126, 0.12);
  --page-accent-glow: rgba(90, 114, 126, 0.15);
}

body.page-construction {
  --page-accent: #8a5b53;
  --page-accent-soft: rgba(138, 91, 83, 0.12);
  --page-accent-glow: rgba(138, 91, 83, 0.16);
}

body.page-wellness {
  --page-accent: #5d7150;
  --page-accent-soft: rgba(93, 113, 80, 0.12);
  --page-accent-glow: rgba(93, 113, 80, 0.16);
}

body.page-insurance {
  --page-accent: #6d5a46;
  --page-accent-soft: rgba(109, 90, 70, 0.12);
  --page-accent-glow: rgba(109, 90, 70, 0.16);
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: "Archivo", sans-serif !important;
}

body {
  color: var(--homnox-ink);
  background:
    radial-gradient(circle at top right, var(--page-accent-glow), transparent 28%),
    radial-gradient(circle at bottom left, rgba(27, 37, 47, 0.06), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf8 54%, #f2eee8 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    linear-gradient(to right, rgba(27, 37, 47, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 37, 47, 0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.32;
}

body::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(243, 239, 232, 0.38) 100%),
    radial-gradient(circle at center top, rgba(255, 255, 255, 0.35), transparent 45%);
}

.bg-shape {
  display: none !important;
}

.topbar,
.layout,
.portal-shell {
  position: relative;
  z-index: 1;
}

.topbar,
.layout {
  width: min(1280px, calc(100% - 44px)) !important;
}

.portal-shell {
  width: min(1200px, calc(100% - 44px)) !important;
}

.topbar {
  margin: 0 auto !important;
  padding: 34px 0 18px !important;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27, 37, 47, 0.18), transparent);
}

.brand-block {
  max-width: 66rem;
}

.brand-mark,
.brand-kicker,
.eyebrow,
.detail-label,
.ranking-rank,
.score-card span,
.tier-summary span,
.tier-plus-block h3,
.tool-tag {
  font-family: "IBM Plex Mono", monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
}

.brand-mark,
.brand-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--homnox-muted);
}

.brand-kicker,
.eyebrow,
.detail-label,
.ranking-rank {
  color: var(--page-accent) !important;
}

.topbar h1,
.hero h1,
.section-head h2,
.tool-card h2,
.hero-panel h2,
.detail-panel h3,
.ranking-card h3,
.narrative-grid h3,
.taxonomy-grid h4 {
  font-family: "DM Serif Display", serif !important;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
}

.topbar h1 {
  margin: 0 !important;
  font-size: clamp(3rem, 7vw, 5.8rem) !important;
  line-height: 0.9 !important;
}

.hero h1 {
  margin: 0 0 18px !important;
  max-width: 11ch;
  font-size: clamp(3.1rem, 8vw, 5.8rem) !important;
  line-height: 0.92 !important;
}

.subtitle,
.topbar p,
.lead,
.section-copy,
.control-copy,
.control-impact,
.range-caption,
.ranking-org,
.detail-copy,
.source-copy,
.hero-label,
.stat-label,
.muted {
  color: var(--homnox-muted) !important;
}

.subtitle,
.lead,
.section-copy,
.control-copy,
.control-impact {
  line-height: 1.72 !important;
}

.subtitle {
  margin: 15px 0 0 !important;
  max-width: 58rem !important;
  font-size: 1.03rem;
}

.portal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.portal-nav a,
.primary-btn,
.secondary-btn,
.chip-btn,
.preset-btn,
.tool-card,
.help-icon,
.score-card,
.summary-grid article,
.dimension-card,
.component-card,
.tier-chip,
.model-panel {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.portal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--homnox-line-strong) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--homnox-ink-soft) !important;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(27, 37, 47, 0.04);
}

.portal-nav a:hover,
.primary-btn:hover,
.secondary-btn:hover,
.chip-btn:hover,
.preset-btn:hover,
.tool-card:hover,
.score-card:hover,
.summary-grid article:hover,
.dimension-card:hover,
.component-card:hover,
.tier-chip:hover,
.model-panel:hover {
  transform: translateY(-2px);
}

.layout {
  margin: 0 auto !important;
  padding: 26px 0 46px !important;
  gap: 20px !important;
}

.panel,
.tool-card,
.score-card,
.model-panel,
.summary-grid article,
.detail-panel,
.ranking-card,
.narrative-grid article,
.taxonomy-grid article,
.dimension-card,
.component-card,
.tier-summary div,
.tier-chip,
.chart {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--homnox-line) !important;
  border-radius: 30px !important;
  background: var(--homnox-panel) !important;
  box-shadow: var(--homnox-shadow) !important;
  backdrop-filter: blur(14px);
}

.panel::before,
.tool-card::before,
.score-card::before,
.model-panel::before,
.summary-grid article::before,
.detail-panel::before,
.ranking-card::before,
.narrative-grid article::before,
.taxonomy-grid article::before,
.dimension-card::before,
.component-card::before,
.tier-summary div::before,
.tier-chip::before,
.chart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27, 37, 47, 0.14), transparent);
}

.controls-panel {
  padding: 26px !important;
  gap: 24px !important;
}

.controls-panel section,
.panel section {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  border: 1px solid rgba(27, 37, 47, 0.08) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

.controls-panel section::before,
.panel section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 55%);
  pointer-events: none;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.section-head h2 {
  margin: 0;
  font-size: 1.78rem !important;
  line-height: 1.02 !important;
}

.help-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 999px;
  border: 1px solid rgba(27, 37, 47, 0.16) !important;
  background: var(--page-accent-soft) !important;
  color: var(--homnox-ink-soft) !important;
  padding: 0;
}

.help-icon:hover {
  background: rgba(27, 37, 47, 0.08) !important;
}

.preset-btn,
.chip-btn,
.control,
.empty-state {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(27, 37, 47, 0.08) !important;
}

.preset-btn,
.chip-btn {
  min-height: 44px;
}

.preset-btn.active,
.chip-btn.active,
.ranking-card.active {
  border-color: rgba(27, 37, 47, 0.16) !important;
  background: linear-gradient(180deg, var(--page-accent-soft), rgba(255, 255, 255, 0.95)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px rgba(27, 37, 47, 0.05) !important;
}

.primary-btn,
.secondary-btn {
  min-height: 46px;
  border-radius: 999px !important;
  padding: 0 18px !important;
}

.primary-btn {
  border: 1px solid rgba(27, 37, 47, 0.14) !important;
  background: linear-gradient(135deg, var(--page-accent-soft), rgba(27, 37, 47, 0.08)) !important;
  color: var(--homnox-ink-soft) !important;
}

.secondary-btn {
  border: 1px solid var(--homnox-line-strong) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--homnox-ink-soft) !important;
}

.control output,
.source-link,
.hero-panel h2,
.hero h1,
.secondary-metric strong,
.score-card strong,
.summary-grid strong,
.dimension-card strong,
.component-card strong {
  color: var(--homnox-ink-soft) !important;
}

.hero-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, var(--page-accent-glow), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 239, 232, 0.92)) !important;
}

.hero-panel::after,
.tool-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 37, 47, 0), rgba(27, 37, 47, 0.22), rgba(27, 37, 47, 0));
  opacity: 0.7;
}

.hero-meta {
  border: 1px solid rgba(27, 37, 47, 0.08) !important;
  background: rgba(27, 37, 47, 0.04) !important;
}

.summary-grid article,
.dimension-card,
.component-card,
.score-card,
.model-panel,
.tier-summary div,
.tier-chip {
  padding: 18px !important;
}

.score-card span,
.dimension-card p,
.component-card p,
.summary-grid article p,
.tool-card .tool-tag {
  color: var(--homnox-muted) !important;
}

.status {
  color: var(--page-accent) !important;
}

.reason-pill {
  background: var(--page-accent-soft) !important;
  color: var(--homnox-ink-soft) !important;
}

.tag-pill {
  background: rgba(27, 37, 47, 0.08) !important;
  color: var(--homnox-ink-soft) !important;
}

.chart {
  min-height: 320px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 242, 0.96)) !important;
}

.help-dialog {
  border-radius: 28px !important;
  border: 1px solid var(--homnox-line) !important;
  background: var(--homnox-panel-strong) !important;
  box-shadow: 0 28px 64px rgba(27, 37, 47, 0.18) !important;
}

.help-backdrop {
  background: rgba(27, 37, 47, 0.32) !important;
}

.help-header {
  border-bottom: 1px solid rgba(27, 37, 47, 0.08) !important;
}

.help-header h3 {
  font-family: "DM Serif Display", serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
}

.help-close {
  border-radius: 999px !important;
}

.page-landing .portal-shell {
  padding: 60px 0 76px !important;
}

.page-landing .hero {
  margin-bottom: 44px !important;
}

.page-landing .tool-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.page-landing .tool-card {
  grid-column: span 6;
  min-height: 300px;
  padding: 30px;
}

.page-landing .tool-card.frontier {
  grid-column: span 12;
  min-height: 230px;
}

.page-landing .tool-card:hover {
  box-shadow: 0 28px 56px rgba(27, 37, 47, 0.12);
}

.page-landing .tool-card h2 {
  font-size: 2rem !important;
  margin: 18px 0 12px !important;
}

.page-resilience .score-grid,
.page-resilience .chart-grid,
.page-resilience .tier-summary,
.page-resilience .tier-grid,
.page-construction .summary-grid,
.page-wellness .dimension-grid,
.page-insurance .component-grid,
.page-frontier .summary-grid,
.page-frontier .taxonomy-grid,
.page-frontier .narrative-grid {
  gap: 14px !important;
}

.page-resilience .tier-aa {
  background: rgba(51, 108, 81, 0.14) !important;
  color: #234933 !important;
  border-color: rgba(51, 108, 81, 0.24) !important;
}

.page-resilience .tier-a {
  background: rgba(92, 109, 123, 0.14) !important;
  color: #304250 !important;
  border-color: rgba(92, 109, 123, 0.24) !important;
}

.page-resilience .tier-b {
  background: rgba(161, 136, 102, 0.16) !important;
  color: #614b32 !important;
  border-color: rgba(161, 136, 102, 0.26) !important;
}

.page-resilience .tier-nr {
  background: rgba(139, 76, 76, 0.12) !important;
  color: #6c3333 !important;
  border-color: rgba(139, 76, 76, 0.24) !important;
}

.page-resilience .tier-na {
  background: rgba(154, 165, 175, 0.14) !important;
  color: #46535e !important;
  border-color: rgba(154, 165, 175, 0.26) !important;
}

.page-resilience .tier-plus-block {
  border: 1px dashed rgba(27, 37, 47, 0.18) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.page-frontier .summary-grid,
.page-insurance .summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.page-frontier .ranking-card,
.page-frontier .detail-panel,
.page-frontier .narrative-grid article,
.page-frontier .taxonomy-grid article {
  border-radius: 24px !important;
}

@media (max-width: 1080px) {
  .layout {
    width: min(100%, calc(100% - 24px)) !important;
  }

  .page-landing .tool-card,
  .page-landing .tool-card.frontier {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .topbar,
  .portal-shell {
    width: min(100%, calc(100% - 24px)) !important;
  }

  .topbar {
    padding-top: 24px !important;
    flex-direction: column;
  }

  .portal-nav {
    justify-content: flex-start;
  }

  .hero-panel {
    grid-template-columns: 1fr !important;
  }
}