1/* Reset */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10:root {
11 --bg: #09090b;
12 --bg-subtle: #0f0f12;
13 --bg-card: #131316;
14 --bg-elevated: #1a1a1f;
15 --bg-hover: #222228;
16
17 --text: #fafafa;
18 --text-secondary: #a1a1aa;
19 --text-muted: #52525b;
20
21 --green: #22c55e;
22 --green-dim: #16a34a;
23 --green-glow: rgba(34, 197, 94, 0.15);
24 --teal: #14b8a6;
25
26 --border: rgba(255, 255, 255, 0.06);
27 --border-hover: rgba(255, 255, 255, 0.12);
28
29 --radius: 12px;
30 --radius-sm: 8px;
31
32 --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
33 --mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
34}
35
36html {
37 scroll-behavior: smooth;
38}
39
40body {
41 font-family: var(--font);
42 background: var(--bg);
43 color: var(--text);
44 line-height: 1.6;
45 overflow-x: hidden;
46 -webkit-font-smoothing: antialiased;
47}
48
49/* Subtle noise texture */
50.noise {
51 position: fixed;
52 inset: 0;
53 z-index: -1;
54 opacity: 0.03;
55 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
56 pointer-events: none;
57}
58
59/* Ambient glow orbs */
60.gradient-orb {
61 position: fixed;
62 border-radius: 50%;
63 filter: blur(120px);
64 pointer-events: none;
65 z-index: -1;
66}
67
68.orb-1 {
69 width: 600px;
70 height: 600px;
71 top: -200px;
72 left: 50%;
73 transform: translateX(-50%);
74 background: radial-gradient(circle, var(--green-glow), transparent 70%);
75}
76
77.orb-2 {
78 width: 400px;
79 height: 400px;
80 bottom: -100px;
81 right: -100px;
82 background: radial-gradient(circle, rgba(20, 184, 166, 0.08), transparent 70%);
83}
84
85/* Header */
86header {
87 position: fixed;
88 top: 0;
89 left: 0;
90 right: 0;
91 z-index: 100;
92 background: rgba(9, 9, 11, 0.7);
93 backdrop-filter: blur(24px);
94 -webkit-backdrop-filter: blur(24px);
95 border-bottom: 1px solid var(--border);
96}
97
98nav {
99 max-width: 1100px;
100 margin: 0 auto;
101 padding: 0.875rem 1.5rem;
102 display: flex;
103 justify-content: space-between;
104 align-items: center;
105}
106
107.logo {
108 display: flex;
109 align-items: center;
110 gap: 0.5rem;
111 text-decoration: none;
112 font-weight: 700;
113 font-size: 1.15rem;
114 color: var(--text);
115 transition: opacity 0.2s;
116}
117
118.logo:hover {
119 opacity: 0.8;
120}
121
122.nav-links {
123 display: flex;
124 align-items: center;
125 gap: 1.75rem;
126}
127
128.nav-links a {
129 color: var(--text-secondary);
130 text-decoration: none;
131 font-size: 0.875rem;
132 font-weight: 500;
133 transition: color 0.2s;
134}
135
136.nav-links a:hover {
137 color: var(--text);
138}
139
140.nav-btn {
141 display: inline-flex !important;
142 align-items: center;
143 gap: 0.4rem;
144 padding: 0.45rem 0.9rem;
145 background: var(--bg-elevated);
146 border: 1px solid var(--border-hover);
147 border-radius: var(--radius-sm);
148 transition: all 0.2s;
149}
150
151.nav-btn:hover {
152 background: var(--bg-hover);
153 border-color: rgba(255, 255, 255, 0.18);
154}
155
156/* Main */
157main {
158 max-width: 1100px;
159 margin: 0 auto;
160 padding: 0 1.5rem;
161}
162
163/* Hero */
164.hero {
165 min-height: 100vh;
166 display: flex;
167 flex-direction: column;
168 align-items: center;
169 text-align: center;
170 padding-top: 8rem;
171 padding-bottom: 4rem;
172}
173
174.hero-badge {
175 display: inline-flex;
176 align-items: center;
177 gap: 0.5rem;
178 padding: 0.4rem 1rem;
179 font-size: 0.8rem;
180 font-weight: 500;
181 color: var(--green);
182 background: rgba(34, 197, 94, 0.08);
183 border: 1px solid rgba(34, 197, 94, 0.2);
184 border-radius: 100px;
185 margin-bottom: 2rem;
186 animation: fadeIn 0.5s ease-out 0.1s both;
187}
188
189.hero-badge-dot {
190 width: 6px;
191 height: 6px;
192 background: var(--green);
193 border-radius: 50%;
194 animation: pulse 2s ease-in-out infinite;
195}
196
197@keyframes pulse {
198 0%, 100% { opacity: 1; }
199 50% { opacity: 0.4; }
200}
201
202.hero-title {
203 font-size: clamp(2.75rem, 7vw, 4.5rem);
204 font-weight: 800;
205 line-height: 1.1;
206 letter-spacing: -0.03em;
207 margin-bottom: 1.5rem;
208 animation: fadeIn 0.5s ease-out 0.2s both;
209}
210
211.gradient-text {
212 background: linear-gradient(135deg, var(--green), var(--teal));
213 -webkit-background-clip: text;
214 -webkit-text-fill-color: transparent;
215 background-clip: text;
216}
217
218.text-muted {
219 color: var(--text-muted);
220}
221
222.hero-subtitle {
223 font-size: 1.15rem;
224 color: var(--text-secondary);
225 max-width: 540px;
226 line-height: 1.75;
227 margin-bottom: 2.5rem;
228 animation: fadeIn 0.5s ease-out 0.3s both;
229}
230
231.hero-actions {
232 display: flex;
233 flex-wrap: wrap;
234 justify-content: center;
235 gap: 0.75rem;
236 margin-bottom: 4rem;
237 animation: fadeIn 0.5s ease-out 0.4s both;
238}
239
240/* Buttons */
241.btn {
242 display: inline-flex;
243 align-items: center;
244 gap: 0.5rem;
245 padding: 0.7rem 1.4rem;
246 font-size: 0.9rem;
247 font-weight: 600;
248 font-family: var(--font);
249 text-decoration: none;
250 border-radius: var(--radius-sm);
251 transition: all 0.2s;
252 cursor: pointer;
253 border: none;
254 white-space: nowrap;
255}
256
257.btn-lg {
258 padding: 0.85rem 1.75rem;
259 font-size: 0.95rem;
260}
261
262.btn-primary {
263 background: var(--green);
264 color: #000;
265}
266
267.btn-primary:hover {
268 background: var(--green-dim);
269 transform: translateY(-1px);
270 box-shadow: 0 0 40px var(--green-glow);
271}
272
273.btn-ghost {
274 background: transparent;
275 color: var(--text-secondary);
276 border: 1px solid var(--border-hover);
277}
278
279.btn-ghost:hover {
280 color: var(--text);
281 background: var(--bg-elevated);
282 border-color: rgba(255, 255, 255, 0.18);
283}
284
285/* Hero Terminal */
286.hero-terminal {
287 width: 100%;
288 max-width: 680px;
289 border-radius: var(--radius);
290 border: 1px solid var(--border-hover);
291 background: var(--bg-subtle);
292 overflow: hidden;
293 box-shadow:
294 0 0 0 1px rgba(255, 255, 255, 0.03),
295 0 20px 50px rgba(0, 0, 0, 0.5),
296 0 0 80px var(--green-glow);
297 animation: fadeUp 0.6s ease-out 0.5s both;
298}
299
300.terminal-chrome {
301 display: flex;
302 align-items: center;
303 justify-content: space-between;
304 padding: 0.7rem 1rem;
305 background: var(--bg-card);
306 border-bottom: 1px solid var(--border);
307}
308
309.terminal-dots {
310 display: flex;
311 gap: 6px;
312}
313
314.terminal-dots span {
315 width: 10px;
316 height: 10px;
317 border-radius: 50%;
318 background: var(--bg-hover);
319}
320
321.terminal-dots span:nth-child(1) { background: #ff5f57; }
322.terminal-dots span:nth-child(2) { background: #ffbd2e; }
323.terminal-dots span:nth-child(3) { background: #28ca41; }
324
325.terminal-title {
326 font-family: var(--mono);
327 font-size: 0.75rem;
328 color: var(--text-muted);
329}
330
331.terminal-body {
332 padding: 1.25rem 1.5rem;
333 font-family: var(--mono);
334 font-size: 0.85rem;
335}
336
337.terminal-line {
338 display: flex;
339 gap: 0.5rem;
340 align-items: center;
341 margin-bottom: 1rem;
342}
343
344.t-prompt { color: var(--green); }
345.t-cmd { color: var(--text-muted); }
346.t-text { color: var(--text); }
347
348.cursor {
349 color: var(--green);
350 animation: blink 1s step-end infinite;
351}
352
353@keyframes blink {
354 0%, 100% { opacity: 1; }
355 50% { opacity: 0; }
356}
357
358.terminal-content {
359 opacity: 1;
360}
361
362.ascii-logo {
363 color: var(--green);
364 font-size: 0.7rem;
365 line-height: 1.2;
366 margin: 0 0 1rem 0;
367 white-space: pre;
368}
369
370.tui-prompt {
371 color: var(--text-secondary);
372 font-size: 0.85rem;
373 margin-bottom: 1rem;
374}
375
376.tui-menu {
377 margin-bottom: 1.25rem;
378 padding-left: 0.25rem;
379}
380
381.tui-item {
382 line-height: 1.9;
383 font-size: 0.85rem;
384 color: var(--text-secondary);
385}
386
387.tui-item.active {
388 color: var(--green);
389}
390
391.tui-arrow {
392 color: var(--green);
393 font-weight: 700;
394 margin-right: 0.25rem;
395}
396
397.tui-space {
398 display: inline-block;
399 width: 0.85rem;
400 margin-right: 0.25rem;
401}
402
403.tui-hint {
404 color: var(--text-muted);
405 font-size: 0.75rem;
406}
407
408.tui-key {
409 color: var(--text-secondary);
410}
411
412/* Logos strip */
413.logos-strip {
414 padding: 3rem 0;
415 border-top: 1px solid var(--border);
416 border-bottom: 1px solid var(--border);
417 margin-bottom: 2rem;
418}
419
420.strip-items {
421 display: flex;
422 justify-content: center;
423 align-items: center;
424 gap: 2rem;
425 flex-wrap: wrap;
426}
427
428.strip-item {
429 display: flex;
430 align-items: center;
431 gap: 0.5rem;
432 font-size: 0.875rem;
433 font-weight: 500;
434 color: var(--text-secondary);
435}
436
437.strip-item svg {
438 color: var(--text-muted);
439}
440
441.strip-tag {
442 display: inline-flex;
443 align-items: center;
444 justify-content: center;
445 padding: 0.15rem 0.5rem;
446 font-size: 0.7rem;
447 font-weight: 700;
448 font-family: var(--mono);
449 color: var(--text-muted);
450 border: 1px solid var(--border-hover);
451 border-radius: 4px;
452}
453
454.strip-divider {
455 width: 1px;
456 height: 20px;
457 background: var(--border-hover);
458}
459
460/* Sections */
461.section-header {
462 text-align: center;
463 margin-bottom: 3.5rem;
464}
465
466.section-label {
467 display: inline-block;
468 font-size: 0.8rem;
469 font-weight: 600;
470 text-transform: uppercase;
471 letter-spacing: 0.08em;
472 color: var(--green);
473 margin-bottom: 0.75rem;
474}
475
476.section-title {
477 font-size: clamp(1.75rem, 4vw, 2.5rem);
478 font-weight: 700;
479 line-height: 1.2;
480 letter-spacing: -0.02em;
481}
482
483/* Features */
484.features {
485 padding: 5rem 0;
486}
487
488.features-grid {
489 display: grid;
490 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
491 gap: 1rem;
492}
493
494.feature-card {
495 background: var(--bg-card);
496 border: 1px solid var(--border);
497 border-radius: var(--radius);
498 padding: 1.75rem;
499 transition: all 0.3s ease;
500 opacity: 0;
501 transform: translateY(12px);
502}
503
504.feature-card.visible {
505 opacity: 1;
506 transform: translateY(0);
507}
508
509.feature-card:hover {
510 border-color: var(--border-hover);
511 background: var(--bg-elevated);
512}
513
514.feature-highlight {
515 grid-column: 1 / -1;
516 display: grid;
517 grid-template-columns: auto 1fr;
518 grid-template-rows: auto auto;
519 column-gap: 1.25rem;
520 background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(20, 184, 166, 0.02));
521 border-color: rgba(34, 197, 94, 0.15);
522}
523
524.feature-highlight .feature-icon-wrap {
525 grid-row: 1 / 3;
526}
527
528.feature-highlight:hover {
529 border-color: rgba(34, 197, 94, 0.25);
530}
531
532.feature-icon-wrap {
533 display: flex;
534 align-items: center;
535 justify-content: center;
536 width: 44px;
537 height: 44px;
538 background: rgba(34, 197, 94, 0.08);
539 border: 1px solid rgba(34, 197, 94, 0.15);
540 border-radius: 10px;
541 color: var(--green);
542 margin-bottom: 1rem;
543 flex-shrink: 0;
544}
545
546.feature-highlight .feature-icon-wrap {
547 margin-bottom: 0;
548}
549
550.feature-card h3 {
551 font-size: 1.05rem;
552 font-weight: 600;
553 margin-bottom: 0.5rem;
554 color: var(--text);
555}
556
557.feature-card p {
558 color: var(--text-secondary);
559 font-size: 0.9rem;
560 line-height: 1.65;
561}
562
563/* Installation */
564.installation {
565 padding: 5rem 0;
566}
567
568.install-grid {
569 display: grid;
570 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
571 gap: 1.25rem;
572 max-width: 820px;
573 margin: 0 auto;
574}
575
576.install-card {
577 background: var(--bg-card);
578 border: 1px solid var(--border);
579 border-radius: var(--radius);
580 padding: 1.75rem;
581 opacity: 0;
582 transform: translateY(12px);
583 transition: all 0.3s ease;
584}
585
586.install-card.visible {
587 opacity: 1;
588 transform: translateY(0);
589}
590
591.primary-install {
592 border-color: rgba(34, 197, 94, 0.2);
593 background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), transparent);
594}
595
596.install-card-header {
597 display: flex;
598 align-items: center;
599 gap: 0.75rem;
600 margin-bottom: 1.25rem;
601}
602
603.install-card h3 {
604 font-size: 1.1rem;
605 font-weight: 600;
606 margin-bottom: 1.25rem;
607}
608
609.install-card-header h3 {
610 margin-bottom: 0;
611}
612
613.recommended-badge {
614 font-size: 0.7rem;
615 font-weight: 600;
616 text-transform: uppercase;
617 letter-spacing: 0.05em;
618 padding: 0.2rem 0.6rem;
619 color: var(--green);
620 background: rgba(34, 197, 94, 0.1);
621 border: 1px solid rgba(34, 197, 94, 0.2);
622 border-radius: 100px;
623}
624
625.code-block {
626 background: var(--bg);
627 border: 1px solid var(--border);
628 border-radius: var(--radius-sm);
629 overflow: hidden;
630}
631
632.code-header {
633 display: flex;
634 justify-content: space-between;
635 align-items: center;
636 padding: 0.6rem 0.9rem;
637 border-bottom: 1px solid var(--border);
638 font-size: 0.75rem;
639 color: var(--text-muted);
640}
641
642.copy-btn {
643 display: inline-flex;
644 align-items: center;
645 gap: 0.35rem;
646 padding: 0.25rem 0.6rem;
647 font-size: 0.72rem;
648 font-weight: 500;
649 font-family: var(--font);
650 color: var(--text-muted);
651 background: transparent;
652 border: 1px solid var(--border);
653 border-radius: 6px;
654 cursor: pointer;
655 transition: all 0.15s;
656}
657
658.copy-btn:hover {
659 color: var(--text);
660 background: var(--bg-elevated);
661 border-color: var(--border-hover);
662}
663
664.copy-btn.copied {
665 color: var(--green);
666 border-color: rgba(34, 197, 94, 0.3);
667}
668
669.code-body {
670 padding: 0.85rem 1rem;
671 font-family: var(--mono);
672 font-size: 0.82rem;
673}
674
675.code-line {
676 display: flex;
677 gap: 0.6rem;
678 line-height: 2;
679}
680
681.line-prompt {
682 color: var(--text-muted);
683 user-select: none;
684}
685
686.code-text {
687 color: var(--text);
688}
689
690.install-docs-hint {
691 text-align: center;
692 margin-top: 2rem;
693 font-size: 0.9rem;
694 color: var(--text-muted);
695}
696
697.install-docs-hint a {
698 color: var(--green);
699 text-decoration: none;
700}
701
702.install-docs-hint a:hover {
703 text-decoration: underline;
704}
705
706/* CTA Section */
707.cta-section {
708 padding: 5rem 0;
709}
710
711.cta-card {
712 text-align: center;
713 padding: 4rem 2rem;
714 background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(20, 184, 166, 0.03));
715 border: 1px solid rgba(34, 197, 94, 0.12);
716 border-radius: 20px;
717 opacity: 0;
718 transform: translateY(12px);
719 transition: all 0.3s ease;
720}
721
722.cta-card.visible {
723 opacity: 1;
724 transform: translateY(0);
725}
726
727.cta-card h2 {
728 font-size: clamp(1.5rem, 3.5vw, 2.25rem);
729 font-weight: 700;
730 line-height: 1.2;
731 letter-spacing: -0.02em;
732 margin-bottom: 1rem;
733}
734
735.cta-card p {
736 color: var(--text-secondary);
737 font-size: 1.05rem;
738 max-width: 520px;
739 margin: 0 auto 2rem;
740 line-height: 1.7;
741}
742
743.cta-actions {
744 display: flex;
745 justify-content: center;
746 flex-wrap: wrap;
747 gap: 0.75rem;
748 margin-bottom: 2rem;
749}
750
751.cta-links {
752 display: flex;
753 justify-content: center;
754 align-items: center;
755 gap: 0.75rem;
756 font-size: 0.85rem;
757}
758
759.cta-links a {
760 color: var(--text-muted);
761 text-decoration: none;
762 transition: color 0.2s;
763}
764
765.cta-links a:hover {
766 color: var(--text-secondary);
767}
768
769.cta-divider {
770 color: var(--text-muted);
771}
772
773/* Footer */
774footer {
775 border-top: 1px solid var(--border);
776 padding: 2rem 1.5rem;
777 margin-top: 2rem;
778}
779
780.footer-content {
781 max-width: 1100px;
782 margin: 0 auto;
783 display: flex;
784 justify-content: space-between;
785 align-items: center;
786}
787
788.footer-left {
789 display: flex;
790 align-items: center;
791 gap: 1.5rem;
792}
793
794.footer-brand {
795 display: flex;
796 align-items: center;
797 gap: 0.4rem;
798 font-weight: 600;
799 font-size: 0.95rem;
800}
801
802.footer-copyright {
803 color: var(--text-muted);
804 font-size: 0.8rem;
805}
806
807.footer-right {
808 display: flex;
809 gap: 1.5rem;
810}
811
812.footer-right a {
813 color: var(--text-muted);
814 text-decoration: none;
815 font-size: 0.85rem;
816 transition: color 0.2s;
817}
818
819.footer-right a:hover {
820 color: var(--text-secondary);
821}
822
823/* Animations */
824@keyframes fadeIn {
825 from { opacity: 0; }
826 to { opacity: 1; }
827}
828
829@keyframes fadeUp {
830 from {
831 opacity: 0;
832 transform: translateY(20px);
833 }
834 to {
835 opacity: 1;
836 transform: translateY(0);
837 }
838}
839
840/* Responsive */
841@media (max-width: 768px) {
842 nav {
843 padding: 0.75rem 1rem;
844 }
845
846 .nav-links {
847 gap: 1rem;
848 }
849
850 .nav-links a:not(.nav-btn) {
851 display: none;
852 }
853
854 .hero {
855 padding-top: 7rem;
856 }
857
858 .hero-terminal {
859 max-width: 100%;
860 }
861
862 .features-grid {
863 grid-template-columns: 1fr;
864 }
865
866 .feature-highlight {
867 grid-template-columns: 1fr;
868 grid-template-rows: auto;
869 }
870
871 .feature-highlight .feature-icon-wrap {
872 grid-row: auto;
873 margin-bottom: 1rem;
874 }
875
876 .install-grid {
877 grid-template-columns: 1fr;
878 }
879
880 .strip-divider {
881 display: none;
882 }
883
884 .strip-items {
885 gap: 1.25rem;
886 }
887
888 .footer-content {
889 flex-direction: column;
890 gap: 1rem;
891 text-align: center;
892 }
893
894 .footer-left {
895 flex-direction: column;
896 gap: 0.5rem;
897 }
898}
899
900@media (max-width: 480px) {
901 .hero-actions {
902 flex-direction: column;
903 width: 100%;
904 }
905
906 .btn {
907 width: 100%;
908 justify-content: center;
909 }
910
911 .cta-actions {
912 flex-direction: column;
913 }
914
915 .cta-card {
916 padding: 2.5rem 1.5rem;
917 }
918}