@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap');
:root{--bg:#090a0f;--panel:#11131b;--panel2:#171a24;--text:#f5f3ed;--muted:#a8a8b4;--lime:#c9ff4a;--coral:#ff765c;--blue:#72b7ff;--purple:#a98bff;--line:#ffffff20;--mx:0px;--my:0px}
body.light{--bg:#f5f0e7;--panel:#fffaf1;--panel2:#eee7da;--text:#101117;--muted:#686a73;--lime:#83a900;--coral:#d64f37;--blue:#397fc2;--purple:#7456c7;--line:#10111722}
body.chaos{--bg:#130817;--panel:#20102a;--panel2:#2d1238;--text:#fff7ff;--muted:#d3b8da;--lime:#d9ff00;--coral:#ff3b9d;--blue:#00e5ff;--purple:#b75cff;--line:#ffffff2b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0%,#72b7ff20,transparent 28%),radial-gradient(circle at 10% 40%,#c9ff4a12,transparent 25%),var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden;transition:background .4s,color .4s}
canvas#space{position:fixed;inset:0;z-index:-3}.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--lime),var(--blue),var(--coral));z-index:99}
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 28px));padding:10px 12px;border:1px solid var(--line);background:#090a0faa;backdrop-filter:blur(18px);border-radius:22px;z-index:80;display:flex;justify-content:space-between;align-items:center}.light .nav{background:#f5f0e7dd}.chaos .nav{background:#130817dd}
.logo{font:700 20px "Space Grotesk";text-decoration:none;color:var(--text)}.logo span{color:var(--lime)}.navlinks{display:flex;gap:3px;align-items:center}.navlinks a{color:var(--muted);text-decoration:none;padding:9px 10px;border-radius:14px;font-size:12px}.navlinks a:hover{color:var(--text);background:#ffffff12}
.theme{border:1px solid var(--line);background:#ffffff08;color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer}.menu{display:none;background:none;border:0;color:var(--text);font-size:22px}
.wrap{width:min(1160px,calc(100% - 36px));margin:auto}.page{padding:150px 0 100px;min-height:100vh}.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px}
.eyebrow{color:var(--lime);font-size:12px;font-weight:700;letter-spacing:.18em}.title{font:700 clamp(52px,8vw,105px)/.9 "Space Grotesk";letter-spacing:-.07em;margin:15px 0 25px}.title span{color:transparent;-webkit-text-stroke:1px var(--text)}.lead{font-size:clamp(19px,2vw,26px);color:var(--muted);line-height:1.45;max-width:760px}.muted{color:var(--muted);line-height:1.55}.rot{color:var(--lime)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-block;padding:13px 17px;border:1px solid var(--line);border-radius:15px;text-decoration:none;color:var(--text);background:#ffffff08;transition:.25s;cursor:pointer}.btn:hover{transform:translateY(-4px) scale(1.02)}.btn.primary{background:var(--lime);color:#090a0f;border-color:var(--lime);font-weight:700}
.scene{height:500px;display:grid;place-items:center;perspective:900px;position:relative;transform:translate(var(--mx),var(--my))}.cube{width:180px;height:180px;position:relative;transform-style:preserve-3d;animation:spin 14s linear infinite}.face{position:absolute;width:180px;height:180px;border:1px solid #ffffff44;background:linear-gradient(135deg,#c9ff4a20,#72b7ff10);display:grid;place-items:center;font:700 40px "Space Grotesk"}.f1{transform:translateZ(90px)}.f2{transform:rotateY(180deg) translateZ(90px)}.f3{transform:rotateY(90deg) translateZ(90px)}.f4{transform:rotateY(-90deg) translateZ(90px)}.f5{transform:rotateX(90deg) translateZ(90px)}.f6{transform:rotateX(-90deg) translateZ(90px)}
.orb{position:absolute;border-radius:50%;filter:blur(1px);animation:float 5s ease-in-out infinite}.o1{width:95px;height:95px;background:#c9ff4a35;top:12%;right:8%}.o2{width:55px;height:55px;background:#ff765c44;bottom:18%;left:9%;animation-delay:-2s}.o3{width:70px;height:70px;background:#a98bff38;bottom:7%;right:12%;animation-delay:-1s}
.marquee{overflow:hidden;border-block:1px solid var(--line);white-space:nowrap;padding:13px 0;color:var(--muted)}.marquee span{display:inline-block;animation:marq 22s linear infinite}
.section{padding:100px 0}.section h2{font:700 clamp(38px,5vw,66px)/1 "Space Grotesk";letter-spacing:-.05em}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:linear-gradient(145deg,#ffffff0d,#ffffff03);border:1px solid var(--line);border-radius:24px;padding:22px;min-height:205px;transition:.15s;position:relative;overflow:hidden}.card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--blue);opacity:.08;filter:blur(35px);right:-30px;bottom:-40px}.card h3{font:700 25px "Space Grotesk";margin:30px 0 10px}.card p{color:var(--muted);line-height:1.5}.tag{display:inline-block;font-size:11px;padding:6px 9px;border-radius:99px;background:#c9ff4a1c;color:var(--lime)}.num{float:right;color:#ffffff55}.list{display:grid}.row{border-top:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;gap:20px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter{border:1px solid var(--line);background:none;color:var(--muted);padding:9px 13px;border-radius:99px;cursor:pointer}.filter.on,.filter:hover{background:var(--lime);color:#090a0f}
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch}.mock{min-height:310px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 70% 30%,#72b7ff30,transparent 30%),linear-gradient(135deg,#ffffff0c,#ffffff02);display:grid;place-items:center;overflow:hidden;position:relative}.mock .big{font:700 clamp(35px,5vw,70px) "Space Grotesk";transform:rotate(-4deg)}.mock:before,.mock:after{content:"";position:absolute;border:1px solid var(--line);border-radius:50%}.mock:before{width:230px;height:230px}.mock:after{width:350px;height:350px}.case-copy{padding:10px}.terminal{background:#07080c;border:1px solid #ffffff22;border-radius:20px;padding:20px;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 20px 70px #0008}.terminal .green{color:var(--lime)}.terminal input{width:100%;background:none;border:0;outline:0;color:var(--text);font:inherit}.cmdline{display:flex;gap:8px}.terminal-output{white-space:pre-wrap;color:var(--muted);min-height:90px;margin:8px 0}
.reveal{opacity:0;transform:translateY(25px);transition:.7s}.reveal.show{opacity:1;transform:none}.footer{border-top:1px solid var(--line);padding:35px 0;color:var(--muted);display:flex;justify-content:space-between}.footer a{color:var(--text)}
.egg{display:none}.chaos .egg{display:block;position:fixed;inset:0;pointer-events:none;z-index:100;background:radial-gradient(circle,#ff3b9d22,transparent 40%);animation:chaos 1s infinite alternate}
@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}@keyframes float{50%{transform:translate(15px,-25px)}}@keyframes marq{to{transform:translateX(-50%)}}@keyframes chaos{to{filter:hue-rotate(70deg)}}
@media(max-width:900px){.navlinks{display:none}.menu{display:block}.nav.open .navlinks{display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px;border:1px solid var(--line);border-radius:18px}.hero,.two,.case{grid-template-columns:1fr}.scene{height:330px}.grid{grid-template-columns:1fr}.title{font-size:58px}}