:root {
  --bg: #181818; --s1: #1f1f1f; --s2: #272727; --line: #313131; --deep: #000000;
  --ink: #ededed; --muted: #9b9b9b; --soft: #b5b5b5;
  --accent: #e6007e; --signal: #2f80ed; --ok: #22c39a; --gap: #f5a524;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(100% - 48px, 1200px); margin: 0 auto; }
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -.03em; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.03em; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; }
.body-6 { font-size: 14px; line-height: 20px; }
.caption-2 { font-size: 14px; line-height: 20px; color: var(--muted); }
.muted { color: var(--muted); }
@media (max-width: 767px) { .heading-1 { font-size: 36px; line-height: 40px; } .heading-2 { font-size: 30px; line-height: 36px; } }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 40px; border-radius: 8px; font: 600 16px/24px var(--font); text-decoration: none;
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: #c4006b; }
.btn-ghost { border: 1px solid var(--line); } .btn-ghost:hover { border-color: #4a4a4a; background: var(--s1); }
.btn i { transition: transform .3s var(--ease); } .btn:hover i { transform: translateX(4px); }
.link { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: text-decoration-color .3s var(--ease); }
.link:hover { text-decoration-color: var(--ink); }
@media (max-width: 767px) { .btn { min-height: 44px; } }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 8px 12px; background: var(--accent); color: #fff; border-radius: 8px; }
.skip:focus { top: 16px; }
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(100% - 32px, 960px); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 8px 8px 8px 16px; background: rgb(24 24 24 / .72); border: 1px solid var(--line); border-radius: 16px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; line-height: 28px; text-decoration: none; }
.logo svg { width: 24px; height: 24px; }
.nav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--soft); text-decoration: none; transition: color .3s var(--ease), background-color .3s var(--ease); }
.nav__links a:hover { color: var(--ink); background: var(--s2); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease); }
.nav__toggle span:nth-child(1) { top: 16px; } .nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 30; padding: 96px 24px 24px; background: rgb(24 24 24 / .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: grid; align-content: start; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.sheet.is-open { opacity: 1; pointer-events: auto; }
.sheet a { font-size: 30px; line-height: 36px; font-weight: 600; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sheet.is-open a { opacity: 1; transform: none; }
@media (max-width: 767px) { .nav__links, .nav > .btn { display: none; } .nav__toggle { display: block; } }
section { padding: 96px 0; }
.sec-head { display: grid; gap: 16px; max-width: 680px; margin-bottom: 48px; }
.hero { position: relative; padding: 160px 0 96px; overflow: hidden; }
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.hero__copy { display: grid; gap: 24px; }
.hero h1 { max-width: 680px; background: linear-gradient(90deg, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { max-width: 680px; color: var(--soft); font-size: 18px; line-height: 28px; }
.hero__ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.proof { display: flex; align-items: center; gap: 8px; } .proof i { color: var(--ok); }
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; } .hero { padding-top: 128px; } }
.console { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); overflow: hidden; box-shadow: 0 32px 64px -32px rgb(0 0 0 / .8); }
.console__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 400 12px/16px var(--mono); color: var(--muted); }
.console__live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--soft); }
.console__live b { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.console__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.stat { padding: 16px; display: grid; gap: 4px; } .stat + .stat { border-left: 1px solid var(--line); }
.stat span { font-size: 12px; line-height: 16px; color: var(--muted); }
.stat b { font: 500 24px/32px var(--mono); font-variant-numeric: tabular-nums; }
.stat .ok { color: var(--ok); } .stat .warn { color: var(--gap); }
@media (max-width: 767px) { .stat b { font-size: 18px; line-height: 28px; } }
.rows { height: 264px; overflow: hidden; }
.rows ol { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; animation: row-in .6s var(--ease) both; }
.rows li code { font: 400 12px/16px var(--mono); color: var(--muted); }
.rows li .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.tag { padding: 2px 8px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.tag.pass { background: rgb(34 195 154 / .14); color: var(--ok); } .tag.flag { background: rgb(245 165 36 / .14); color: var(--gap); } .tag.check { background: var(--s2); color: var(--soft); }
@keyframes row-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.console__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.console__foot b { color: var(--gap); font-weight: 500; }
.tagline { padding: 128px 0; } .tagline p { max-width: 880px; }
.tagline .w { color: rgb(237 237 237 / .3); transition: color .5s var(--ease); } .tagline .w.on { color: var(--ink); } .tagline .w.accent.on { color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; gap: 48px; } }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pane { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); padding: 16px; display: grid; gap: 8px; align-content: start; }
.pane h3 { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.cell { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--deep); font-size: 14px; line-height: 20px; }
.cell.bad { box-shadow: inset 0 0 0 1px rgb(245 165 36 / .5); color: var(--gap); } .cell.good { color: var(--soft); } .cell.good i { color: var(--ok); }
.points { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; } .points i { color: var(--accent); font-size: 20px; margin-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px) { .cards { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); padding: 32px; display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease), border-color .3s var(--ease); }
.card:hover { transform: translateY(-4px); border-color: #4a4a4a; }
.card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--s2); font-size: 24px; margin-bottom: 12px; }
.card .detail { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr; } }
.steps li { padding: 32px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 12px; align-content: start; }
.steps .num { width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: var(--s2); font: 500 14px/20px var(--mono); margin-bottom: 12px; }
.steps li:first-child .num { background: var(--accent); color: #fff; }
.product { border: 1px solid var(--line); border-radius: 24px; background: var(--s1); padding: 48px; }
@media (max-width: 767px) { .product { padding: 24px; } }
.ll-badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 9999px; background: rgb(34 195 154 / .14); color: var(--ok); font-size: 12px; line-height: 16px; font-weight: 500; }
.ll-ui { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); padding: 24px; display: grid; gap: 16px; }
.ll-ui .a { padding: 12px 16px; border-radius: 8px; background: var(--deep); color: var(--soft); font-size: 14px; line-height: 20px; }
.ll-ui .score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ll-ui .score div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; }
.ll-ui .score span { font-size: 12px; line-height: 16px; color: var(--muted); } .ll-ui .score b { font: 500 20px/28px var(--mono); }
.ll-ui .gap { display: flex; gap: 8px; padding: 12px 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(245 165 36 / .45); color: var(--gap); font-size: 14px; line-height: 20px; }
.faq { display: grid; gap: 8px; max-width: 880px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--s1); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { transition: transform .5s var(--ease); color: var(--muted); } .faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 24px 24px; color: var(--soft); }
.final__box { border: 1px solid var(--line); border-radius: 24px; padding: 64px 48px; display: grid; gap: 24px; justify-items: start; background: var(--s1); }
@media (max-width: 767px) { .final__box { padding: 40px 24px; } }
.reversal { display: flex; gap: 24px; flex-wrap: wrap; color: var(--muted); font-size: 14px; line-height: 20px; }
.reversal span { display: inline-flex; align-items: center; gap: 8px; } .reversal i { color: var(--ok); }
footer { border-top: 1px solid var(--line); padding: 48px 0; }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.foot a { color: var(--muted); text-decoration: none; font-size: 14px; line-height: 20px; transition: color .3s var(--ease); } .foot a:hover { color: var(--ink); }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { transform: none; transition: opacity .3s linear; } .rows li { animation: none; } .card, .btn { transition: none; } }

/* services: a small live picture of each service (transform and opacity only) */
.viz { height: 136px; margin-bottom: 12px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line); padding: 16px; position: relative; overflow: hidden; }
.viz-cap { position: absolute; right: 16px; top: 12px; font: 500 12px/16px var(--mono); color: var(--ok); animation: cap 4s var(--ease) infinite; }
.viz-bars { position: absolute; left: 16px; right: 16px; bottom: 16px; top: 40px; display: flex; align-items: flex-end; gap: 8px; }
.viz-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--s2); transform-origin: bottom; animation: bar 4s var(--ease) infinite; }
.viz-bars i:last-child { background: var(--signal); }
.viz-bars i:nth-child(2) { animation-delay: .15s; } .viz-bars i:nth-child(3) { animation-delay: .3s; } .viz-bars i:nth-child(4) { animation-delay: .45s; } .viz-bars i:nth-child(5) { animation-delay: .6s; } .viz-bars i:nth-child(6) { animation-delay: .75s; }
@keyframes bar { 0% { transform: scaleY(.1); } 35%, 100% { transform: scaleY(1); } }
@keyframes cap { 0%, 30% { opacity: 0; transform: translateY(4px); } 45%, 100% { opacity: 1; transform: none; } }
.viz-rows { display: grid; gap: 6px; }
.viz-rows p { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--soft); }
.viz-rows b { font-weight: 500; opacity: 0; transform: scale(.6); animation: tick 4s var(--ease) infinite; }
.viz-rows p:nth-child(2) b { animation-delay: .5s; } .viz-rows p:nth-child(3) b { animation-delay: 1s; } .viz-rows p:nth-child(4) b { animation-delay: 1.5s; }
.okc { color: var(--ok); } .flg { color: var(--gap); }
@keyframes tick { 0%, 10% { opacity: 0; transform: scale(.6); } 20%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.viz-flow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.viz-flow::before { content: ""; position: absolute; left: 48px; right: 48px; top: 50%; height: 1px; background: var(--line); }
.viz-flow span { position: relative; z-index: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--s1); font-size: 12px; line-height: 16px; color: var(--soft); }
.viz-flow .dot { position: absolute; left: 48px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: travel 3.2s var(--ease) infinite; }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 104px)); opacity: 0; } }
.viz:has(.viz-flow) { container-type: inline-size; }
.viz-api { display: grid; gap: 12px; font: 400 12px/16px var(--mono); }
.viz-api code { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-api .res { color: var(--ok); opacity: 0; transform: translateY(6px); animation: res 3.6s var(--ease) infinite; }
@keyframes res { 0%, 35% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .viz *, .viz *::before { animation: none !important; opacity: 1 !important; transform: none !important; } }