add ATmosphere explanation w tooltip

src/components/common/Tooltip.tsx

···
+import { ReactNode, useState } from "react";
+import { Info } from "lucide-react";
+
+interface TooltipProps {
+  content: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export default function Tooltip({ content, children, className = "" }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <button
+        type="button"
+        className={`inline-flex items-center ${className}`}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onFocus={() => setIsVisible(true)}
+        onBlur={() => setIsVisible(false)}
+        aria-label="More information"
+      >
+        {children || (
+          <Info className="w-4 h-4 text-purple-750/70 dark:text-cyan-250/70 hover:text-purple-900 dark:hover:text-cyan-100 transition-colors" />
+        )}
+      </button>
+
+      {isVisible && (
+        <div
+          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 px-3 py-2 bg-slate-900 dark:bg-slate-800 text-white text-sm rounded-lg shadow-lg z-50 pointer-events-none"
+          role="tooltip"
+        >
+          <div className="relative">
+            {content}
+            {/* Arrow */}
+            <div className="absolute left-1/2 -translate-x-1/2 -bottom-5 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-slate-900 dark:border-t-slate-800" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/common/index.tsx

···
 export { default as SetupPrompt } from "./SetupPrompt";
 export { default as Skeleton } from "./Skeleton";
 export { default as Toggle } from "./Toggle";
+export { default as Tooltip } from "./Tooltip";
 
 // Export Stats components
 export { StatItem, StatBadge, StatsGroup } from "./Stats";

src/components/login/HeroSection.tsx

···
 import FireflyLogo from "../../assets/at-firefly-logo.svg?react";
+import Tooltip from "../common/Tooltip";
 
 interface HeroSectionProps {
   reducedMotion?: boolean;
···
       <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-purple-600 via-cyan-500 to-pink-500 dark:from-cyan-300 dark:via-purple-300 dark:to-pink-300 bg-clip-text text-transparent mb-3 md:mb-4">
         ATlast
       </h1>
-      <p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium">
-        Find Your Light in the ATmosphere
+      <p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium inline-flex items-center gap-2 justify-center md:justify-start w-full">
+        <span>Find Your Light in the ATmosphere</span>
+        <Tooltip
+          content={
+            <div>
+              <p className="font-semibold mb-1">What's the ATmosphere?</p>
+              <p className="text-xs leading-relaxed">
+                The <strong>ATmosphere</strong> is an open network of social apps that use one login, including Bluesky, Blacksky, Tangled, Flashes, Leaflet, and more. Once you login, you can explore the social apps that let you follow different people!
+              </p>
+            </div>
+          }
+        />
       </p>
-      <p className="text-purple-750 dark:text-cyan-250 mb-6">
-        Reconnect with your internet, one firefly at a time ✨
+      <p className="text-purple-750 dark:text-cyan-250 mb-2">
+        Reconnect with your internet, one firefly at a time
       </p>
 
       {/* Decorative firefly trail - only show if motion enabled */}