@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display:     clamp(2.5rem, 5vw, 4rem);      --fs-display-sub: clamp(2.125rem, 4vw, 3rem);    --fs-h2:          clamp(1.75rem, 3vw, 2.25rem);  --fs-h3:          clamp(1.25rem, 2vw, 1.5rem);   --fs-title:       1.125rem;
  --fs-title-sm:    1.125rem;
  --fs-lede:        clamp(1.0625rem, 1.4vw, 1.125rem);
  --fs-small:       0.9375rem;

  --ox-navy:        var(--platform-dark-bg);       --ox-navy-raised: var(--platform-dark-surface);  --ox-navy-deep:   var(--platform-dark-bg);
  --ox-raised-2:    var(--platform-dark-raised);   --ox-line-inv:    var(--platform-dark-border);   --ox-line-strong: var(--platform-dark-border-strong);
  --ox-canvas:      var(--platform-dark-bg);
  --ox-canvas-alt:  var(--platform-dark-surface);
  --ox-line:        var(--platform-dark-border);
  --ox-heat:        #F59E0B;   --ox-heat-soft:   #FCD34D;

  --color-bg:         var(--ox-navy);
  --color-bg-subtle:  var(--ox-navy);
  --color-bg-section: var(--ox-navy-raised);
  --color-bg-dark:    var(--ox-navy);
  --color-bg-darker:  var(--ox-navy);
  --hx-navy-deep:     var(--ox-navy);
  --color-divider:      var(--ox-line);
  --color-divider-dark: var(--ox-line);
  --color-brand-primary:       var(--platform-dark-text);
  --color-brand-primary-hover: var(--platform-dark-accent-hover);

  --color-text-primary:       var(--platform-dark-text);   --color-text-secondary:     var(--platform-dark-muted);  --color-text-tertiary:      var(--platform-dark-muted);
  --color-text-on-dark:       var(--platform-dark-text);
  --color-text-on-dark-muted: var(--platform-dark-muted);
  --color-nav-link-hero:      var(--platform-dark-muted);

  --color-accent:         var(--platform-dark-accent);       --color-accent-hover:   var(--platform-dark-accent-hover); --color-accent-ink:     var(--platform-dark-accent-hover);
  --color-accent-on-dark: var(--platform-dark-accent-hover);
  --color-accent-soft:    rgba(var(--platform-dark-accent-rgb), 0.12);
  --color-success:        var(--platform-dark-success);
  --color-success-ink:    var(--platform-dark-success);
  --color-danger:         var(--platform-dark-danger);
  --color-danger-on-dark: var(--platform-dark-danger);
  --color-info:           var(--platform-dark-info);
  --color-info-ink:       var(--platform-dark-info);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);

  --max-width: 1232px;
  --nav-h: 72px;
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body { font-family: var(--font-body); color: var(--color-text-primary); font-feature-settings: "kern"; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
p, li { text-wrap: pretty; }
h3 { line-height: 1.3; }
strong, b { font-weight: 600; }
code, kbd, samp, .mono { font-family: var(--font-mono); }
::selection { background: var(--color-accent); color: var(--ox-navy); }
body { background: var(--ox-navy); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.nav,
.nav.scrolled {
  background: var(--ox-navy);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--ox-line-inv);
  padding-block: 0.875rem;
}
.nav__logo { font-weight: 600; letter-spacing: -0.01em; }
.nav__logo-mark,
.footer__logo .nav__logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--color-accent); color: var(--ox-navy);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0;
}
.nav__links { gap: 0.25rem; }
.nav__link { font-size: 0.9375rem; padding-inline: 0.75rem; color: var(--color-text-secondary); }
.nav__link:hover { background: transparent; color: var(--color-text-primary); }
.nav__link.active { color: var(--color-text-primary); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.nav__mobile-menu { background: var(--ox-navy); }

.btn { font-weight: 500; border-radius: 6px; letter-spacing: 0; border-width: 1px; }
.btn--primary:hover,
.btn--accent:hover { box-shadow: none; }
.btn--accent { color: var(--ox-navy); }

.nav .btn--primary,
.nav__mobile-menu .btn--primary,
.hx-subhero .btn--primary,
.hx-hero .btn--primary,
.v3-hero .btn--primary,
.hx-dark .btn--primary,
.hx-cta .btn--primary,
.hx-roi .btn--primary,
.section--dark .btn--primary,
.section--darker .btn--primary,
.cta-band .btn--primary,
.footer .btn--primary {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--ox-navy);
}
.nav .btn--primary:hover,
.hx-subhero .btn--primary:hover,
.hx-hero .btn--primary:hover,
.v3-hero .btn--primary:hover,
.hx-dark .btn--primary:hover,
.hx-cta .btn--primary:hover,
.hx-roi .btn--primary:hover,
.section--dark .btn--primary:hover,
.section--darker .btn--primary:hover,
.cta-band .btn--primary:hover,
.footer .btn--primary:hover {
  background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--ox-navy);
}
.btn--secondary-light, .btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--ox-line-strong); }
.btn--secondary-light:hover, .btn--secondary:hover { background: var(--ox-raised-2); color: var(--color-text-primary); border-color: var(--ox-line-strong); }
.btn--primary, .btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--ox-navy); }
.btn--primary:hover, .btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--ox-navy); }

.hx-subhero { background: var(--ox-navy); padding: calc(var(--nav-h) + clamp(3.5rem, 7vw, 5.5rem)) 0 clamp(3.5rem, 6vw, 5rem); }
.hx-subhero__veil { background: radial-gradient(80% 120% at 85% 0%, rgba(var(--platform-dark-accent-rgb), 0.08), transparent 60%); }
.hx-subhero__grid {
  display: block; opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.hx-subhero__title { font-weight: 600; font-size: var(--fs-display-sub); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; }
.hx-subhero__lead { max-width: 60ch; font-size: var(--fs-lede); line-height: 1.6; }

.hx-section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.hx-h2, .section h2 { font-weight: 600; letter-spacing: -0.015em; }
.hx-lead, .lead { line-height: 1.6; }
.hx-eyebrow,
.eyebrow {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: none;
}
.hx-dark { background: var(--ox-navy); }

.case-card, .solution-card, .pillar-card, .intent-card, .layer-card, .modifier-card,
.portfolio-card, .persona-card, .tier-card, .stat-card, .resource-card,
.hx-why-card, .hx-engine-card, .hx-pillar, .hx-stat, .hx-solution {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.case-card:hover, .solution-card:hover, .pillar-card:hover, .intent-card:hover,
.resource-card:hover, .tier-card:hover, .persona-card:hover, .hx-why-card:hover, .hx-pillar:hover {
  box-shadow: none; transform: none;
}

.footer { background: var(--ox-navy); border-top: 1px solid var(--ox-line); padding-block: 4.5rem 2rem; }
.footer__main { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }   .footer__logo { font-weight: 600; }
.footer__tagline { color: var(--color-text-on-dark-muted); margin-bottom: 1rem; }
.footer__contact { font-size: var(--fs-label); line-height: 1.7; color: var(--color-text-on-dark-muted); }
.footer__contact a { color: var(--color-text-on-dark); text-decoration: underline; text-decoration-color: var(--ox-line-strong); text-underline-offset: 3px; }
.footer__contact a:hover { text-decoration-color: var(--color-accent); }
.footer__col-label { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-on-dark-muted); }
.footer__col-link { color: var(--color-text-secondary); }
.footer__col-link:hover { color: var(--color-text-primary); }
.footer__bottom { border-top: 1px solid var(--ox-line-inv); padding-top: 1.5rem; font-size: var(--fs-label); color: var(--color-text-on-dark-muted); }
@media (max-width: 1024px) { .footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   @media (max-width: 768px)  { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .footer__main { grid-template-columns: minmax(0, 1fr); } }

.v3-film__tag, .v3-hero__demo-note {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  background: transparent; border: 0; padding: 0; opacity: 0.8;
}

.form-status { margin-top: 0.75rem; font-size: var(--fs-label); color: var(--color-text-secondary); }
.form-status[data-state="error"] { color: var(--color-danger); }

.hx-trust, .hx-cta, .hxi-est__summary { background: var(--ox-navy-raised); border-top: 1px solid var(--ox-line); border-bottom: 1px solid var(--ox-line); }
.hx-solution__icon, .process-step__number { background: var(--ox-raised-2); color: var(--color-accent); }
.filter-btn.active { background: var(--ox-raised-2); color: var(--color-text-primary); border-color: var(--ox-line-strong); }
.profile-card__row-bar .dot--on, .hxm-dot[aria-pressed="true"], .hxi-rd__dot.now { background: var(--color-accent); }
.hxi-report__bar { background: var(--ox-raised-2); border-bottom: 1px solid var(--ox-line); }
.skip-link { background: var(--color-accent); color: var(--ox-navy); }
.case-detail__block--solution::before { background: var(--color-accent); }

.ox-wordmark { font-weight: 700; letter-spacing: 0.01em; }
.ox-wordmark b { color: var(--color-accent); font-weight: 700; }

.hx-subhero__still {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -3;
  width: min(60%, 960px);
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  opacity: 0.92;
}
@media (max-width: 900px) {
  .hx-subhero__still {
    width: 100%; opacity: 0.32;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  }
}
.hx-subhero .container { position: relative; }

.hxi-report { background: var(--ox-navy-raised); border: 1px solid var(--ox-line); color: var(--color-text-primary); }
.hxi-report__limits { background: var(--ox-raised-2); border: 1px solid var(--ox-line); color: var(--color-text-secondary); }
.hxi-sev { background: var(--ox-raised-2); color: var(--color-text-primary); border: 1px solid var(--ox-line-strong); }
.product-ui__site-selector, .product-ui__btn-primary { color: var(--ox-navy); }
.hxh__flow { background: var(--ox-raised-2); color: var(--color-text-primary); border: 1px solid var(--ox-line-strong); }
.hxi-report__limits-label { color: var(--ox-heat-soft); }
.hxi-report__limits-text { color: var(--color-text-secondary); }
.hxi-sev--crit { background: rgba(var(--platform-dark-danger-rgb), 0.14); color: var(--platform-dark-danger); border-color: rgba(var(--platform-dark-danger-rgb), 0.4); }
.hxi-sev--warn, .hxi-sev--high { background: rgba(245, 158, 11, 0.14); color: var(--ox-heat-soft); border-color: rgba(245, 158, 11, 0.4); }
.hxi-sev--watch { background: rgba(var(--platform-dark-accent-rgb), 0.14); color: var(--platform-dark-info); border-color: rgba(var(--platform-dark-accent-rgb), 0.4); }
.hxi-sev--dq { background: var(--ox-raised-2); color: var(--color-text-secondary); }

.case-detail__image, .v3-film__frame, .v3-film__video, .v3-heat__frame, .v3-pas__product, .v3-tough__media,
.hxai__phone, .hxir__canvas, .hxpt__stage, .hxr__canvas, .hxrs__canvas, .hxtu__chrome, .hxtu__imgwrap, .hxm-screen {
  background-color: var(--platform-dark-bg);
}
.hxtu__chrome { border-color: var(--ox-line); }

.hxl-btn--primary { color: var(--ox-navy); }
.hxh__demo-chip { color: var(--platform-dark-muted); }
.thermalpas-compare__surface { color: var(--ox-navy); }
.hxtu { background: var(--platform-dark-bg); border-color: var(--ox-line); }
.hxr__scope, .hxr__panel, .hxrs__stage { background: var(--platform-dark-surface); }
.hxm-phone { background: linear-gradient(160deg, var(--platform-dark-raised), var(--platform-dark-bg)); }
.hxm-screen { background: linear-gradient(var(--platform-dark-surface), var(--platform-dark-bg)); }
.hxtu__item[aria-pressed="true"], .hxr__scn[aria-pressed="true"], .hxrs__navbtn[aria-pressed="true"], .hxi-triage__chip[aria-pressed="true"] {
  background: rgba(var(--platform-dark-accent-rgb), 0.12); border-color: rgba(var(--platform-dark-accent-rgb), 0.55); color: var(--color-text-primary);
}
.hxtu__demo-chip, .hxai__demo, .hxl-chip { border-color: var(--ox-line-strong); color: var(--platform-dark-muted); background: transparent; }
.thermalpas-compare__col--featured {
  border-color: rgba(var(--platform-dark-accent-rgb), 0.45);
  background: linear-gradient(180deg, var(--ox-navy-raised) 0%, rgba(var(--platform-dark-accent-rgb), 0.06) 100%);
  box-shadow: 0 0 0 1px rgba(var(--platform-dark-accent-rgb), 0.12);
}

picture.ox-pic { display: contents; }
.product-ui__time-btn.active, .product-ui__time-btn[aria-pressed="true"], .product-ui__brand-mark { color: var(--ox-navy); }
.product-ui__time-tabs span.active { background: var(--color-accent); color: var(--ox-navy); }

.r-illus-tag {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: calc(var(--nav-h) + 1rem); z-index: 1; margin: 0;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  color: rgba(250, 250, 250, 0.45); pointer-events: none;
}
.ox-wordmark, .ox-wordmark b { font-weight: 600; }
.nav__logo-mark, .footer__logo .nav__logo-mark { font-weight: 600; }