:root{color-scheme:light;--paper:#f8f8f2;--ink:#232622;--blue:#2e37e5;--green:#17b981;--yellow:#fbff61}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--yellow);color:var(--ink)}
.shell{width:min(1180px,calc(100% - 104px));margin-inline:auto}
header{padding-block:42px}
.logo{display:block;width:184px;height:auto}
main{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;align-self:center;padding-block:35px 55px}
.hero-copy{position:relative;z-index:1;animation:enter .8s ease-out both}
.beta{display:flex;align-items:center;gap:8px;margin:0 0 25px;font-size:12px;line-height:1.5;color:#62685d}
.beta span{width:6px;height:6px;border-radius:50%;background:var(--green)}
h1{margin:0;font-size:clamp(48px,5.9vw,82px);font-weight:500;line-height:1.04;letter-spacing:-.065em;white-space:nowrap}
.description{margin:26px 0 32px;font-size:17px;line-height:1.65;color:#6b7065;letter-spacing:-.015em;max-width:355px}
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:white;text-decoration:none;font-size:14px;font-weight:500;line-height:1.4;padding:17px 22px;border-radius:5px;transition:background .2s,transform .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.button:hover{background:#232bcb;transform:translateY(-2px)}.button:active{transform:translateY(0)}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.system-art{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:auto;isolation:isolate;animation:enter 1.1s .12s both}
.orbit,.orbit-track{position:absolute;border-radius:50%;inset:5%}
.orbit{border:1px solid #dddfd5}.orbit-inner{inset:15%;border-color:#e6e7df}
.orbit-track{animation:orbit 24s linear infinite}
.orbit-track span{position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--green)}
.orbit-track-two{inset:15%;animation-duration:32s;animation-direction:reverse}.orbit-track-two span{background:var(--blue);width:4px;height:4px;top:-2px;left:calc(50% - 2px)}
.pie-float{position:absolute;inset:19%;animation:float 8s ease-in-out infinite}
.pie{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-8deg)}
.slice{transform-origin:337px 337px;animation:assemble 12s ease-in-out infinite}
.art-label{position:absolute;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#646b5e;border-radius:30px;padding:9px 12px;background:var(--paper);border:1px solid #e0e2d8;z-index:2}
.art-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.label-data{top:6%;left:15%;animation:label-drift 8s ease-in-out infinite}.label-decisions{top:45%;right:-2%;animation:label-drift 9s -3s ease-in-out infinite}.label-decisions i{background:var(--green)}.label-action{bottom:4%;left:26%;animation:label-drift 10s -5s ease-in-out infinite}.label-action i{background:#9b9e43}
footer{padding-block:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#858a7f;font-size:10px;line-height:1.5}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes label-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes assemble{0%,14%,100%{transform:translate(0,0) rotate(0)}42%,56%{transform:translate(var(--x),var(--y)) rotate(var(--r))}84%{transform:translate(0,0) rotate(0)}}
@media(max-width:1000px){.shell{width:calc(100% - 72px)}main{gap:26px;grid-template-columns:1.25fr 1fr}header{padding-block:34px}.logo{width:170px}h1{font-size:clamp(48px,5.9vw,64px)}.description{font-size:16px;max-width:315px}.system-art{max-width:375px}.art-label{font-size:10px;padding:7px 10px}.label-decisions{right:-4%}}
@media(max-width:760px){.shell{width:calc(100% - 48px)}header{padding-block:28px}.logo{width:159px}main{display:flex;flex-direction:column;gap:34px;padding-block:38px 38px;text-align:center}.beta{justify-content:center;margin-bottom:22px;font-size:11px}h1{font-size:clamp(44px,7.8vw,60px)}.description{margin:23px auto 27px;font-size:15px;max-width:300px}.button{font-size:13px;padding:17px 21px}.system-art{width:300px;max-width:100%;flex-shrink:0}.art-label{font-size:9px;padding:7px 9px}.label-decisions{right:0}footer{font-size:9px;padding-block:20px}main{align-self:center}}
@media(max-width:420px){main{padding-block:25px 24px;gap:28px}h1{font-size:clamp(37px,10.8vw,46px)}.system-art{width:260px}.description{max-width:275px}.beta{margin-bottom:20px}header{padding-block:25px}footer{padding-block:13px}}
@media(max-height:660px) and (min-width:761px){header{padding-block:25px}main{padding-block:25px}.system-art{max-width:330px}h1{font-size:58px}.description{margin-block:20px 25px}footer{padding-block:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}