:root { color-scheme:dark; --void:#08090a; --carbon:#0f1011; --obsidian:#161718; --graphite:#23252a; --smoke:#383b3f; --ash:#62666d; --fog:#8a8f98; --mist:#d0d6e0; --paper:#fff; --lime:#e4f222; --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { overflow-x:clip; background:var(--void); scroll-behavior:smooth; } body { margin:0; min-width:320px; overflow-x:clip; background:var(--void); color:var(--mist); font:400 16px/1.5 var(--font); letter-spacing:-.01em; font-feature-settings:"cv01" on,"ss03" on,"zero" on; -webkit-font-smoothing:antialiased; } a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:10px 14px; border-radius:6px; background:var(--lime); color:var(--void); font-weight:500; transform:translateY(-160%); } .skip-link:focus { transform:translateY(0); }
.site-header,.hero,.platform,.workflow,footer { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }.site-header { display:grid; min-height:76px; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:.5px solid var(--graphite); }.brand { display:inline-flex; width:132px; }.brand img,footer img { display:block; width:100%; height:auto; } nav { display:flex; gap:24px; } nav a { color:var(--fog); font-size:13px; text-decoration:none; transition:color 150ms ease; } nav a:hover { color:var(--paper); }.nav-action { display:inline-flex; justify-self:end; align-items:center; gap:8px; color:var(--mist); font-size:13px; text-decoration:none; }.nav-action img { display:block; width:82px; height:auto; }.nav-action span { color:var(--mist); }
.hero { position:relative; display:grid; min-height:690px; padding:112px 0 96px; grid-template-columns:minmax(360px,.85fr) minmax(480px,1.15fr); align-items:center; gap:80px; }.hero::before { position:absolute; z-index:0; right:calc((100% - 100vw) / 2); bottom:0; left:calc((100% - 100vw) / 2); height:42%; background:linear-gradient(180deg,transparent 0%,#17191b 100%); content:""; pointer-events:none; }.hero-copy,.hero-product { position:relative; z-index:1; }.eyebrow { margin:0 0 20px; color:var(--fog); font-size:12px; letter-spacing:.02em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:28px; color:var(--paper); font-size:clamp(3.8rem,6.2vw,5.6rem); font-weight:500; letter-spacing:-.052em; line-height:.96; } h1 em { color:var(--fog); font-style:normal; }.hero-summary { max-width:425px; margin-bottom:32px; color:var(--fog); font-size:17px; line-height:1.6; }.hero-actions { display:flex; align-items:center; gap:24px; }.primary-button,.outline-button { display:inline-flex; min-height:42px; align-items:center; justify-content:space-between; gap:28px; padding:10px 16px; border-radius:6px; font-size:14px; font-weight:500; text-decoration:none; transition:transform 160ms ease,background 160ms ease,border-color 160ms ease; }.primary-button { border:1px solid var(--lime); background:var(--lime); color:var(--void); }.primary-button:hover { border-color:#f0ff39; background:#f0ff39; transform:translateY(-1px); }.text-action { color:var(--mist); font-size:14px; text-decoration:none; }.text-action span { margin-left:4px; color:var(--fog); }
.hero-product { padding:12px; border-radius:12px; background:var(--carbon); box-shadow:inset 0 0 0 1px var(--graphite); }.window-bar { display:flex; height:32px; align-items:center; gap:5px; padding:0 4px; }.window-bar span { width:6px; height:6px; border-radius:50%; background:var(--smoke); }.window-bar p { margin:0 auto; padding-right:25px; color:var(--ash); font-size:11px; letter-spacing:0; }.hero-product img { display:block; width:100%; height:auto; border:1px solid var(--graphite); border-radius:6px; }
.platform { padding:96px 0; border-top:.5px solid var(--graphite); }.section-intro { display:grid; margin-bottom:48px; grid-template-columns:1.1fr .9fr; column-gap:80px; align-items:end; }.section-intro .eyebrow { grid-column:1/-1; } h2 { margin:0; color:var(--paper); font-size:clamp(2.5rem,4.3vw,4rem); font-weight:500; letter-spacing:-.045em; line-height:1; } h2 span { color:var(--fog); }.section-intro > p:last-child { max-width:390px; margin:0 0 3px auto; color:var(--fog); }
.carousel-viewport { overflow:hidden; padding:12px; border-radius:12px; background:var(--carbon); box-shadow:inset 0 0 0 1px var(--graphite); }.carousel-track { display:flex; transition:transform 550ms cubic-bezier(.22,.75,.2,1); will-change:transform; }.slide { min-width:100%; margin:0; overflow:hidden; border:1px solid var(--graphite); border-radius:6px; background:var(--obsidian); }.slide img { display:block; width:100%; height:auto; border-bottom:.5px solid var(--graphite); }.slide figcaption { display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:24px; padding:18px 20px; }.slide figcaption div { display:flex; align-items:baseline; gap:14px; }.slide strong { color:var(--paper); font-size:14px; font-weight:500; }.slide figcaption span { color:var(--fog); font-size:13px; }.slide-number { font-variant-numeric:tabular-nums; white-space:nowrap; }.carousel-controls { display:flex; min-height:72px; align-items:center; justify-content:space-between; }.carousel-progress { display:grid; width:min(380px,48%); grid-template-columns:repeat(4,1fr); gap:6px; }.carousel-progress span { height:1px; background:var(--smoke); transition:background 180ms ease; }.carousel-progress span.is-active { background:var(--lime); }.carousel-buttons { display:flex; gap:8px; }.carousel-buttons button { width:36px; height:36px; border:1px solid var(--graphite); border-radius:6px; background:transparent; color:var(--mist); cursor:pointer; font:400 16px/1 var(--font); transition:border-color 150ms ease,background 150ms ease; }.carousel-buttons button:hover { border-color:var(--smoke); background:var(--obsidian); }.carousel-status,.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.workflow { display:grid; min-height:410px; padding:88px 0; grid-template-columns:.68fr 1fr; align-items:end; gap:52px; border-top:.5px solid var(--graphite); }.workflow .eyebrow { align-self:start; }.workflow h2 { margin-bottom:20px; }.workflow div p { max-width:430px; margin:0; color:var(--fog); } footer { display:flex; min-height:108px; align-items:center; justify-content:space-between; border-top:.5px solid var(--graphite); color:var(--ash); font-size:12px; } footer img { width:108px; opacity:.72; } footer p { margin:0; }
.brand:focus-visible,nav a:focus-visible,.nav-action:focus-visible,.primary-button:focus-visible,.text-action:focus-visible,.outline-button:focus-visible,button:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }.js [data-intro],.js .reveal { opacity:0; transform:translateY(16px); transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.75,.2,1); }.js [data-intro] { animation:intro 700ms 100ms forwards; }.js .hero-product[data-intro] { animation-delay:180ms; }.js .reveal.is-visible { opacity:1; transform:none; } @keyframes intro { to { opacity:1; transform:none; } }
@media (max-width:850px) { .site-header { grid-template-columns:1fr auto; } nav { display:none; }.hero { min-height:0; padding:88px 0; grid-template-columns:1fr; gap:56px; }.hero-product { max-width:680px; }.section-intro { grid-template-columns:1fr; gap:24px; }.section-intro > p:last-child { margin:0; }.workflow { grid-template-columns:1fr; min-height:0; gap:32px; }.workflow .eyebrow { margin:0; }.outline-button { justify-self:start; } }
@media (max-width:560px) { .site-header,.hero,.platform,.workflow,footer { width:calc(100% - 36px); }.site-header { min-height:68px; }.brand { width:116px; }.nav-action img { width:72px; }.nav-action span { font-size:12px; }.hero { padding:70px 0 72px; gap:44px; } h1 { font-size:clamp(3.25rem,15vw,4.25rem); }.hero-summary { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.primary-button { width:100%; }.hero-product,.carousel-viewport { padding:8px; border-radius:8px; }.platform { padding:72px 0; }.slide figcaption { min-height:98px; padding:16px; align-items:flex-start; }.slide figcaption div { align-items:flex-start; flex-direction:column; gap:3px; }.slide figcaption div span { max-width:190px; }.carousel-controls { min-height:64px; }.workflow { padding:72px 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }