feat(site): redesign with product pages, ecosystem sections and pixel reveal

Add cli/code/office/platform/pricing pages, new home sections
(Ecosystem, FeatureGrid, Faq, WorkflowSteps, BottomCta, ProductEcosystem),
ScrollReveal and PixelTextReveal animation components, brand assets,
and expanded site-content.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/globals.css

@@ -211,11 +211,29 @@
   color: #f5f5f5;
 }
 
-/* Primary button in dark sections */
+/* Primary button: in dark mode, bg becomes light (#f5f5f5) via variable inversion,
+   so text must be dark for contrast */
 .dark .primary-button {
+  color: #0d0d0d;
   border-color: #2a2a2a;
 }
 
+.dark .primary-button:hover {
+  color: #0d0d0d;
+}
+
+.dark .primary-button .button-icon-wrapper svg {
+  color: #0d0d0d;
+}
+
+.dark .primary-button .button-icon-bg {
+  background-color: #1a1a1a;
+}
+
+.dark .primary-button .button-icon-bg-inside {
+  background-color: #2a2a2a;
+}
+
 /* Badge */
 .dark .badge {
   background-color: #1e1e1e;
@@ -235,6 +253,28 @@
   background-color: #2a2a2a;
 }
 
+/* Newsletter input in dark mode */
+.dark .input.dark-mode {
+  background-color: #1a1a1a;
+  border-color: #333;
+  color: #f5f5f5;
+}
+
+.dark .input.dark-mode:hover,
+.dark .input.dark-mode:focus {
+  background-color: #222;
+  border-color: #444;
+}
+
+.dark .input.dark-mode::placeholder {
+  color: #666;
+}
+
+.dark .form-button.inside-input.dark-mode {
+  background-color: #f5f5f5;
+  color: #0d0d0d;
+}
+
 /* Dropdown menu */
 .dark .w-dropdown-list {
   background-color: #1e1e1e;
@@ -282,3 +322,115 @@
   background-color: var(--core--colors--neutral--300);
 }
 
+/* Careers page — positions list */
+.positions-list-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.position-item {
+  display: flex !important;
+  align-items: center;
+  padding: 24px 28px;
+  text-decoration: none;
+  border-bottom: 1px solid var(--core--colors--neutral--300);
+  transition: background-color 0.2s;
+}
+
+.position-item:last-child {
+  border-bottom: none;
+}
+
+.position-item:hover {
+  background-color: var(--core--colors--neutral--200);
+}
+
+.dark .position-item:hover {
+  background-color: #1a1a1a;
+}
+
+.position-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 24px;
+}
+
+.position-info {
+  flex: 1;
+}
+
+.position-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Locale switcher */
+.locale-switcher {
+  position: relative;
+  margin-left: 8px;
+}
+
+.locale-switcher-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--core--colors--neutral--400);
+  background: transparent;
+  cursor: pointer;
+  color: var(--core--colors--neutral--700);
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.locale-switcher-trigger:hover {
+  background-color: var(--core--colors--neutral--300);
+}
+
+.locale-switcher-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 80px;
+  border: 1px solid var(--core--colors--neutral--400);
+  border-radius: 8px;
+  background: var(--core--colors--neutral--100);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.dark .locale-switcher-dropdown {
+  background: #1e1e1e;
+}
+
+.locale-switcher-option {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--font--colors--paragraph);
+  text-align: left;
+  transition: background-color 0.15s;
+}
+
+.locale-switcher-option:hover {
+  background-color: var(--core--colors--neutral--300);
+}
+
+.dark .locale-switcher-option:hover {
+  background-color: #2a2a2a;
+}
+
+.locale-switcher-option.active {
+  font-weight: 600;
+}
+