:root{--ink:#11131e;--panel:#1b1c2b;--panel2:#222236;--line:rgba(222,219,255,.16);--light:#efedf0;--muted:#aaa8bd;--accent:#c5b5ff;--warm:#f1c7b6;--display:'Space Grotesk',sans-serif;--body:'DM Sans',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--ink);color:#f2eff9;font-family:var(--body);overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a,button{transition:color .22s,background-color .22s,border-color .22s,transform .22s}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent)!important;outline-offset:4px}
.skip-link{position:absolute;left:16px;top:-90px;z-index:90;padding:12px 18px;background:#fff;color:var(--ink)}
.skip-link:focus{top:12px}
.oc-header{position:sticky;top:0;z-index:60;background:rgba(17,19,30,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}
.oc-nav-shell{height:74px;max-width:1560px;margin:auto;padding:0 clamp(24px,5.5vw,88px);display:flex;align-items:center;justify-content:space-between;gap:30px}
.oc-brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font:700 1.32rem var(--display);letter-spacing:-.07em;color:#fff}
.oc-brand img{width:34px;height:34px}
.oc-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,35px)}
.oc-nav a,.oc-nav-cta{white-space:nowrap;font-size:.78rem;font-weight:700;letter-spacing:.01em;color:#d0cbd8}
.oc-nav a:hover,.oc-nav-cta:hover{color:#fff}
.oc-nav-cta{display:flex;gap:28px;align-items:center;padding:11px 15px;border:1px solid rgba(197,181,255,.54);color:#fff}
.oc-nav-cta:hover{background:rgba(197,181,255,.12)}
.oc-menu-button{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:7px;border:0;background:transparent;padding:5px}
.oc-menu-button span{height:2px;width:100%;background:#fff}
.oc-mobile-menu[hidden]{display:none}.oc-mobile-menu{display:flex;flex-direction:column;padding:13px 24px 24px;background:#171724;border-top:1px solid var(--line)}.oc-mobile-menu a{padding:13px 0;border-bottom:1px solid var(--line)}
.oc-hero{position:relative;isolation:isolate;min-height:min(850px,calc(100dvh - 74px));display:grid;grid-template-columns:minmax(360px,.9fr) minmax(450px,1.1fr);align-items:center;gap:2vw;padding:clamp(70px,8vw,120px) clamp(24px,5.5vw,88px) 100px;overflow:hidden;background:radial-gradient(circle at 78% 34%,#353358 0,#201f35 37%,#11131e 76%)}
.oc-hero::before{content:'';position:absolute;z-index:-1;width:75vw;height:75vw;max-width:950px;max-height:950px;right:-25%;top:-55%;border:1px solid rgba(197,181,255,.14);border-radius:50%;box-shadow:0 0 0 80px rgba(197,181,255,.025),0 0 0 180px rgba(197,181,255,.018);animation:oc-aura 10s ease-in-out infinite alternate}
.oc-hero-copy{position:relative;z-index:2;max-width:640px}
.oc-kicker,.oc-index,.oc-hero-proof,.oc-hero-foot,.oc-desktop-demo figcaption,.oc-phone-demo figcaption{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.oc-kicker{display:flex;align-items:center;gap:12px;color:var(--accent)}
.oc-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(197,181,255,.13);animation:oc-pulse 2.5s ease-in-out infinite}
.oc-hero h1{font:700 clamp(4.6rem,7.6vw,9.1rem)/.91 var(--display);letter-spacing:-.09em;margin:35px 0 30px;white-space:nowrap}
.oc-hero h1 em,.oc-story h2 em{color:var(--accent);font-style:normal}
.oc-hero-lead{max-width:540px;color:#d5d1df;font-size:clamp(1.04rem,1.38vw,1.3rem);line-height:1.6}
.oc-hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:36px}
.oc-button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:58px;padding:16px 21px;background:var(--accent);color:#171526;font-weight:700;font-size:.9rem}
.oc-button:hover{background:#d9d0ff;color:#171526;transform:translateY(-3px);box-shadow:0 18px 30px #09091455}.oc-button:active{transform:translateY(1px)}
.oc-underlink{display:inline-flex;gap:15px;align-items:center;padding-bottom:6px;border-bottom:1px solid rgba(245,240,255,.6);font-size:.88rem;font-weight:700}.oc-underlink:hover{gap:21px}
.oc-hero-proof{color:#a8a2b7;letter-spacing:.08em;margin:30px 0 0;line-height:1.7}
.oc-hero-media{position:relative;min-height:560px;align-self:stretch;display:flex;align-items:center;justify-content:center;transform:translateX(2%)}
.oc-hero-media::before{content:'';position:absolute;width:700px;height:700px;max-width:100%;max-height:100%;border-radius:50%;background:radial-gradient(circle,#9981e533,transparent 65%);filter:blur(20px)}
.oc-hero-media figure{margin:0;position:absolute;background:#10101b;box-shadow:0 34px 85px #080912bb;border:1px solid #e4d9ff44;overflow:hidden}
.oc-hero-media video{display:block;width:100%;height:100%;object-fit:cover;background:#171723}
.oc-desktop-demo{width:min(100%,700px);aspect-ratio:16/10;left:0;top:13%;border-radius:13px;transform:rotate(-2deg);animation:oc-float 8s ease-in-out infinite alternate}
.oc-phone-demo{width:clamp(175px,17vw,265px);aspect-ratio:9/17;right:0;top:10%;border-radius:28px;transform:rotate(6deg);animation:oc-float-phone 8s ease-in-out infinite alternate}
.oc-desktop-demo figcaption,.oc-phone-demo figcaption{position:absolute;bottom:0;left:0;right:0;padding:18px;color:#fff;background:linear-gradient(transparent,#100e1ebc);text-shadow:0 1px 3px #000}
.oc-hero-foot{position:absolute;left:clamp(24px,5.5vw,88px);right:clamp(24px,5.5vw,88px);bottom:26px;display:flex;justify-content:space-between;color:#a8a2b7}.oc-hero-foot a{color:#d5caea}
.oc-story{padding:clamp(90px,10vw,155px) clamp(24px,6vw,110px);background:#edeaf0;color:#272435}
.oc-story-heading{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 8vw;align-items:end}
.oc-story-heading .oc-index{grid-column:1/-1;color:#7663a6;margin-bottom:35px}
.oc-story h2{font:700 clamp(3.4rem,6.4vw,7.4rem)/.98 var(--display);letter-spacing:-.078em;margin:0;text-wrap:balance}.oc-story h2 em{color:#7960b5}
.oc-story-heading>p:last-child{max-width:470px;color:#645f70;font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.65;margin-bottom:7px}
.oc-timeline{position:relative;max-width:1280px;margin:80px auto 45px;padding:42px clamp(20px,4vw,60px);background:#29253d;color:#eeeafa;overflow:hidden}
.oc-timeline-top,.oc-timeline-bottom{display:grid;grid-template-columns:80px 1fr 50px;gap:22px;align-items:center;margin:13px 0}.oc-timeline span,.oc-timeline strong{font:700 .68rem 'JetBrains Mono',monospace;letter-spacing:.08em}
.oc-track{display:flex;gap:4px;height:34px}.oc-track i{display:block;flex:1;background:#bca8f1}.oc-track i:nth-child(2){flex:1.4;background:#d4bbeb}.oc-track i:nth-child(3){flex:.85;background:#ac92df}.oc-track i:nth-child(4){flex:1.2;background:#9078c6}.oc-timeline-bottom .oc-track i{background:#d9b8a8}.oc-timeline-bottom .oc-track .oc-gap{background:repeating-linear-gradient(45deg,#715d76,#715d76 4px,#53465d 4px,#53465d 8px)}
.oc-playhead{position:absolute;top:35px;bottom:35px;left:40%;width:2px;background:#fff;box-shadow:0 0 16px #fff;animation:oc-scan 9s ease-in-out infinite alternate}.oc-playhead::before{content:'';position:absolute;top:-7px;left:-4px;width:10px;height:10px;background:#fff;border-radius:50%}
.oc-story-rows{display:grid;grid-template-columns:repeat(3,1fr);max-width:1280px;margin:auto;border-top:1px solid #cbc3d3}.oc-story-rows article{padding:30px 38px 15px 0;border-right:1px solid #cbc3d3}.oc-story-rows article+article{padding-left:38px}.oc-story-rows article:last-child{border:0}.oc-story-rows span{font:700 .65rem 'JetBrains Mono',monospace;letter-spacing:.09em;color:#7860a9}.oc-story-rows h3{font:700 clamp(1.7rem,2.2vw,2.5rem)/1.08 var(--display);letter-spacing:-.06em;margin:30px 0 12px}.oc-story-rows p{color:#666170;line-height:1.6;font-size:.93rem}
.oc-evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:54px clamp(24px,6vw,110px);background:#dcd4e6;color:#262136}.oc-evidence>div{display:flex;flex-direction:column;gap:12px}.oc-evidence strong{font:700 clamp(3rem,5vw,5.4rem)/1 var(--display);letter-spacing:-.07em}.oc-evidence strong small{font-size:.45em}.oc-evidence span{font-size:.85rem;color:#625c6d}.oc-evidence p{grid-column:1/-1;border-top:1px solid #bdb3c9;padding-top:24px;margin:8px 0 0;color:#6e6578;font-size:.8rem}.oc-evidence a{color:#493374;text-decoration:underline;text-underline-offset:4px}
main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence){max-width:none;padding:clamp(85px,9vw,150px) clamp(24px,6vw,110px);border-top:1px solid var(--line)}
main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence)>*{max-width:1280px;margin-left:auto;margin-right:auto}
main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence)>h2{font:700 clamp(3.3rem,6vw,6.4rem)/1 var(--display);letter-spacing:-.075em;margin:0 auto 30px;text-wrap:balance;color:#fff}
main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence)>p:first-of-type{font-size:clamp(1.04rem,1.4vw,1.22rem);line-height:1.65;max-width:800px;margin:0 auto 45px 0;color:#c9c4d2}
main>section h3{font-family:var(--display);letter-spacing:-.045em}
main>section h3:not(.oc-story h3){line-height:1.12}
#how{background:#171925}#how>.grid.grid-cols-1.md\:grid-cols-4{margin-bottom:44px;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#how .flow-step{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:28px 24px 28px 0}#how .flow-step+div{padding-left:24px}#how .flow-step:last-child{border:0}#how .flow-step>div:first-child{color:var(--accent);font-family:var(--display);font-size:1.2rem;letter-spacing:-.04em}
.glass-card{background:var(--panel);border:1px solid var(--line);box-shadow:none!important}
#how>.grid.grid-cols-1.md\:grid-cols-2 .glass-card{border-radius:3px;padding:clamp(25px,3vw,45px);background:#212334}
#how>.grid.grid-cols-1.md\:grid-cols-2 .glass-card p{font-size:.93rem;line-height:1.7;color:#c7c2d1}
#benchmarks{background:#20202d}#compare{background:#171925}#quickstart{background:#1e1c2b}#try{background:#ebe8ec;color:#292536}#languages{background:#171925}#status{background:#1d1c29}#collaborate{background:#292338}
#try>h2,#try>h3{color:#272238!important}#try>p:first-of-type{color:#635b6a!important}#try .lab-note,#try .lab-honest{color:#bdb6c6}
#try>p:first-of-type strong{color:#332641!important}
#try .lab{padding:clamp(20px,3vw,48px);background:#282238;max-width:1280px;border:1px solid #4d415b}
#try .lab-tabs{border-color:#665a70}#try .lab-engine{background:#322a3f}
#try>.grid .glass-card{background:#fff;color:#292536;border-color:#d8d0dc}#try>.grid .glass-card h3{color:#292536}#try>.grid .glass-card p{color:#6a6370}
#try>h3.mt-14{margin-top:75px}
#benchmarks .glass-card,#compare .glass-card,#quickstart .glass-card,#languages .glass-card,#status .glass-card{border-radius:4px}
table{min-width:640px}th,td{padding:14px 16px;border-color:rgba(221,213,239,.13);font-size:.82rem;line-height:1.45}th{background:#2e2c3c;color:#d9cfea;text-transform:uppercase;letter-spacing:.07em;font-size:.62rem}td{color:#d6d1df}tbody tr:hover{background:rgba(197,181,255,.065)}
pre{white-space:pre;overflow-x:auto;scrollbar-width:thin}pre code{font-size:.8rem;line-height:1.65}code{color:#ddc8ff}
#quickstart>div.glass-card{background:#28253a}#quickstart .code-copy-btn{opacity:1;background:#c3b2ec;color:#191425;border-radius:2px;cursor:pointer}#quickstart .code-copy-btn:hover{background:#e5d9ff}
#languages .glass-card,#status .glass-card{overflow-x:auto}
#collaborate>.grid a{background:#352e43;border:1px solid #70647e;border-radius:3px!important;transition:transform .25s,border-color .25s}#collaborate>.grid a:hover{transform:translateY(-5px);border-color:var(--accent)}#collaborate>.grid a h3{font-size:1.55rem}#collaborate>.grid a p{line-height:1.6}
#collaborate>.glass-card{background:#413650;border-radius:3px!important}#collaborate>.glass-card a{background:var(--accent);color:#201829;border-radius:2px!important}#collaborate>.glass-card a:hover{background:#e0d3ff}
footer{background:#12131f;border-color:var(--line);color:#aaa5b7;padding:40px 24px}
@keyframes oc-aura{to{transform:scale(1.08) rotate(9deg)}}@keyframes oc-pulse{50%{opacity:.5;box-shadow:0 0 0 12px rgba(197,181,255,.02)}}@keyframes oc-float{to{transform:translateY(-13px) rotate(-2deg)}}@keyframes oc-float-phone{to{transform:translateY(12px) rotate(6deg)}}@keyframes oc-scan{to{left:78%}}
@media(max-width:1200px){.oc-nav{gap:15px}.oc-nav a{font-size:.72rem}.oc-hero{grid-template-columns:1fr;padding-bottom:95px}.oc-hero h1{font-size:clamp(5rem,10vw,9rem)}.oc-hero-media{min-height:600px;transform:none}.oc-desktop-demo{width:70%;left:10%}.oc-phone-demo{right:10%;width:23%}}
@media(max-width:900px){.oc-nav,.oc-nav-cta{display:none}.oc-menu-button{display:flex}.oc-story-heading{grid-template-columns:1fr;gap:25px}.oc-story-heading .oc-index{grid-column:auto}.oc-story-rows{grid-template-columns:1fr}.oc-story-rows article,.oc-story-rows article+article{border-right:0;border-bottom:1px solid #cbc3d3;padding:25px 0}.oc-story-rows article:last-child{border:0}#how>.grid.grid-cols-1.md\:grid-cols-4{display:grid;grid-template-columns:1fr 1fr}#how .flow-step:nth-child(2){border:0}#how .flow-step:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:650px){.oc-nav-shell{height:66px}.oc-hero{padding:70px 24px 75px;min-height:0}.oc-hero h1{font-size:clamp(3.8rem,14vw,6rem);white-space:normal;margin:25px 0}.oc-hero-lead{font-size:1.05rem}.oc-hero-media{min-height:390px;margin:25px -14px 12px}.oc-desktop-demo{width:80%;left:0;top:13%}.oc-phone-demo{width:32%;right:0;top:3%;border-radius:16px}.oc-desktop-demo figcaption,.oc-phone-demo figcaption{font-size:.4rem;padding:12px 7px}.oc-hero-foot{position:static;grid-column:1/-1;display:flex;flex-direction:column;gap:7px;font-size:.58rem}.oc-story{padding:85px 24px}.oc-story h2{font-size:clamp(3.2rem,12vw,5rem)}.oc-timeline{margin:45px auto 25px;padding:20px 14px}.oc-timeline-top,.oc-timeline-bottom{grid-template-columns:42px 1fr 34px;gap:8px}.oc-timeline span,.oc-timeline strong{font-size:.48rem}.oc-track{height:23px}.oc-evidence{grid-template-columns:1fr 1fr;gap:35px 12px}.oc-evidence strong{font-size:3.2rem}.oc-evidence span{font-size:.76rem}.oc-evidence p{margin-top:0}main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence){padding:85px 24px}main>section:not(.oc-hero):not(.oc-story):not(.oc-evidence)>h2{font-size:clamp(3rem,11vw,5rem)}#how>.grid.grid-cols-1.md\:grid-cols-4{grid-template-columns:1fr}#how .flow-step,#how .flow-step+div{border:0;border-bottom:1px solid var(--line)!important;padding:22px 0}#how .flow-step:last-child{border:0!important}#try .lab{padding:15px;margin-left:-8px;margin-right:-8px}#try .lab-link-row{flex-direction:column}#try .lab-link-row button{min-height:44px}#collaborate>.glass-card{padding:25px}#quickstart .code-copy-btn{top:3px;right:3px}table{min-width:600px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}