@font-face { font-family: Geist; font-weight: 100 900; font-display: swap; src: url(/fonts/geist.woff2) format("woff2"); }

:root {
  --bg: #08080a;
  --bg-2: #101014;
  --panel: #121217;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f4f4f6;
  --soft: #a7a7b3;
  --muted: #6e6e7a;
  --blue: #4d8dff;
  --dislab: #3a36e0;
  --dislab-hi: #7c79ff;
  --mendlab: #6ee7b7;
  --mendlab-bg: #0f172a;
  --wrap: 1120px;
  --r: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* header */
header.top { position: sticky; top: 0; z-index: 10; background: rgba(8, 8, 10, .72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mark { font-size: 21px; font-weight: 650; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; }
.mark b { font-weight: 650; }
.mark span { color: var(--blue); }
header.top nav { display: flex; gap: 28px; font-size: 15px; color: var(--soft); }
header.top nav a:hover { color: var(--text); }

/* hero */
.hero { position: relative; padding: 140px 0 120px; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -64px 0 0; z-index: -1;
  background:
    radial-gradient(600px 380px at 18% 30%, rgba(58, 54, 224, .38), transparent 70%),
    radial-gradient(520px 340px at 82% 60%, rgba(110, 231, 183, .16), transparent 70%);
  filter: blur(10px);
}
.hero::after {
  content: ""; position: absolute; inset: -64px 0 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px 6px 10px; background: rgba(255, 255, 255, .03); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--mendlab); box-shadow: 0 0 12px var(--mendlab); }
.hero h1 { margin-top: 28px; font-size: clamp(44px, 8.2vw, 104px); max-width: 11em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--dislab-hi), var(--blue) 45%, var(--mendlab)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { margin-top: 28px; font-size: clamp(18px, 2vw, 21px); color: var(--soft); max-width: 36em; }
.hero p.sub strong { color: var(--text); font-weight: 500; }
.cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 16px; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.solid { background: var(--text); color: var(--bg); }
.btn.ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }

/* sections */
section { padding: 120px 0; }
.label { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 500; }
section h2 { margin-top: 14px; font-size: clamp(34px, 5vw, 56px); max-width: 14em; }

/* products */
.products { margin-top: 56px; display: grid; gap: 24px; }
.product { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding: 56px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.product::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.product.dislab { background: linear-gradient(160deg, #15142d, #0c0c12 60%); }
.product.dislab::before { background: radial-gradient(520px 360px at 85% 50%, rgba(58, 54, 224, .45), transparent 70%); }
.product.mendlab { background: linear-gradient(160deg, #0f1a2c, #0b0e14 60%); }
.product.mendlab::before { background: radial-gradient(520px 360px at 85% 50%, rgba(110, 231, 183, .18), transparent 70%); }
.product .icon { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 1px var(--line-2), 0 12px 32px rgba(0, 0, 0, .5); }
.product h3 { margin-top: 24px; font-size: clamp(36px, 4.4vw, 52px); }
.product .tag { margin-top: 12px; font-size: 20px; color: var(--text); letter-spacing: -0.01em; }
.product p.desc { margin-top: 14px; color: var(--soft); max-width: 30em; }
.chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 13px; color: var(--soft); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, .03); }
.links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.links a { color: var(--soft); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.links a:hover { color: var(--text); border-color: var(--text); }
.links a.go { color: var(--text); font-weight: 500; border: 0; }
.links a.go::after { content: " \2192"; }
.dislab .links a.go { color: var(--dislab-hi); }
.mendlab .links a.go { color: var(--mendlab); }

.screen { position: relative; border-radius: 14px; padding: 10px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -20px rgba(58, 54, 224, .5), 0 24px 48px rgba(0, 0, 0, .6); transform: perspective(1400px) rotateY(-8deg) rotateX(2deg); transition: transform .5s ease; }
.product:hover .screen { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.screen img { display: block; width: 100%; height: auto; border-radius: 6px; aspect-ratio: 16 / 9; }

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.features li { border: 1px solid rgba(110, 231, 183, .16); background: rgba(110, 231, 183, .04); border-radius: 14px; padding: 18px 18px 18px 46px; position: relative; color: var(--soft); font-size: 15px; line-height: 1.45; }
.features li strong { display: block; color: var(--text); font-weight: 550; font-size: 16px; margin-bottom: 2px; }
.features li::before { content: ""; position: absolute; left: 18px; top: 21px; width: 14px; height: 14px; border-radius: 50%; background: var(--mendlab); box-shadow: 0 0 14px rgba(110, 231, 183, .6); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }

/* company */
.company { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.company p.lead { margin-top: 20px; color: var(--soft); max-width: 26em; }
.registry { border: 1px solid var(--line-2); border-radius: var(--r); background: linear-gradient(180deg, var(--panel), var(--bg-2)); overflow: hidden; }
.registry .head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.registry .head b { color: var(--mendlab); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.registry .head b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mendlab); }
.registry dl { margin: 0; }
.registry .row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.registry .row:last-child { border-bottom: 0; }
.registry dt { color: var(--muted); font-size: 15px; }
.registry dd { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* contact */
.contact { text-align: center; padding: 140px 0; position: relative; isolation: isolate; border-top: 1px solid var(--line); }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 300px at 50% 100%, rgba(77, 141, 255, .18), transparent 70%); }
.contact h2 { margin: 14px auto 0; }
.contact p { margin: 20px auto 0; color: var(--soft); max-width: 32em; }
.contact .mail { display: inline-block; margin-top: 40px; font-size: clamp(30px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.04em; background: linear-gradient(90deg, var(--text), var(--soft)); -webkit-background-clip: text; background-clip: text; color: transparent; border-bottom: 2px solid var(--line-2); padding-bottom: 6px; transition: border-color .2s; }
.contact .mail:hover { border-color: var(--blue); }
.contact .also { margin-top: 28px; font-size: 15px; color: var(--muted); }
.contact .also a { color: var(--soft); border-bottom: 1px solid var(--line-2); }

/* legal page */
article.doc { padding: 100px 0 80px; }
article.doc .inner { max-width: 720px; }
article.doc h1 { margin-top: 14px; font-size: clamp(40px, 6vw, 64px); }
article.doc .updated { color: var(--muted); margin-top: 16px; }
article.doc h2 { font-size: 24px; margin-top: 52px; letter-spacing: -0.02em; }
article.doc p, article.doc ul { margin-top: 14px; color: var(--soft); }
article.doc ul { padding-left: 22px; }
article.doc li + li { margin-top: 8px; }
article.doc a { color: var(--text); border-bottom: 1px solid var(--line-2); }
article.doc a:hover { border-color: var(--text); }

/* footer */
footer { border-top: 1px solid var(--line); padding: 36px 0 44px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; }
footer nav { display: flex; gap: 22px; }
footer a:hover { color: var(--text); }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; padding: 36px 28px; gap: 36px; }
  .screen, .product:hover .screen { transform: none; }
  .company { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  header.top nav { gap: 18px; font-size: 14px; }
  .hero { padding: 88px 0 72px; }
  section { padding: 80px 0; }
  .product { padding: 28px 20px; }
  .features { grid-template-columns: 1fr; }
  .registry .row { grid-template-columns: 1fr; gap: 2px; padding: 14px 20px; }
  .contact { padding: 96px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .screen, .contact .mail { transition: none; }
}