:root {
  color-scheme: light;
  --ink: #17151d;
  --night: #100d19;
  --paper: #f8f7fa;
  --white: #fff;
  --violet: #6a36be;
  --lilac: #c894ff;
  --muted: #605d68;
  --rule: #dedbe4;
  --gutter: 52px;
  --sans: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  --serif: "Baskerville", "Palatino Linotype", "Book Antiqua", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--violet); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 5; top: 12px; left: 12px; padding: 12px 18px; background: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 94px; max-width: 1440px; margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 36px; }
.wordmark { display: inline-flex; align-items: center; width: 158px; }
.wordmark img { display: block; width: 100%; height: auto; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: 34px; }
.site-nav a, .header-link { text-decoration: none; font-size: 13px; }
.site-nav a { color: #494650; }
.site-nav a:hover, .footer-domain-link:hover { color: var(--violet); }
.header-link { padding: 12px 16px; border: 1px solid #c9c4d2; font-weight: 600; }
.header-link span, .primary-link span, .text-link span, .discover-link span { margin-left: 12px; }

.hero { position: relative; isolation: isolate; min-height: 600px; padding: 72px max(var(--gutter), calc((100% - 1336px) / 2)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); align-items: center; gap: 52px; overflow: hidden; background: linear-gradient(115deg, #100d19 8%, #171222 59%, #21142f 100%); color: var(--white); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 49.95%, rgba(200, 148, 255, .09) 50%, transparent 50.05%), linear-gradient(0deg, transparent 49.95%, rgba(200, 148, 255, .08) 50%, transparent 50.05%); background-size: 72px 72px; opacity: .28; mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.hero-content { animation: arrive 700ms ease-out both; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.7; text-transform: uppercase; }
.hero .eyebrow { color: #ded1ee; }
.eyebrow > span:not(.eyebrow-mark) { padding-inline: 8px; color: var(--lilac); }
.eyebrow-mark { display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--lilac); transform: rotate(45deg); }
h1 { margin: 26px 0 24px; font-family: var(--serif); font-size: 76px; font-weight: 400; line-height: 1.02; }
h1 span { display: block; }
h1 .accent-word { color: var(--lilac); }
.hero-description { max-width: 470px; margin: 0 0 30px; color: #d2ced8; font-size: 17px; line-height: 1.75; }
.primary-link { display: inline-flex; align-items: center; padding: 15px 18px; background: #e5d2ff; color: #24143b; text-decoration: none; font-size: 13px; font-weight: 700; }
.primary-link:hover { background: var(--white); }
.hero-visual { position: relative; min-height: 300px; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; }
.visual-grid { position: absolute; inset: 0 -10%; background-image: linear-gradient(rgba(200, 148, 255, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 148, 255, .17) 1px, transparent 1px); background-size: 36px 36px; clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); opacity: .38; }
.hero-visual img { position: relative; display: block; width: min(100%, 440px); height: auto; }
.visual-caption { position: relative; margin: 0; color: #ddd6e6; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--lilac); transform: rotate(45deg); }

.capabilities { padding: 94px var(--gutter) 100px; background: var(--paper); }
.section-heading { max-width: 780px; margin: 0 auto 50px; text-align: center; }
.section-heading .eyebrow, .platform .eyebrow, .about .eyebrow { color: var(--violet); }
h2 { margin: 14px 0; font-family: var(--serif); font-size: 48px; font-weight: 400; line-height: 1.12; }
.section-heading > p:last-child, .platform-copy > p:not(.eyebrow), .about > div > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.capability-list { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability { min-height: 180px; padding: 20px 30px 0; border-top: 1px solid #c7bfd2; }
.capability + .capability { border-left: 1px solid var(--rule); }
.capability:first-child { padding-left: 0; }
.capability:last-child { padding-right: 0; }
.capability-number { color: var(--violet); font-size: 11px; font-weight: 700; }
h3 { margin: 20px 0 10px; font-size: 18px; font-weight: 600; }
.capability p { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.platform { min-height: 390px; padding: 82px max(var(--gutter), calc((100% - 1260px) / 2)); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; background: var(--white); }
.platform-copy { max-width: 580px; }
.platform-copy h2 { max-width: 570px; }
.platform-copy > p:not(.eyebrow) { max-width: 540px; }
.text-link { display: inline-block; margin-top: 24px; color: var(--violet); text-decoration: none; font-size: 13px; font-weight: 700; }
.text-link:hover { color: #421d82; }
.platform-visual { position: relative; width: min(100%, 400px); aspect-ratio: 1.4; justify-self: center; overflow: hidden; background-color: #f5f0fb; background-image: linear-gradient(rgba(106, 54, 190, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 54, 190, .08) 1px, transparent 1px); background-size: 24px 24px; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%); }
.platform-line { position: absolute; height: 1px; background: #a881d9; transform-origin: left; }
.platform-line-one { width: 63%; left: 18%; top: 26%; transform: rotate(25deg); }
.platform-line-two { width: 64%; left: 19%; top: 72%; transform: rotate(-25deg); }
.platform-line-three { width: 60%; left: 21%; top: 49%; }
.platform-node { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; background: var(--violet); box-shadow: 0 0 0 1px var(--violet); transform: rotate(45deg); }
.platform-node-one { top: 19%; left: 16%; }
.platform-node-two { top: 27%; right: 16%; }
.platform-node-three { bottom: 17%; left: 17%; }
.platform-node-four { right: 17%; bottom: 18%; }
.platform-core { position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #b7a1d3; background: var(--white); color: var(--violet); font-size: 20px; font-weight: 700; transform: translate(-50%, -50%) rotate(45deg); }

.discover { min-height: 410px; padding: 74px max(var(--gutter), calc((100% - 1260px) / 2)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; overflow: hidden; background: var(--night); color: var(--white); }
.discover-content { max-width: 560px; }
.discover .eyebrow { color: #ddd3e9; }
.discover h2 { margin-top: 24px; font-size: 50px; }
.discover-content > p:not(.eyebrow) { max-width: 470px; color: #cbc6d1; font-size: 15px; line-height: 1.8; }
.discover-link { display: inline-block; margin-top: 16px; color: #dfc4ff; text-decoration: none; font-size: 13px; font-weight: 700; }
.discover-brand { position: relative; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.discover-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(200, 148, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 148, 255, .13) 1px, transparent 1px); background-size: 36px 36px; clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); }
.discover-brand img { position: relative; display: block; width: min(100%, 420px); height: auto; }
.discover-brand-rule { position: relative; width: 45px; height: 2px; background: var(--lilac); }
.discover-brand-note { position: relative; color: #cbc6d1; font-size: 11px; }

.about { padding: 82px var(--gutter); display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; background: #f1edf6; }
.about .eyebrow { padding-top: 12px; }
.about > div { max-width: 740px; }
.about h2 { margin-top: 0; font-size: 44px; }

.site-footer { min-height: 90px; padding: 22px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--night); color: var(--white); }
.footer-wordmark { text-decoration: none; font-size: 21px; font-weight: 700; }
.footer-wordmark span { color: #bd8aff; }
.site-footer small, .footer-domain { color: #cbc6d1; font-size: 11px; }
.footer-domain-link { color: #e0c8ff; text-decoration: none; font-size: 12px; }
.footer-domain-link span { margin-left: 5px; }

@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { :root { --gutter: 76px; } }
@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .site-header { grid-template-columns: 150px 1fr auto; gap: 18px; }
  .site-nav { gap: 18px; }
  .hero { grid-template-columns: 1fr .8fr; gap: 26px; }
  h1 { font-size: 64px; }
  .platform, .discover { gap: 38px; }
  .discover h2 { font-size: 42px; }
  .site-footer { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  :root { --gutter: 22px; }
  html { scroll-behavior: auto; }
  .site-header { min-height: 82px; padding-block: 14px; grid-template-columns: 1fr auto; gap: 12px 18px; }
  .wordmark { width: 132px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; }
  .site-nav a { font-size: 11px; }
  .header-link { padding: 10px 11px; font-size: 11px; }
  .header-link span { margin-left: 5px; }
  .hero { min-height: 0; padding-block: 64px 54px; grid-template-columns: 1fr; gap: 32px; }
  h1 { margin-block: 22px; font-size: 58px; }
  .hero-description { max-width: 440px; font-size: 15px; }
  .hero-visual { min-height: 176px; gap: 18px; }
  .hero-visual img { width: min(100%, 340px); }
  .visual-grid { inset-inline: 0; }
  .visual-caption { font-size: 10px; }
  .capabilities { padding-block: 62px 66px; }
  .section-heading { margin-bottom: 34px; text-align: left; }
  h2 { font-size: 38px; }
  .capability-list { grid-template-columns: 1fr; }
  .capability, .capability:first-child, .capability:last-child { min-height: 0; padding: 20px 0 23px; }
  .capability + .capability { border-left: 0; }
  .capability h3 { margin: 12px 0 6px; }
  .platform, .discover { padding-block: 62px; grid-template-columns: 1fr; gap: 32px; }
  .platform-visual { width: min(100%, 340px); }
  .discover h2 { font-size: 40px; }
  .discover-brand { min-height: 190px; }
  .discover-brand img { width: min(100%, 350px); }
  .about { padding-block: 58px; grid-template-columns: 1fr; gap: 20px; }
  .about h2 { font-size: 38px; }
  .site-footer { padding-block: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .footer-domain { grid-column: 1; grid-row: 2; }
  .site-footer small { grid-column: 1 / -1; grid-row: 3; }
  .footer-domain-link { justify-self: end; grid-column: 2; grid-row: 2; }
}
@media (max-width: 360px) { :root { --gutter: 18px; } h1 { font-size: 50px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }