/* mxt-theme.css — MXTechies shared dark/gold page system (matches homepage) */
:root {
  --bg: #0a0a0a;
  --bg-1: #0a0806;
  --bg-2: #0f0b07;
  --accent: #f26522;
  --accent-2: #ff8442;
  --gold: #ff8442;
  --gold-bright: #f26522;
  --paper: #f5efe6;
  --mut: rgba(245, 239, 230, .66);
  --dim: rgba(245, 239, 230, 0.562);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .14);
  --display: 'Inter Tight', sans-serif;
  --serif: 'Instrument Serif', serif;
  --body: 'Hanken Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --maxw: 1200px;
  --ok:#5FD0A0;

  
  /* Spacing scale, 4-based, so the eye learns the intervals. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --r-lg:16px; --r-md:12px; --r-sm:8px; --r-btn:11px; --nav-h:56px;

    /* Vertical rhythm: two deliberate steps, not a slider.
     70px is the reference page's own section padding. */
  --pad-sec:clamp(48px,5.5vw,70px);
  --pad-band:clamp(36px,3.6vw,45px);


}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  max-width: 100%
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  /* padding: 0 clamp(24px, 5vw, 80px) */
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line)
}

.nav__in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.nav__logo img {
  height: 26px;
  width: auto
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px
}

.nav__links a {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--mut);
  transition: color .2s;
  white-space: nowrap
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--paper)
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  color: #0a0806;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(242, 101, 34, .34);
  white-space: nowrap
}

.nav__cta span {
  font-family: var(--mono)
}

@media(max-width:900px) {
  .nav__links {
    display: none
  }
}

/* ---------- homepage-style mega nav ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100
}

.topbar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 clamp(14px, 3vw, 32px);
  background: rgba(0, 0, 0, .85);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px
}

.topbar a {
  color: var(--dim);
  transition: color .2s
}

.topbar a:hover {
  color: var(--paper)
}

.mainnav {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 clamp(14px, 3vw, 32px);
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line)
}

.mainnav__logo img {
  height: 26px;
  width: auto;
  display: block
}

.mnav {
  margin-left: 26px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500
}

.mnav__item {
  position: relative
}

.mnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--mut);
  white-space: nowrap;
  transition: color .2s;
  cursor: pointer
}

.mnav__item:hover .mnav__link,
.mnav__link.is-ai {
  color: var(--paper)
}

.mnav__link .star {
  color: var(--accent);
  font-size: 12px
}

.mnav__badge {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase
}

.mnav__car {
  font-size: 9px;
  color: var(--dim);
  transition: transform .2s
}

.mnav__item:hover .mnav__car {
  transform: rotate(180deg)
}

.mainnav__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: #0a0806;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  padding: 9px 17px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(242, 101, 34, .34);
  white-space: nowrap
}

.mainnav__cta span {
  font-family: var(--mono)
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 49;
  background: rgba(10, 9, 7, .98);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line2);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s
}

.mnav__item:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.mega__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px clamp(40px, 5vw, 80px);
  display: grid;
  gap: 34px;
  align-items: start
}

.mega__feat {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 190px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line2);
  background-color: #000;
}

.mega__feat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .85))
}

.mega__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2
}

.mega__kick {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px
}

.mega__blurb {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  line-height: 1.2
}

.mega__col h6 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 13px
}

.mega__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.mega__col a {
  font-size: 13.5px;
  color: var(--mut);
  transition: color .2s
}

.mega__col a:hover {
  color: var(--paper)
}

@media(max-width:980px) {

  .topbar,
  .mnav {
    display: none
  }

  .mainnav__cta {
    margin-left: auto
  }
}

/* ---------- hero ---------- */
.phero {
  position: relative;
  overflow: hidden;
  padding: 130px 0 64px;
  background: radial-gradient(ellipse 70% 70% at 72% -20%, rgba(242, 101, 34, .18), transparent 58%), var(--bg)
}

.phero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(233, 185, 73, .10) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 75% 0%, #000 20%, transparent 75%)
}

.phero .container {
  position: relative;
  z-index: 2
}

.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 22px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

.crumb a:hover {
  color: var(--gold)
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px
}

.eyebrow span {
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .5
}

.phero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 45px);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-align: start;
}

.phero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 5px;
      /* text-wrap-mode: nowrap; */
}

.phero__lead {
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--mut);
  max-width: 60ch
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 11px;
  transition: transform .2s, box-shadow .2s, background .2s;
  color: #f5efe6;
}
.btn.btn--ghost:hover {
  color: #f26522;
}
.btn span {
  font-family: var(--mono)
}

.btn--primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #0a0806;
  box-shadow: 0 14px 32px rgba(242, 101, 34, .34)
}

.btn--primary:hover {
  transform: translateY(-2px)
}

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line2)
}

.btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(233, 185, 73, .08);
  color: var(--gold) ;
}

/* ---------- generic sections ---------- */
.section {
  position: relative;
  padding: 45px 20px
}

/* .section+.section {
  padding-top: 0
} */

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 90vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line2), transparent);
  opacity: .5
}

.section--alt::before,
.phero+.section::before {
  display: none
}

.section--alt {
  background: linear-gradient(180deg, #000, #0b0805 50%, #000)
}

.sec-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.sec-head--left {
  margin: 0 0 48px;
  text-align: left;
  align-items: flex-start
}

.sec-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em
}

.sec-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold)
}

.sec-head p {
  color: var(--mut);
  font-size: 16px;
  line-height: 1.6;
  max-width: 60ch
}

/* numbered use-case cards (crisp design) */
.section--alt .grid-3 {
  counter-reset: uc
}

.section--alt .grid-3 .card {
  counter-increment: uc;
  padding-top: 48px
}

.section--alt .grid-3 .card::before {
  content: counter(uc, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c, var(--accent))
}

.section--alt .grid-3 .card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--c, var(--accent));
  opacity: .55;
  transition: width .3s
}

.section--alt .grid-3 .card:hover::after {
  width: 54px
}

.card {
  position: relative
}

/* card grid */
.grid {
  display: grid;
  gap: 16px
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr)
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr)
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr)
}

.card {
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  transition: border-color .25s, transform .25s, background .25s
}

.card:hover {
  border-color: color-mix(in srgb, var(--c, var(--accent)) 50%, transparent);
  transform: translateY(-4px)
}

.card__ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 32%, transparent)
}

.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  margin-bottom: 8px
}

.card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mut)
}

.kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px
}

/* feature row (text + visual) */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center
}

.frow--rev .frow__media {
  order: -1
}

.frow__media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line2);
  /* min-height: 320px; */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent !important;
}

.frow h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 14px
}

.frow h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold)
}

.frow p {
  color: var(--mut);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 14px
}

.ticklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px
}

.ticklist li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  color: var(--paper);
  line-height: 1.5
}

.ticklist li i {
  color: var(--accent);
  font-style: normal;
  flex: none;
  font-weight: 700
}

/* stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0
}

.stat__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.02em;
  color: var(--paper)
}

.stat__n em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold)
}

.stat__l {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.45;
  margin-top: 6px
}

/* CTA band */
.ctaband {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line2);
  padding: 60px clamp(28px, 5vw, 72px);
  text-align: center;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(242, 101, 34, .2), transparent 65%), linear-gradient(180deg, #140d07, #0a0806)
}

.ctaband h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 16px
}

.ctaband h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold)
}

.ctaband p {
  color: var(--mut);
  font-size: 16px;
  max-width: 56ch;
  margin: 0 auto 30px;
  line-height: 1.6
}

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.chip {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  color: var(--paper);
  background: color-mix(in srgb, var(--c, var(--accent)) 22%, rgba(0, 0, 0, .4));
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 48%, transparent);
  padding: 6px 12px;
  border-radius: 999px
}

/* quantified use-case cards */
.uc {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition: border-color .25s, transform .25s, background .25s
}

.uc:hover {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  transform: translateY(-4px)
}

.uc__metric {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.025em;
  color: var(--c);
  line-height: 1;
  margin-bottom: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.uc__metric span {
  /* font-family: var(--mono); */
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400
}

.uc h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  margin-bottom: 7px
}

.uc p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut)
}

/* executive value cards */
.exec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.exec__card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  position: relative;
  overflow: hidden
}

.exec__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .6
}

.exec__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 6px 0 10px
}

.exec__card h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 7px;
  color: var(--paper)
}

.exec__card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut)
}

/* in-production image slots */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.shots image-slot {
  display: block;
  width: 100%;
  aspect-ratio: 16/10
}

@media(max-width:960px) {
  .exec {
    grid-template-columns: 1fr 1fr
  }

  .shots {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .exec {
    grid-template-columns: 1fr
  }

  .shots {
    grid-template-columns: 1fr
  }
}

/* stat-as-image cards */
.statviz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px
}

.svcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  overflow: hidden;
  transition: border-color .25s, transform .25s
}

.svcard:hover {
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  transform: translateY(-3px)
}

.svcard__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px
}

.svcard__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--c, var(--paper))
}

.svcard__l {
  margin-top: 12px;
  font-size: 13px;
  color: var(--mut);
  line-height: 1.4
}

.svcard__track {
  margin-top: 15px;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.svcard__fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff))
}

/* FAQ (Q&A) */
.faq {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  overflow: hidden;
  transition: border-color .2s
}

.faq details[open] {
  border-color: var(--line2)
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--accent);
  font-size: 18px;
  transition: transform .2s;
  flex: none
}

.faq details[open] summary::after {
  transform: rotate(45deg)
}

.faq details p {
  padding: 0 22px 19px;
  color: var(--mut);
  font-size: 14px;
  line-height: 1.65;
  margin: 0
}

/* footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  background: var(--bg-1)
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px
}

.foot__brand img {
  height: 28px;
  margin-bottom: 16px
}

.foot__brand p {
  color: var(--mut);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 34ch
}

.foot__col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px
}

.foot__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.foot__col a {
  font-size: 13.5px;
  color: var(--mut);
  transition: color .2s
}

.foot__col a:hover {
  color: var(--paper)
}

.foot__bot {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 22px clamp(24px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--dim)
}

@media(max-width:960px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .frow {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .frow--rev .frow__media {
    order: 0
  }

  .stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .foot__grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {

  .section {
    padding: 35px 15px;
  }

  .grid-3,
  .grid-4,
  .grid-2 {
    grid-template-columns: 1fr
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  .foot__grid {
    grid-template-columns: 1fr
  }
}

 .qa-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: stretch
  }

  .qa-card {
    background: #101017;
    border: 1px solid var(--line2);
    border-radius: 18px;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  }

  .qa-card--main {
    border-left: 3px solid var(--accent)
  }

  .qa-card p {
    font-size: clamp(15.5px, 1.4vw, 16px);
    line-height: 1.6;
    color: #c9c9d3
  }

  .qa-card p strong {
    color: var(--paper)
  }

  .qa-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #b6b6c2;
    margin-top: 4px
  }

  .qa-list li {
    list-style: none;
    display: block;
    gap: 10px;
    font-size: 16px;
  }

  .qa-list li i {
    color: var(--accent);
    font-weight: 700;
    font-style: normal;
    margin-right: 5px;
  }

  @media (max-width: 1100px) {

    .qa-grid,
    .hero-grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }

  }

  
  @media (max-width: 1100px) {
    .phero{
      padding: 80px 20px 30px !important;
    }

    .qa-grid{
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }

  }

  .frow__media {
    width:85%;height:85%;margin: 0 auto
  }
  .frow__media img{
    object-fit: contain;
    width:100%;height:100%;
  }

  .offer-card .btn--primary:hover{
    color:#f5efe6;
  }
  .stats{
    padding-left: 10px;
    padding-right: 10px;
  }


  
/* ════════════════════════ INDUSTRIES · THE ARC ════════════════════════
   Ported from the reference component's own frame: cards on a horizontal
   track, riding a shallow arc. Away from the middle a card drops, shrinks,
   tilts and fades; at the middle it sits upright, largest and fully opaque.
   The numbers below are read off that markup — a ~6.4° tilt that saturates
   well before the edge, scale 1.01 down to 0.95, opacity 1 down to 0.66,
   96px of drop, and a 96px fade over each edge of the frame.

   Without script, and under reduced motion, the same cards are a plain
   horizontal scroller: nothing is hidden behind an animation that is not
   running.                                                              */
.arc{position:relative;margin-top:clamp(26px,3vw,38px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.arc::-webkit-scrollbar{display:none}
.arc-track{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0 0 10px}
.arc-card{flex:none;width:320px;padding:12px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-2);z-index:4 !important}
.arc-figure{display:grid;place-items:center;aspect-ratio:1.6;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.22);
  background:radial-gradient(120% 120% at 50% 22%,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.05) 62%,transparent)}
.arc-figure img{width:100%;height:250px;color:var(--accent-2)}
.arc-name{display:block;margin-top:16px;font-size:1.06rem;font-weight:600;
  letter-spacing:-.018em;line-height:1.28;color:var(--paper)}
/* Two of the six carry no analysis list in the source, so the line is
   reserved rather than invented — every card keeps the same height. */
.arc-what{display:block;margin-top:7px;height:2.9em;overflow:hidden;
  font-size:.87rem;font-weight:300;line-height:1.45;color:var(--mut)}

/* ── the arc, once the script has it ─────────────────────────────────── */
.arc.on{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.arc.on:active{cursor:grabbing}
.arc.on .arc-track{display:block;padding:0;height:100%}
.arc.on .arc-card{position:absolute;left:0;top:0;
  transform-origin:center center;will-change:transform;
  box-shadow:0 18px 46px -22px rgba(0,0,0,.9)}
.arc-fade{position:absolute;top:0;bottom:0;width:96px;pointer-events:none;z-index:80;display:none}
.arc.on .arc-fade{display:block}
.arc-fade.l{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)}
.arc-fade.r{right:0;background:linear-gradient(270deg,var(--bg) 0%,transparent 100%)}

@media (max-width:700px){
  .arc-card{width:270px}
  .arc-figure svg{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .arc.on{overflow-x:auto;cursor:default}
  .arc.on .arc-fade{display:none}
}


/* Each industry answers to a named regime, so that gets its own line rather
   than being folded into the description where it would be lost. */
.arc-std{display:block;margin-top:6px;height:1.5em;overflow:hidden;font-size:.71rem;
  font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--accent-2)}
@media (max-width:820px){ .arc-std{height:auto} }




/* ═══════════════════ APPLICATIONS · THE EXPANDING ROWS ═══════════════════
   The six builds as two rows that open under the pointer. Motion is the
   reference component's own — flex against flex, 600ms on
   cubic-bezier(.22,.8,.25,1), an 8px gap. Its 6:1 expand ratio suits
   photographs; these panels carry words, so 4:1 keeps a closed panel wide
   enough to set "BOM collaboration" without turning it on its side, and
   three to a row rather than six keeps that true down to a tablet.

   Alignment is the point of the reserved heights below. Icon, name,
   description and module tags each occupy a fixed band in every panel,
   open or closed, so the six names sit on one line and the six tag rows
   sit on another. Opening a panel changes what is legible, never where
   anything is.                                                          */
.xrow{--xe:cubic-bezier(.22,.8,.25,1);display:flex;gap:8px;
  height:clamp(320px,27vw,358px);margin-top:clamp(28px,3.4vw,44px)}
.xrow + .xrow{margin-top:8px}
.xpanel{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  appearance:none;-webkit-appearance:none;font:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#000;
  color:var(--paper);padding:clamp(16px,1.9vw,23px);
  transition:flex 600ms var(--xe),border-color 600ms var(--xe),background 600ms var(--xe),
             opacity 620ms var(--expo) calc(var(--i,0) * 80ms),
             transform 620ms var(--expo) calc(var(--i,0) * 80ms)}
.xpanel[aria-pressed="true"]{flex:4 1 0%;border-color:rgba(var(--accent-rgb),.34)}
.xpanel:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.xpanel::after{content:"";position:absolute;inset:auto 0 0 0;height:54%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.12));
  opacity:0;transition:opacity 600ms var(--xe)}
.xpanel[aria-pressed="true"]::after{opacity:1}
.xpanel .card-ico{position:relative;z-index:1}
.xpanel[aria-pressed="true"] .card-ico{background:rgba(var(--accent-rgb),.17);
  border-color:rgba(var(--accent-rgb),.52)}

.x-block{position:static;z-index:1}

.xpanel .x-img{display:block;position: absolute;top:0;right:0;width:300px;height:300px;aspect-ratio: 4/4;border-radius:calc(var(--r-lg) - 6px);z-index:-1;
  overflow:hidden;margin-bottom:0;
  opacity:0;
  transition:max-height 480ms var(--xe),margin-bottom 480ms var(--xe),
             opacity 380ms var(--xe) 40ms}
/* .xpanel .x-img::before{position: absolute;content:'';left: 0;top:0;width: 100%;height:100%;background-color: #0a080688;z-index: 0;} */
.xpanel .x-img img{display:block;width:100%;height:100%;object-fit:contain}
.xpanel[aria-pressed="true"] .x-img{max-height:100%;margin-bottom:12px;opacity:1}

.x-name{display:block;height:2.5em;overflow:hidden;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.018em;line-height:1.25}
.x-what{display:block;margin-top:9px;height:4.65em;overflow:hidden;max-width:36ch;
  color:#ffffffe0;font-size:.92rem;line-height:1.55;font-weight: 500;
  opacity:0;transform:translateY(9px);
  transition:opacity 430ms var(--xe) 70ms,transform 430ms var(--xe) 70ms}
.xpanel[aria-pressed="true"] .x-what{opacity:1;transform:none}
.xpanel .card-tags{margin-top:14px;height:39px;flex-wrap:nowrap;overflow:hidden;
  opacity:0;transform:translateY(9px);
  transition:opacity 430ms var(--xe) 130ms,transform 430ms var(--xe) 130ms}
.xpanel[aria-pressed="true"] .card-tags{opacity:1;transform:none}
.xpanel .card-tag{white-space:nowrap}

.js .xrow:not(.in) .xpanel{opacity:0;transform:translateY(14px)}

@media (max-width:820px){
  .xrow{flex-direction:column;height:auto;gap:10px}
  .xrow + .xrow{margin-top:10px}
  .xpanel{flex:none;cursor:default;padding:clamp(17px,4vw,22px)}
  .xpanel[aria-pressed="true"]{flex:none}
  .x-name{height:auto}
  .x-what{height:auto;max-width:54ch;opacity:1;transform:none}
  .xpanel .card-tags{height:auto;flex-wrap:wrap;opacity:1;transform:none}
  .xpanel::after{opacity:.5}
  .xpanel .x-img{margin-bottom:12px;opacity:1}
  .xpanel .x-img img{height:100px}
} 

 .why-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:20px
}

.why-list li{
align-items: center !important;
  border: 0.5px solid rgb(49 49 48) !important;
padding: 10px !important;
border-radius: 8px;
}

.why-list li p{
font-size: 14px !important;
font-weight: 500;
color: #fff !important;
}

#why .aside-grid{
  grid-template-columns: 0.5fr 1.5fr !important;

}


@media (max-width:991px){

  #why .aside-grid{
  grid-template-columns: 100% !important;

}
  .why-list{

  grid-template-columns: auto;
}
}


  /* ═════════════════════════ HERO · THE PLM HUB ═════════════════════════
   Teamcenter holds the record and never moves; everything we build orbits
   it and reads across a published boundary. The hero draws exactly that —
   a still core, rings that turn, and six application nodes that light as
   data reaches them. The rings are particles on a canvas; the core and the
   icons are real elements, so the type stays crisp and the icons are the
   same set the Applications section uses further down the page.        */
    .pfield {
        position: relative;
        margin: 0;
        display: grid;
        gap: var(--s5)
    }

    .pf-stage {
        position: relative;
        aspect-ratio: 1/1;
        width: 100%;
        max-width: 540px;
        margin-inline: auto;
        min-height: 290px
    }

    .pf-canvas {
        display: block;
        width: 100%;
        height: 100%
    }

    /* the core: the one thing in the composition that does not move */
    .pf-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 40%;
        aspect-ratio: 1/1;
        transform: translate(-50%, -50%);
        display: grid;
        place-content: center;
        justify-items: center;
        border-radius: 50%;
        text-align: center;
        pointer-events: none;
        background: radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .34),
                rgba(var(--accent-rgb), .10) 52%, transparent 71%)
    }

    .pf-core b {
        display: block;
        font-size: clamp(1.45rem, 3.2vw, 2.25rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.045em;
        color: var(--paper)
    }

    .pf-core i {
        display: block;
        margin-top: 7px;
        font-style: normal;
        font-weight: 600;
        font-size: clamp(.66rem, 1.1vw, .72rem);
        letter-spacing: .17em;
        text-transform: uppercase;
        color: var(--accent-2)
    }

    /* the six applications, placed on the ring by the geometry the canvas uses */
    .pf-nodes {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        inset: 0;
        pointer-events: none
    }

    .pf-node {
        position: absolute;
        width: 16%;
        aspect-ratio: 1/1;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--accent-2);
        border: 1px solid rgba(var(--accent-rgb), .32);
        background: rgba(9, 7, 6, .82);
        transition: color var(--t-std) var(--ease), border-color var(--t-std) var(--ease),
            background var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease)
    }

    .pf-node svg {
        width: 46%;
        height: 46%
    }

    .pf-node.on {
        color: var(--paper);
        border-color: var(--accent-2);
        background: rgba(var(--accent-rgb), .24);
        box-shadow: 0 7px 30px -8px rgba(var(--accent-rgb), .8)
    }

    .pf-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s4);
        flex-wrap: wrap
    }

    /* Reserved height, so a shorter line never shortens the hero mid-cycle. */
    .pf-cap {
        margin: 0;
        flex: 1 1 22ch;
        font-size: .88rem;
        line-height: 1.55;
        color: var(--mut);
        max-width: 46ch;
        min-height: 4.7em;
        transition: opacity var(--t-std) var(--ease)
    }

    .pf-cap.swap {
        opacity: 0
    }

    .pf-cap b {
        font-weight: 600;
        color: var(--paper)
    }

    .pf-toggle {
        appearance: none;
        -webkit-appearance: none;
        font: inherit;
        font-size: .76rem;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: var(--r-sm);
        cursor: pointer;
        flex: none;
        color: var(--dim);
        border: 1px solid var(--line);
        background: rgba(7, 7, 7, .5);
        transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease)
    }

    .pf-toggle:hover {
        color: var(--paper);
        border-color: var(--line-2)
    }

    
/* ------------------------------ HERO - THE RING ------------------------------
   The system of record at the centre, the six applications on the track around
   it. Each
   node is placed by one angle: rotate out to its position, translate along
   the radius, rotate back. The translate percentage resolves against the
   node's own width, not the ring, so 128% of a 28% node is 36% of the ring.

   The track turns, slowly. The nodes turn with it and their contents turn
   back by the same amount, so every label stays upright the whole way round.
   No canvas and no script --- the diagram is the markup, and it prints.    */
.ring{position:relative;width:100%;max-width:372px;aspect-ratio:1/1;margin-inline:auto}
/* one dashed orbit, drawn exactly where the nodes sit */
.ring-band{position:absolute;inset:14%;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(var(--accent-rgb),.26)}

.ring-core{position:absolute;left:50%;top:50%;width:33%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;display:grid;place-content:center;
  justify-items:center;text-align:center;pointer-events:none;
  background:var(--accent-3)}
.ring-core b{display:block;font-size:clamp(.95rem,2.4vw,1.22rem);font-weight:700;
  letter-spacing:-.02em;line-height:1;color:#fff}
.ring-core i{display:block;margin-top:5px;font-style:normal;font-weight:600;
  font-size:clamp(.55rem,.98vw,.63rem);letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}

@keyframes ringturn{to{transform:rotate(360deg)}}
.ring-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  animation:ringturn 54s linear infinite}
.ring-node{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1/1;
  margin:-14% 0 0 -14%;
  transform:rotate(var(--a)) translate(128%) rotate(calc(-1 * var(--a)));
  border-radius:50%;display:grid;place-items:center;padding:6%;
  border:1px solid var(--line-2);background:var(--bg-2)}
/* the same turn, backwards, so the label never tips over */
.ring-in{display:grid;justify-items:center;gap:5px;text-align:center;
  animation:ringturn 54s linear infinite reverse}
.ring-in svg{width:clamp(19px,5.4vw,24px);height:auto;aspect-ratio:1/1;color:var(--accent-2)}
.ring-lbl{display:block;font-size:clamp(.60rem,1.5vw,.70rem);font-weight:500;
  line-height:1.24;letter-spacing:-.008em;color:var(--paper)}

.ring-note{margin:var(--s5) 0 0;font-size:.84rem;line-height:1.5;color:var(--dim);
  text-align:center;max-width:54ch;margin-inline:auto}
.ring-note b{font-weight:600;color:var(--mut)}

@media (max-width:960px){ .ring{margin-top:var(--s4)} }
@media (max-width:420px){
  .ring-node{width:31%;margin:-15.5% 0 0 -15.5%;
    transform:rotate(var(--a)) translate(111%) rotate(calc(-1 * var(--a)))}
}


/* ════════════════════════ MODERNIZE · THE ORBIT ════════════════════════
   The argument of this section, drawn: Opcenter sits at the centre and does
   not move. Everything that gets added orbits it. Ported from the radial
   orbital timeline component — its geometry (a ring of nodes, depth by
   cos, brightness by sin, click to bring a node to the top and open its
   card, related nodes pulsing) rather than its React.

   Two things from the original are deliberately not here: the "energy"
   meter, which would be a number we invented, and a transition on the
   per-frame transform, which in the original fights its own 50ms timer.
   The drift here is untransitioned; only the click-to-centre move eases.

   Without script the same six sit in a plain grid with their copy open —
   nothing is hidden behind an animation that is not running.           */
.halo{position:relative;margin-top:clamp(28px,3.4vw,44px)}
.halo-core,.halo-cap,.halo-ring{display:none}

/* ── the fallback: a grid, readable with no script at all ──────────── */
.halo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  list-style:none;margin:0;padding:0}
.halo-node{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);padding:clamp(16px,2vw,20px)}
.halo-btn{display:flex;align-items:center;gap:10px;width:100%;padding:0;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.halo-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(var(--accent-rgb),.3);
  background:rgba(var(--accent-rgb),.08);color:var(--accent-2)}
.halo-ico svg{width:19px;height:19px}
.halo-name{font-size:.98rem;font-weight:600;letter-spacing:-.018em;line-height:1.28}
.halo-panel h3{display:none}
.halo-panel p{margin-top:10px;font-size:.87rem;font-weight:300;line-height:1.5;color:var(--mut)}
.halo-out{color:var(--accent-4);font-size:.85rem;font-weight:500}
.halo-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.halo-badge{font-size:.72rem;font-weight:500;letter-spacing:.02em;padding:3px 9px;
  border-radius:999px;border:1px solid rgba(var(--accent-rgb),.34);
  background:rgba(var(--accent-rgb),.1);color:var(--accent-2)}
.halo-who{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.halo-links{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.halo-links-t{display:block;margin-bottom:7px;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.halo-link{display:inline-flex;align-items:center;gap:5px;margin:0 6px 6px 0;
  padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;color:var(--mut);font:inherit;font-size:.78rem;cursor:pointer;
  transition:background var(--t-std) var(--ease),color var(--t-std) var(--ease),
    border-color var(--t-std) var(--ease)}
.halo-link:hover{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.4);
  color:var(--paper)}
.halo-link::after{content:"\2192";color:var(--accent-2)}

/* ── the orbit, once the script has it ─────────────────────────────── */
.halo.on{height:var(--halo-h,560px);overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r-lg);background:
    radial-gradient(78% 78% at 50% 50%,rgba(var(--accent-rgb),.07),transparent 70%),var(--bg-2)}
.halo.on .halo-core,.halo.on .halo-cap,.halo.on .halo-ring{display:block}
.halo.on .halo-list{display:block;height:100%;gap:0}
.halo.on .halo-node{position:absolute;left:50%;top:50%;width:auto;margin:-21px 0 0 -21px;
  padding:0;border:0;border-radius:0;background:none;will-change:transform}
.halo.on .halo-node.snap{transition:transform 700ms var(--expo),opacity 700ms var(--ease)}

.halo-core{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;z-index:20;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,var(--accent-4),var(--accent) 52%,var(--accent-3))}
.halo-core i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;background:rgba(255,255,255,.88)}
.halo-ping{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;border:1px solid rgba(var(--accent-rgb),.55);
  animation:haloping 2.6s cubic-bezier(0,0,.2,1) infinite}
.halo-ping.d{animation-delay:1.3s}
@keyframes haloping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.4);opacity:0}}

.halo-cap{position:absolute;left:50%;top:calc(50% + 42px);transform:translateX(-50%);
  z-index:20;margin:0;text-align:center;pointer-events:none;white-space:nowrap}
.halo-cap b{display:block;font-size:.98rem;font-weight:700;letter-spacing:-.015em;color:var(--paper)}
.halo-cap i{display:block;margin-top:2px;font-style:normal;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.halo-ring{position:absolute;left:50%;top:50%;width:calc(var(--halo-r,200px) * 2);
  height:calc(var(--halo-r,200px) * 2);margin-left:calc(var(--halo-r,200px) * -1);
  margin-top:calc(var(--halo-r,200px) * -1);border-radius:50%;
  border:1px dashed rgba(var(--accent-rgb),.24);pointer-events:none}

.halo.on .halo-btn{display:grid;justify-items:center;gap:0;width:42px}
.halo.on .halo-ico{width:42px;height:42px;border-width:2px;background:var(--bg);
  transition:transform 300ms var(--expo),background var(--t-std) var(--ease),
    border-color var(--t-std) var(--ease),color var(--t-std) var(--ease)}
.halo.on .halo-name{position:absolute;top:50px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.01em;
  color:var(--paper);transition:color var(--t-std) var(--ease)}
.halo.on .halo-node:hover .halo-ico,.halo.on .halo-btn:focus-visible .halo-ico{
  border-color:var(--accent-2);color:var(--accent-4)}
.halo.on .halo-node.rel .halo-ico{border-color:var(--accent-2);
  background:rgba(var(--accent-rgb),.16);animation:halorel 1.6s ease-in-out infinite}
@keyframes halorel{0%,100%{opacity:1}50%{opacity:.55}}
.halo.on .halo-node.open .halo-ico{transform:scale(1.28);background:var(--accent);
  border-color:var(--accent-4);color:#0A0A0A;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.16)}
.halo.on .halo-node.open .halo-name{color:var(--accent-4)}

.halo.on .halo-panel{position:absolute;top:76px;left:50%;transform:translateX(-50%);
  width:288px;padding:16px 17px 17px;border-radius:var(--r-md);
  border:1px solid rgba(var(--accent-rgb),.3);background:rgba(10,10,10,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);text-align:left}
.halo.on .halo-panel::before{content:"";position:absolute;top:-13px;left:50%;width:1px;height:13px;
  background:rgba(var(--accent-rgb),.6)}
.halo.on .halo-panel h3{display:block;margin-top:10px;font-size:.98rem;letter-spacing:-.018em}
.halo.on .halo-head{margin-top:0}

@media (max-width:960px){
  .halo-list{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* the labels are wider than the gaps between nodes at this size, so only
     the open one keeps its name */
  .halo.on .halo-name{opacity:0;transition:opacity var(--t-std) var(--ease)}
  .halo.on .halo-node.open .halo-name{opacity:1}
  .halo.on .halo-ico{width:38px;height:38px}
  .halo.on .halo-btn{width:38px}
  .halo.on .halo-node{margin:-19px 0 0 -19px}
  .halo.on .halo-panel{width:min(288px,86vw);top:66px}
  .halo-cap b{font-size:.88rem}
}
@media (max-width:700px){
  .halo-list{grid-template-columns:1fr}
}


/* ------------------------------ HERO - THE ORB ------------------------------
   Three tilted particle rings orbit a lit core; pulses run the rings to read
   as data moving between the application layer and the MES. Canvas, 2D,
   perspective-projected; one static frame under reduced motion. */
.orb{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;margin-inline:auto;overflow:visible}
.orb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;
  padding:18px 26px;border-radius:999px;background:rgba(10,10,12,.55);border:1px solid rgba(var(--accent-rgb),.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 60px rgba(var(--accent-rgb),.35),inset 0 0 30px rgba(var(--accent-rgb),.12)}
.orb-core b{display:block;font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.orb-core i{display:block;margin-top:6px;font-style:normal;font-weight:600;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2)}
.orb-lbl{position:absolute;left:var(--x);top:var(--y);padding:8px 13px;border-radius:9px;font-size:.78rem;font-weight:500;
  color:var(--paper);white-space:nowrap;background:rgba(14,14,18,.62);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  animation:orbfloat 7s ease-in-out infinite;animation-delay:var(--f)}
.orb-lbl::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--accent-2)}
@keyframes orbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:960px){.orb{max-width:440px;margin-top:10px}.orb-lbl{font-size:.72rem;padding:6px 10px}}
@media (max-width:420px){.orb-lbl{display:none}}
@media (prefers-reduced-motion:reduce){.orb-lbl{animation:none}}



/* ── the signal: a reading crosses a threshold and becomes an assigned action ── */
.sig{position:relative;aspect-ratio:1/.92;min-height:0;border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%),var(--bg-2);
  overflow:hidden}
.sig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sig-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sig-asset{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--mut)}
.sig-asset b{color:var(--paper);font-weight:600}
.sig-state{display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  transition:color var(--t-std) var(--ease)}
.sig-state i{width:6px;height:6px;border-radius:50%;background:var(--dim);display:block;
  transition:background var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease)}
.sig.alarm .sig-state{color:var(--accent-2)}
.sig.alarm .sig-state i{background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
/* the payoff: three rows that light in order, which is the page's whole argument */
.sig-feed{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:grid;gap:1px}
.sig-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:10px;background:rgba(7,7,7,.66);border:1px solid transparent;
  backdrop-filter:blur(7px);opacity:.3;transform:translateY(5px);
  transition:opacity var(--t-std) var(--ease),transform var(--t-std) var(--ease),
             border-color var(--t-std) var(--ease),background var(--t-std) var(--ease)}
.sig-row.on{opacity:1;transform:none;border-color:rgba(var(--accent-rgb),.26);background:rgba(7,7,7,.86)}
.sig-row .tick{width:15px;height:15px;flex:none;color:var(--accent);opacity:0;
  transition:opacity var(--t-std) var(--ease)}
.sig-row.on .tick{opacity:1}
.sig-row .txt{font-size:.82rem;color:var(--mut);letter-spacing:-.005em}
.sig-row.on .txt{color:var(--paper)}
.sig-row .who{font-size:.7rem;font-weight:600;letter-spacing:.06em;color:var(--dim);
  font-variant-numeric:tabular-nums}
.sig-row.on .who{color:var(--accent-4)}






  /* ------------------------------ HERO - THE RING ------------------------------
   The system of record at the centre, the six applications on the track around
   it. Each
   node is placed by one angle: rotate out to its position, translate along
   the radius, rotate back. The translate percentage resolves against the
   node's own width, not the ring, so 128% of a 28% node is 36% of the ring.

   The track turns, slowly. The nodes turn with it and their contents turn
   back by the same amount, so every label stays upright the whole way round.
   No canvas and no script --- the diagram is the markup, and it prints.    */
  .ring {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1/1;
    margin-inline: auto
  }

  /* one dashed orbit, drawn exactly where the nodes sit */
  .ring-band {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    pointer-events: none;
    border: 1px dashed rgba(var(--accent-rgb), .26)
  }

  .ring-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 33%;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    pointer-events: none;
    background: var(--accent-3)
  }

  .ring-core b {
    display: block;
    font-size: clamp(1.05rem, 2.8vw, 1.44rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: #fff
  }

  .ring-core i {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(.55rem, .98vw, .63rem);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82)
  }

  @keyframes ringturn {
    to {
      transform: rotate(360deg)
    }
  }

  .ring-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    animation: ringturn 54s linear infinite
  }

  .ring-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28%;
    aspect-ratio: 1/1;
    margin: -14% 0 0 -14%;
    transform: rotate(var(--a)) translate(127%) rotate(calc(-1 * var(--a)));
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 6%;
    border: 1px solid #ffffff2e;
    background: #14141b
  }

  /* the same turn, backwards, so the label never tips over */
  .ring-in {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
    animation: ringturn 54s linear infinite reverse
  }

  .ring-in svg {
    width: clamp(19px, 5.4vw, 24px);
    height: auto;
    aspect-ratio: 1/1;
    color: var(--accent-2)
  }

  .ring-lbl {
    display: block;
    font-size: clamp(.60rem, 1.5vw, .70rem);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -.008em;
    color: var(--paper)
  }

  .ring-note {
    margin: var(--s5) 0 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--dim);
    text-align: center;
    max-width: 54ch;
    margin-inline: auto
  }

  .ring-note b {
    font-weight: 600;
    color: var(--mut)
  }

  @media (max-width:960px) {
    .ring {
      margin-top: var(--s4)
    }
  }

  @media (max-width:420px) {
    .ring-node {
      width: 31%;
      margin: -15.5% 0 0 -15.5%;
      transform: rotate(var(--a)) translate(111%) rotate(calc(-1 * var(--a)))
    }
  }