@font-face {
  font-family: 'Inter';
  src: url('./assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --u: min(.09765625vw, 1.5px);
  --navy: #061221;
  --ink: #030916;
  --ice: #9edcff;
  --violet: #753bff;
  --gutter: calc(56 * var(--u));
  font-family: 'Inter', Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--ink); background: var(--navy); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #80d4ff; outline-offset: 5px; border-radius: 3px; }
.product a:focus-visible, .company a:focus-visible { outline-color: #156bb3; }
section { scroll-margin-top: 20px; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 12px 18px; color: #071324; background: #fff; border-radius: 5px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header, main, .site-footer { max-width: 1536px; margin-inline: auto; }
.site-header { position: relative; z-index: 20; height: calc(54 * var(--u)); color: #f6f8ff; background: linear-gradient(110deg, #06111f, #0d2036); border-bottom: 1px solid #244058; }
.header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(50 * var(--u)) 0 var(--gutter); }
.wordmark { font-size: calc(30 * var(--u)); font-weight: 400; line-height: 1; letter-spacing: calc(-.5 * var(--u)); white-space: nowrap; }
.primary-nav { position: absolute; left: 36.33%; display: flex; align-items: center; gap: calc(40 * var(--u)); font-size: calc(13 * var(--u)); }
.primary-nav > a, .footer-nav > a { position: relative; padding-block: 5px; }
.primary-nav > a::after, .footer-nav > a::after { content: ''; position: absolute; height: 1px; left: 0; right: 0; bottom: 0; background: #a1dfff; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.primary-nav > a:hover::after, .footer-nav > a:hover::after { transform: scaleX(1); }
.header-contact { display: inline-flex; align-items: center; justify-content: center; width: calc(97 * var(--u)); height: calc(33 * var(--u)); font-size: calc(13 * var(--u)); border: 1px solid #c7d1df; border-radius: calc(9 * var(--u)); transition: background 180ms ease, border-color 180ms ease; }
.header-contact:hover { background: #ffffff12; border-color: #a2deff; }
.menu-toggle, .mobile-contact { display: none; }

.hero { position: relative; height: calc(432 * var(--u)); overflow: hidden; color: #f6f7fb; background: radial-gradient(ellipse at 79% 37%, #142c4b 0, #0b1a2f 28%, #030e1b 65%); }
.hero-copy { position: relative; z-index: 2; padding: calc(51 * var(--u)) 0 0 var(--gutter); }
.eyebrow { font-size: calc(9.5 * var(--u)); font-weight: 400; letter-spacing: calc(2.6 * var(--u)); line-height: 1.5; text-transform: uppercase; }
.hero-eyebrow { color: var(--ice); }
.hero h1 { margin-top: calc(11 * var(--u)); font-size: calc(64 * var(--u)); line-height: .915; letter-spacing: calc(-1.5 * var(--u)); font-weight: 430; }
.hero h1 span, .company h2 span { display: block; }
.hero-description { margin-top: calc(25 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 350; line-height: 1.45; letter-spacing: 0; }
.hero-actions { display: flex; align-items: center; gap: calc(30 * var(--u)); margin-top: calc(23 * var(--u)); }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: calc(13 * var(--u)); font-weight: 570; border-radius: calc(5 * var(--u)); transition: box-shadow 180ms ease, transform 180ms ease; }
.button-light { color: #071020; background: linear-gradient(#fff, #fbfcff); border: 1px solid #e4e8ef; box-shadow: inset 0 -2px 3px #11192b0a, 0 3px 12px #0000000a; }
.button::after { content: ''; position: absolute; inset: -70% auto -70% -70%; width: 35%; background: linear-gradient(90deg, transparent, #7acbff22, transparent); transform: skewX(-20deg); transition: left 450ms ease; pointer-events: none; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 25px #60bdff22; }
.button:hover::after { left: 130%; }
.explore-button { width: calc(176 * var(--u)); height: calc(42 * var(--u)); }
.text-link { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); }
.text-link > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(5 * var(--u)); text-decoration-color: #8eb3cc77; }
.text-link svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform 180ms ease; }
.text-link:hover svg { transform: translateX(4px); }
.about-link { color: #a6dafe; font-size: calc(13 * var(--u)); }
.artwork { pointer-events: none; user-select: none; }
.artwork img { display: block; position: absolute; max-width: none; height: auto; }
.hero-art { position: absolute; z-index: 1; left: 46.875%; top: 0; width: 53.125%; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0 12%, #000 24%); mask-image: linear-gradient(to right, transparent 0 12%, #000 24%); animation: hero-float 11s ease-in-out infinite; }
.hero-art img { width: 188.235294%; left: -88.235294%; top: -12.5%; }

.focus { height: calc(69 * var(--u)); color: #dce5f6; background: linear-gradient(100deg, #061222, #08172b); border-top: 1px solid #2b4058; border-bottom: 1px solid #27374f; }
.focus-list { height: 100%; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.focus-item { display: flex; align-items: center; gap: calc(26 * var(--u)); padding-left: var(--gutter); position: relative; white-space: nowrap; font-size: calc(15 * var(--u)); font-weight: 350; letter-spacing: calc(-.2 * var(--u)); }
.focus-item + .focus-item::before { content: ''; position: absolute; left: calc(6 * var(--u)); top: calc(15 * var(--u)); bottom: calc(16 * var(--u)); width: 1px; background: #34455c; }
.focus-item:last-child { padding-left: calc(64 * var(--u)); }
.focus-icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; stroke: #97d8ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brain-icon { width: calc(40 * var(--u)); padding: calc(3 * var(--u)); }
.layers-icon { padding: calc(1 * var(--u)); }

.product { position: relative; height: calc(509 * var(--u)); overflow: hidden; background: radial-gradient(ellipse at 70% 55%, #e6e7fb, transparent 55%), #f3f5f8; }
.product-heading { position: relative; z-index: 3; padding: calc(37 * var(--u)) var(--gutter) 0; pointer-events: none; }
.product-heading h2 { margin-top: calc(12 * var(--u)); font-size: calc(50 * var(--u)); font-weight: 440; line-height: 1.1; letter-spacing: calc(-.3 * var(--u)); }
.product-card { position: absolute; left: calc(34 * var(--u)); right: calc(34 * var(--u)); top: calc(135 * var(--u)); height: calc(348 * var(--u)); border: 1px solid #ffffffa8; border-radius: calc(15 * var(--u)); background: linear-gradient(110deg, #ffffffa8, #eff2fb8a 55%, #e2edf599); }
.product-copy { position: relative; z-index: 2; padding: calc(42 * var(--u)) calc(46 * var(--u)); }
.product-copy h3 { font-size: calc(56 * var(--u)); font-weight: 460; letter-spacing: calc(-.4 * var(--u)); line-height: 1.1; }
.product-copy h3 span { color: var(--violet); }
.beta-badge { display: table; height: calc(27 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); margin-top: calc(9 * var(--u)); border: 1px solid #945dff; border-radius: 99px; font-size: calc(11 * var(--u)); line-height: 1.5; font-weight: 550; letter-spacing: calc(2.3 * var(--u)); text-transform: uppercase; color: #7034ff; }
.product-description { margin-top: calc(28 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 430; line-height: 1.35; letter-spacing: 0; }
.product-detail { margin-top: calc(9 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 350; line-height: 1.4; letter-spacing: 0; color: #525a6d; }
.product-link { margin-top: calc(48 * var(--u)); gap: calc(11 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(-.25 * var(--u)); color: #743aff; }
.product-link > span { text-decoration-color: #9a76ff99; }
.product-link svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.product-art { position: absolute; z-index: 1; left: calc(446 * var(--u)); top: calc(-128 * var(--u)); width: calc(544 * var(--u)); height: calc(498 * var(--u)); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 23%, 13% 23%, 13% 10%, 0 10%); -webkit-mask-image: linear-gradient(to right, transparent, #000 7%); mask-image: linear-gradient(to right, transparent, #000 7%); animation: product-float 13s ease-in-out infinite; }
.product-art img { width: 188.235294%; left: -88.235294%; top: -112.851406%; }

.company { position: relative; height: calc(271 * var(--u)); overflow: hidden; padding: calc(37 * var(--u)) var(--gutter) 0; background: linear-gradient(105deg, #fff, #fff 53%, #fcfdff); }
.company-heading { position: relative; z-index: 2; }
.company h2 { margin-top: calc(15 * var(--u)); font-size: calc(56 * var(--u)); font-weight: 430; line-height: .93; letter-spacing: calc(-1.6 * var(--u)); }
.company-rule { display: block; margin-top: calc(21 * var(--u)); height: 1px; width: calc(39 * var(--u)); background: #62bfff; }
.company-description { position: absolute; z-index: 2; top: calc(133 * var(--u)); left: 55%; font-size: calc(18 * var(--u)); font-weight: 350; line-height: 1.42; letter-spacing: calc(-.5 * var(--u)); color: #535c70; }
.company-globe { position: absolute; right: calc(-44 * var(--u)); top: calc(-8 * var(--u)); width: calc(360 * var(--u)); height: calc(320 * var(--u)); stroke: #cfdef180; stroke-width: .8; }
.company-globe .globe-points { stroke: none; fill: #7cc6ff; }

.contact { position: relative; height: calc(143 * var(--u)); overflow: hidden; color: #f5f6fc; background: radial-gradient(ellipse at 79% 47%, #10263e, transparent 58%), #061221; }
.contact-copy { position: relative; z-index: 2; padding: calc(22 * var(--u)) var(--gutter) 0; }
.contact h2 { font-size: calc(40 * var(--u)); font-weight: 430; letter-spacing: calc(-.3 * var(--u)); line-height: 1.2; }
.conversation-button { width: calc(205 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(13 * var(--u)); }
.contact-orbit { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #008dff; stroke-width: .9; filter: drop-shadow(0 0 5px #008dff88); }
.site-footer { display: flex; align-items: center; position: relative; height: calc(58 * var(--u)); padding-inline: var(--gutter); border-top: 1px solid #314357; color: #dce2ed; background: linear-gradient(110deg, #061221, #0b1b2e); }
.footer-wordmark { color: #f7f8fc; font-size: calc(23 * var(--u)); letter-spacing: calc(-.75 * var(--u)); }
.site-footer > p { margin-left: calc(167 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 350; }
.footer-nav { display: flex; gap: calc(46 * var(--u)); margin-left: auto; font-size: calc(12 * var(--u)); font-weight: 350; }

.product-dialog { width: min(560px, calc(100% - 36px)); max-height: min(760px, calc(100dvh - 40px)); padding: 40px; overflow-y: auto; overscroll-behavior: contain; color: #071020; background: #f8f9ff; border: 1px solid #dfe6f1; border-radius: 20px; box-shadow: 0 28px 100px #0006; }
.product-dialog::backdrop { background: #031021b8; backdrop-filter: blur(7px); }
.product-dialog h2 { padding-right: 30px; font-size: 46px; line-height: 1.1; font-weight: 460; letter-spacing: -1px; }
.product-dialog h2 span { color: var(--violet); }
.product-dialog .beta-badge { height: auto; padding: 4px 12px; margin-top: 12px; font-size: 10px; letter-spacing: 2px; }
.dialog-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; padding: 8px; color: #3c4d68; cursor: pointer; background: transparent; border: 1px solid #dce3ee; border-radius: 50%; }
.dialog-close svg, .dialog-contact svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dialog-close:hover { background: #edf0fa; }
.dialog-summary { margin-top: 27px; font-size: 20px; line-height: 1.4; letter-spacing: -.4px; }
.dialog-detail { margin-top: 7px; font-size: 15px; line-height: 1.5; color: #535d72; }
.dialog-features { display: grid; gap: 20px; margin: 28px 0; padding-block: 23px; border-block: 1px solid #dfe4ef; }
.dialog-features dt { font-size: 14px; font-weight: 600; }
.dialog-features dd { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #535d72; }
.dialog-status { font-size: 14px; line-height: 1.55; color: #535d72; }
.dialog-contact { gap: 16px; margin-top: 25px; padding: 13px 18px; color: #fff; font-size: 13px; background: #6833df; border: 1px solid #6833df; border-radius: 6px; }
.product-dialog a:focus-visible, .product-dialog button:focus-visible { outline-color: #156bb3; }
html:has(.product-dialog[open]) { overflow: hidden; }

@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes product-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (min-width: 1536px) { body { background: #061221; } }

@media (max-width: 760px) {
  :root { --gutter: 24px; }
  html { scroll-padding-top: 16px; }
  .site-header { height: 66px; }
  .header-inner { padding: 0 24px; }
  .wordmark { font-size: 28px; letter-spacing: -1.2px; }
  .header-contact { display: none; }
  .menu-toggle { display: flex; width: 42px; height: 42px; padding: 10px 6px; flex-direction: column; justify-content: center; gap: 7px; color: #dceeff; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
  .menu-toggle span { display: block; width: 27px; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .primary-nav { display: none; left: 0; right: 0; top: 65px; padding: 22px 24px 26px; border-top: 1px solid #2c4158; border-bottom: 1px solid #2c4158; background: #08182a; box-shadow: 0 18px 30px #0004; font-size: 16px; gap: 18px; flex-direction: column; align-items: stretch; }
  .primary-nav[data-open='true'] { display: flex; }
  .primary-nav .mobile-contact { display: block; color: #a2ddff; }
  .primary-nav > a { padding-block: 5px; }
  .primary-nav > a::after { right: auto; width: 38px; }
  .hero { height: auto; min-height: 0; padding-bottom: 0; }
  .hero-copy { padding: 35px 24px 0; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; line-height: 1.6; }
  .hero h1 { margin-top: 18px; font-size: clamp(38px, 10.25vw, 69px); line-height: .99; letter-spacing: -2px; font-weight: 430; }
  .hero-description { margin-top: 22px; max-width: 470px; font-size: 16px; line-height: 1.5; letter-spacing: -.3px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 24px; margin-top: 24px; }
  .button { font-size: 12px; border-radius: 5px; }
  .explore-button { width: 155px; height: 42px; }
  .about-link { font-size: 12px; }
  .text-link { gap: 8px; }
  .text-link > span { text-underline-offset: 5px; }
  .text-link svg { width: 18px; height: 18px; }
  .hero-art { position: relative; left: 0; top: auto; width: 100%; height: auto; aspect-ratio: 544 / 432; margin-top: -7px; -webkit-mask-image: linear-gradient(to right, transparent 0 14%, #000 24%); mask-image: linear-gradient(to right, transparent 0 14%, #000 24%); }
  .hero-art::after { content: ''; position: absolute; inset: auto 0 0; height: 16%; background: linear-gradient(transparent, #061222); }
  .focus { height: 112px; }
  .focus-item { gap: 8px; padding: 13px 7px 12px; flex-direction: column; justify-content: center; text-align: center; white-space: normal; font-size: 11px; line-height: 1.4; letter-spacing: -.15px; }
  .focus-item:last-child { padding-left: 7px; }
  .focus-item + .focus-item::before { left: 0; top: 22px; bottom: 22px; }
  .focus-icon, .brain-icon { width: 34px; height: 34px; padding: 0; }
  .brain-icon { padding: 2px; }
  .focus-item span { max-width: 113px; }
  .product { height: auto; padding: 34px 18px 22px; }
  .product-heading { padding: 0 6px; }
  .product-heading h2 { margin-top: 13px; font-size: clamp(30px, 8.6vw, 48px); line-height: 1.1; letter-spacing: -1.8px; }
  .product-card { position: relative; inset: auto; height: auto; margin-top: 26px; border-radius: 14px; }
  .product-copy { padding: 27px 24px 0; }
  .product-copy h3 { font-size: 46px; letter-spacing: -2.2px; }
  .beta-badge { margin-top: 10px; height: 25px; padding: 4px 12px; font-size: 10px; line-height: 1.4; letter-spacing: 2px; }
  .product-description { margin-top: 25px; font-size: 18px; line-height: 1.4; letter-spacing: -.4px; }
  .product-detail { margin-top: 7px; max-width: 300px; font-size: 14px; line-height: 1.5; letter-spacing: -.25px; }
  .product-link { margin-top: 25px; font-size: 15px; }
  .product-link svg { width: 21px; height: 21px; }
  .product-art { position: relative; left: -19px; top: auto; width: calc(100% + 38px); height: auto; aspect-ratio: 544 / 498; margin-top: 14px; clip-path: none; -webkit-mask-image: linear-gradient(to right, transparent 0 14%, #000 25%), linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent 0 14%, #000 25%), linear-gradient(to bottom, transparent, #000 4%, #000 95%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .company { height: auto; min-height: 405px; padding: 34px 24px 39px; }
  .company h2 { margin-top: 18px; font-size: clamp(36px, 10.1vw, 58px); line-height: 1.01; letter-spacing: -1.8px; }
  .company-rule { margin-top: 23px; width: 36px; }
  .company-description { position: relative; inset: auto; max-width: 365px; margin-top: 26px; font-size: 16px; line-height: 1.5; letter-spacing: -.3px; }
  .company-globe { right: -155px; top: 75px; width: 360px; height: 320px; opacity: .65; }
  .contact { height: 173px; }
  .contact-copy { padding: 28px 24px 0; }
  .contact h2 { font-size: clamp(27px, 7.8vw, 42px); letter-spacing: -1.2px; line-height: 1.2; }
  .conversation-button { margin-top: 23px; width: 190px; height: 42px; }
  .contact-orbit { width: 160%; left: -20%; opacity: .8; }
  .site-footer { height: auto; min-height: 129px; flex-wrap: wrap; padding: 23px 24px; gap: 23px 0; }
  .footer-wordmark { font-size: 23px; letter-spacing: -.7px; }
  .site-footer > p { margin-left: auto; font-size: 11px; }
  .footer-nav { width: 100%; margin-left: 0; gap: 30px; font-size: 12px; }
  .product-dialog { width: calc(100% - 28px); max-height: calc(100dvh - 28px); padding: 34px 24px 27px; border-radius: 16px; }
  .product-dialog h2 { font-size: 39px; }
  .dialog-close { top: 14px; right: 14px; }
  .dialog-summary { margin-top: 24px; font-size: 18px; }
}

@media (max-width: 359px) {
  .header-inner, .hero-copy { padding-inline: 20px; }
  .hero h1 { font-size: 35px; letter-spacing: -1.9px; }
  .hero-actions { gap: 18px; }
  .explore-button { width: 143px; }
  .about-link { font-size: 11px; }
  .product-copy { padding-inline: 19px; }
  .product-description { font-size: 16px; }
  .contact h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}