@font-face {
  font-family: "Albert Sans";
  src: url("/assets/albert-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #173bc7;
  --indigo: #4746df;
  --purple: #813ac5;
  --lime: #e8ff3c;
  --ink: #12131a;
  --body: #4a4d5a;
  --muted: #717587;
  --line: #dfe2ea;
  --soft: #f4f5f9;
  --tint: #eef0ff;
  --white: #fff;
  --gradient: linear-gradient(135deg, var(--blue), var(--indigo) 52%, var(--purple));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--body);
  background: var(--white);
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--purple); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.skip-link { position: fixed; left: 18px; top: -100px; z-index: 100; padding: 10px 14px; color: var(--ink); background: var(--white); font-weight: 800; }
.skip-link:focus { top: 18px; }

.sx-bar {
  padding: 9px 20px;
  color: var(--white);
  background: #090a12;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .09em;
}
.sx-bar strong { color: var(--lime); }
.sx-bar span { margin: 0 8px; color: #85858d; }
.sx-head {
  min-height: 78px;
  padding: 14px max(24px, calc((100vw - 1240px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--white);
  background: var(--gradient);
}
.sx-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sx-brand img, .sx-head img { width: 176px; height: auto; }
.sx-head nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: flex-end; }
.sx-head nav a { color: var(--white); text-decoration: none; font-size: 14px; font-weight: 700; }
.sx-head nav a:hover, .sx-head nav a[aria-current="page"] { color: var(--lime); }

.home-hero {
  width: min(1240px, calc(100% - 48px));
  min-height: 610px;
  margin: 32px auto 0;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: stretch;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7, 10, 28, .98) 0%, rgba(11, 14, 40, .93) 38%, rgba(16, 18, 50, .47) 66%, rgba(10, 12, 30, .08) 100%),
    url("/assets/lab-hero-synthex.png") center / cover no-repeat;
  border-radius: 26px;
  box-shadow: 0 32px 80px rgba(27, 31, 92, .2);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--lime), var(--indigo), var(--purple));
}
.home-hero-inner { width: 100%; padding: clamp(68px, 8vw, 112px) clamp(34px, 7vw, 88px); display: flex; align-items: center; }
.home-hero-copy { width: min(610px, 56%); position: relative; z-index: 1; }
.sx-kicker { margin: 0 0 10px; color: var(--indigo); font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.home-hero .sx-kicker { color: var(--lime); }
.home-hero h1 {
  margin: 12px 0 24px;
  color: var(--white);
  font-size: clamp(50px, 6vw, 78px);
  line-height: .96;
  letter-spacing: -.055em;
}
.home-hero h1 span { color: var(--lime); }
.home-lead { max-width: 580px; margin: 0; color: #e0e3f2; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.home-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 20px; }
.sx-button {
  min-height: 52px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--lime);
  border-radius: 8px;
  color: #101225;
  background: var(--lime);
  text-decoration: none;
  font-weight: 850;
}
.sx-button:hover { color: var(--white); background: var(--indigo); border-color: var(--indigo); }
.sx-button-secondary { color: var(--white); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.55); backdrop-filter: blur(8px); }
.sx-button-secondary:hover { color: #101225; background: var(--white); border-color: var(--white); }
.home-fineprint { max-width: 575px; margin: 0; color: #aeb3c8; font-size: 13px; line-height: 1.55; }

.home-proof {
  width: min(1160px, calc(100% - 80px));
  margin: -1px auto 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  color: var(--white);
  background: #111329;
  border-radius: 0 0 18px 18px;
}
.home-proof div { min-height: 118px; padding: 24px 30px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: center; border-right: 1px solid rgba(255,255,255,.12); }
.home-proof div:last-child { border-right: 0; }
.home-proof span { grid-row: 1 / 3; color: var(--lime); font-size: 13px; font-weight: 900; }
.home-proof strong { color: var(--white); font-size: 16px; }
.home-proof small { color: #aeb3c8; font-size: 13px; }

.home-product {
  width: min(1240px, calc(100% - 48px));
  margin: clamp(76px, 9vw, 120px) auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: clamp(46px, 7vw, 92px);
  align-items: center;
}
.home-product-image { position: relative; overflow: hidden; background: #f4f1ed; border-radius: 24px; box-shadow: 0 22px 60px rgba(34, 35, 76, .13); }
.home-product-image img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.home-product-image > span { position: absolute; left: 20px; bottom: 20px; padding: 8px 13px; color: var(--white); background: rgba(10,12,24,.83); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-product-copy h2 { margin: 8px 0 6px; color: var(--ink); font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.045em; }
.home-product-copy > p:not(.sx-kicker):not(.home-product-spec) { max-width: 600px; font-size: 18px; }
.home-product-spec { margin: 18px 0; color: var(--ink); font-size: 19px; font-weight: 800; }
.home-product-spec span { margin: 0 6px; color: var(--indigo); }
.home-product-copy ul { margin: 27px 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.home-product-copy li { position: relative; padding-left: 28px; color: #323543; font-weight: 650; }
.home-product-copy li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 19px; height: 19px; color: var(--indigo); background: var(--tint); border-radius: 50%; font-size: 12px; font-weight: 900; }
.sx-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--indigo); text-decoration: none; font-weight: 850; }
.sx-text-link span { font-size: 22px; transition: transform .2s ease; }
.sx-text-link:hover span { transform: translateX(4px); }

.home-section {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(70px, 8vw, 108px) 0;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 100px);
  border-top: 1px solid var(--line);
}
.home-section h2, .business-panel h2 { margin: 8px 0 0; color: var(--ink); font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.04em; }
.home-copy { font-size: 18px; }
.home-copy p:first-child { margin-top: 0; }
.business-panel {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(46px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 6vw, 78px);
  color: var(--white);
  background: radial-gradient(circle at 10% 0, rgba(71,70,223,.42), transparent 42%), #111329;
  border-radius: 24px;
  box-shadow: 0 25px 65px rgba(17,19,41,.18);
}
.business-panel .sx-kicker { color: var(--lime); }
.business-panel h2 { color: var(--white); }
.business-intro { max-width: 360px; color: #b9bdd1; }
.business-panel dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 34px; }
.business-panel dl div { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.16); }
.business-panel dt { color: #aeb3c8; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.business-panel dd { margin: 7px 0 0; color: var(--white); font-size: 16px; }
.business-panel a { color: var(--lime); }
.home-section-compact { border-top: 0; }
.policy-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.policy-links a { padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--soft); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.policy-links a:hover { transform: translateY(-2px); border-color: #bbbff0; box-shadow: 0 10px 30px rgba(49,52,112,.08); }
.policy-links strong { color: var(--ink); font-size: 18px; }
.policy-links span { color: var(--muted); font-size: 14px; }

.sx-doc { width: min(880px, calc(100% - 40px)); margin: 0 auto; padding: clamp(54px, 8vw, 92px) 0 110px; }
.sx-doc-wide { width: min(1040px, calc(100% - 40px)); }
.sx-doc h1 { margin: 10px 0 18px; color: var(--ink); font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -.04em; }
.sx-doc h2 { margin: 46px 0 12px; color: var(--ink); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.sx-doc h3 { color: var(--ink); }
.sx-doc p, .sx-doc li { max-width: 78ch; }
.sx-lead { margin: 0 0 34px; color: #343745; font-size: 20px; }
.sx-updated { color: var(--muted); font-size: 14px; }
.sx-callout { margin: 30px 0; padding: 22px 25px; border-left: 5px solid var(--indigo); background: var(--tint); }
.sx-callout p { margin: 0; }
.sx-contact { margin-top: 52px; padding: 28px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.sx-contact h2 { margin-top: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin: 34px 0; }
.contact-card { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.contact-card h2 { margin-top: 0; font-size: 24px; }
.contact-card p:last-child { margin-bottom: 0; }
.sx-faq h2 { margin-top: 50px; }
.sx-faq details { border-top: 1px solid var(--line); }
.sx-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.sx-faq summary { padding: 20px 34px 20px 0; color: var(--ink); cursor: pointer; font-weight: 800; }
.sx-faq details p { margin: 0; padding: 0 0 22px; }
.legal-nav { margin: 30px 0; padding: 18px 22px; display: flex; gap: 10px 22px; flex-wrap: wrap; background: var(--soft); border-radius: 10px; }
.legal-nav a { font-weight: 700; }

.sx-foot {
  padding: 42px max(24px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  gap: 22px 50px;
  color: #d9dbea;
  background: #0d0f20;
  font-size: 14px;
}
.sx-foot a { color: var(--white); }
.sx-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sx-foot-brand img { width: 156px; height: auto; }
.sx-foot nav { display: flex; gap: 12px 22px; flex-wrap: wrap; justify-content: flex-end; }
.sx-foot address { grid-column: 1 / -1; font-style: normal; }
.sx-copy { color: #9ca0b8; }

@media (max-width: 900px) {
  .home-hero { background-position: 58% center; }
  .home-hero-copy { width: 68%; }
  .home-product, .home-section, .business-panel { grid-template-columns: 1fr; }
  .home-product { width: min(720px, calc(100% - 48px)); }
  .home-product-image { max-width: 620px; }
  .home-proof { grid-template-columns: 1fr; }
  .home-proof div { min-height: 94px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .home-proof div:last-child { border-bottom: 0; }
  .sx-foot { grid-template-columns: 1fr; }
  .sx-foot nav { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .sx-bar { padding: 8px 12px; font-size: 9px; }
  .sx-bar span { margin: 0 3px; }
  .sx-head { min-height: 68px; padding: 10px 18px; gap: 14px; }
  .sx-brand img, .sx-head img { width: 138px; }
  .sx-head nav { gap: 9px 15px; }
  .sx-head nav a { font-size: 12px; }
  .home-hero {
    width: 100%;
    min-height: 660px;
    margin: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(7,10,28,.44) 0%, rgba(7,10,28,.38) 35%, rgba(7,10,28,.96) 67%, rgba(7,10,28,.99) 100%),
      url("/assets/lab-hero-synthex.png") 67% center / cover no-repeat;
  }
  .home-hero-inner { padding: 300px 22px 52px; align-items: flex-end; }
  .home-hero-copy { width: 100%; }
  .home-hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .home-lead { font-size: 17px; }
  .home-actions { flex-direction: column; align-items: stretch; }
  .sx-button { width: 100%; }
  .home-proof { width: calc(100% - 32px); }
  .home-proof div { padding: 20px 22px; }
  .home-product, .home-section, .business-panel { width: calc(100% - 32px); }
  .home-product { margin-top: 72px; gap: 38px; }
  .home-section { padding: 72px 0; }
  .business-panel { padding: 34px 24px; border-radius: 18px; }
  .business-panel dl, .policy-links, .contact-grid { grid-template-columns: 1fr; }
  .sx-doc { width: min(100% - 32px, 880px); }
}

@media (max-width: 460px) {
  .sx-head { align-items: flex-start; flex-direction: column; }
  .sx-head nav { width: 100%; justify-content: space-between; }
  .home-hero { min-height: 700px; }
}