added mac support

src/scripts/animations/glass-surface.js

@@ -104,7 +104,6 @@ class GlassSurface {
                 this.liquidGlassEnabled = parsed.liquidGlassEnabled !== false;
             }
         } catch (e) {
-            console.warn('Failed to read glass settings:', e);
         }
     }
 
@@ -420,7 +419,7 @@ function initLiquidGlass() {
         '.nav-links',
         '.discord-copy-bar',
         '.platform-pill',
-        '.hero-cta-light',
+        '.hero-cta-unsure',
         '#navIslandMain',
         '#navbarSearchToggle',
         '.hero-icon-group',

src/scripts/animations/light-rays.js

@@ -37,7 +37,6 @@ export function initLightRays(container, options = {}) {
     const raysSpeed = options.raysSpeed ?? 1.8;
     const lightSpread = options.lightSpread ?? 0.7;
     const isMobile = window.innerWidth < 768;
-    console.log('Mobile detection:', isMobile, 'window.innerWidth:', window.innerWidth);
     const baseRayLength = options.rayLength ?? 0.6;
     const rayLength = isMobile ? baseRayLength * 3.0 : baseRayLength * 1.8;
     const pulsating = Boolean(options.pulsating);
@@ -50,7 +49,6 @@ export function initLightRays(container, options = {}) {
     const mouseInfluence = options.mouseInfluence ?? 0.12;
     const noiseAmount = options.noiseAmount ?? 0.08;
     const distortion = options.distortion ?? 0.04;
-    console.log('Ray length:', rayLength, 'Fade distance:', fadeDistance, 'Glow falloff factor:', glowFalloffFactor);
 
     const mouse = { x: 0.5, y: 0.5 };
     const smoothMouse = { x: 0.5, y: 0.5 };

src/styles/components/buttons.css

@@ -26,7 +26,7 @@
 
 .hero-cta-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
@@ -85,9 +85,91 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.hero-cta-unsure {
+    position: relative;
+    background: transparent;
+    color: var(--color-fg);
+    border-radius: 50px !important;
+    padding: 0.75rem 1.75rem !important;
+    font-weight: 500;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
 @media (hover: none) and (pointer: coarse) {
     .btn {
         min-height: 48px;
         min-width: 48px;
     }
+}
+
+.download-expandable {
+    position: relative;
+    display: inline-block;
+    background: #000;
+    border-radius: var(--radius-pill);
+    overflow: hidden;
+}
+
+.download-expandable[aria-expanded="true"] {
+    border-radius: 10px;
+}
+
+.download-expandable .hero-cta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding-right: 1rem;
+    background: transparent !important;
+    border: none;
+    margin: 0;
+    color: #fff;
+}
+
+.download-btn-text {
+    flex: 1;
+}
+
+.dropdown-arrow {
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+.download-expandable[aria-expanded="true"] .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.download-options {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+    background: #000;
+}
+
+.download-options.show {
+    max-height: 200px;
+    opacity: 1;
+}
+
+.download-option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: #fff;
+    text-decoration: none;
+    transition: background 0.2s ease;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.download-option:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.download-option svg {
+    flex-shrink: 0;
 }

src/styles/components/pills.css

@@ -97,4 +97,28 @@
         width: 28px;
         height: 28px;
     }
+}
+
+.platform-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-pill);
+    font-size: 0.8125rem;
+    color: var(--color-fg-dim);
+}
+
+.platform-pill svg {
+    flex-shrink: 0;
+}
+
+.platform-divider {
+    color: var(--color-fg-dim);
+    opacity: 0.5;
+}
+
+.mac-icon {
+    display: block;
 }

src/styles/sections/cta-banner.css

@@ -58,4 +58,28 @@
     font-size: 0.9375rem;
     color: var(--color-fg-dim);
     margin-bottom: 0.5rem;
+}
+
+.cta-banner-content .download-expandable {
+    background: #fff;
+}
+
+.cta-banner-content .download-expandable .hero-cta {
+    color: #000;
+}
+
+.cta-banner-content .download-options {
+    background: #fff;
+}
+
+.cta-banner-content .download-option {
+    color: #000;
+}
+
+.cta-banner-content .download-option:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.cta-banner-content .download-option svg {
+    color: #000;
 }

src/styles/sections/features.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: clamp(3.5rem, 8vw, 6rem);
-    width: 70%;
+    width: 60%;
 }
 
 .feature-block {