:root{--bg:#050505;--surface:#0b0d10;--surface-2:#111418;--text:#f4f4f1;--muted:#92969c;--faint:#5b626b;--line:rgba(235,239,244,.14);--line-strong:rgba(235,239,244,.26);--silver:#d8dadd;--cyan:#9bd8e2;--gold:#d7bd86;--max:1240px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;color:inherit}.shell{width:min(var(--max),calc(100% - 64px));margin:0 auto}.sky{position:fixed;inset:0;background:radial-gradient(ellipse at 76% 5%,rgba(95,101,123,.21),transparent 36%),radial-gradient(ellipse at 20% 70%,rgba(69,76,88,.1),transparent 40%),#050505;pointer-events:none;z-index:-3;overflow:hidden}.star-field,.star-field:before,.star-field:after{position:absolute;inset:0;content:"";background-image:radial-gradient(circle at 7% 17%,rgba(255,255,255,.85) 0 1px,transparent 1.6px),radial-gradient(circle at 46% 11%,rgba(255,255,255,.65) 0 1px,transparent 1.6px),radial-gradient(circle at 81% 27%,rgba(191,211,222,.72) 0 1px,transparent 1.7px),radial-gradient(circle at 36% 70%,rgba(255,255,255,.6) 0 1px,transparent 1.8px),radial-gradient(circle at 93% 83%,rgba(255,255,255,.65) 0 1px,transparent 1.7px);background-size:250px 210px,390px 320px,330px 280px,460px 370px,285px 260px;opacity:.42}.star-field:before{transform:translate(18px,11px);opacity:.22}.star-field:after{transform:translate(-13px,-21px);opacity:.15}.aurora{position:absolute;width:70vw;height:70vw;right:-24vw;top:-35vw;border-radius:50%;background:radial-gradient(ellipse,rgba(185,196,208,.12),transparent 65%);filter:blur(36px)}.moon-scene{position:absolute;right:4vw;top:85px;width:min(48vw,630px);height:min(48vw,630px)}.moon-core{position:absolute;width:42%;aspect-ratio:1;left:29%;top:26%;border-radius:50%;background:radial-gradient(circle at 34% 27%,#fafafa 0,#c6c8ca 43%,#777b82 73%,#3a3d44 100%);box-shadow:0 0 90px rgba(223,230,232,.2),inset -28px -25px 48px rgba(32,34,38,.55);animation:moon-breathe 7s ease-in-out infinite}.crater{position:absolute;border-radius:50%;background:rgba(53,58,63,.16);box-shadow:inset 4px 4px 7px rgba(255,255,255,.13)}.crater-a{width:22%;height:17%;left:18%;top:25%}.crater-b{width:15%;height:13%;left:58%;top:18%}.crater-c{width:25%;height:20%;left:48%;top:56%}.crater-d{width:14%;height:11%;left:20%;top:65%}.moon-ring{position:absolute;left:6%;top:37%;width:88%;height:27%;border:1px solid rgba(211,222,228,.18);border-radius:50%;transform:rotate(-24deg)}.moon-ring-two{left:-10%;top:26%;width:120%;height:48%;transform:rotate(17deg);border-color:rgba(151,207,219,.13)}.moon-orbit-dot{position:absolute;width:8px;height:8px;border-radius:50%;right:4%;top:36%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.header{position:relative;z-index:5;width:min(1320px,calc(100% - 48px));height:78px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:17px;font-weight:800;letter-spacing:-.03em}.brand img{width:29px;height:29px;object-fit:contain;filter:grayscale(1) brightness(5)}.brand strong{display:block;color:#6c737d;font:500 8px/1 DM Mono,monospace;letter-spacing:.23em;margin-top:4px}.main-nav{display:flex;gap:30px;color:#a3a8ae;font-size:12px}.main-nav a,.footer a{transition:color .2s}.main-nav a:hover,.footer a:hover{color:#fff}.header-actions{justify-self:end;display:flex;align-items:center;gap:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;border-radius:7px;padding:0 17px;font-size:12px;font-weight:600;letter-spacing:-.01em;transition:background .25s,border-color .25s,box-shadow .25s,transform .2s;color:var(--text)}.button span{font-size:17px;color:#737982}.button.solid{color:#0a0a0a;background:linear-gradient(180deg,#fff,#d0d2d5);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 0 0 rgba(0,0,0,0)}.button.solid:hover{transform:translateY(-2px);background:linear-gradient(180deg,#fff,#e8f0f3);box-shadow:0 0 26px rgba(193,211,220,.28),0 10px 20px rgba(0,0,0,.24)}.button.ghost{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(0,0,0,.38));border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.button.ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.13)}.button.link{background:none;color:#aeb4ba;padding-left:0;padding-right:0}.button.link:hover{color:#fff}.button.small{min-height:38px;padding:0 14px;font-size:11px}.button.tiny{min-height:32px;padding:0 11px;font-size:10px;border-radius:5px}.menu-button{display:none;width:42px;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:7px}.menu-button i{display:block;width:17px;height:1.5px;background:#fff;margin:5px auto;border-radius:2px}.hero{position:relative;min-height:720px;padding:125px 0 125px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.hero-copy{position:relative;z-index:1;max-width:590px}.eyebrow{display:flex;align-items:center;gap:9px;color:#a3a9b0;font:500 10px/1.2 DM Mono,monospace;letter-spacing:.14em}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 16px #fff}.eyebrow i.silver{background:var(--silver);box-shadow:0 0 15px var(--silver)}.eyebrow i.cyan{background:var(--cyan);box-shadow:0 0 15px var(--cyan)}.eyebrow i.gold{background:var(--gold);box-shadow:0 0 15px var(--gold)}.eyebrow span{color:#606872}.hero h1{font-size:clamp(56px,7.5vw,112px);font-weight:600;letter-spacing:-.075em;line-height:.97;margin:27px 0 28px}.hero h1 em,.section-heading h2 em,.workspace-heading h2 em,.workflow-section h2 em,.roadmap h2 em{font-style:normal;color:transparent;background:linear-gradient(105deg,#fff,#adb4bb 55%,#8ccbd4);-webkit-background-clip:text;background-clip:text}.hero-copy>p{max-width:485px;color:#969ca4;font-size:15px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:33px}.hero-signal{display:flex;align-items:center;gap:10px;margin-top:45px;color:#686f78;font:500 9px DM Mono,monospace}.hero-signal b{height:12px;width:1px;background:#343940}.signal-dot{display:inline-block;width:7px;height:7px;background:#83d6a5;border-radius:50%;box-shadow:0 0 14px #83d6a5}.hero-aside{height:480px;position:relative}.orbit-label{position:absolute;font:500 9px DM Mono,monospace;color:#737d88;letter-spacing:.1em}.label-top{right:4%;top:10%;border-left:1px solid var(--line-strong);padding-left:11px}.label-bottom{right:4%;bottom:16%;display:flex;align-items:center;gap:8px}.product{padding:120px 0 145px;border-top:1px solid var(--line)}.section-heading{max-width:680px}.section-heading h2,.workspace-heading h2,.workflow-section h2,.roadmap h2{font-size:clamp(41px,5vw,70px);line-height:1.05;letter-spacing:-.07em;font-weight:600;margin:22px 0}.section-heading>p,.workflow-section .section-heading>p,.roadmap .section-heading>p{color:#92979d;font-size:14px;line-height:1.85;max-width:490px}.product-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:13px;margin-top:62px}.product-card{min-height:310px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(19,23,27,.92),rgba(8,9,11,.9));padding:25px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}.product-card:hover{border-color:rgba(234,240,244,.4);transform:translateY(-3px)}.product-card-wide{background:radial-gradient(ellipse at 90% 90%,rgba(145,166,176,.18),transparent 44%),linear-gradient(145deg,rgba(22,26,31,.94),rgba(8,9,11,.9))}.card-index{font:500 10px DM Mono,monospace;color:#68717a}.card-icon{width:39px;height:39px;margin:38px 0 30px;border:1px solid var(--line-strong);border-radius:10px;display:grid;place-items:center;color:var(--cyan);font-size:18px}.product-card h3{font-size:21px;letter-spacing:-.04em}.product-card p{color:#858c95;font-size:12px;line-height:1.75;margin-top:10px;max-width:330px}.card-foot{display:flex;justify-content:space-between;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);color:#7d8690;font:500 9px DM Mono,monospace}.card-foot span:last-child{color:var(--cyan);font-size:16px}.workspace{padding:120px 0 150px}.workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.workspace-heading h2{max-width:720px}.workspace-actions{display:flex;gap:8px;flex:none}.app-frame{display:grid;grid-template-columns:190px 1fr 215px;margin-top:57px;border:1px solid rgba(211,221,226,.22);border-radius:14px;overflow:hidden;background:#0a0d11;box-shadow:0 24px 85px rgba(0,0,0,.35)}.app-sidebar{padding:22px 12px;border-right:1px solid var(--line);min-height:625px;display:flex;flex-direction:column}.app-brand{display:flex;align-items:center;gap:8px;padding:0 8px 23px;color:#e8e9e7;font-weight:700;font-size:13px}.app-brand img{width:20px;height:20px;filter:grayscale(1) brightness(5)}.app-brand small{display:block;color:#676f78;font:500 7px DM Mono,monospace;letter-spacing:.16em;margin-top:4px}.app-new{height:37px;border:1px solid rgba(206,218,225,.22);background:rgba(255,255,255,.08);border-radius:6px;color:#e1e4e6;font-size:10px;text-align:left;padding:0 10px}.app-new kbd{float:right;color:#6e7780;font:500 8px DM Mono,monospace}.app-label{color:#5d6670;font:500 8px DM Mono,monospace;letter-spacing:.12em;margin:28px 8px 10px}.app-label.recent{display:flex;justify-content:space-between}.app-nav{display:flex;align-items:center;gap:9px;padding:9px 10px;margin:2px 0;border-radius:6px;background:none;text-align:left;color:#8a929b;font-size:10px}.app-nav span{color:#bfc5c9}.app-nav b{margin-left:auto;color:#727c86;font:500 9px DM Mono,monospace}.app-nav.selected{background:rgba(189,206,215,.12);color:#fff}.project-item{border:0;background:none;text-align:left;color:#818a93;font-size:10px;padding:8px 10px}.project-item i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#56606a;margin-right:9px}.project-item.active{color:#eef0ed}.project-item.active i{background:#93d8b4;box-shadow:0 0 10px #93d8b4}.app-device{display:flex;gap:8px;margin-top:auto;padding:13px 8px 0;border-top:1px solid var(--line);font-size:9px}.app-device b{display:block;color:#d6dadc}.app-device small{display:block;color:#6e7781;font-size:8px;margin-top:3px}.app-main{min-width:0;position:relative}.app-topbar{display:flex;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);color:#78818b;font:500 9px DM Mono,monospace}.app-topbar b{color:#d9dcdf;font-weight:500}.save-state{display:flex;align-items:center;gap:7px}.save-state i{width:6px;height:6px;border-radius:50%;background:#8bd8a9;box-shadow:0 0 10px #8bd8a9}.app-project-head{display:flex;justify-content:space-between;gap:15px;padding:28px 22px 18px}.app-project-head small{color:#67707a;font:500 8px DM Mono,monospace}.app-project-head h3{font-size:22px;margin:7px 0 3px;letter-spacing:-.04em}.app-project-head p{color:#7e8891;font-size:10px}.head-actions{display:flex;align-items:center;gap:8px;align-self:center}.people{display:flex}.people i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#535c64;border:2px solid #0a0d11;color:#fff;font-style:normal;font-size:8px;margin-left:-5px}.people i:first-child{margin-left:0;background:#6c687e}.people i:last-child{background:#6e827b}.online{color:#747d86;font:500 8px DM Mono,monospace;margin-right:4px}.view-tabs{display:flex;align-items:center;gap:19px;padding:0 22px;border-bottom:1px solid var(--line);height:43px;color:#6d7780;font-size:10px}.view-tabs button{height:43px;background:none;color:#6d7780;font-size:10px;position:relative}.view-tabs button.active{color:#eef0ee}.view-tabs button.active:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:-1px;background:#d9e3e6}.view-tabs>span{margin-left:auto;font:500 8px DM Mono,monospace;color:#69737c}.canvas{height:415px;position:relative;overflow:hidden}.canvas-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(190,204,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(190,204,214,.045) 1px,transparent 1px);background-size:30px 30px}.zone{position:absolute;top:23px;color:#59636d;font:500 8px DM Mono,monospace}.zone-a{left:21px}.zone-b{left:246px}.zone-c{left:503px}.zone-d{right:22px}.canvas-lines{position:absolute;inset:0;width:100%;height:100%}.canvas-lines path{stroke:#74818b;fill:none;stroke-width:1;opacity:.7}.flow-node{position:absolute;width:166px;min-height:106px;padding:12px;text-align:left;border:1px solid rgba(212,224,231,.17);border-radius:8px;background:rgba(18,23,28,.95);box-shadow:0 9px 25px rgba(0,0,0,.18);transition:.2s}.flow-node:hover,.flow-node.selected{border-color:rgba(190,224,231,.72);box-shadow:0 0 0 1px rgba(190,224,231,.22),0 12px 30px rgba(0,0,0,.22)}.flow-node small{display:block;color:#78838c;font:500 8px DM Mono,monospace}.flow-node b{display:block;color:#e9ebea;font-size:11px;margin:8px 0 3px}.flow-node>span{display:block;color:#7b858e;font-size:8px}.state{display:block!important;margin-top:12px;font:500 8px DM Mono,monospace;font-style:normal}.state.done{color:#89d6a6}.state.doing{color:#dcc081}.state.wait{color:#78828c}.node-goal{left:18px;top:123px}.node-research{left:245px;top:42px}.node-visual{left:245px;top:247px}.node-review{left:503px;top:123px}.node-delivery{right:20px;top:123px;width:150px}.node-swatches{display:flex;gap:3px;margin-top:7px}.node-swatches i{width:22px;height:8px;border-radius:2px;background:#8c9da3}.node-swatches i:nth-child(2){background:#d9d9d6}.node-swatches i:nth-child(3){background:#687b84}.canvas-cursor{position:absolute;font-size:14px;color:#d5e8eb}.canvas-cursor span{font:500 8px Manrope,sans-serif;color:#efffff;background:#4e727a;border-radius:4px;padding:4px 6px}.cursor-one{left:390px;bottom:30px}.cursor-two{right:80px;top:90px;color:#d8bf86}.cursor-two span{background:#71603b}.app-inspector{border-left:1px solid var(--line);padding:22px 17px;min-height:625px;background:rgba(7,9,12,.48)}.inspector-tabs{display:flex;gap:13px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}.inspector-tabs button{background:none;color:#69737c;font-size:9px}.inspector-tabs button.active{color:#eef0ef}.app-inspector>small{color:#69727b;font:500 8px DM Mono,monospace}.app-inspector h3{font-size:16px;margin:8px 0}.app-inspector>p{font-size:9px;line-height:1.65;color:#7d878f}.inspect-row{display:flex;justify-content:space-between;margin-top:18px;color:#737d86;font-size:9px}.inspect-row b{color:#d4d9dc}.doing-text{color:#ddc181!important}.app-inspector hr{border:0;border-top:1px solid var(--line);margin:21px 0 15px}.mini-comment{display:flex;gap:8px;color:#828c94;font-size:8px;margin-bottom:13px}.mini-comment>i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#5d6870;color:#fff;font-style:normal;font-size:8px}.mini-comment p{margin:1px 0;line-height:1.5}.mini-comment b{display:block;color:#ced3d5;margin-bottom:3px}.inspector-note{margin-top:auto;border-top:1px solid var(--line);padding-top:17px;color:#c5cccf;font-size:9px}.inspector-note small{display:block;color:#6f7982;font-size:8px;margin-top:4px}.app-dock{display:none}.workflow-section{padding:145px 0;border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(18,21,24,.72),rgba(6,7,9,.9),rgba(17,21,24,.72))}.workflow-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:90px}.workflow-actions{display:flex;align-items:center;gap:22px;margin-top:31px}.template-stack{height:350px;position:relative}.template-card{position:absolute;width:min(420px,88%);height:205px;border-radius:12px;border:1px solid var(--line);padding:24px;background:#11151a;box-shadow:0 22px 55px rgba(0,0,0,.3)}.template-card span{display:block;color:#6d7880;font:500 8px DM Mono,monospace}.template-card b{display:block;font-size:18px;margin-top:17px}.template-card small{display:block;color:#7d8790;font-size:10px;margin-top:12px}.template-card.back{right:0;top:0;transform:rotate(7deg);background:#0f1318}.template-card.middle{right:8%;top:59px;transform:rotate(-3deg);background:#14181c}.template-card.front{left:0;top:126px;background:linear-gradient(135deg,#1a2024,#0a0c0e);border-color:rgba(214,225,229,.3)}.template-add{display:grid;place-items:center;width:55px;height:55px;border:1px dashed #8c979e;color:#c6dce0;font-size:27px;margin-top:22px;border-radius:8px}.roadmap{padding:145px 0}.roadmap-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:70px}.roadmap-grid:before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:linear-gradient(90deg,#fff,#9bd8e2,#d7bd86);opacity:.5}.road-item{position:relative;padding-top:34px}.road-dot{position:absolute;top:2px;left:0;width:13px;height:13px;border:3px solid var(--bg);border-radius:50%;background:#fff;box-shadow:0 0 0 1px #fff,0 0 14px rgba(255,255,255,.5)}.road-item:nth-child(3) .road-dot{background:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 14px rgba(155,216,226,.5)}.road-item:nth-child(4) .road-dot{background:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(215,189,134,.5)}.road-item small{font:500 9px DM Mono,monospace;color:#6d7780}.road-item h3{font-size:20px;margin:19px 0 8px;letter-spacing:-.03em}.road-item p{color:#899199;font-size:12px;line-height:1.75}.road-item>b{display:inline-block;margin-top:17px;border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:#b8c0c4;font:500 8px DM Mono,monospace}.road-item.current>b{color:#9bd8e2;border-color:rgba(155,216,226,.4)}.cta-section{padding:72px 0 110px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-section h2{font-size:clamp(33px,4.2vw,55px);letter-spacing:-.06em;margin:18px 0 8px}.cta-section p{color:#8f979e;font-size:13px}.cta-actions{display:flex;gap:9px}.footer{border-top:1px solid var(--line);padding:23px 0 30px;display:flex;justify-content:space-between;color:#626c75;font:500 9px DM Mono,monospace}.auth-dialog{border:0;background:transparent;padding:0;margin:auto;color:var(--text);width:min(420px,calc(100% - 30px))}.auth-dialog::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(15px)}.auth-card{position:relative;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(145deg,#171b1f,#080a0c);padding:31px;box-shadow:0 25px 70px rgba(0,0,0,.45)}.dialog-close{position:absolute;right:17px;top:13px;background:none;color:#9ca4aa;font-size:24px;line-height:1}.auth-mark img{width:27px;height:27px;filter:grayscale(1) brightness(5)}.auth-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-top:25px}.auth-tabs button{background:none;color:#6e7881;font-size:12px;padding:0 0 13px;position:relative}.auth-tabs button.active{color:#fff}.auth-tabs button.active:after{content:"";height:2px;left:0;right:0;bottom:-1px;background:#fff;position:absolute}.auth-pane{display:none}.auth-pane.active{display:block}.auth-pane h2{font-size:24px;letter-spacing:-.04em;margin:26px 0 7px}.auth-pane p{font-size:11px;color:#858f98;margin-bottom:22px}.auth-pane label{display:block;font-size:10px;color:#b8c0c5;margin:14px 0 7px}.auth-pane input{width:100%;height:44px;border:1px solid var(--line-strong);background:#0a0d10;color:#fff;border-radius:6px;padding:0 12px;font-size:12px;outline:none}.auth-pane input:focus{border-color:#b9dbe0;box-shadow:0 0 0 3px rgba(155,216,226,.12)}.button.full{width:100%;margin-top:22px}.auth-message{min-height:20px;color:var(--cyan);font-size:10px;margin-top:12px}.toast{position:fixed;z-index:20;left:50%;bottom:25px;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:#f1f3f0;color:#111;border-radius:7px;padding:11px 15px;font-size:11px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .22s,transform .22s}.toast.show{opacity:1;transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(18px)}.reveal.in{opacity:1;transform:none}@keyframes moon-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.moon-core{animation:none}.reveal{opacity:1;transform:none}.button,.product-card,.toast{transition:none}}
@media(max-width:980px){.main-nav{gap:16px}.hero{grid-template-columns:1fr;min-height:700px;padding-top:100px}.hero-aside{position:absolute;right:-12%;top:95px;width:60%;opacity:.55;z-index:-1}.app-frame{grid-template-columns:165px 1fr}.app-inspector{display:none}.workflow-layout{grid-template-columns:1fr;gap:45px}.template-stack{height:300px;max-width:600px}.cta-section{align-items:flex-start;flex-direction:column}.roadmap-grid{grid-template-columns:1fr;gap:40px}.roadmap-grid:before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,#fff,#9bd8e2,#d7bd86)}.road-item{padding:0 0 0 35px}.road-dot{left:0;top:3px}}
@media(max-width:680px){.shell{width:calc(100% - 36px)}.header{width:calc(100% - 36px);height:70px;grid-template-columns:1fr auto}.main-nav,.header-actions .ghost{display:none}.menu-button{display:block}.header-actions{gap:8px}.button.small{min-height:36px}.hero{padding:82px 0 90px;min-height:670px}.hero h1{font-size:58px}.hero-aside{right:-40%;top:90px;width:100%;opacity:.35}.hero-copy>p{font-size:14px}.hero-actions{gap:15px}.hero-signal{flex-wrap:wrap;max-width:300px;line-height:1.8}.product,.workspace,.roadmap{padding:95px 0}.section-heading h2,.workspace-heading h2,.workflow-section h2,.roadmap h2{font-size:43px}.product-grid{grid-template-columns:1fr;gap:10px}.product-card{min-height:265px}.workspace-heading{display:block}.workspace-actions{margin-top:25px;display:flex;flex-wrap:wrap}.app-frame{grid-template-columns:1fr}.app-sidebar{display:none}.app-main{min-width:0}.app-project-head{display:block}.head-actions{margin-top:16px}.view-tabs{gap:12px;padding:0 15px}.view-tabs>span{display:none}.canvas{height:390px;overflow:hidden}.flow-node{transform:scale(.78);transform-origin:top left}.node-goal{left:5px;top:120px}.node-research{left:155px;top:35px}.node-visual{left:155px;top:245px}.node-review{left:300px;top:120px}.node-delivery{right:-20px;top:120px}.canvas-lines{width:700px}.app-dock{height:58px;display:flex;justify-content:space-evenly;align-items:center;border-top:1px solid var(--line);background:#0c1014}.dock-item{background:none;color:#6d7780;font-size:18px;min-width:54px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:7px}.dock-item small{font-size:8px}.dock-item.active{color:#f1f3f1;background:rgba(212,226,231,.12)}.workflow-section{padding:95px 0}.template-stack{height:300px;transform:scale(.9);transform-origin:left center}.template-card{width:92%}.cta-section{padding:55px 0 90px}.cta-actions{width:100%;flex-direction:column}.cta-actions .button{width:100%}.footer{flex-direction:column;gap:9px;line-height:1.7}}
/* Focus and contrast corrections: navigation links keep visible labels and the mobile menu has a real route. */
.main-nav a{color:#a3a8ae}
.main-nav a:focus-visible,.footer a:focus-visible,.button:focus-visible,.flow-node:focus-visible,.app-nav:focus-visible,.app-new:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.mobile-menu{position:fixed;inset:70px 18px auto;z-index:4;display:none;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(12,14,17,.96);box-shadow:0 20px 50px rgba(0,0,0,.45)}.mobile-menu a{color:#edf0ef;padding:13px 12px;border-radius:6px;font-size:15px}.mobile-menu a:hover{background:rgba(255,255,255,.08)}.mobile-menu.open{display:flex}body.menu-open{overflow:hidden}
@media(max-width:680px){.mobile-menu{display:none}.mobile-menu.open{display:flex}}
/* v2.1 atmospheric motion layer */
.sky:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 40%,rgba(221,235,238,.055) 47%,transparent 54%);mix-blend-mode:screen;opacity:.28;animation:sky-sweep 17s ease-in-out infinite}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.star-field{animation:star-drift 42s linear infinite}.star-field:before{animation:star-drift 58s linear infinite reverse}.star-field:after{animation:star-drift 72s linear infinite}.aurora{animation:aurora-breathe 9s ease-in-out infinite}.moon-scene{transition:transform .25s ease-out}.motion-toggle{position:absolute;right:4%;bottom:5%;padding:7px 10px;border:1px solid var(--line);background:rgba(6,8,10,.6);border-radius:999px;color:#9ea8ae;font:500 8px DM Mono,monospace}.motion-toggle:hover{border-color:var(--line-strong);color:#fff}.main-nav a{color:#a3a8ae}.main-nav a:focus-visible,.footer a:focus-visible,.button:focus-visible,.flow-node:focus-visible,.app-nav:focus-visible,.app-new:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@keyframes star-drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,11px,0)}100%{transform:translate3d(0,0,0)}}@keyframes aurora-breathe{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.08);opacity:.9}}@keyframes sky-sweep{0%,100%{transform:translateX(-22%);opacity:.06}50%{transform:translateX(22%);opacity:.25}}
@media(prefers-reduced-motion:reduce){.moon-core,.star-field,.star-field:before,.star-field:after,.aurora,.sky:after{animation:none}.motion-toggle{display:none}}
/* cinematic lunar asset: keep the existing scene/orbits, replace the cartoon CSS sphere */
.moon-core{background:transparent;box-shadow:none;opacity:.78;isolation:isolate;overflow:visible}
.moon-core::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 70% 36%,rgba(223,235,239,.2),transparent 48%,rgba(0,0,0,.3) 77%);filter:blur(18px);opacity:.32;z-index:-1;animation:moon-halo 8s ease-in-out infinite}
.moon-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;opacity:.82;mix-blend-mode:screen;filter:grayscale(1) contrast(1.18) brightness(.76) saturate(.4) drop-shadow(0 0 52px rgba(220,230,236,.14));pointer-events:none;user-select:none;animation:moon-image-pulse 18s ease-in-out infinite}
.moon-core picture{display:block;width:100%;height:100%}
.moon-core .crater{display:none}
@keyframes moon-image-pulse{0%,100%{transform:scale(.985) rotate(-1deg);opacity:.72}50%{transform:scale(1.018) rotate(1deg);opacity:.9}}
@keyframes moon-halo{0%,100%{transform:scale(.96);opacity:.18}50%{transform:scale(1.06);opacity:.4}}
@media(max-width:980px){.moon-core{opacity:.62}.moon-image{filter:grayscale(1) contrast(1.12) brightness(.74) saturate(.32) drop-shadow(0 0 42px rgba(220,230,236,.11))}}
@media(max-width:680px){.moon-core{opacity:.48}.moon-image{filter:grayscale(1) contrast(1.1) brightness(.72) saturate(.26) drop-shadow(0 0 30px rgba(220,230,236,.09))}}
@media(prefers-reduced-motion:reduce){.moon-core::after,.moon-image{animation:none}.moon-image{opacity:.84}}
/* mobile containment: keep the decorative orbit accessible without creating horizontal scroll */
@media (min-width:681px) and (max-width:980px){.hero-aside{right:0;width:min(60%,560px);z-index:2;pointer-events:none}.hero-aside .motion-toggle{pointer-events:auto}}
@media (max-width:680px){.hero-aside{right:0;width:100%;z-index:2;pointer-events:none}.hero-aside .motion-toggle{pointer-events:auto}.hero-aside .orbit-label{opacity:.5}.motion-toggle{right:18px;bottom:4%}}
/* v2.2 grayscale light direction: white-to-gray surfaces, black primary actions */
:root{--bg:#eef0f2;--surface:#ffffff;--surface-2:#e3e7e9;--text:#171a1d;--muted:#4d565e;--faint:#737d85;--line:rgba(19,25,30,.14);--line-strong:rgba(19,25,30,.26);--silver:#7a858d;--cyan:#496a73;--gold:#6f6143;--max:1240px}
body{background:var(--bg);color:var(--text)}
.sky{background:radial-gradient(ellipse at 78% 5%,rgba(255,255,255,.96),transparent 36%),radial-gradient(ellipse at 20% 70%,rgba(213,219,222,.7),transparent 44%),linear-gradient(180deg,#f7f8f8,#e7eaec);z-index:-3}
.star-field,.star-field:before,.star-field:after{background-image:radial-gradient(circle at 7% 17%,rgba(53,62,67,.33) 0 1px,transparent 1.6px),radial-gradient(circle at 46% 11%,rgba(53,62,67,.24) 0 1px,transparent 1.6px),radial-gradient(circle at 81% 27%,rgba(62,77,83,.26) 0 1px,transparent 1.7px),radial-gradient(circle at 36% 70%,rgba(53,62,67,.2) 0 1px,transparent 1.8px),radial-gradient(circle at 93% 83%,rgba(53,62,67,.2) 0 1px,transparent 1.7px);opacity:.28}
.star-field:before{opacity:.14}.star-field:after{opacity:.1}.aurora{background:radial-gradient(ellipse,rgba(255,255,255,.62),transparent 67%);filter:blur(36px)}
.sky:after{background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.5) 47%,transparent 54%);mix-blend-mode:screen;opacity:.42}
.sky canvas{opacity:.24}
.moon-core{opacity:.66}.moon-image{mix-blend-mode:multiply;opacity:.5;filter:grayscale(1) contrast(1.2) brightness(.88) saturate(.18) drop-shadow(0 12px 40px rgba(40,47,52,.12))}
.moon-core::after{background:radial-gradient(circle at 70% 36%,rgba(255,255,255,.58),transparent 48%,rgba(51,58,62,.18) 77%);opacity:.2;mix-blend-mode:screen}
.header{color:var(--text)}.brand{color:var(--text)}.brand img,.app-brand img{filter:grayscale(1) brightness(.22)}.brand strong{color:#69737b}.main-nav{color:#4f5961}.main-nav a,.footer a{color:#4f5961}.main-nav a:hover,.footer a:hover{color:#101315}
.button.solid{color:#f7f8f8;background:#111417;border-color:#111417;box-shadow:0 8px 22px rgba(18,23,27,.16)}.button.solid:hover{background:#2a3035;box-shadow:0 12px 28px rgba(18,23,27,.2)}.button.ghost{color:#20262a;background:rgba(255,255,255,.68);border-color:var(--line-strong);box-shadow:0 4px 14px rgba(28,35,40,.08)}.button.ghost:hover{color:#111;background:#fff;border-color:rgba(19,25,30,.44)}.button.link{color:#39434a}.button span{color:#647078}
.hero h1 em,.section-heading h2 em,.workspace-heading h2 em,.workflow-section h2 em,.roadmap h2 em{background:linear-gradient(105deg,#171a1d,#66727a 58%,#4f6971);-webkit-background-clip:text;background-clip:text}
.hero-copy>p,.section-heading>p,.workflow-section .section-heading>p,.roadmap .section-heading>p{color:#4c565e}.hero-signal{color:#566169}.hero-signal b{background:#aab2b7}.orbit-label{color:#5c6870}.label-top{border-color:var(--line-strong)}.label-bottom{color:#5c6870}.motion-toggle{color:#263136;background:rgba(255,255,255,.78);border-color:var(--line-strong);box-shadow:0 4px 12px rgba(28,35,40,.1)}.motion-toggle:hover{color:#111;background:#fff;border-color:rgba(19,25,30,.44)}
.product-card{background:linear-gradient(145deg,#fff,#eef1f2);border-color:var(--line);box-shadow:0 16px 38px rgba(33,42,48,.06)}.product-card-wide{background:radial-gradient(ellipse at 90% 90%,rgba(147,165,171,.24),transparent 44%),linear-gradient(145deg,#fff,#eef1f2)}.product-card h3{color:#171a1d}.product-card p{color:#59636b}.card-index,.card-foot{color:#667178}.card-icon{color:#496a73;border-color:rgba(19,25,30,.23)}
.app-frame{background:#f8f9f9;border-color:rgba(19,25,30,.2);box-shadow:0 24px 85px rgba(33,42,48,.13)}.app-sidebar{background:#e9edef;border-color:var(--line)}.app-main{background:#fff}.app-inspector{background:#f1f3f4;border-color:var(--line)}.app-topbar{color:#657078;border-color:var(--line)}.app-topbar b,.app-project-head h3{color:#171a1d}.save-state{color:#667178}.app-project-head p,.app-device small{color:#667178}.app-label{color:#67727a}.app-nav,.project-item{color:#58636b}.app-nav.selected{background:rgba(22,29,34,.08);color:#111517}.project-item.active{color:#1a2023}.app-new{color:#1a2023;background:#fff;border-color:rgba(19,25,30,.24)}.view-tabs{color:#657078;border-color:var(--line)}.view-tabs button{color:#657078}.view-tabs button.active{color:#171a1d}.canvas{background:#f7f8f8}.canvas-grid{background-image:linear-gradient(rgba(58,70,77,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(58,70,77,.08) 1px,transparent 1px)}.zone{color:#657078}.canvas-lines path{stroke:#6f7e85}.flow-node{background:rgba(255,255,255,.94);border-color:rgba(19,25,30,.17);box-shadow:0 9px 25px rgba(33,42,48,.1)}.flow-node small,.flow-node>span{color:#667178}.flow-node b{color:#171a1d}.flow-node:hover,.flow-node.selected{border-color:rgba(52,83,91,.62);box-shadow:0 0 0 1px rgba(73,106,115,.2),0 12px 30px rgba(33,42,48,.13)}.inspector-tabs button{color:#667178}.inspector-tabs button.active{color:#171a1d}.app-inspector>small{color:#667178}.app-inspector>p,.inspect-row,.mini-comment{color:#59636b}.inspect-row b,.mini-comment b{color:#263036}.app-inspector hr{border-color:var(--line)}.inspector-note{color:#263036;border-color:var(--line)}.inspector-note small{color:#667178}
.workflow-section{background:linear-gradient(90deg,#e3e7e9,#f5f6f6,#e3e7e9)}.template-card{background:#fff;border-color:var(--line);box-shadow:0 22px 55px rgba(33,42,48,.12)}.template-card.back{background:#e5e9eb}.template-card.middle{background:#f4f6f6}.template-card.front{background:linear-gradient(135deg,#fff,#e8ecee);border-color:rgba(19,25,30,.25)}.template-card span,.template-card small{color:#667178}.template-card b{color:#171a1d}.template-add{color:#42545b;border-color:#6e7d84}.roadmap-grid:before{background:linear-gradient(90deg,#111417,#708187,#6f6143)}.road-dot{border-color:var(--bg);background:#111417;box-shadow:0 0 0 1px #111417,0 0 14px rgba(17,20,23,.24)}.cta-section{border-color:var(--line)}.cta-section p{color:#59636b}.footer{border-color:var(--line);color:#667178}
.mobile-menu{background:rgba(248,249,249,.97);border-color:var(--line-strong);box-shadow:0 20px 50px rgba(33,42,48,.2)}.mobile-menu a{color:#20272b}.mobile-menu a:hover{background:rgba(19,25,30,.08)}.auth-card{background:linear-gradient(145deg,#fff,#eef1f2);border-color:var(--line-strong);box-shadow:0 25px 70px rgba(33,42,48,.22)}.auth-tabs{border-color:var(--line)}.auth-tabs button{color:#667178}.auth-tabs button.active{color:#171a1d}.auth-pane p,.auth-pane label{color:#59636b}.auth-pane input{background:#fff;color:#171a1d;border-color:var(--line-strong)}.dialog-close{color:#59636b}.auth-message{color:#496a73}.toast{background:#111417;color:#f7f8f8;box-shadow:0 10px 30px rgba(33,42,48,.25)}
.signal-dot{background:#397d5c;box-shadow:0 0 14px rgba(57,125,92,.42)}.doing-text{color:#6f6143!important}.state.done{color:#397d5c}.state.doing{color:#6f6143}.state.wait{color:#667178}.road-item.current>b{color:#496a73;border-color:rgba(73,106,115,.4)}
@media(prefers-reduced-motion:reduce){.moon-core,.moon-image,.moon-core::after,.star-field,.star-field:before,.star-field:after,.aurora,.sky:after{animation:none}.motion-toggle{display:none}}
/* sparse graph layer: visible on the light canvas, but deliberately quieter
   than the content so it reads as atmosphere rather than decoration */
.sky canvas{opacity:.36;mix-blend-mode:multiply;pointer-events:none}
@media(max-width:680px){.sky canvas{opacity:.24}}
/* light-theme micro-contrast: keep the utility eyebrow legible over white */
.eyebrow{color:#59636b}
.eyebrow span{color:#6a747a}
.eyebrow i{background:#1d2529;box-shadow:0 0 12px rgba(29,37,41,.22)}
.eyebrow i.silver{background:#6d7880;box-shadow:0 0 12px rgba(109,120,128,.22)}
.eyebrow i.cyan{background:#496a73;box-shadow:0 0 12px rgba(73,106,115,.24)}
.eyebrow i.gold{background:#6f6143;box-shadow:0 0 12px rgba(111,97,67,.22)}
/* v2.3 full-page lunar background: the moon travels behind every section.
   The scene is intentionally oversized and centered so scrolling reveals a
   different crop/angle instead of leaving a small hero ornament in a corner. */
.sky{z-index:0;background:linear-gradient(180deg,#f7f8f8 0%,#eceeef 48%,#dfe3e5 100%);}
.header,main,.footer{position:relative;z-index:1}
.moon-scene{position:absolute;left:50%;right:auto;top:50%;width:min(130vmin,1480px);height:min(130vmin,1480px);opacity:.96;transform:translate3d(calc(-50% + var(--moon-scroll-x,0px) + var(--moon-pointer-x,0px)),calc(-50% + var(--moon-scroll-y,0px) + var(--moon-pointer-y,0px)),0) rotateX(var(--moon-tilt-x,0deg)) rotateY(var(--moon-tilt-y,0deg)) rotate(var(--moon-rotate,0deg)) scale(var(--moon-scale,1));transform-origin:50% 50%;transition:transform .75s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.moon-core{width:68%;left:16%;top:16%;opacity:.86;filter:drop-shadow(0 32px 80px rgba(44,51,56,.18));}
.moon-image{opacity:.78;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.34) brightness(.78) saturate(.08) drop-shadow(0 20px 50px rgba(43,50,55,.16));animation:moon-slow-spin 150s linear infinite;}
.moon-core::after{opacity:.28;filter:blur(25px);background:radial-gradient(circle at 71% 35%,rgba(255,255,255,.72),transparent 42%,rgba(38,44,49,.34) 78%);}
.moon-ring{border-color:rgba(69,81,88,.22);}
.moon-ring-two{border-color:rgba(82,101,109,.18);}
.moon-orbit-dot{background:#4d6870;box-shadow:0 0 18px rgba(77,104,112,.45);}
@keyframes moon-slow-spin{from{transform:rotate(0deg) scale(.995)}50%{transform:rotate(180deg) scale(1.01)}to{transform:rotate(360deg) scale(.995)}}
/* Keep the lunar texture visible between sections without sacrificing text contrast. */
.product,.workspace,.roadmap,.cta-section{background:rgba(247,248,248,.34);}
.workflow-section{background:linear-gradient(90deg,rgba(222,227,229,.72),rgba(248,249,249,.48),rgba(222,227,229,.72));}
.hero-copy,.section-heading,.workspace-heading,.workflow-layout,.roadmap .section-heading,.cta-section{isolation:isolate;}
.hero-copy>p,.section-heading>p,.workflow-section .section-heading>p,.roadmap .section-heading>p,.cta-section p{text-shadow:0 1px 0 rgba(255,255,255,.75);}
@media(max-width:980px){.moon-scene{width:145vmin;height:145vmin;opacity:.82}.moon-core{opacity:.78}.moon-image{opacity:.72}}
@media(max-width:680px){.moon-scene{width:165vmin;height:165vmin;opacity:.66}.moon-core{opacity:.72}.moon-image{opacity:.66}.product,.workspace,.roadmap,.cta-section{background:rgba(247,248,248,.54)}}
@media(prefers-reduced-motion:reduce){.moon-scene{transition:none}.moon-image{animation:none}.moon-scene{transform:translate3d(-50%,-50%,0)}}

/* v2.3 full-page lunar atmosphere: the moon is the page's quiet visual axis,
   not a hero-only decoration. The scene stays fixed behind every section while
   JS updates only compositor-friendly custom properties as the user scrolls. */
.sky{position:fixed;inset:0;z-index:-3;isolation:isolate;background:
  radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.98),transparent 42%),
  linear-gradient(180deg,#fafbfb 0%,#eef1f2 48%,#e2e6e8 100%)}
.sky:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(226,230,232,.18));z-index:-1}
.sky:after{opacity:.24;mix-blend-mode:multiply}
.moon-scene{position:fixed;left:50%;top:50%;right:auto;width:min(96vw,1080px);height:min(96vw,1080px);z-index:-1;pointer-events:none;transform:translate3d(calc(-50% + var(--moon-x,0px)),calc(-50% + var(--moon-y,0px)),0) rotate(var(--moon-rotation,0deg)) scale(var(--moon-scale,1));transform-origin:50% 50%;will-change:transform;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.moon-core{width:58%;left:21%;top:21%;opacity:.43;filter:drop-shadow(0 26px 55px rgba(39,47,52,.16))}
.moon-image{opacity:.72;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.26) brightness(.76) saturate(.12);animation-duration:24s}
.moon-core::after{opacity:.28;mix-blend-mode:multiply}
.moon-ring{opacity:.55}
.moon-orbit-dot{opacity:.7}
main,.header,.footer{position:relative;z-index:0}
.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.64),rgba(239,242,243,.5))}
.workflow-section{background:linear-gradient(90deg,rgba(229,233,235,.76),rgba(248,249,249,.5),rgba(229,233,235,.76))}
@media(max-width:980px){.moon-scene{width:min(122vw,920px);height:min(122vw,920px);opacity:.9}.moon-core{width:56%;left:22%;top:22%;opacity:.36}.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.74),rgba(239,242,243,.62))}}
@media(max-width:680px){.moon-scene{width:150vw;height:150vw;opacity:.88}.moon-core{width:55%;left:22.5%;top:22.5%;opacity:.28}.moon-image{opacity:.78}.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.86),rgba(239,242,243,.76))}}
@media(prefers-reduced-motion:reduce){.moon-scene{transition:none;transform:translate3d(-50%,-50%,0)}.moon-image{animation:none}}

/* final lunar backdrop composition: consume the scroll/pointer variables from
   app.js so each page section reveals a slightly different lunar angle. */
.sky{z-index:0}
.header,main,.footer{position:relative;z-index:1}
 .moon-scene{z-index:1;transform:perspective(1200px) translate3d(calc(-50% + var(--moon-scroll-x,0px) + var(--moon-pointer-x,0px)),calc(-50% + var(--moon-scroll-y,0px) + var(--moon-pointer-y,0px)),0) rotate(var(--moon-rotate,0deg)) rotateX(var(--moon-tilt-x,0deg)) rotateY(var(--moon-tilt-y,0deg)) scale(var(--moon-scale,1.04));}
.moon-core{opacity:.76}
.moon-image{opacity:.93;filter:grayscale(1) contrast(1.42) brightness(.72) saturate(0) drop-shadow(0 22px 58px rgba(39,47,52,.2));animation:moon-slow-turn 42s ease-in-out infinite;transform-origin:50% 50%}
.moon-core{overflow:visible}
.moon-core::before{content:"";position:absolute;z-index:2;pointer-events:none;width:var(--phase-shadow-width,100%);height:100%;left:calc(50% + var(--phase-shadow-x,0%));top:0;border-radius:50%;background:rgba(42,49,54,.92);mix-blend-mode:multiply;opacity:var(--phase-shadow-opacity,0);transform:translateX(-50%) rotate(var(--phase-shadow-angle,0deg));transform-origin:50% 50%;transition:width .7s cubic-bezier(.23,1,.32,1),left .7s cubic-bezier(.23,1,.32,1),opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1);box-shadow:inset -18px 0 28px rgba(18,23,27,.18)}
.moon-core::after{z-index:3}
.moon-scene[data-phase="new"]{--phase-shadow-width:112%;--phase-shadow-x:0%;--phase-shadow-opacity:.97;--phase-shadow-angle:0deg}
.moon-scene[data-phase="waxing-crescent"]{--phase-shadow-width:100%;--phase-shadow-x:-43%;--phase-shadow-opacity:.96;--phase-shadow-angle:-9deg}
.moon-scene[data-phase="first-quarter"]{--phase-shadow-width:100%;--phase-shadow-x:-50%;--phase-shadow-opacity:.92;--phase-shadow-angle:-4deg}
.moon-scene[data-phase="waxing-gibbous"]{--phase-shadow-width:100%;--phase-shadow-x:-28%;--phase-shadow-opacity:.86;--phase-shadow-angle:7deg}
.moon-scene[data-phase="full"]{--phase-shadow-width:100%;--phase-shadow-x:0%;--phase-shadow-opacity:0;--phase-shadow-angle:0deg}
.moon-scene[data-phase="waning-gibbous"]{--phase-shadow-width:100%;--phase-shadow-x:28%;--phase-shadow-opacity:.86;--phase-shadow-angle:-7deg}
.moon-scene[data-phase="last-quarter"]{--phase-shadow-width:100%;--phase-shadow-x:50%;--phase-shadow-opacity:.92;--phase-shadow-angle:4deg}
.moon-scene[data-phase="waning-crescent"]{--phase-shadow-width:100%;--phase-shadow-x:43%;--phase-shadow-opacity:.96;--phase-shadow-angle:9deg}
@keyframes moon-slow-turn{0%,100%{transform:rotate(-2deg) scale(.99)}50%{transform:rotate(2.5deg) scale(1.015)}}
.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{backdrop-filter:saturate(.82)}
@media(max-width:680px){.moon-core{opacity:.56}.moon-image{opacity:.9;filter:grayscale(1) contrast(1.34) brightness(.74) saturate(0) drop-shadow(0 14px 38px rgba(39,47,52,.16))}.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{backdrop-filter:saturate(.78)}}
@media(prefers-reduced-motion:reduce){.moon-image{animation:none}.moon-core::before{transition:none}.moon-scene{transform:translate3d(-50%,-50%,0) scale(1.04)}}
/* Final contrast pass: preserve the requested white-to-gray base while
   letting the lunar texture read as the page backdrop instead of a watermark. */
body{background:#e7eaec}
.sky{background:radial-gradient(ellipse at 50% 7%,rgba(255,255,255,.92),transparent 42%),linear-gradient(180deg,#f4f5f6 0%,#e5e8e9 48%,#d4d9dc 100%)}
.moon-core{opacity:.9}
.moon-image{opacity:.98;filter:grayscale(1) contrast(1.56) brightness(.62) saturate(0) drop-shadow(0 24px 62px rgba(39,47,52,.24))}
.hero,.product,.workspace,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.43),rgba(239,242,243,.3))}
.workflow-section{background:linear-gradient(90deg,rgba(222,227,229,.56),rgba(248,249,249,.34),rgba(222,227,229,.56))}
@media(max-width:980px){.moon-core{opacity:.82}.moon-image{opacity:.94}.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.55),rgba(239,242,243,.43))}}
@media(max-width:680px){.moon-core{opacity:.72}.moon-image{opacity:.92}.hero,.product,.workspace,.workflow-section,.roadmap,.cta-section{background:linear-gradient(180deg,rgba(250,251,251,.68),rgba(239,242,243,.57))}}