:root {
  --text: #101318;
  --muted: #4f5d6f;
  --line: #d8e1ec;
  --soft: #f3f7fb;
  --blue: #0f62fe;
  --blue-dark: #0a2363;
  --green: #24a148;
  --green-soft: #e8f6ed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  color: var(--text);
  background: #fff;
}
a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}
.brand img { width: 150px; height: 30px; display: block; }
nav { display: flex; justify-content: center; gap: 22px; min-width: 0; }
nav a {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
nav a:hover { color: var(--blue); }
.nav-cta {
  min-width: max-content;
  padding: 9px 14px;
  background: var(--green);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.nav-cta:hover { background: #1d7f39; transform: translateY(-1px); }

.hero, .section, .split-section, .final-cta {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  align-items: center;
  gap: 48px;
  padding: 68px 0 50px;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 24px;
  max-width: 890px;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: .98;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: 0;
}
h3 { font-size: 18px; line-height: 1.2; }
p { color: var(--muted); line-height: 1.48; }
.hero-subhead { max-width: 720px; font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 34px; }
.button, .link-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button { border: 1px solid transparent; padding: 11px 18px; }
.primary { background: var(--blue); color: #fff; }
.primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.secondary { background: #fff; color: #111827; border-color: #c9d2df; }
.secondary:hover { border-color: var(--green); color: var(--blue-dark); transform: translateY(-1px); }
.link-cta { color: var(--blue); padding: 8px 4px; }
.button, .link-cta { transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }

.technical-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid #c9d6e6;
  background:
    radial-gradient(circle at 18% 16%, rgba(36,161,72,.14), transparent 20%),
    radial-gradient(circle at 86% 90%, rgba(15,98,254,.13), transparent 24%),
    linear-gradient(90deg, rgba(15,98,254,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(36,161,72,.055) 1px, transparent 1px),
    linear-gradient(180deg, #fbfdff, #f3f8f5);
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
  padding: 24px;
  box-shadow: 0 28px 80px rgba(10,35,99,.14), inset 0 0 0 1px rgba(255,255,255,.78);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.technical-visual:hover {
  border-color: rgba(36,161,72,.5);
  box-shadow: 0 32px 88px rgba(10,35,99,.18), inset 0 0 0 1px rgba(255,255,255,.82);
}
.technical-visual::before,
.technical-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.technical-visual::before {
  inset: 14px;
  border: 1px solid rgba(16,19,24,.07);
}
.technical-visual::after {
  width: 180px;
  height: 1px;
  right: 24px;
  top: 24px;
  background: linear-gradient(90deg, transparent, rgba(36,161,72,.9));
}
.topology {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "compute compute memory control"
    "compute compute io io"
    "interposer interposer interposer interposer"
    "stack stack stack stack";
  gap: 10px;
}
.system-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.system-flow span {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(40,73,112,.18);
  background: rgba(255,255,255,.78);
  color: #314155;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.system-flow span:last-child {
  color: var(--blue-dark);
  border-color: rgba(15,98,254,.25);
  background: rgba(255,255,255,.9);
}
.chip, .interposer, .substrate-stack, .rack-strip span {
  border: 1px solid #b7c7d9;
  font-size: 13px;
  font-weight: 800;
}
.chip {
  position: relative;
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 10px 24px rgba(10,35,99,.05);
}
.chip::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(16,19,24,.06);
}
.chip b, .interposer b {
  display: block;
}
.chip small, .interposer small {
  display: block;
  color: #52647c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
.compute {
  grid-area: compute;
  min-height: 174px;
  background:
    radial-gradient(circle at 18% 18%, rgba(36,161,72,.22), transparent 22%),
    linear-gradient(90deg, rgba(36,161,72,.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(135deg, #05070a, #151a22 62%, #0a1f12);
  background-size: auto, 18px 18px, 18px 18px, auto;
  color: #fff;
  border-color: #31443a;
  box-shadow: 0 20px 38px rgba(16,19,24,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.compute small { color: #cfd8e5; }
.memory { grid-area: memory; border-color: #78bf8b; background: linear-gradient(180deg, #fff, #eef9f2); }
.control { grid-area: control; background: linear-gradient(180deg, #f3fbf5, #e4f4ea); border-color: #96d2a6; }
.io { grid-area: io; border-color: #8db6ff; background: linear-gradient(180deg, #fff, #f3f7ff); }
.interposer {
  position: relative;
  grid-area: interposer;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(36,161,72,.24) 1px, transparent 1px),
    linear-gradient(135deg, #06194d, #0a2f8f 70%, #0a2363);
  background-size: 22px 22px, 22px 22px, auto;
  color: #fff;
  border-color: #3b70ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.interposer small { color: #e5eeff; }
.substrate-stack { grid-area: stack; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
.substrate-stack span { padding: 12px; border-right: 1px solid #b9c7d8; }
.substrate-stack span:last-child { border-right: 0; }
.rack-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.rack-strip span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: #fff;
  text-align: center;
}

.section { padding: 70px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-heading { max-width: 800px; margin-bottom: 28px; }
.section-lede { max-width: 760px; margin: -10px 0 28px; }
.card-grid, .partner-grid, .leadership-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.card-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .partner-card, .leader-card, .brief-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 20px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover, .partner-card:hover, .leader-card:hover, .brief-panel:hover {
  border-color: rgba(36,161,72,.55);
  box-shadow: 0 14px 34px rgba(10,35,99,.08);
  transform: translateY(-2px);
}
.card h3, .partner-card h3, .leader-card h3, .brief-panel h3, .news-card h3 { margin-bottom: 12px; }
.card p, .partner-card p, .brief-panel p { margin-bottom: 0; }
.card i, .news-card i {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 18px;
  border: 1px solid #9ed5ad;
  background:
    linear-gradient(90deg, transparent 46%, var(--green) 46%, var(--green) 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, var(--green) 46%, var(--green) 54%, transparent 54%),
    var(--green-soft);
}
i.icon-die {
  background:
    linear-gradient(90deg, transparent 18%, rgba(36,161,72,.35) 18% 24%, transparent 24% 76%, rgba(36,161,72,.35) 76% 82%, transparent 82%),
    linear-gradient(0deg, transparent 18%, rgba(15,98,254,.35) 18% 24%, transparent 24% 76%, rgba(15,98,254,.35) 76% 82%, transparent 82%),
    #f7fbf8;
}
i.icon-interposer {
  background:
    linear-gradient(90deg, transparent 12%, var(--blue) 12% 17%, transparent 17% 31%, var(--green) 31% 36%, transparent 36% 64%, var(--green) 64% 69%, transparent 69% 83%, var(--blue) 83% 88%, transparent 88%),
    var(--green-soft);
}
i.icon-pcb {
  background:
    radial-gradient(circle at 24% 30%, var(--green) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 68%, var(--blue) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent 20%, rgba(36,161,72,.55) 20% 24%, transparent 24%),
    #f7fbf8;
}
i.icon-rack {
  background:
    linear-gradient(0deg, transparent 18%, #161616 18% 24%, transparent 24% 42%, #161616 42% 48%, transparent 48% 66%, #161616 66% 72%, transparent 72%),
    var(--green-soft);
}
i.icon-telemetry {
  background:
    linear-gradient(135deg, transparent 30%, var(--blue) 30% 36%, transparent 36%),
    radial-gradient(circle at 28% 70%, var(--green) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 26%, var(--blue) 0 3px, transparent 4px),
    #f7fbf8;
}
i.icon-thermal {
  background:
    linear-gradient(90deg, transparent 18%, rgba(15,98,254,.55) 18% 24%, transparent 24% 38%, rgba(15,98,254,.55) 38% 44%, transparent 44% 58%, rgba(15,98,254,.55) 58% 64%, transparent 64%),
    var(--green-soft);
}
i.icon-security {
  background:
    linear-gradient(180deg, transparent 0 30%, #161616 30% 65%, transparent 65%),
    radial-gradient(circle at 50% 26%, transparent 0 8px, #161616 9px 11px, transparent 12px),
    var(--green-soft);
}
i.icon-edge {
  background:
    radial-gradient(circle at 50% 50%, var(--green) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 18%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 20%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 82%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 80%, var(--blue) 0 3px, transparent 4px),
    #f7fbf8;
}
i.icon-power {
  background:
    linear-gradient(90deg, transparent 0 20%, var(--green) 20% 28%, transparent 28% 48%, var(--blue) 48% 56%, transparent 56% 76%, var(--green) 76% 84%, transparent 84%),
    linear-gradient(0deg, transparent 43%, #161616 43% 49%, transparent 49%),
    #f7fbf8;
}
i.icon-data-center {
  background:
    linear-gradient(0deg, transparent 14%, #161616 14% 20%, transparent 20% 34%, #161616 34% 40%, transparent 40% 54%, #161616 54% 60%, transparent 60% 74%, #161616 74% 80%, transparent 80%),
    linear-gradient(90deg, transparent 12%, rgba(36,161,72,.5) 12% 16%, transparent 16% 84%, rgba(15,98,254,.5) 84% 88%, transparent 88%),
    var(--green-soft);
}
.card i::after, .news-card i::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: rgba(36,161,72,.0);
}
.dark {
  width: 100%;
  max-width: none;
  padding-left: max(20px, calc((100vw - 1180px)/2));
  padding-right: max(20px, calc((100vw - 1180px)/2));
  background: #161616;
  color: #fff;
}
.dark .section-heading, .dark .card-grid { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }
.dark .section-lede, .dark .dark-brief { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }
.dark h2, .dark h3 { color: #fff; }
.dark .card { background: #202020; border-color: #3d3d3d; }
.dark p { color: #cbd5e1; }
.capability-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.compact-list {
  margin-top: 16px;
}
.capability-list li {
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-weight: 800;
}
.partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner-card { color: var(--text); text-decoration: none; }
.partner-card img { width: 160px; max-width: 100%; height: 42px; object-fit: contain; object-position: left center; margin-bottom: 20px; }
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 34px;
  align-items: center;
  padding: 62px 0;
  border-top: 1px solid var(--line);
}
.brief-panel { background: var(--soft); }
.dark-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  background: #202020;
  border-color: #3d3d3d;
}
.dark-brief p { margin-bottom: 0; }
.leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leader-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 22px;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(36,161,72,.075), transparent 38%),
    #fff;
}
.headshot {
  position: relative;
  overflow: hidden;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(36,161,72,.28), transparent 42%),
    linear-gradient(315deg, rgba(15,98,254,.18), transparent 44%),
    #161616;
  color: var(--green);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .05em;
  border: 1px solid rgba(36,161,72,.65);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 28px rgba(10,35,99,.10);
}
.headshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.headshot img[src] {
  z-index: 1;
}
.headshot img[src=""],
.headshot img:not([src]) {
  display: none;
}
.headshot span {
  position: relative;
  z-index: 0;
}
.role { color: var(--blue-dark); font-weight: 800; margin-bottom: 10px; }
.leader-card p:not(.role) { max-width: 520px; margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tags span {
  border: 1px solid #cdd8e6;
  background: var(--soft);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}
.profile-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.profile-link:hover { text-decoration: underline; }
.insight-heading {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
}
.news-showcase {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: 16px;
}
.news-feature,
.news-card {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.news-feature {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background:
    radial-gradient(circle at 22% 18%, rgba(36,161,72,.2), transparent 24%),
    linear-gradient(90deg, rgba(36,161,72,.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15,98,254,.085) 1px, transparent 1px),
    linear-gradient(135deg, #111418 0%, #111827 54%, #071c55 100%);
  background-size: auto, 28px 28px, 28px 28px, auto;
  color: #fff;
  box-shadow: 0 18px 52px rgba(10,35,99,.12);
}
.news-feature h3 {
  max-width: 520px;
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
  margin-bottom: 16px;
}
.news-feature p {
  max-width: 560px;
  color: #dbe6f3;
  font-size: 16px;
}
.news-kicker,
.read-more,
.news-card span {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.read-more {
  margin-top: 18px;
  color: #9ee6b0;
}
.news-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.news-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.news-card:hover,
.news-feature:hover {
  border-color: rgba(36,161,72,.65);
  box-shadow: 0 16px 36px rgba(10,35,99,.10);
  transform: translateY(-2px);
}
.news-card h3 {
  margin-top: 12px;
}
.news-card p {
  margin-top: auto;
  margin-bottom: 0;
}
.final-cta {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  gap: 34px;
  margin-bottom: 48px;
  padding: 44px;
  background: #161616;
  color: #fff;
}
.final-cta h2 { color: #fff; }
.contact-details {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  color: #dbe6f3;
  font-style: normal;
  line-height: 1.45;
}
.contact-details a {
  color: #9ee6b0;
  font-weight: 800;
  text-decoration: none;
}
.contact-details a:hover { text-decoration: underline; }
.brief-download {
  margin-top: 24px;
  width: max-content;
}
.lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
label { display: grid; gap: 7px; color: #263244; font-size: 13px; font-weight: 800; }
.final-cta label { color: #fff; }
input, select, textarea {
  width: 100%;
  border: 1px solid #bfccda;
  border-radius: 4px;
  background: #fff;
  color: #111827;
  padding: 12px 13px;
  font: inherit;
}
textarea { resize: vertical; }
.full, .form-status { grid-column: 1 / -1; }
.form-status { color: #9ee6b0; font-weight: 800; }
.site-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 34px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer div {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.site-footer img {
  width: 140px;
  height: 28px;
  display: block;
}
.site-footer a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.site-footer a:hover { color: var(--blue-dark); }

@media (max-width: 1040px) {
  nav { display: none; }
  .hero, .split-section, .final-cta { grid-template-columns: 1fr; }
  .card-grid, .card-grid.six, .capability-list, .partner-grid, .news-showcase, .news-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-feature { min-height: 300px; }
  .dark-brief { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 16px; }
  .nav-cta { padding: 8px 10px; font-size: 12px; }
  .hero, .section, .split-section, .final-cta { width: min(100% - 36px, 1180px); }
  .hero { min-height: auto; padding-top: 50px; gap: 32px; }
  h1 { font-size: 38px; line-height: 1.04; }
  .hero-subhead { font-size: 17px; }
  .system-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology { grid-template-columns: 1fr; grid-template-areas: "compute" "memory" "control" "io" "interposer" "stack"; }
  .substrate-stack, .rack-strip, .card-grid, .card-grid.six, .capability-list, .partner-grid, .news-showcase, .news-links, .leadership-grid, .lead-form { grid-template-columns: 1fr; }
  .insight-heading { display: grid; align-items: start; }
  .news-feature, .news-card { min-height: auto; }
  .leader-card { grid-template-columns: 1fr; }
  .final-cta { padding: 28px 20px; }
  .brief-download { width: 100%; }
  .site-footer { display: grid; }
  .site-footer div { align-items: flex-start; flex-direction: column; }
  .button { width: 100%; }
}

@media (max-width: 540px) {
  body { overflow-x: hidden; }
  .hero, .section, .split-section, .final-cta {
    width: min(330px, calc(100% - 32px));
    margin-left: 16px;
    margin-right: auto;
  }
  .site-footer {
    width: min(330px, calc(100% - 32px));
    margin-left: 16px;
    margin-right: auto;
  }
  h1 { font-size: 34px; }
  .hero-subhead { font-size: 16px; }
  .technical-visual { padding: 12px; }
}
button:disabled {
  cursor: wait;
  opacity: .66;
  transform: none;
}