:root { --ink:#090d15; --paper:#f4f0e8; --lime:#d9ff58; --orange:#ff6538; --muted:#89909d; --line:rgba(244,240,232,.16); --display:'Unbounded',sans-serif; --body:'Onest',sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; } a { color:inherit; } .noise { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.nav { height:94px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; } .brand { text-decoration:none; font-family:var(--display); font-size:17px; letter-spacing:-.08em; font-weight:700; } .brand span:not(.brand-mark) { color:var(--lime); } .brand-mark { display:inline-grid; place-items:center; margin-right:6px; color:var(--lime); font-size:1.45em; transform:rotate(-22deg); } .nav-link, footer a:last-child { color:var(--paper); font-size:14px; text-underline-offset:5px; } .nav-link span, footer a span { color:var(--lime); }
.hero { min-height:calc(100svh - 94px); padding:48px clamp(24px,7vw,120px) 70px; display:grid; grid-template-columns:minmax(300px,.88fr) minmax(440px,1.12fr); gap:2vw; align-items:center; position:relative; } .hero-copy { max-width:620px; position:relative; z-index:1; animation:rise .85s cubic-bezier(.2,.8,.2,1) both; } .eyebrow { margin:0 0 22px; color:var(--lime); font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--display); font-weight:700; letter-spacing:-.075em; line-height:.93; } h1 { font-size:clamp(47px,7.2vw,108px); margin-bottom:31px; } h1 em { color:var(--lime); font-style:normal; } .lede { max-width:490px; color:#b7beca; font-size:clamp(17px,1.4vw,21px); line-height:1.48; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:33px; } .button { min-height:52px; display:inline-flex; align-items:center; gap:18px; padding:0 20px; border-radius:3px; font-weight:700; text-decoration:none; } .button-solid { background:var(--lime); color:#192000; } .button-solid span { font-size:22px; } .button-quiet { border:1px solid var(--line); } .hero-notes { display:flex; flex-wrap:wrap; gap:16px 27px; margin-top:54px; color:var(--muted); font-size:12px; letter-spacing:.04em; }
.orbit { aspect-ratio:1; max-width:740px; width:100%; justify-self:end; position:relative; animation:orbit-in 1.1s .1s cubic-bezier(.2,.8,.2,1) both; } .orbit::before { content:''; position:absolute; inset:8%; border:1px solid rgba(217,255,88,.18); border-radius:50%; transform:rotate(-22deg); } .orbit-glow { position:absolute; width:70%; aspect-ratio:1; top:10%; right:4%; border-radius:50%; background:radial-gradient(circle,rgba(217,255,88,.19),transparent 65%); filter:blur(15px); } .orbit svg { overflow:visible; position:absolute; inset:0; width:100%; height:100%; } .orbit-line { fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-dasharray:2 5; filter:drop-shadow(0 0 7px rgba(217,255,88,.6)); animation:dash 17s linear infinite; } .orbit-line-faint { fill:none; stroke:rgba(244,240,232,.12); stroke-width:1; } .pin { fill:var(--ink); stroke:var(--lime); stroke-width:4; filter:drop-shadow(0 0 10px rgba(217,255,88,.8)); } .plane { fill:var(--orange); transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 8px rgba(255,101,56,.6)); animation:plane 4s ease-in-out infinite; } .place { position:absolute; display:grid; gap:2px; text-transform:uppercase; font-size:10px; letter-spacing:.12em; } .place span { color:var(--muted); } .place strong { font-family:var(--display); font-size:15px; letter-spacing:-.06em; } .place-origin { left:12%; bottom:17%; } .place-destination { left:19%; bottom:5%; } .signal { position:absolute; display:grid; gap:2px; padding:13px 15px; min-width:128px; background:rgba(244,240,232,.93); color:var(--ink); box-shadow:0 17px 36px rgba(0,0,0,.24); animation:float 5s ease-in-out infinite; } .signal small,.signal span { font-size:10px; color:#68707b; text-transform:uppercase; letter-spacing:.08em; } .signal b { font-family:var(--display); letter-spacing:-.07em; font-size:15px; } .signal-one { top:19%; left:39%; } .signal-two { right:2%; bottom:27%; animation-delay:-2.5s; } .orbit-caption { position:absolute; right:15%; top:7%; margin:0; font-family:var(--display); font-size:clamp(11px,1.2vw,15px); letter-spacing:-.06em; line-height:1.2; }
.proof { padding:33px clamp(24px,7vw,120px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:24px; align-items:center; } .proof p { margin:0; font-size:clamp(16px,1.7vw,25px); line-height:1.18; letter-spacing:-.035em; } .proof p strong { color:var(--lime); } .proof-meta { color:var(--muted); font-size:12px!important; letter-spacing:.12em!important; text-transform:uppercase; text-align:right; } .proof-line { height:1px; background:linear-gradient(90deg,var(--lime),transparent); }
.capabilities,.conversation,.connect { padding:clamp(90px,13vw,185px) clamp(24px,7vw,120px); } .capabilities { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; } .section-top h2,.conversation h2,.connect h2 { font-size:clamp(38px,5vw,78px); margin-bottom:0; } .capability-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .capability-list li { min-height:168px; display:grid; grid-template-columns:53px 1fr 28px; gap:16px; align-items:center; border-bottom:1px solid var(--line); transition:padding .3s,background .3s; } .capability-list li:hover { padding-left:14px; background:rgba(217,255,88,.06); } .number { color:var(--lime); font-size:12px; } .capability-list h3 { margin:0 0 8px; font-family:var(--display); font-size:clamp(19px,2vw,29px); letter-spacing:-.07em; } .capability-list p { max-width:410px; margin:0; color:var(--muted); line-height:1.45; } .capability-arrow { font-size:25px; color:var(--lime); }
.conversation { background:var(--paper); color:var(--ink); display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; align-items:center; } .conversation .eyebrow { color:#6a8218; } .conversation-intro > p:last-child { max-width:390px; margin:30px 0 0; color:#5f6873; font-size:18px; line-height:1.5; } .dialogue { display:grid; gap:14px; max-width:540px; } .message { padding:18px 20px; border-radius:4px; line-height:1.45; } .message-user { max-width:82%; justify-self:end; background:#dbe1e5; } .message-agent { background:var(--ink); color:var(--paper); box-shadow:12px 12px 0 var(--lime); } .message-label { display:block; margin-bottom:13px; color:var(--lime); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .message-agent strong { font-family:var(--display); font-size:17px; letter-spacing:-.06em; } .message-agent p { margin:12px 0 18px; color:#b9c0c9; } .result-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid rgba(244,240,232,.15); font-size:13px; } .result-row b { color:var(--lime); } .message-agent a { display:inline-block; margin-top:18px; color:var(--lime); font-size:13px; font-weight:700; text-underline-offset:4px; }
.connect { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:end; } .connect-heading > p:last-child { max-width:390px; margin:30px 0 0; color:var(--muted); font-size:18px; line-height:1.5; } .install-block { padding:25px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(217,255,88,.1),transparent 60%); } .install-tabs { margin:0 0 26px; color:var(--lime); font-size:13px; font-weight:700; } .command { position:relative; padding:21px 150px 21px 18px; background:#02050a; overflow:auto; } .command code { color:#e4e9f0; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; } .copy { position:absolute; top:12px; right:12px; min-height:38px; padding:0 12px; border:1px solid rgba(217,255,88,.45); background:rgba(217,255,88,.1); color:var(--lime); font-family:var(--body); font-weight:700; cursor:pointer; } .copy:hover { background:var(--lime); color:var(--ink); } .copy:focus-visible { outline:2px solid var(--paper); outline-offset:3px; } .copy-status { min-height:20px; margin:12px 0 0; color:var(--lime); font-size:13px; } .install-note { margin:4px 0 0; color:var(--muted); font-size:14px; }
footer { min-height:105px; padding:24px clamp(24px,5vw,76px); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; color:var(--muted); font-size:12px; } footer .brand { color:var(--paper); } .footer-legal { display:flex; gap:17px; } .footer-legal a { color:var(--muted); text-underline-offset:4px; }
@keyframes rise { from { opacity:0; transform:translateY(35px) } to { opacity:1; transform:none } } @keyframes orbit-in { from { opacity:0; transform:scale(.86) rotate(-8deg) } to { opacity:1; transform:none } } @keyframes dash { to { stroke-dashoffset:-100; } } @keyframes float { 50% { transform:translateY(-11px); } } @keyframes plane { 50% { transform:translate(385px,157px) rotate(23deg) scale(1.18); } }
@media (max-width:850px) { .hero,.capabilities,.conversation,.connect { grid-template-columns:1fr; } .hero { padding-top:48px; } .orbit { max-width:620px; justify-self:center; grid-row:1; } .hero-copy { grid-row:2; } .hero-notes { margin-top:36px; } .proof { grid-template-columns:1fr; } .proof-line { width:50%; } .proof-meta { text-align:left; } .capabilities,.conversation,.connect { gap:55px; } .capability-list li { min-height:142px; } .conversation { padding-top:95px; padding-bottom:95px; } .connect { align-items:start; } }
@media (max-width:520px) { .nav { height:78px; } .nav-link { font-size:12px; } .hero { min-height:0; padding-bottom:75px; } h1 { font-size:54px; } .orbit { width:122%; margin-left:-11%; } .signal { transform:scale(.78); transform-origin:center; } .signal-one { left:34%; top:14%; } .signal-two { right:-4%; bottom:19%; } .orbit-caption { top:1%; } .proof { padding-top:28px; padding-bottom:28px; } .capability-list li { grid-template-columns:35px 1fr 20px; } .capability-list p { font-size:14px; } .message { padding:16px; } .message-user { max-width:92%; } .install-block { padding:15px; } .command { padding:66px 14px 15px; } .copy { left:12px; right:auto; } footer { align-items:flex-start; flex-direction:column; gap:14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }