site: compact global-grade product landing experience

landing/app.js

@@ -56,6 +56,38 @@
     node.textContent = String(new Date().getFullYear());
   });
 
+  const header = document.querySelector('.site-header');
+  if (header) {
+    let scrollFrame = 0;
+    const syncHeaderState = () => {
+      scrollFrame = 0;
+      header.classList.toggle('is-scrolled', window.scrollY > 12);
+    };
+    window.addEventListener('scroll', () => {
+      if (scrollFrame) return;
+      scrollFrame = window.requestAnimationFrame(syncHeaderState);
+    }, { passive: true });
+    syncHeaderState();
+  }
+
+  const revealNodes = [...document.querySelectorAll('[data-reveal]')];
+  if (revealNodes.length) {
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reducedMotion || !('IntersectionObserver' in window)) {
+      revealNodes.forEach(node => node.classList.add('visible'));
+    } else {
+      revealNodes.forEach(node => node.classList.add('reveal'));
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        });
+      }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
+      revealNodes.forEach(node => observer.observe(node));
+    }
+  }
+
   document.querySelectorAll('[data-copy-value]').forEach(button => {
     if (!(button instanceof HTMLButtonElement)) return;
     const original = button.textContent || '';

landing/design-system.css

@@ -3,9 +3,9 @@
    Homepage composition belongs in home.css. */
 
 :root {
-  --site-section-space: clamp(4.8rem, 6.2vw, 6rem);
-  --site-section-space-tight: clamp(3.3rem, 4.5vw, 4.25rem);
-  --site-card-radius: 20px;
+  --site-section-space: clamp(3.9rem, 5vw, 4.8rem);
+  --site-section-space-tight: clamp(2.7rem, 3.6vw, 3.45rem);
+  --site-card-radius: 16px;
   --site-surface-border: rgba(190, 221, 255, .135);
   --site-surface-border-hover: rgba(117, 207, 255, .25);
   --site-divider: rgba(177, 214, 255, .09);
@@ -36,7 +36,7 @@
 
 .section-head {
   max-width: 800px;
-  margin-bottom: clamp(2rem, 3vw, 2.6rem);
+  margin-bottom: clamp(1.65rem, 2.5vw, 2.1rem);
 }
 
 .section-head h2 {
@@ -73,7 +73,7 @@
 }
 
 .card {
-  padding: clamp(1.45rem, 2vw, 1.7rem);
+  padding: clamp(1.25rem, 1.7vw, 1.5rem);
   border-radius: var(--site-card-radius);
   transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
 }
@@ -136,7 +136,7 @@
 
 .callout {
   border-color: rgba(105, 203, 255, .21);
-  border-radius: 24px;
+  border-radius: 15px;
   background:
     radial-gradient(circle at 10% 0%, rgba(56,189,248,.145), transparent 21rem),
     radial-gradient(circle at 92% 92%, rgba(139,92,246,.09), transparent 22rem),
@@ -165,8 +165,8 @@
 
 @media (max-width: 980px) {
   :root {
-    --site-section-space: clamp(4.2rem, 8vw, 5.2rem);
-    --site-section-space-tight: clamp(3rem, 6vw, 3.8rem);
+    --site-section-space: clamp(3.6rem, 7vw, 4.5rem);
+    --site-section-space-tight: clamp(2.55rem, 5vw, 3.2rem);
   }
 
   .section-head h2 {
@@ -176,8 +176,8 @@
 
 @media (max-width: 760px) {
   :root {
-    --site-section-space: 4.15rem;
-    --site-section-space-tight: 3.15rem;
+    --site-section-space: 3.6rem;
+    --site-section-space-tight: 2.7rem;
   }
 
   .section + .section::before,
@@ -204,7 +204,7 @@
   }
 
   .callout {
-    border-radius: 20px;
+    border-radius: 16px;
   }
 
   .site-footer {