Repository navigation
Expand file tree
/
Copy pathdeveloper-documentation.html
More file actions
2273 lines (2102 loc) · 119 KB
/
Copy pathdeveloper-documentation.html
File metadata and controls
2273 lines (2102 loc) · 119 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!--
========================================================================
ZopDev · _shell.html
------------------------------------------------------------------------
PAGE TEMPLATE, not a real page. The underscore prefix signals that.
Copy this file when starting any new page. The canonical nav, footer,
live-ops strip, and SVG symbols are already wired. Only edit the three
clearly-marked TEMPLATE blocks:
1 · <title> + meta-description in <head>
2 · .nav-links, mark the active tab
3 · <main class="page" id="main-content"> content between nav and footer
Everything else, tokens, chrome styles, logo symbols, reduced-motion
gate, comes from tokens.css + chrome.css. Do not redefine locally.
========================================================================
-->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>(function(){try{var t=localStorage.getItem('zop-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
<title>Developer documentation · ZopNight · ZopDev</title>
<meta name="description" content="ZopNight developer documentation, REST API reference, authentication, SDKs, webhooks, MCP server, and CI/CD integration patterns."/>
<link rel="canonical" href="https://zopdev.com/developer-documentation.html"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://zopdev.com/developer-documentation.html"/>
<meta property="og:title" content="Developer documentation · ZopNight · ZopDev"/>
<meta property="og:description" content="ZopNight developer documentation, REST API reference, authentication, SDKs, webhooks, MCP server, and CI/CD integration patterns."/>
<meta property="og:image" content="https://zopdev.com/og-default.png"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Developer documentation · ZopNight · ZopDev"/>
<meta name="twitter:description" content="ZopNight developer documentation, REST API reference, authentication, SDKs, webhooks, MCP server, and CI/CD integration patterns."/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="tokens.css"/>
<link rel="stylesheet" href="chrome.css"/>
<link rel="stylesheet" href="chrome-footer.css">
<style>
/* no-italic-site-wide */ em,i,cite,dfn,var,address,blockquote{font-style:normal}
/* ======================================================================
Page-specific CSS goes here.
Rules of engagement:
· tokens only (no hex literals except brand exceptions)
· no gradients · no blurs · no backdrop-filter
· sharp corners (border-radius: 0), pills (9999px) for status only
· hard offset shadows: 0 8px 0 -4px <color>
====================================================================== */
/* section rhythm */
.page{ padding:0; }
.page > section{ padding:var(--sec-pad) 0; border-bottom:0; }
.page > section:last-child{ border-bottom:0; }
/* breadcrumb, used at the top of every subpage */
.crumb{
padding:var(--sp-7) 0 var(--sp-4);
max-width:var(--max); margin:0 auto;
padding-left:var(--gutter); padding-right:var(--gutter);
font-family:var(--mono); font-size:var(--t-11); color:var(--ink-4);
letter-spacing:var(--ls-meta-tight); text-transform:uppercase;
}
.crumb a{ color:var(--ink-3); }
.crumb a:hover{ color:var(--ink); }
.crumb .sep{ color:var(--ink-5); margin:0 var(--sp-2); }
/* page heading, shared across subpages */
.page-head{
padding:var(--sp-10) 0 var(--sp-12);
max-width:var(--max); margin:0 auto;
padding-left:var(--gutter); padding-right:var(--gutter);
border-bottom:1px solid var(--line);
}
.page-head .meta{
font-family:var(--mono); font-size:var(--t-11);
color:var(--zop-orange); letter-spacing:var(--ls-meta);
text-transform:uppercase; margin-bottom:var(--sp-4);
display:inline-flex; align-items:center; gap:var(--sp-2);
}
.page-head .meta::before{ content:''; width:10px; height:10px; background:var(--zop-orange); }
.page-head h1{
font-size:clamp(48px, 6vw, 88px);
font-weight:var(--fw-bold); letter-spacing:var(--ls-display);
line-height:var(--lh-display);
max-width:1000px; margin:0 0 var(--sp-5);
}
.page-head h1 em{ font-style:normal; color:var(--zop-orange); }
.page-head p.lede{
font-size:var(--t-20); color:var(--ink-3);
max-width:720px; line-height:1.45; margin:0;
}
.page-head p.lede strong{ color:var(--ink); font-weight:var(--fw-medium); }
@media (max-width:768px){
.page > section{ padding:var(--sec-pad-sm) 0; }
}
/* ======================================================================
PRODUCT DOCUMENTATION · two-column layout
--------------------------------------------------------------------
Left: sticky table of contents (sections + sub-sections).
Right: long-form content blocks, each anchored for deep-linking.
Drops to single-column below 960px (TOC moves above content).
====================================================================== */
/* ── Docs page · 3-column Mintlify-style shell ─────────────────────
Shared with product-documentation.html · same chrome, same JS API.
The .docs-section / .docs-table / .docs-callout primitives below
keep their existing dev-docs density (tighter h2, denser line-height)
— only the SHELL is upgraded. */
.docs-page{ padding:0; }
/* Sidebar head · single minimal search input, matches the form-input
pattern used elsewhere on the site. No icon, no kbd chip. ⌘K still
focuses it via JS. */
.docs-sidebar-head{
margin-bottom:var(--sp-5);
}
.docs-sidebar-search-input{
width:100%; height:38px;
padding:0 14px;
background:var(--paper);
border:1px solid var(--line);
color:var(--ink);
font-family:var(--font); font-size:13.5px;
letter-spacing:-.005em;
outline:none;
transition:border-color .14s, box-shadow .14s;
-webkit-appearance:none; appearance:none;
}
.docs-sidebar-search-input::placeholder{ color:var(--ink-4); }
.docs-sidebar-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.docs-sidebar-search-input:hover{ border-color:var(--ink-4); }
.docs-sidebar-search-input:focus,
.docs-sidebar-search-input:focus-visible{
border-color:var(--ink);
box-shadow:0 0 0 3px rgba(245,133,73,.15);
}
html[data-theme="dark"] .docs-sidebar-search-input{ background:#15151B; border-color:#2a2a30; }
html[data-theme="dark"] .docs-sidebar-search-input:focus{ border-color:var(--ink); }
/* Sidebar foot · 2 quick links + 1 sign-in CTA, anchored at the
bottom of the sticky column */
.docs-sidebar-foot{
display:flex; flex-direction:column; gap:8px;
padding:var(--sp-5) 0 var(--sp-3);
margin-top:var(--sp-6);
border-top:1px solid var(--line);
}
.docs-sidebar-foot a{
font-family:var(--font); font-size:13px; font-weight:500;
letter-spacing:-.005em;
color:var(--ink-3); text-decoration:none;
padding:4px 0;
transition:color .14s;
}
.docs-sidebar-foot a:hover{ color:var(--ink); }
.docs-sidebar-foot-cta{
display:inline-flex; align-items:center; justify-content:space-between;
padding:8px 12px !important;
margin-top:8px;
background:var(--ink); color:var(--paper) !important;
border:1px solid var(--ink);
font-weight:600 !important;
transition:transform .14s, box-shadow .14s;
}
.docs-sidebar-foot-cta:hover{
color:var(--paper) !important;
transform:translateY(-2px);
box-shadow:0 4px 0 -2px var(--zop-orange);
}
.docs-shell{
display:grid;
grid-template-columns:240px minmax(0,1fr) 200px;
gap:48px;
max-width:1400px; margin:0 auto;
padding:0 var(--gutter);
align-items:flex-start;
}
.docs-sidebar{
position:sticky; top:80px;
align-self:start;
max-height:calc(100vh - 100px);
overflow-y:auto;
padding:var(--sp-7) var(--sp-4) var(--sp-10) 0;
font-family:var(--font);
}
.docs-product-switch{
position:relative;
margin-bottom:var(--sp-5);
padding-bottom:var(--sp-5);
border-bottom:1px solid var(--line);
}
.docs-product-switch-label{
display:block;
font-family:var(--mono); font-size:10px; font-weight:600;
letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-4); margin-bottom:8px;
}
.docs-product-switch-btn{
display:flex; align-items:center; gap:10px;
width:100%; padding:10px 12px;
background:var(--paper); border:1px solid var(--line);
color:var(--ink); cursor:pointer;
font-family:var(--font); font-size:14px; font-weight:600;
letter-spacing:-.005em; text-align:left;
transition:border-color .14s, background .14s;
}
.docs-product-switch-btn:hover{ border-color:var(--ink); }
.docs-product-switch-btn[aria-expanded="true"]{ border-color:var(--ink); }
html[data-theme="dark"] .docs-product-switch-btn{ background:#15151B; border-color:#2a2a30; }
.docs-product-switch-mark{
width:18px; height:18px; flex:none;
display:inline-flex; align-items:center; justify-content:center;
}
.docs-product-switch-mark svg{ width:100%; height:100%; display:block; }
.docs-product-switch-name{ flex:1; }
.docs-product-switch-caret{
width:10px; height:10px; flex:none;
border-right:1.4px solid var(--ink-3);
border-bottom:1.4px solid var(--ink-3);
transform:rotate(45deg) translate(-1px,-1px);
transition:transform .18s;
}
.docs-product-switch-btn[aria-expanded="true"] .docs-product-switch-caret{
transform:rotate(225deg) translate(0,2px);
}
.docs-product-switch-menu{
position:absolute; left:0; right:0; top:calc(100% + 6px);
background:var(--paper); border:1px solid var(--line);
box-shadow:0 14px 40px -8px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.05);
z-index:80; padding:4px;
}
html[data-theme="dark"] .docs-product-switch-menu{
background:#15151B; border-color:#2a2a30;
box-shadow:0 14px 40px -8px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.3);
}
.docs-product-switch-menu[hidden]{ display:none; }
.docs-product-switch-opt{
display:flex; align-items:center; gap:10px;
width:100%; padding:9px 10px;
background:none; border:0; color:var(--ink); cursor:pointer;
font-family:var(--font); font-size:13.5px; font-weight:500;
text-align:left; letter-spacing:-.005em;
transition:background .14s;
}
.docs-product-switch-opt:hover{ background:var(--bg-2); }
html[data-theme="dark"] .docs-product-switch-opt:hover{ background:#1B1B22; }
.docs-product-switch-opt[aria-current="true"]{ background:rgba(245,133,73,.08); }
.docs-product-switch-opt-mark{
width:18px; height:18px; flex:none;
display:inline-flex; align-items:center; justify-content:center;
}
.docs-product-switch-opt-mark svg{ width:100%; height:100%; display:block; }
.docs-product-switch-opt-body{ display:flex; flex-direction:column; gap:1px; flex:1; }
.docs-product-switch-opt-name{ font-weight:600; color:var(--ink); }
.docs-product-switch-opt-meta{
font-family:var(--mono); font-size:10px; font-weight:500;
letter-spacing:.04em; color:var(--ink-4);
}
.docs-product-switch-opt-check{
width:14px; height:14px; flex:none;
color:var(--zop-orange); opacity:0;
}
.docs-product-switch-opt[aria-current="true"] .docs-product-switch-opt-check{ opacity:1; }
.docs-nav{ display:flex; flex-direction:column; gap:var(--sp-4); }
.docs-nav[hidden]{ display:none; }
.docs-nav-group{ display:flex; flex-direction:column; gap:4px; }
.docs-nav-group-head{
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-4); padding:8px 0 6px;
}
.docs-nav-group ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.docs-nav-group li{ margin:0; }
.docs-nav-group a{
display:block; padding:6px 12px 6px 14px;
font-family:var(--font); font-size:13.5px; font-weight:500;
letter-spacing:-.005em;
color:var(--ink-3); text-decoration:none;
border-left:2px solid transparent;
margin-left:-2px;
transition:color .14s, border-color .14s, background .14s;
}
.docs-nav-group a:hover{ color:var(--ink); border-left-color:var(--ink-4); }
.docs-nav-group a.is-active{
color:var(--zop-orange); border-left-color:var(--zop-orange); font-weight:600;
}
.docs-body{ min-width:0; padding:var(--sp-7) 0 var(--sp-12); }
.docs-body > [data-doc-content][hidden]{ display:none; }
.docs-page-head{ margin-bottom:var(--sp-8); }
.docs-page-head .crumb{
margin-bottom:var(--sp-3);
font-family:var(--mono); font-size:11.5px;
color:var(--ink-4); letter-spacing:.04em;
}
.docs-page-head .crumb a{ color:var(--ink-3); text-decoration:none; }
.docs-page-head .crumb a:hover{ color:var(--zop-orange); }
.docs-page-head .crumb .sep{ margin:0 6px; color:var(--ink-5); }
.docs-page-head h1{
font-size:clamp(32px, 4vw, 48px); font-weight:700;
letter-spacing:-.025em; line-height:1.1;
margin:0 0 var(--sp-4); color:var(--ink);
}
.docs-page-head h1 em{ color:var(--zop-orange); font-style:normal; }
.docs-page-head .lede{
font-size:17px; line-height:1.55;
color:var(--ink-2); margin:0; max-width:680px;
}
.docs-onthispage{
position:sticky; top:80px;
align-self:start;
max-height:calc(100vh - 100px);
overflow-y:auto;
padding:var(--sp-7) 0 var(--sp-10);
}
.docs-onthispage-head{
display:block;
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-4);
margin:0 0 14px;
padding:0 12px;
}
.docs-onthispage-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.docs-onthispage-list li{ margin:0; }
.docs-onthispage-list a{
display:block;
padding:5px 12px;
font-family:var(--font); font-size:13px; font-weight:500;
letter-spacing:-.005em; line-height:1.5;
color:var(--ink-3); text-decoration:none;
border-left:1.5px solid transparent;
transition:color .14s, border-color .14s;
}
.docs-onthispage-list a:hover{ color:var(--ink); }
.docs-onthispage-list a.is-active{
color:var(--zop-orange); border-left-color:var(--zop-orange); font-weight:600;
}
.docs-onthispage-list .is-h3 a{
padding-left:24px; font-size:12px; color:var(--ink-4);
}
.docs-onthispage-list .is-h3 a:hover{ color:var(--ink-2); }
.docs-stub{
border:1px solid var(--line);
padding:var(--sp-6) var(--sp-6);
background:var(--bg-2);
margin:var(--sp-4) 0 var(--sp-6);
max-width:760px;
}
html[data-theme="dark"] .docs-stub{ background:#15151B; border-color:#2a2a30; }
.docs-stub-tag{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--mono); font-size:9.5px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--zop-orange);
border:1px solid var(--zop-orange);
padding:3px 8px;
margin-bottom:var(--sp-3);
}
.docs-stub h3{
font-size:18px; font-weight:600;
letter-spacing:-.01em; margin:0 0 var(--sp-2);
color:var(--ink);
}
.docs-stub p{
font-size:14px; line-height:1.6;
color:var(--ink-3); margin:0 0 var(--sp-3);
}
.docs-stub p:last-child{ margin-bottom:0; }
.docs-stub .docs-stub-list{
list-style:none; padding:0; margin:var(--sp-3) 0 0;
display:flex; flex-direction:column; gap:6px;
}
.docs-stub-list li{
font-family:var(--mono); font-size:12px;
color:var(--ink-3);
padding-left:14px; position:relative;
}
.docs-stub-list li::before{
content:'›'; position:absolute; left:2px;
color:var(--zop-orange);
}
/* Audit · docs sections tightened for a denser reference-doc feel.
Smaller h2, tighter section padding, shorter line-height — pattern
matches the rest of the site's compact card vocabulary. */
.docs-section{
padding:var(--sp-7) 0;
border-bottom:1px solid var(--line);
scroll-margin-top:80px;
}
.docs-section:first-child{ padding-top:0; }
.docs-section:last-child{ border-bottom:0; padding-bottom:0; }
.docs-section .num{
font-family:var(--mono); font-size:var(--t-11);
color:var(--zop-orange); letter-spacing:var(--ls-meta);
text-transform:uppercase; margin:0 0 var(--sp-2);
display:inline-flex; align-items:center; gap:var(--sp-2);
}
.docs-section .num::before{ content:''; width:8px; height:8px; background:var(--zop-orange); }
.docs-section h2{
font-size:clamp(22px, 2.4vw, 30px);
font-weight:700;
letter-spacing:-.02em; line-height:1.15;
margin:0 0 var(--sp-4); max-width:780px;
}
.docs-section h2 em{ color:var(--zop-orange); font-style:normal; }
.docs-section h3{
font-size:var(--t-17); margin:var(--sp-6) 0 var(--sp-2);
font-weight:600;
letter-spacing:-.012em; line-height:1.25;
scroll-margin-top:80px;
}
.docs-section h4{
font-size:var(--t-14); margin:var(--sp-5) 0 var(--sp-2);
font-weight:600; letter-spacing:-.005em;
text-transform:uppercase;
color:var(--ink-3);
letter-spacing:.04em;
}
.docs-section p{
font-size:var(--t-14); color:var(--ink-2);
line-height:1.6; margin:0 0 var(--sp-3); max-width:760px;
}
.docs-section p strong{ color:var(--ink); font-weight:var(--fw-medium); }
.docs-section ul, .docs-section ol{
font-size:var(--t-15); color:var(--ink-2);
line-height:1.7; margin:0 0 var(--sp-4); padding-left:var(--sp-5);
max-width:760px;
}
.docs-section li{ margin:var(--sp-2) 0; }
.docs-section li strong{ color:var(--ink); font-weight:var(--fw-medium); }
.docs-section code{
font-family:var(--mono); font-size:0.9em;
background:var(--bg-2); padding:2px 6px;
border:1px solid var(--line);
}
/* Reference table · clean borders, monospace data */
.docs-table{
width:100%; max-width:none;
border-collapse:collapse; border:1px solid var(--line);
margin:var(--sp-4) 0 var(--sp-6); font-size:var(--t-13);
}
.docs-table th, .docs-table td{
text-align:left; padding:var(--sp-3) var(--sp-4);
border-bottom:1px solid var(--line); vertical-align:top;
line-height:1.5; color:var(--ink-2);
}
.docs-table th{
background:var(--bg-2); color:var(--ink-4);
font-family:var(--mono); font-size:var(--t-10);
letter-spacing:var(--ls-meta); text-transform:uppercase;
font-weight:var(--fw-medium);
}
.docs-table tr:last-child td{ border-bottom:0; }
.docs-table td:first-child{ font-family:var(--mono); font-size:var(--t-12); color:var(--ink); white-space:nowrap; }
.docs-table code{ background:transparent; border:0; padding:0; }
/* Callout · highlighted advisory boxes */
.docs-callout{
border-left:3px solid var(--zop-orange);
padding:var(--sp-4) var(--sp-5);
background:var(--bg-2);
margin:var(--sp-5) 0;
max-width:760px;
}
.docs-callout strong{ color:var(--ink); display:block; margin-bottom:var(--sp-1); font-weight:var(--fw-medium); }
.docs-callout p{ margin:0; font-size:var(--t-14); }
/* Responsive · drop right TOC at <1180px, collapse sidebar at <960px */
@media (max-width:1180px){
.docs-shell{ grid-template-columns:280px minmax(0,1fr); }
.docs-onthispage{ display:none; }
}
@media (max-width:960px){
.docs-shell{ grid-template-columns:1fr; gap:24px; }
.docs-sidebar{
position:static; max-height:none;
border-bottom:1px solid var(--line);
padding:var(--sp-5) 0;
}
.docs-sidebar-head{ flex-direction:row; align-items:center;
border-bottom:0; padding-bottom:0; margin-bottom:var(--sp-4); }
.docs-sidebar-search{ flex:1; max-width:360px; }
.docs-body{ padding:var(--sp-5) 0; }
}
</style>
<script src="chrome-navmenu.js" defer></script>
<script src="chrome-pagetransition.js" defer></script>
<script src="chrome-mobilenav.js" defer></script>
<script src="chrome-footer.js" defer></script>
</head>
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
<style id="skip-to-main-css">.skip-to-main{position:absolute;left:-9999px;top:0;z-index:9999;padding:10px 16px;background:var(--ink,#0F0F12);color:var(--paper,#F0EBDB);font-family:var(--mono,monospace);font-size:13px;letter-spacing:.04em;text-decoration:none}.skip-to-main:focus{left:8px;top:8px;outline:2px solid var(--zop-orange,#F58549);outline-offset:2px}</style>
<!-- ========================================================================
SVG defs, the canonical logo + marks. Identical on every page.
======================================================================== -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<symbol id="mark-zopdev" viewBox="0 0 32 32">
<rect x="0" y="0" width="16" height="16" fill="var(--logo-blue, #2A4494)"/>
<rect x="16" y="0" width="16" height="16" fill="#F58549"/>
<rect x="16" y="16" width="16" height="16" fill="#7FB236"/>
</symbol>
<symbol id="mark-zopnight" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" fill="var(--logo-blue, #2A4494)"/>
<circle cx="16" cy="16" r="8" fill="#FFFFFF"/>
</symbol>
<symbol id="mark-zopday" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" fill="#F58549"/>
<circle cx="16" cy="16" r="8" fill="#FFFFFF"/>
</symbol>
<symbol id="mark-zopcloud" viewBox="0 0 32 32">
<!-- Brand playbook: pixel-cloud silhouette on family-blue container -->
<rect x="0" y="0" width="32" height="32" fill="#2A4494"/>
<rect x="12" y="8" width="8" height="6" fill="#FFFFFF"/>
<rect x="6" y="14" width="20" height="10" fill="#FFFFFF"/>
</symbol>
<symbol id="logo-zopdev" viewBox="0 0 715 276">
<path d="M7.452 229V201.784L63.504 137.308V134.716H9.072V115.6H85.86V142.816L29.808 207.292V209.884H86.184V229H7.452ZM136.786 231.268C128.794 231.268 121.612 229.648 115.24 226.408C108.868 223.168 103.846 218.47 100.174 212.314C96.5022 206.158 94.6662 198.76 94.6662 190.12V187.528C94.6662 178.888 96.5022 171.49 100.174 165.334C103.846 159.178 108.868 154.48 115.24 151.24C121.612 148 128.794 146.38 136.786 146.38C144.778 146.38 151.96 148 158.332 151.24C164.704 154.48 169.726 159.178 173.398 165.334C177.07 171.49 178.906 178.888 178.906 187.528V190.12C178.906 198.76 177.07 206.158 173.398 212.314C169.726 218.47 164.704 223.168 158.332 226.408C151.96 229.648 144.778 231.268 136.786 231.268ZM136.786 213.124C143.05 213.124 148.234 211.126 152.338 207.13C156.442 203.026 158.494 197.194 158.494 189.634V188.014C158.494 180.454 156.442 174.676 152.338 170.68C148.342 166.576 143.158 164.524 136.786 164.524C130.522 164.524 125.338 166.576 121.234 170.68C117.13 174.676 115.078 180.454 115.078 188.014V189.634C115.078 197.194 117.13 203.026 121.234 207.13C125.338 211.126 130.522 213.124 136.786 213.124ZM192.888 261.4V148.648H212.976V158.368H215.892C217.728 155.236 220.59 152.482 224.478 150.106C228.366 147.622 233.928 146.38 241.164 146.38C247.644 146.38 253.638 148 259.146 151.24C264.654 154.372 269.082 159.016 272.43 165.172C275.778 171.328 277.452 178.78 277.452 187.528V190.12C277.452 198.868 275.778 206.32 272.43 212.476C269.082 218.632 264.654 223.33 259.146 226.57C253.638 229.702 247.644 231.268 241.164 231.268C236.304 231.268 232.2 230.674 228.852 229.486C225.612 228.406 222.966 227.002 220.914 225.274C218.97 223.438 217.404 221.602 216.216 219.766H213.3V261.4H192.888ZM235.008 213.448C241.38 213.448 246.618 211.45 250.722 207.454C254.934 203.35 257.04 197.41 257.04 189.634V188.014C257.04 180.238 254.934 174.352 250.722 170.356C246.51 166.252 241.272 164.2 235.008 164.2C228.744 164.2 223.506 166.252 219.294 170.356C215.082 174.352 212.976 180.238 212.976 188.014V189.634C212.976 197.41 215.082 203.35 219.294 207.454C223.506 211.45 228.744 213.448 235.008 213.448ZM287.446 229V210.208H302.35V134.392H287.446V115.6H334.102C349.33 115.6 360.886 119.488 368.77 127.264C376.762 134.932 380.758 146.38 380.758 161.608V182.992C380.758 198.22 376.762 209.722 368.77 217.498C360.886 225.166 349.33 229 334.102 229H287.446ZM323.734 209.56H334.426C343.066 209.56 349.384 207.292 353.38 202.756C357.376 198.22 359.374 191.848 359.374 183.64V160.96C359.374 152.644 357.376 146.272 353.38 141.844C349.384 137.308 343.066 135.04 334.426 135.04H323.734V209.56ZM430.981 231.268C422.989 231.268 415.915 229.594 409.759 226.246C403.711 222.79 398.959 217.984 395.503 211.828C392.155 205.564 390.481 198.22 390.481 189.796V187.852C390.481 179.428 392.155 172.138 395.503 165.982C398.851 159.718 403.549 154.912 409.597 151.564C415.645 148.108 422.665 146.38 430.657 146.38C438.541 146.38 445.399 148.162 451.231 151.726C457.063 155.182 461.599 160.042 464.839 166.306C468.079 172.462 469.699 179.644 469.699 187.852V194.818H411.217C411.433 200.326 413.485 204.808 417.373 208.264C421.261 211.72 426.013 213.448 431.629 213.448C437.353 213.448 441.565 212.206 444.265 209.722C446.965 207.238 449.017 204.484 450.421 201.46L467.107 210.208C465.595 213.016 463.381 216.094 460.465 219.442C457.657 222.682 453.877 225.49 449.125 227.866C444.373 230.134 438.325 231.268 430.981 231.268ZM411.379 179.59H448.963C448.531 174.946 446.641 171.22 443.293 168.412C440.053 165.604 435.787 164.2 430.495 164.2C424.987 164.2 420.613 165.604 417.373 168.412C414.133 171.22 412.135 174.946 411.379 179.59ZM497.482 229L471.886 148.648H493.594L512.224 214.096H515.14L533.77 148.648H555.478L529.882 229H497.482Z" fill="currentColor"/>
<rect x="537" width="89" height="89" fill="var(--logo-blue, #2A4494)"/>
<rect x="626" width="89" height="89" fill="#F58549"/>
<rect x="626" y="89" width="89" height="89" fill="#7FB236"/>
</symbol>
</defs>
</svg>
<!-- ========================================================================
LIVE-OPS STRIP, identical on every page
======================================================================== -->
<!-- ========================================================================
NAV, identical on every page · CANONICAL.
If you change this block, run the chrome sweep so every subpage
stays in sync. Driven by data-menu/data-pane attributes, chrome.css
and chrome-mobilenav.js wire the dropdown overlay.
======================================================================== -->
<link rel="stylesheet" href="homepage-chrome.css"/>
<div class="topbar-split" role="region" aria-label="Top announcements">
<a class="live-strip live-strip-cta topbar-calc" href="cur-calculator.html" aria-label="Open the savings calculator">
<span class="ls-cta-anchor">
<span class="ls-live"><span class="ls-livedot"></span>Calculator</span>
</span>
<span class="ls-cta-msg">See how much your cloud is wasting right now.</span>
<span class="ls-cta-arrow">Try it <span class="ls-arrow">→</span></span>
</a>
<div class="topbar-news" aria-label="Live announcements">
<div class="topbar-news-track">
<span class="tn-item"><span class="tn-tag tn-up">ZN</span><span class="tn-text">ZopNight v1.5 · Live Kubernetes cluster state</span><span class="tn-delta tn-up">NEW</span></span>
<span class="tn-item"><span class="tn-tag tn-up">FIN</span><span class="tn-text">$57K/mo recovered on Azure · Fortune 1000 estate</span><span class="tn-delta tn-up">▲ 31.4%</span></span>
<span class="tn-item"><span class="tn-tag">ZD</span><span class="tn-text">ZopDay · Push-to-deploy across AWS, GCP, Azure</span><span class="tn-delta">LIVE</span></span>
<span class="tn-item"><span class="tn-tag tn-up">SCH</span><span class="tn-text">Smart Scheduling captures 73% of non-prod cycle</span><span class="tn-delta tn-up">▲ 73%</span></span>
<span class="tn-item"><span class="tn-tag">EVT</span><span class="tn-text">Event Readiness ships per-scope verdicts</span><span class="tn-delta">UPDATED</span></span>
<span class="tn-item"><span class="tn-tag tn-up">AR</span><span class="tn-text">Auto-Remediation · 20 certified rules · DBs untouched</span><span class="tn-delta tn-up">▲ 4 rules</span></span>
<span class="tn-item"><span class="tn-tag">CDCR</span><span class="tn-text">Continuous Detection, Continuous Remediation · on every cloud</span><span class="tn-delta">SHIPPED</span></span>
<!-- Duplicate the sequence so the marquee loops seamlessly -->
<span class="tn-item" aria-hidden="true"><span class="tn-tag tn-up">ZN</span><span class="tn-text">ZopNight v1.5 · Live Kubernetes cluster state</span><span class="tn-delta tn-up">NEW</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag tn-up">FIN</span><span class="tn-text">$57K/mo recovered on Azure · Fortune 1000 estate</span><span class="tn-delta tn-up">▲ 31.4%</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag">ZD</span><span class="tn-text">ZopDay · Push-to-deploy across AWS, GCP, Azure</span><span class="tn-delta">LIVE</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag tn-up">SCH</span><span class="tn-text">Smart Scheduling captures 73% of non-prod cycle</span><span class="tn-delta tn-up">▲ 73%</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag">EVT</span><span class="tn-text">Event Readiness ships per-scope verdicts</span><span class="tn-delta">UPDATED</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag tn-up">AR</span><span class="tn-text">Auto-Remediation · 20 certified rules · DBs untouched</span><span class="tn-delta tn-up">▲ 4 rules</span></span>
<span class="tn-item" aria-hidden="true"><span class="tn-tag">CDCR</span><span class="tn-text">Continuous Detection, Continuous Remediation · on every cloud</span><span class="tn-delta">SHIPPED</span></span>
</div>
</div>
</div>
<style id="topbar-split-css">
/* Split topbar · the prior `.live-strip-cta` becomes the LEFT half;
the new `.topbar-news` ticker occupies the RIGHT half. Shared
30px bar height; both halves use the same dark base so the strip
reads as one continuous element. */
.topbar-split{
display: grid;
grid-template-columns: minmax(260px, auto) 1fr;
align-items: stretch;
background: #0a0a0d;
color: #F0EBDB;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Left · keep the existing calc-CTA chrome but cap its width so the
ticker on the right has the lion's share of the bar. The base
`.live-strip-cta` rules in chrome.css still apply. */
.topbar-split .topbar-calc{
background: #0a0a0d;
justify-content: flex-start;
padding: 0 14px 0 16px;
border-right: 1px solid rgba(255,255,255,.08);
}
/* Right · scrolling announcements track. Stock-exchange style:
mono tags, brand-orange "up" deltas, continuous left-drift. */
.topbar-news{
position: relative;
overflow: hidden;
height: 30px;
display: flex;
align-items: center;
}
.topbar-news::before,
.topbar-news::after{
content: '';
position: absolute; top: 0; bottom: 0; width: 28px;
pointer-events: none; z-index: 2;
}
.topbar-news::before{
left: 0;
background: linear-gradient(to right, #0a0a0d 0%, rgba(10,10,13,0) 100%);
}
.topbar-news::after{
right: 0;
background: linear-gradient(to left, #0a0a0d 0%, rgba(10,10,13,0) 100%);
}
.topbar-news-track{
display: inline-flex; align-items: center;
gap: 32px;
white-space: nowrap;
will-change: transform;
animation: topbar-news-roll 60s linear infinite;
}
.topbar-news:hover .topbar-news-track{ animation-play-state: paused; }
@keyframes topbar-news-roll{
from{ transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.topbar-news-track{ animation: none; }
}
/* Individual ticker items · ticker tag chip + headline + delta */
.tn-item{
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: 11.5px;
letter-spacing: .02em;
color: #C7C7CD;
}
.tn-tag{
font-family: var(--mono);
font-size: 9.5px; font-weight: 700;
letter-spacing: .14em;
padding: 2px 6px;
border: 1px solid rgba(255,255,255,.18);
color: #A8A8AF;
}
.tn-tag.tn-up{
color: var(--zop-orange);
border-color: rgba(245,133,73,.4);
}
.tn-text{ color: #E8E8EA; }
.tn-delta{
font-family: var(--mono);
font-size: 10px; font-weight: 700;
letter-spacing: .08em;
color: #A8A8AF;
}
.tn-delta.tn-up{ color: var(--zop-orange); }
@media (max-width: 760px){
/* Phone · drop the ticker so the calc CTA gets the full bar */
.topbar-split{ grid-template-columns: 1fr; }
.topbar-news{ display: none; }
.topbar-split .topbar-calc{
justify-content: center;
border-right: 0;
}
}
</style>
<!-- ============================================================
NAVBAR
============================================================ -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="logo-lockup sm" aria-label="ZopDev">
<svg viewBox="0 0 715 276"><use href="#logo-zopdev"/></svg>
</a>
<div class="nav-links" id="nav-links">
<div class="nav-item" data-menu="product">
<a>Product <span class="nav-caret" aria-hidden="true"></span></a>
</div>
<div class="nav-item" data-menu="resources">
<a>Resources <span class="nav-caret" aria-hidden="true"></span></a>
</div>
<a href="pricing.html">Pricing</a>
<div class="nav-item" data-menu="company">
<a>Company <span class="nav-caret" aria-hidden="true"></span></a>
</div>
<a href="community.html">Community</a>
</div>
<!-- Shared dropdown overlay. Content crossfades, panel slides left/right -->
<div class="nav-overlay" id="nav-overlay" aria-hidden="true">
<div class="nav-panes" id="nav-panes">
<!-- ═══════ PRODUCT · 2 hero bentos + ZopCloud strip ═══════ -->
<div class="nav-pane" data-pane="product">
<div class="np-bento np-bento--products-v2">
<!-- ZopNight · large hero with sidebar/topbar/stat dashboard peek
sliding up on hover. Brand-blue accents. -->
<a class="np-prod-card np-prod-card--night" data-product="zopnight" href="zopnight.html">
<span class="np-prod-badge live">live</span>
<div class="np-prod-head">
<svg class="np-prod-mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><use href="#mark-zopnight"/></svg>
<h3 class="np-prod-title">ZopNight</h3>
</div>
<p class="np-prod-desc">Autonomous cloud governance + FinOps. AWS, Azure, GCP.</p>
<span class="np-prod-cta">Explore ZopNight <span class="np-prod-arrow" aria-hidden="true">→</span></span>
<!-- Dashboard peek · mini-mock of the ZopNight savings
console (sidebar + monthly-savings hero number + stat
tiles + breakdown chart). Hidden by translateY(70%);
rises on hover so the user glimpses the real dashboard. -->
<span class="np-prod-peek np-prod-peek--night" aria-hidden="true">
<span class="np-peek-side">
<span class="np-peek-brand">
<span class="np-peek-brand-mark"></span>
<span class="np-peek-brand-name">Zop<b>Night</b></span>
</span>
<span class="np-peek-sec">Cloud Estate</span>
<span class="np-peek-nav">Dashboard</span>
<span class="np-peek-nav">Inventory</span>
<span class="np-peek-sec">Optimization</span>
<span class="np-peek-nav np-peek-nav--on">Recommendations</span>
<span class="np-peek-nav">Schedules</span>
<span class="np-peek-nav">Auto-Remediate</span>
</span>
<span class="np-peek-main">
<span class="np-peek-top">
<span class="np-peek-top-title">Monthly Savings</span>
<span class="np-peek-pill">live</span>
</span>
<span class="np-peek-hero">
<span class="np-peek-hero-num">$42,180</span>
<span class="np-peek-hero-delta">▲ 12.4%</span>
</span>
<span class="np-peek-stats">
<span class="np-peek-stat"><span class="np-peek-stat-k">Idle</span><span class="np-peek-stat-v">218</span></span>
<span class="np-peek-stat"><span class="np-peek-stat-k">Scheduled</span><span class="np-peek-stat-v">73%</span></span>
<span class="np-peek-stat"><span class="np-peek-stat-k">Verified</span><span class="np-peek-stat-v">$31k</span></span>
</span>
<span class="np-peek-chart"></span>
</span>
</span>
</a>
<!-- ZopDay · large hero with the Deployment Spaces console
peek (sidebar + page-head + filter row + provider table).
Brand-orange accents. -->
<a class="np-prod-card np-prod-card--day" data-product="zopday" href="zopday.html">
<span class="np-prod-badge live">live</span>
<div class="np-prod-head">
<svg class="np-prod-mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><use href="#mark-zopday"/></svg>
<h3 class="np-prod-title">ZopDay</h3>
</div>
<p class="np-prod-desc">Internal Developer Platform across AWS, GCP, Azure.</p>
<span class="np-prod-cta">Explore ZopDay <span class="np-prod-arrow" aria-hidden="true">→</span></span>
<span class="np-prod-peek np-prod-peek--day" aria-hidden="true">
<span class="np-peek-side">
<span class="np-peek-brand">
<span class="np-peek-brand-mark"></span>
<span class="np-peek-brand-name">Zop<b>Day</b></span>
</span>
<span class="np-peek-sec">Infrastructure</span>
<span class="np-peek-nav">Provision</span>
<span class="np-peek-nav">Datastore</span>
<span class="np-peek-nav">Cluster</span>
<span class="np-peek-sec">Deployment</span>
<span class="np-peek-nav np-peek-nav--on">Spaces</span>
<span class="np-peek-nav">Projects</span>
</span>
<span class="np-peek-main">
<span class="np-peek-top">
<span class="np-peek-top-title">Deployment Spaces</span>
<span class="np-peek-pill">5 healthy</span>
</span>
<span class="np-peek-filters">
<span class="np-peek-chip np-peek-chip--on">All</span>
<span class="np-peek-chip">Healthy</span>
<span class="np-peek-chip">Issues</span>
<span class="np-peek-chip">Pending</span>
</span>
<span class="np-peek-rows">
<span class="np-peek-row"><span class="np-peek-prov np-peek-prov--gcp">G</span><span class="np-peek-row-name">us-prod</span><span class="np-peek-row-dot"></span><span class="np-peek-row-tag">GCP</span></span>
<span class="np-peek-row"><span class="np-peek-prov np-peek-prov--aws">aws</span><span class="np-peek-row-name">eu-prod</span><span class="np-peek-row-dot"></span><span class="np-peek-row-tag">AWS</span></span>
<span class="np-peek-row"><span class="np-peek-prov np-peek-prov--aws">aws</span><span class="np-peek-row-name">eu-staging</span><span class="np-peek-row-dot"></span><span class="np-peek-row-tag">AWS</span></span>
<span class="np-peek-row"><span class="np-peek-prov np-peek-prov--az">A</span><span class="np-peek-row-name">apac-prod</span><span class="np-peek-row-dot"></span><span class="np-peek-row-tag">AZ</span></span>
</span>
</span>
</span>
</a>
<!-- ZopCloud · spans full width below as the "coming soon" strip -->
<a class="np-prod-strip" href="zopcloud.html">
<svg class="np-prod-mark np-prod-mark--cloud" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><use href="#mark-zopcloud"/></svg>
<span class="np-prod-strip-body">
<h3 class="np-prod-strip-title">ZopCloud</h3>
<p class="np-prod-strip-desc">Multi-cloud resource graph and topology view.</p>
</span>
<span class="np-prod-badge soon">coming soon</span>
</a>
</div>
<div class="np-promo-row">
<span><strong>Live in Claude & Codex</strong> · run ZopNight from your MCP client</span>
<a href="developers.html">Try MCP →</a>
</div>
</div>
<!-- ═══════ RESOURCES · Latest hero + compact icon list ═══════ -->
<div class="nav-pane" data-pane="resources">
<div class="np-bento np-bento--resources-v2">
<!-- Featured · "Latest from the blog" hero card. Text sits
on the top-left (eyebrow + title + meta + CTA); the
cover image is anchored at the bottom and is only
partly visible at rest (translateY 55%). On card hover
the image slides up so the cover reads clearly. Same
peek pattern as the product dropdown ZopNight card. -->
<a class="np-res-hero" href="blog.html">
<span class="np-res-hero-body">
<span class="np-res-hero-eyebrow">
<span class="np-res-hero-dot" aria-hidden="true"></span>
Latest from the blog
</span>
<h3 class="np-res-hero-title">CDCR: making cost continuous, not quarterly.</h3>
<span class="np-res-hero-meta">8 min read · Engineering</span>
<span class="np-res-hero-cta">Read post <span class="np-res-hero-arrow" aria-hidden="true">→</span></span>
</span>
<span class="np-res-hero-peek" aria-hidden="true">
<img src="event-cover-1.svg" alt="" loading="lazy" decoding="async">
</span>
</a>
<!-- Compact list · 8 links, icon + title only, no descriptions -->
<div class="np-res-list">
<a class="np-res-row" href="blog.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5"/><path d="M7 8h6M7 11h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg>
</span>
Blog
</a>
<a class="np-res-row" href="free-ebooks.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M3 4h7v13H3zM10 4h7v13h-7z" stroke="currentColor" stroke-width="1.5"/><path d="M10 4v13" stroke="currentColor" stroke-width="1.5"/></svg>
</span>
Ebooks
</a>
<a class="np-res-row" href="customers.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M3 16c0-3 3-5 7-5s7 2 7 5" stroke="currentColor" stroke-width="1.5"/><circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/></svg>
</span>
Case studies
</a>
<a class="np-res-row" href="solutions.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><rect x="3" y="3" width="6" height="6" stroke="currentColor" stroke-width="1.5"/><rect x="11" y="3" width="6" height="6" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="11" width="6" height="6" stroke="currentColor" stroke-width="1.5"/><rect x="11" y="11" width="6" height="6" stroke="currentColor" stroke-width="1.5"/></svg>
</span>
Use cases
</a>
<a class="np-res-row" href="product-documentation.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5"/><path d="M8 7l4 3-4 3z" fill="currentColor"/></svg>
</span>
Product docs
</a>
<a class="np-res-row" href="kubernetes-guide.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M10 2l7 4v8l-7 4-7-4V6z" stroke="currentColor" stroke-width="1.5"/><circle cx="10" cy="10" r="2" stroke="currentColor" stroke-width="1.3"/></svg>
</span>
Kubernetes guide
</a>
<a class="np-res-row" href="changelog.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v4l2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg>
</span>
Changelog
</a>
<a class="np-res-row" href="developer-documentation.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M7 6L3 10l4 4M13 6l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/></svg>
</span>
Developer docs
</a>
<a class="np-res-row" href="assets.html">
<span class="np-res-row-icon">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M3 4h11v12H3z" stroke="currentColor" stroke-width="1.5"/><path d="M14 7h3v9h-3" stroke="currentColor" stroke-width="1.5"/><path d="M6 8h5M6 11h5M6 14h3" stroke="currentColor" stroke-width="1.3" stroke-linecap="square"/></svg>
</span>
Media kit
</a>
</div>
</div>
</div>
<!-- ═══════ COMPANY · About hero + Careers / Contact stack ═══════ -->
<div class="nav-pane" data-pane="company">
<div class="np-bento np-bento--company-v2">
<!-- About · larger hero card with a stylized company peek
(wordmark + founder avatars + location strip) that
slides up on hover, monochrome at rest. -->
<a class="np-comp-card" href="about.html">
<span class="np-comp-eyebrow">
<svg class="np-comp-eyebrow-mark" viewBox="0 0 715 276" aria-hidden="true" focusable="false"><use href="#logo-zopdev"/></svg>
<span>About ZopDev</span>
</span>
<h3 class="np-comp-title">Founded 2024.</h3>
<p class="np-comp-desc">The autopilot for multi-cloud cost.</p>
<span class="np-comp-cta">Meet the team <span class="np-comp-arrow" aria-hidden="true">→</span></span>
<!-- Photo stack · 3 company photos overlapping with a
subtle offset + rotation. On card hover they fan out
horizontally so all three are visible at once. -->
<span class="np-comp-stack" aria-hidden="true">
<img class="np-comp-stack-img np-comp-stack-img--3" src="office-2-600w.jpg" alt="" loading="lazy" decoding="async">
<img class="np-comp-stack-img np-comp-stack-img--2" src="founders-2-800w.jpg" alt="" loading="lazy" decoding="async">
<img class="np-comp-stack-img np-comp-stack-img--1" src="founders-1-800w.jpg" alt="" loading="lazy" decoding="async">
</span>
</a>
<!-- Media kit · compact cell, takes the row-1 slot that
was previously Careers. Direct path to the press
assets page. -->
<a class="np-comp-cell" href="assets.html">
<div class="np-cell-icon">
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 4h11v12H3z"/><path d="M14 7h3v9h-3"/><path d="M6 8h5M6 11h5M6 14h3" stroke-width="1.3" stroke-linecap="square"/></svg>
</div>
<h3 class="np-cell-title">Media kit</h3>
<p class="np-cell-desc">Logos · brand assets · press</p>
</a>
<!-- Contact · compact cell -->
<a class="np-comp-cell" href="contact.html">
<div class="np-cell-icon">
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 5h14v10H3z"/><path d="M3 5l7 5 7-5"/></svg>
</div>
<h3 class="np-cell-title">Contact</h3>
<p class="np-cell-desc">Talk to sales · founders reply within 24h</p>
</a>
</div>
</div>
</div>
</div>
<div class="nav-cta">
<div class="nav-pg-wrap">
<a class="chip-playground" href="playground.html" aria-haspopup="menu" aria-expanded="false">
<span>Playground</span>
<span class="nav-caret nav-pg-caret" aria-hidden="true"></span>
</a>
<div class="nav-pg-menu" role="menu" aria-label="Playground options">
<a class="nav-pg-card nav-pg-card--night" href="playground.html#zopnight" role="menuitem">
<span class="nav-pg-card-head">
<span class="nav-pg-mark">
<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><use href="#mark-zopnight"/></svg>
</span>
<span class="nav-pg-body">
<span class="nav-pg-name">ZopNight playground</span>
<span class="nav-pg-desc">Cost loop · idle, schedules, anomalies</span>
</span>
<span class="nav-pg-arrow" aria-hidden="true">→</span>
</span>
<span class="nav-pg-peek nav-pg-peek--night" aria-hidden="true">
<span class="nav-pg-peek-top"><span class="nav-pg-peek-dot"></span>ZopNight · cost console</span>
<span class="nav-pg-peek-body">
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Idle</span><span class="nav-pg-peek-val nav-pg-peek-val--accent">$1.2k</span></span>
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Save</span><span class="nav-pg-peek-val">38%</span></span>
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Anom</span><span class="nav-pg-peek-val">4</span></span>
</span>
</span>
</a>
<a class="nav-pg-card nav-pg-card--day" href="playground.html#zopday" role="menuitem">
<span class="nav-pg-card-head">
<span class="nav-pg-mark">
<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><use href="#mark-zopday"/></svg>
</span>
<span class="nav-pg-body">
<span class="nav-pg-name">ZopDay playground</span>
<span class="nav-pg-desc">Deploy loop · clusters, datastores, push</span>
</span>
<span class="nav-pg-arrow" aria-hidden="true">→</span>
</span>
<span class="nav-pg-peek nav-pg-peek--day" aria-hidden="true">
<span class="nav-pg-peek-top"><span class="nav-pg-peek-dot"></span>ZopDay · deploy console</span>
<span class="nav-pg-peek-body">
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Push</span><span class="nav-pg-peek-val nav-pg-peek-val--accent">12s</span></span>
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Env</span><span class="nav-pg-peek-val">3</span></span>
<span class="nav-pg-peek-tile"><span class="nav-pg-peek-label">Pass</span><span class="nav-pg-peek-val">99%</span></span>
</span>
</span>
</a>