diff --git a/package-lock.json b/package-lock.json
index e5fd222..3ca42b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react-dom": "^19.2.7",
         "react-error-boundary": "^5.0.0",
         "react-router-dom": "^7.18.1",
+        "three": "^0.185.1",
         "zustand": "^5.0.6"
       },
       "devDependencies": {
@@ -24,6 +25,7 @@
         "@types/node": "^24.13.2",
         "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
+        "@types/three": "^0.185.1",
         "@vitejs/plugin-react": "^6.0.3",
         "jsdom": "^26.1.0",
         "oxlint": "^1.71.0",
@@ -209,6 +211,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
@@ -1877,6 +1886,42 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.185.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.185.1.tgz",
+      "integrity": "sha512-db1xTb+EgYF2didW+eudSvVPtn75zo+fGsY8ShQrJY/B5ZBmC2Fiaykv3aImHAlCNEGuMPkPGXBJGLwzu5mC7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
+    "node_modules/@types/three/node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
@@ -2634,6 +2679,13 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/float-tooltip": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/float-tooltip/-/float-tooltip-1.7.5.tgz",
@@ -3302,6 +3354,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
diff --git a/package.json b/package.json
index a66c87c..c61fbe0 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-dom": "^19.2.7",
     "react-error-boundary": "^5.0.0",
     "react-router-dom": "^7.18.1",
+    "three": "^0.185.1",
     "zustand": "^5.0.6"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.185.1",
     "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^26.1.0",
     "oxlint": "^1.71.0",
diff --git a/src/features/globe/GlobeView.tsx b/src/features/globe/GlobeView.tsx
index 8d4dca9..b6c02fc 100644
--- a/src/features/globe/GlobeView.tsx
+++ b/src/features/globe/GlobeView.tsx
@@ -16,74 +16,113 @@ interface GlobeViewProps {
  */
 export const GlobeView: React.FC<GlobeViewProps> = ({ onEnterApp }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const { activeCountry, flyTo, resumeRotation } = useGlobe(containerRef);
+  useGlobe(containerRef);
 
   return (
-    <div
-      style={{
-        position: 'relative',
-        width: '100vw',
-        height: '100vh',
-        overflow: 'hidden',
-        backgroundColor: '#000',
-      }}
-      aria-label="Interactive 3D Globe showing live national stock market overlays"
-    >
-      {/* ── UI Overlay ───────────────────────────────────────────────── */}
-      <div
-        id="ui-overlay"
-        className="home-overlay"
-        role="complementary"
-        aria-label="Market controls"
-      >
-        <h1 className="home-overlay-title">National Stock Indices</h1>
-        <p className="home-overlay-status">Live WebGL Market Volatility Overlay</p>
-
-        {/* Country legend — now uses <button> for keyboard accessibility */}
-        <nav className="country-list" aria-label="Country market selector">
-          {NATIONS.map((nation) => (
-            <button
-              key={nation.name}
-              type="button"
-              className={`country-item ${activeCountry === nation.name ? 'active' : ''}`}
-              onClick={() => flyTo(nation.name, nation.lat, nation.lng)}
-              aria-pressed={activeCountry === nation.name}
-              aria-label={`Focus globe on ${nation.name}`}
-            >
-              <div className="country-info">
-                <span className="country-flag" aria-hidden="true">
-                  {nation.flag}
-                </span>
-                <span>{nation.name}</span>
-              </div>
-              <div
-                className="country-indicator"
-                style={{ color: nation.color, backgroundColor: nation.color }}
-                aria-hidden="true"
-              />
-            </button>
-          ))}
-        </nav>
+    <div className="landing-page">
+      {/* ── Fixed Overlays (Visible across scrolling) ────────────────── */}
+      <div className="shooting-star-container">
+        {/* White Comets */}
+        <div className="shooting-star comet-1"></div>
+        <div className="shooting-star comet-2"></div>
+        <div className="shooting-star comet-3"></div>
+        <div className="shooting-star comet-4"></div>
+        <div className="shooting-star comet-5"></div>
+        
+        {/* Violet Comets */}
+        <div className="shooting-star violet-comet comet-violet-1"></div>
+        <div className="shooting-star violet-comet comet-violet-2"></div>
+        <div className="shooting-star violet-comet comet-violet-3"></div>
+      </div>
 
-        {activeCountry && (
-          <button type="button" className="resume-rotate-btn" onClick={resumeRotation}>
-            ↺ Resume Rotation
-          </button>
-        )}
+      <div className="twinkling-stars">
+        {/* Normal stars */}
+        <div className="star star-1"></div>
+        <div className="star star-2"></div>
+        <div className="star star-3"></div>
+        <div className="star star-4"></div>
+        <div className="star star-5"></div>
+        <div className="star star-6"></div>
+        <div className="star star-7"></div>
+        <div className="star star-8"></div>
+        <div className="star star-9"></div>
+        <div className="star star-10"></div>
+        
+        {/* Big stars */}
+        <div className="big-star big-star-1"></div>
+        <div className="big-star big-star-2"></div>
+        <div className="big-star big-star-3"></div>
+        <div className="big-star big-star-4"></div>
+        <div className="big-star big-star-5"></div>
+        <div className="big-star big-star-6"></div>
 
-        <button type="button" className="terminal-enter-btn" onClick={onEnterApp}>
-          Access Terminal
-        </button>
+        {/* Mega stars */}
+        <div className="mega-star mega-star-1"></div>
+        <div className="mega-star mega-star-2"></div>
+        <div className="mega-star mega-star-3"></div>
       </div>
 
-      {/* ── Globe Canvas ─────────────────────────────────────────────── */}
-      <div
-        ref={containerRef}
-        style={{ width: '100%', height: '100%' }}
-        id="globeViz"
-        role="img"
-        aria-label="3D globe visualization — rotate with mouse, scroll to pan"
-      />
+      {/* ── Section 1: Hero (100vh) ──────────────────────────────────── */}
+      <section className="hero-section">
+        {/* Navbar */}
+        <header className="globe-navbar">
+          <div className="nav-brand">
+            <span className="logo-icon">x</span>
+            <span className="brand-text">Discipline Co-pilot</span>
+          </div>
+          
+          <div className="nav-search">
+            <span className="search-icon">🔍</span>
+            <input type="text" placeholder="Search (Ctrl+K)" />
+          </div>
+
+          <nav className="nav-links">
+            <a href="#" className="active">Products</a>
+            <a href="#">Community</a>
+            <a href="#">Markets</a>
+            <a href="#">Brokers</a>
+            <a href="#">More</a>
+          </nav>
+
+          <div className="nav-profile">
+            <button className="nav-login-btn" onClick={onEnterApp}>Log in</button>
+          </div>
+        </header>
+
+        {/* Hero Content */}
+        <div className="globe-hero">
+          <h1>Look First Then Leap</h1>
+          
+          <div className="billing-toggle">
+            <label className="radio-label">
+              <input type="radio" name="billing" />
+              <span className="radio-custom"></span>
+              Monthly
+            </label>
+            <label className="radio-label">
+              <input type="radio" name="billing" defaultChecked />
+              <span className="radio-custom"></span>
+              Annually
+            </label>
+            <span className="discount-badge">Save up to 17% 🤑</span>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Section 2: Globe (100vh) ─────────────────────────────────── */}
+      <section className="globe-section">
+        <div className="globe-glow"></div>
+        
+        <div className="globe-wrapper">
+          <div
+            ref={containerRef}
+            style={{ width: '100%', height: '100%' }}
+            id="globeViz"
+            role="img"
+            aria-label="3D globe visualization"
+          />
+        </div>
+      </section>
     </div>
   );
 };
diff --git a/src/features/globe/useGlobe.ts b/src/features/globe/useGlobe.ts
index 578115a..bc5d007 100644
--- a/src/features/globe/useGlobe.ts
+++ b/src/features/globe/useGlobe.ts
@@ -51,66 +51,45 @@ export function useGlobe(containerRef: RefObject<HTMLDivElement | null>) {
       .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-night.jpg')
       .bumpImageUrl('https://unpkg.com/three-globe/example/img/earth-topology.png')
       .backgroundImageUrl('https://unpkg.com/three-globe/example/img/night-sky.png')
-      .pathPoints('coords')
-      .pathPointLat((p: object) => (p as Coordinate)[0])
-      .pathPointLng((p: object) => (p as Coordinate)[1])
-      .pathPointAlt((p: object) => (p as Coordinate)[2])
-      .pathColor((d: object) => (d as PathData).color)
-      .pathStroke(GLOBE_CONFIG.PATH_STROKE)
-      .labelsData(
+      .ringsData(
         NATIONS.map((n) => ({
           lat: n.lat,
           lng: n.lng,
-          text: `${n.flag} ${n.name}`,
-          color: n.color,
         })),
       )
-      .labelLat((d: object) => (d as LabelData).lat)
-      .labelLng((d: object) => (d as LabelData).lng)
-      .labelText((d: object) => (d as LabelData).text)
-      .labelSize(GLOBE_CONFIG.LABEL_SIZE)
-      .labelColor((d: object) => (d as LabelData).color)
-      .labelDotRadius(GLOBE_CONFIG.LABEL_DOT_RADIUS);
+      .ringColor(() => '#3b82f6') // Blue
+      .ringMaxRadius(3) // Size of the blink
+      .ringPropagationSpeed(2) // Speed of the pulse
+      .ringRepeatPeriod(1000); // Blinks every 1 second
 
     world.controls().autoRotate = true;
     world.controls().autoRotateSpeed = GLOBE_CONFIG.AUTO_ROTATE_SPEED;
-    world.controls().enableZoom = true;
+    world.controls().enableZoom = false; // Disabled to prevent scroll trapping
     globeInstanceRef.current = world;
 
-    // ── 2. Animation loop ─────────────────────────────────────────────────
-    // Pre-allocate arrays outside the loop to avoid 60fps garbage collection pressure.
-    const pathCoordinateBuffers: Coordinate[][] = NATIONS.map(() =>
-      Array.from<Coordinate>({ length: GLOBE_CONFIG.PATH_POINTS }).fill([0, 0, 0]),
-    );
-    const chartBuffer: PathData[] = NATIONS.map((n, i) => ({
-      coords: pathCoordinateBuffers[i] as Coordinate[],
-      color: n.color,
-    }));
-
-    let animationFrameId: number;
-
-    const animate = () => {
-      const t = Date.now() * GLOBE_CONFIG.ANIMATION_SPEED;
-
-      NATIONS.forEach((nation, ni) => {
-        const coords = pathCoordinateBuffers[ni] as Coordinate[];
-        for (let i = 0; i < GLOBE_CONFIG.PATH_POINTS; i++) {
-          const lngOffset = (i - GLOBE_CONFIG.PATH_POINTS / 2) * GLOBE_CONFIG.PATH_LONGITUDE_SPREAD;
-          const alt = Math.max(
-            0.01,
-            GLOBE_CONFIG.PATH_BASE_ALTITUDE +
-              Math.sin(i * 0.5 + t * 4) * GLOBE_CONFIG.PATH_WAVE_AMPLITUDE +
-              Math.cos(i * 1.2 - t * 2) * 0.012,
-          );
-          coords[i] = [nation.lat + Math.sin(i) * 0.5, nation.lng + lngOffset, alt];
+    // Initialize globe as small (altitude 4.0)
+    setTimeout(() => {
+      if (world) {
+        const pov = world.pointOfView();
+        world.pointOfView({ ...pov, altitude: 4.0 });
+      }
+    }, 50);
+
+    // ── 2. Increase Globe Brightness ──────────────────────────────────────
+    setTimeout(() => {
+      if (!world) return;
+      const scene = world.scene();
+      scene.children.forEach((child: any) => {
+        if (child.type === 'AmbientLight') {
+          child.intensity = 4.5; // Significantly brighter ambient light
+        }
+        if (child.type === 'DirectionalLight') {
+          child.intensity = 3.0; // Significantly brighter directional light
         }
       });
+    }, 100);
 
-      world.pathsData(chartBuffer);
-      animationFrameId = requestAnimationFrame(animate);
-    };
-
-    animate();
+    // No external animation loop is needed since blinking is handled via CSS.
 
     // ── 3. Resize handler ─────────────────────────────────────────────────
     const handleResize = () => {
@@ -119,13 +98,41 @@ export function useGlobe(containerRef: RefObject<HTMLDivElement | null>) {
     window.addEventListener('resize', handleResize);
     handleResize();
 
-    // ── 4. Scroll-to-rotate ───────────────────────────────────────────────
+    // ── 4. Smart Scroll: Zoom + Rotate + Page Scroll Handoff ──────────────
     let scrollAngle = 0;
     const handleWheel = (e: WheelEvent) => {
+      if (!world) return;
+      
+      const currentPov = world.pointOfView();
+      let newAltitude = currentPov.altitude;
+      
+      // Calculate new altitude (zoom)
+      // Reverse logic: Scroll DOWN (deltaY > 0) -> Zoom IN (decrease altitude)
+      // Scroll UP (deltaY < 0) -> Zoom OUT (increase altitude)
+      const zoomSpeed = 0.002;
+      newAltitude -= e.deltaY * zoomSpeed;
+      
+      // Bounds: 1.5 = Large globe (Image 1), 4.0 = Small globe (Image 2)
+      if (newAltitude < 1.5) newAltitude = 1.5;
+      if (newAltitude > 4.0) newAltitude = 4.0;
+      
+      // If scrolling UP and the globe is already at its smallest (4.0), 
+      // release the scroll event so the user scrolls back to the top of the page!
+      if (e.deltaY < 0 && currentPov.altitude >= 3.99) {
+        return; 
+      }
+      
+      // Otherwise, prevent page scroll and apply zoom & rotation to the globe
+      e.preventDefault();
+      
+      // Rotation
       scrollAngle += e.deltaY * GLOBE_CONFIG.SCROLL_SENSITIVITY;
-      world.pointOfView({ lat: 0, lng: scrollAngle, altitude: 2 });
+      
+      world.pointOfView({ lat: currentPov.lat, lng: scrollAngle, altitude: newAltitude });
     };
-    window.addEventListener('wheel', handleWheel, { passive: true });
+    
+    // Attach to container, passive: false so we can preventDefault
+    container.addEventListener('wheel', handleWheel, { passive: false });
 
     // ── 5. Country boundary polygons (GeoJSON) ────────────────────────────
     let isMounted = true;
@@ -136,9 +143,9 @@ export function useGlobe(containerRef: RefObject<HTMLDivElement | null>) {
         if (!isMounted) return;
         world
           .polygonsData(data.features)
-          .polygonCapColor(() => 'rgba(255, 255, 255, 0.01)')
-          .polygonSideColor(() => 'rgba(0, 0, 0, 0.05)')
-          .polygonStrokeColor(() => 'rgba(255, 255, 255, 0.25)')
+          .polygonCapColor(() => 'rgba(255, 255, 255, 0.15)') // Brighter nation fill
+          .polygonSideColor(() => 'rgba(255, 255, 255, 0.05)')
+          .polygonStrokeColor(() => 'rgba(255, 255, 255, 0.8)') // Brighter nation borders
           .polygonLabel((d: object) => {
             const feature = d as GeoFeature;
             return `
@@ -160,10 +167,10 @@ export function useGlobe(containerRef: RefObject<HTMLDivElement | null>) {
           .onPolygonHover((hoverD: object | null) => {
             world
               .polygonCapColor((d: object) =>
-                d === hoverD ? 'rgba(255, 255, 255, 0.18)' : 'rgba(255, 255, 255, 0.01)',
+                d === hoverD ? 'rgba(255, 255, 255, 0.35)' : 'rgba(255, 255, 255, 0.15)',
               )
               .polygonSideColor((d: object) =>
-                d === hoverD ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+                d === hoverD ? 'rgba(255, 255, 255, 0.15)' : 'rgba(255, 255, 255, 0.05)',
               );
           });
       })
@@ -174,9 +181,11 @@ export function useGlobe(containerRef: RefObject<HTMLDivElement | null>) {
     // ── Cleanup ───────────────────────────────────────────────────────────
     return () => {
       isMounted = false;
-      cancelAnimationFrame(animationFrameId);
       window.removeEventListener('resize', handleResize);
-      window.removeEventListener('wheel', handleWheel);
+      container.removeEventListener('wheel', handleWheel);
+      if (globeInstanceRef.current) {
+        globeInstanceRef.current._destructor();
+      }
       container.innerHTML = '';
       globeInstanceRef.current = null;
     };
diff --git a/src/index.css b/src/index.css
index 7c5a63f..96451c6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -205,3 +205,361 @@ body {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.3);
 }
+
+/* ==========================================================================
+   Background Effects (Z-Index: 6, 7)
+   ========================================================================== */
+.shooting-star-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 6; /* In front of canvas, behind UI */
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.shooting-star {
+  position: absolute;
+  width: 80px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  opacity: 0;
+  transform: rotate(-45deg);
+  animation: comet-shoot 20s linear infinite;
+}
+
+.violet-comet {
+  width: 350px;
+  height: 1.5px;
+  background: linear-gradient(90deg, #ff00ff 0%, transparent 100%);
+  box-shadow: 0 0 12px #ff00ff, 0 0 4px #ff00ff;
+  animation: comet-shoot 18s linear infinite;
+}
+
+.comet-1 { top: 15%; left: 100%; animation-delay: 0s; animation-duration: 20s; }
+.comet-2 { top: 45%; left: 100%; animation-delay: 12s; animation-duration: 22s; }
+.comet-3 { top: 75%; left: 100%; animation-delay: 5s; animation-duration: 19s; }
+.comet-4 { top: 25%; left: 100%; animation-delay: 17s; animation-duration: 24s; }
+.comet-5 { top: 85%; left: 100%; animation-delay: 8s; animation-duration: 21s; }
+
+.comet-violet-1 { top: 30%; left: 100%; animation-delay: 8s; animation-duration: 18s; }
+.comet-violet-2 { top: 60%; left: 100%; animation-delay: 2s; animation-duration: 23s; }
+.comet-violet-3 { top: 10%; left: 100%; animation-delay: 14s; animation-duration: 20s; }
+
+@keyframes comet-shoot {
+  0% { transform: rotate(-45deg) translateX(0); opacity: 0; }
+  5% { opacity: 1; }
+  10% { transform: rotate(-45deg) translateX(-150vw); opacity: 0; }
+  100% { opacity: 0; }
+}
+
+/* ==========================================================================
+   Background Blinking Stars
+   ========================================================================== */
+.twinkling-stars {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 7;
+  pointer-events: none;
+}
+
+.star {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background-color: #fff;
+  border-radius: 50%;
+  opacity: 0;
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+  animation: blink-star 15s infinite;
+}
+
+.big-star {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+  border-radius: 50%;
+  opacity: 0;
+  box-shadow: 0 0 14px rgba(255, 255, 255, 1), 0 0 4px #60a5fa;
+  animation: blink-star 12s infinite;
+}
+
+.mega-star {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  background-color: #fff;
+  border-radius: 50%;
+  opacity: 0;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 8px #c084fc;
+  animation: blink-star 10s infinite;
+}
+
+/* Base stars */
+.star-1 { top: 15%; left: 20%; animation-delay: 0s; }
+.star-2 { top: 35%; left: 75%; animation-delay: 2s; }
+.star-3 { top: 60%; left: 15%; animation-delay: 4s; }
+.star-4 { top: 80%; left: 85%; animation-delay: 6s; }
+.star-5 { top: 25%; left: 50%; animation-delay: 8s; }
+.star-6 { top: 70%; left: 45%; animation-delay: 10s; }
+.star-7 { top: 45%; left: 10%; animation-delay: 12s; }
+.star-8 { top: 5%; left: 40%; animation-delay: 1s; }
+.star-9 { top: 90%; left: 20%; animation-delay: 3s; }
+.star-10 { top: 50%; left: 90%; animation-delay: 7s; }
+
+/* Big stars */
+.big-star-1 { top: 20%; left: 80%; animation-delay: 1s; }
+.big-star-2 { top: 50%; left: 25%; animation-delay: 5s; }
+.big-star-3 { top: 85%; left: 60%; animation-delay: 9s; }
+.big-star-4 { top: 10%; left: 10%; animation-delay: 3s; }
+.big-star-5 { top: 40%; left: 60%; animation-delay: 11s; }
+.big-star-6 { top: 75%; left: 80%; animation-delay: 7s; }
+
+/* Mega stars */
+.mega-star-1 { top: 30%; left: 15%; animation-delay: 2s; }
+.mega-star-2 { top: 65%; left: 70%; animation-delay: 6s; }
+.mega-star-3 { top: 95%; left: 45%; animation-delay: 10s; }
+
+@keyframes blink-star {
+  0% { opacity: 0; transform: scale(0.5); }
+  5% { opacity: 1; transform: scale(1.5); }
+  10% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 0; }
+}
+
+/* ==========================================================================
+   New Globe Landing Layout (Look First Then Leap)
+   ========================================================================== */
+
+.landing-page {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #040508;
+  scroll-behavior: smooth;
+  scroll-snap-type: y mandatory;
+  /* Apply the night sky background to the entire scrollable page */
+  background-image: url("https://unpkg.com/three-globe/example/img/night-sky.png");
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}
+
+.hero-section {
+  width: 100vw;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  scroll-snap-align: start;
+}
+
+.globe-section {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  scroll-snap-align: start;
+}
+
+.globe-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+}
+
+.globe-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70vw;
+  height: 70vw;
+  max-width: 800px;
+  max-height: 800px;
+  border-radius: 50%;
+  /* Cyan and Purple glow */
+  background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, transparent 70%);
+  filter: blur(80px);
+  z-index: 4; /* Behind globe */
+  pointer-events: none;
+}
+
+.globe-navbar {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 40px;
+  background: transparent;
+  border-bottom: 2px dashed rgba(59, 130, 246, 0.4);
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  color: #000;
+  border-radius: 4px;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.nav-search {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 8px 16px;
+  width: 280px;
+}
+
+.nav-search input {
+  background: transparent;
+  border: none;
+  color: #fff;
+  outline: none;
+  margin-left: 8px;
+  font-size: 0.9rem;
+  width: 100%;
+}
+
+.nav-search input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.nav-links {
+  display: flex;
+  gap: 32px;
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.nav-links a {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+  color: #60a5fa;
+}
+
+.nav-profile {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 150px;
+}
+
+.nav-login-btn {
+  background: transparent;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 8px 24px;
+  border-radius: 9999px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nav-login-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.globe-hero {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10vh;
+  text-align: center;
+}
+
+.globe-hero h1 {
+  font-size: 7.5rem; /* Massively increased size */
+  font-weight: 800;
+  margin: 0 0 32px 0;
+  letter-spacing: -2.5px; /* Tighter letter spacing for large fonts */
+  line-height: 1.1;
+}
+
+.billing-toggle {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  font-size: 1rem;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+
+.radio-custom {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  position: relative;
+  transition: all 0.2s;
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+input[type="radio"]:checked + .radio-custom {
+  border-color: #fff;
+}
+
+input[type="radio"]:checked + .radio-custom::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border-radius: 50%;
+}
+
+.discount-badge {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}