.hero { align-items:center; color:var(--ink); display:flex; flex-direction:column; isolation:isolate; min-height:calc(100vh - 5rem); padding-block:4.25rem 3rem; position:relative; text-align:center; }
.hero::before { background:var(--paper); content:""; inset:0 -50vw; position:absolute; z-index:-1; }
.hero__intro { max-width:61rem; position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.4rem,4.6vw,4.25rem); font-weight:700; letter-spacing:-.05em; line-height:1; margin:0 auto; }
.hero__summary { color:#637381; font-size:1.0625rem; line-height:1.6; margin:1.25rem auto 0; max-width:42rem; }
.hero__actions { align-items:center; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem; }
.hero__action { align-items:center; border:1px solid var(--line); border-radius:99rem; color:var(--text); display:inline-flex; font-size:.75rem; font-weight:900; gap:.5rem; padding:.72rem 1rem; text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.hero__action:hover { transform:translateY(-2px); }
.hero .eyebrow { color:var(--violet-soft); }
.hero__action--primary { background:var(--violet-soft); border-color:var(--violet-soft); color:var(--text); }
.hero__action--secondary { border-color:#c4cdd5; color:var(--ink); }.hero__action--secondary:hover { border-color:var(--violet-soft); color:var(--violet-soft); }

.operation-stage { margin-top:2.5rem; max-width:73rem; text-align:left; width:100%; }
.operation-stage__canvas { background:radial-gradient(circle at 50% 50%,rgba(159,121,180,.16),transparent 38%),linear-gradient(180deg,#ffffff,#f4f6f8); border:1px solid #dfe3e8; border-radius:1rem; min-height:25rem; overflow:hidden; position:relative; }
.operation-stage__grid { background-image:linear-gradient(rgba(99,115,129,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(99,115,129,.1) 1px,transparent 1px); background-size:2.5rem 2.5rem; inset:0; mask-image:radial-gradient(ellipse at center,black 15%,transparent 74%); opacity:.8; position:absolute; }
.operation-stage__nebula { animation:nebula 9s ease-in-out infinite alternate; background:radial-gradient(circle,rgba(159,121,180,.18),transparent 63%); border-radius:50%; filter:blur(2px); height:34rem; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:34rem; }
.orbit { border:1px solid rgba(159,121,180,.3); border-radius:50%; left:50%; pointer-events:none; position:absolute; top:50%; transform:translate(-50%,-50%); }
.orbit--outer { animation:float 6s ease-in-out infinite alternate; height:27rem; width:27rem; }
.orbit--inner { animation:float 4.5s ease-in-out infinite alternate-reverse; border-color:rgba(84,214,44,.24); height:18rem; width:18rem; }
.orbiting-signal { background:var(--acid); border-radius:50%; box-shadow:0 0 0 .4rem rgba(84,214,44,.1),0 0 1.15rem var(--acid); height:.85rem; left:50%; position:absolute; top:50%; width:.85rem; z-index:3; }
.orbiting-signal--two { background:var(--cyan); box-shadow:0 0 0 .4rem rgba(116,202,255,.1),0 0 1.15rem var(--cyan); height:.6rem; width:.6rem; }
.orbiting-signal--three { background:var(--violet); box-shadow:0 0 0 .4rem rgba(159,121,180,.1),0 0 1.15rem var(--violet); height:.5rem; width:.5rem; }
.orbiting-signal--four { background:var(--orange); box-shadow:0 0 0 .4rem rgba(255,193,7,.1),0 0 1.15rem var(--orange); height:.65rem; width:.65rem; }
.orbiting-signal--five { background:var(--paper); box-shadow:0 0 0 .4rem rgba(249,250,251,.08),0 0 1.15rem var(--paper); height:.45rem; width:.45rem; }
.signal-route { height:100%; left:0; overflow:visible; position:absolute; top:0; width:100%; }
.signal-route path { animation:dash 5s linear infinite; fill:none; stroke:var(--violet); stroke-dasharray:4 8; stroke-width:1.5; }
.signal-route circle { fill:var(--acid); filter:drop-shadow(0 0 .45rem var(--acid)); }
.signal-node { background:rgba(255,255,255,.98); border:1px solid #c4cdd5; box-shadow:0 .5rem 1.5rem rgba(22,28,36,.1); display:grid; gap:.45rem; left:50%; max-width:9rem; opacity:.82; padding:.9rem; position:absolute; top:50%; transition:border-color .3s ease,box-shadow .45s ease; will-change:opacity,transform; z-index:1; }
.signal-node:hover { border-color:var(--violet); }
.operation-stage[data-operation-desk="create"] .signal-node--create,.operation-stage[data-operation-desk="design"] .signal-node--design,.operation-stage[data-operation-desk="send"] .signal-node--send,.operation-stage[data-operation-desk="review"] .signal-node--review,.operation-stage[data-operation-desk="analyze"] .signal-node--analyze { opacity:1; z-index:4; }
.operation-stage[data-operation-desk="create"] .signal-node--create { border-color:var(--acid); box-shadow:0 0 1.5rem rgba(84,214,44,.16); }
.operation-stage[data-operation-desk="design"] .signal-node--design { border-color:var(--violet); box-shadow:0 0 1.5rem rgba(159,121,180,.18); }
.operation-stage[data-operation-desk="send"] .signal-node--send { border-color:var(--cyan); box-shadow:0 0 1.5rem rgba(116,202,255,.16); }
.operation-stage[data-operation-desk="review"] .signal-node--review { border-color:var(--orange); box-shadow:0 0 1.5rem rgba(255,193,7,.16); }
.operation-stage[data-operation-desk="analyze"] .signal-node--analyze { border-color:var(--paper); box-shadow:0 0 1.5rem rgba(249,250,251,.14); }
.signal-node>span { color:#637381; font-size:.56rem; font-weight:700; letter-spacing:.08em; }
.signal-node strong { color:var(--ink); font-size:.92rem; font-weight:700; letter-spacing:-.025em; }
.signal-node p { color:#454f5b; font-size:.7rem; line-height:1.42; margin:0; max-height:7rem; opacity:.92; overflow:hidden; }
.signal-node>i { color:var(--violet); font-size:1.2rem; font-style:normal; justify-self:end; }
.signal-node__form-preview { background:#f4f6f8; border:1px solid #dfe3e8; display:grid; gap:.3rem; margin-top:.2rem; padding:.4rem; }.signal-node__form-preview i { background:#c4cdd5; border-radius:99rem; display:block; height:.28rem; width:100%; }.signal-node__form-preview i:nth-child(2) { background:#919eab; width:74%; }.signal-node__form-preview i:nth-child(3) { background:rgba(110,58,143,.36); width:52%; }
.signal-node--design>i { color:var(--violet); }
.signal-node--send>i { color:var(--cyan); }
.signal-node--review>i { color:var(--orange); }
.signal-node--analyze>i { color:var(--paper); }
.signal-core { align-items:center; background:radial-gradient(circle at 50% 40%,#ffffff 0,#f4f6f8 59%,#dfe3e8 100%); border:1px solid rgba(110,58,143,.35); border-radius:50%; box-shadow:0 1rem 2.5rem rgba(110,58,143,.14); display:flex; height:14rem; justify-content:center; left:50%; overflow:hidden; padding:1.7rem; position:absolute; text-align:center; top:50%; transform:translate(-50%,-50%); width:14rem; z-index:2; }
.signal-core::before { border:1px dashed rgba(110,58,143,.35); border-radius:50%; content:""; inset:.6rem; position:absolute; }
.signal-core__orbit { animation:orbit 8s linear infinite; border-left:2px solid var(--acid); border-radius:50%; inset:.1rem; position:absolute; }
.signal-core__mark { height:auto; max-width:5.6rem; position:relative; width:58%; }
.signal-core small { align-items:center; bottom:1.35rem; color:var(--acid); display:inline-flex; font-size:.52rem; font-weight:900; gap:.3rem; left:50%; position:absolute; transform:translateX(-50%); white-space:nowrap; }
.signal-core small i { animation:pulse 1.8s ease-out infinite; background:var(--acid); border-radius:50%; height:.35rem; width:.35rem; }
.signal-proof { bottom:10%; left:15%; position:absolute; z-index:1; }
.signal-proof span { color:var(--muted); font-size:.55rem; font-weight:900; letter-spacing:.11em; }
.signal-proof span b { color:var(--acid); font-size:1.15rem; letter-spacing:-.06em; margin-left:.25rem; }
.signal-proof p { color:var(--ink); font-size:.75rem; font-weight:800; line-height:1.1; margin:.45rem 0 0; }
.signal-proof>i { color:var(--violet); font-size:1.3rem; font-style:normal; position:absolute; right:-1.5rem; top:.7rem; }
.operation-stage__footer { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:.75rem; grid-template-columns:1fr auto; padding:.8rem 0; }
.mode-switch { display:flex; gap:.35rem; grid-column:1 / -1; width:100%; }
.mode-switch__item { background:transparent; border:1px solid transparent; border-radius:99rem; color:var(--muted); cursor:pointer; flex:1; font:inherit; font-size:.66rem; font-weight:800; padding:.5rem .6rem; text-align:center; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.mode-switch__item span { color:var(--violet); font-size:.5rem; margin-right:.2rem; }
.mode-switch__item.is-active { background:#212b36; border-color:rgba(159,121,180,.55); color:var(--text); }
.mode-switch__item:focus-visible,.operation-stage__next:focus-visible { outline:3px solid var(--acid); outline-offset:2px; }
.operation-stage__detail { color:var(--muted); font-size:.62rem; margin:0; }
.operation-stage__detail span { color:var(--ink); font-weight:900; }
.operation-stage__detail b { color:var(--violet); margin-inline:.25rem; }
.operation-stage__next { background:transparent; border:0; color:var(--acid); cursor:pointer; font:inherit; font-size:.62rem; font-weight:900; padding:0; white-space:nowrap; }
.operation-stage[data-operation-desk="design"] .signal-route path,.operation-stage[data-operation-desk="design"] .signal-core__orbit { stroke:var(--violet); border-left-color:var(--violet); }
.operation-stage[data-operation-desk="design"] .signal-core { border-color:rgba(159,121,180,.55); }
.operation-stage[data-operation-desk="design"] .signal-proof span b,.operation-stage[data-operation-desk="design"] .operation-stage__next { color:var(--violet); }
.operation-stage[data-operation-desk="send"] .signal-route path { stroke:var(--cyan); }
.operation-stage[data-operation-desk="send"] .signal-core { border-color:rgba(116,202,255,.55); }
.operation-stage[data-operation-desk="send"] .signal-core__orbit { border-left-color:var(--cyan); }
.operation-stage[data-operation-desk="send"] .signal-proof span b,.operation-stage[data-operation-desk="send"] .operation-stage__next { color:var(--cyan); }
.operation-stage[data-operation-desk="review"] .signal-route path { stroke:var(--orange); }
.operation-stage[data-operation-desk="review"] .signal-core { border-color:rgba(255,193,7,.55); }
.operation-stage[data-operation-desk="review"] .signal-core__orbit { border-left-color:var(--orange); }
.operation-stage[data-operation-desk="review"] .signal-proof span b,.operation-stage[data-operation-desk="review"] .operation-stage__next { color:var(--orange); }
.operation-stage[data-operation-desk="analyze"] .signal-route path { stroke:var(--paper); }
.operation-stage[data-operation-desk="analyze"] .signal-core { border-color:rgba(249,250,251,.55); }
.operation-stage[data-operation-desk="analyze"] .signal-core__orbit { border-left-color:var(--paper); }
.operation-stage[data-operation-desk="analyze"] .signal-proof span b,.operation-stage[data-operation-desk="analyze"] .operation-stage__next { color:var(--paper); }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset:-72; } }
@keyframes float { to { transform:translate(-50%,-50%) scale(1.03); } }
@keyframes nebula { to { opacity:.54; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(84,214,44,.45); } 70% { box-shadow:0 0 0 .55rem rgba(84,214,44,0); } 100% { box-shadow:0 0 0 0 rgba(84,214,44,0); } }
@media (min-width:40rem) { .operation-stage__canvas { min-height:31rem; }.orbit--outer { height:31rem; width:31rem; }.orbit--inner { height:22rem; width:22rem; }.signal-core { height:18rem; width:18rem; }.signal-node { max-width:10rem; padding:1rem; }.signal-proof { bottom:12%; left:7%; } }
@media (min-width:64rem) { .hero { padding-top:5rem; }.hero h1 { white-space:nowrap; }.operation-stage { margin-top:3rem; }.operation-stage__canvas { min-height:37rem; }.orbit--outer { height:35rem; width:35rem; }.orbit--inner { height:25rem; width:25rem; }.signal-core { height:20rem; padding:2.5rem; width:20rem; }.signal-proof { bottom:22%; left:7%; }.operation-stage__footer { grid-template-columns:1fr auto auto; }.mode-switch { grid-column:auto; max-width:31rem; }.operation-stage__detail { text-align:center; } }