@farzadbagheri/fb-components 0.1.0

package/dist/index.css

@@ -0,0 +1,1269 @@
+/* src/backgrounds/PredictiveArc.css */
+.fb-predictive-arc {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var( --predictive-arc-background, #0d0d11 );
+}
+.fb-predictive-arc__line {
+  position: absolute;
+  left: 50%;
+  top: 60%;
+  border-radius: 50%;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  transform: translate(-50%, -50%);
+  border-top: var( --predictive-arc-thickness, 3px ) solid var( --predictive-arc-color, #9b7cff );
+  box-shadow: 0 0 var( --predictive-arc-glow, 16px ) var( --predictive-arc-color, #9b7cff );
+}
+.fb-predictive-arc__line--outer {
+  width: var( --predictive-arc-size, 70% );
+  height: 45%;
+}
+.fb-predictive-arc__line--inner {
+  width: 50%;
+  height: 32%;
+  opacity: 0.4;
+}
+.fb-predictive-arc__point {
+  position: absolute;
+  top: 60%;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var( --predictive-arc-color, #9b7cff );
+  box-shadow: 0 0 16px var( --predictive-arc-color, #9b7cff );
+}
+.fb-predictive-arc__point--left {
+  left: 20%;
+}
+.fb-predictive-arc__point--right {
+  right: 20%;
+}
+.fb-predictive-arc--animated .fb-predictive-arc__line--outer {
+  animation: fbPredictiveArcPulse 2.8s ease-in-out infinite alternate;
+}
+@keyframes fbPredictiveArcPulse {
+  from {
+    opacity: 0.55;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.02);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-predictive-arc * {
+    animation: none !important;
+  }
+}
+
+/* src/backgrounds/SignalParticles.css */
+.fb-signal-particles {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fb-signal-particles__particle {
+  position: absolute;
+  border-radius: 50%;
+}
+.fb-signal-particles__particle--animated {
+  animation: fbSignalParticle 3s ease-in-out infinite alternate;
+}
+@keyframes fbSignalParticle {
+  from {
+    opacity: 0.2;
+    transform: scale(0.7);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-signal-particles__particle {
+    animation: none !important;
+  }
+}
+
+/* src/backgrounds/DotMatrix.css */
+.fb-dot-matrix {
+  width: 100%;
+  height: 100%;
+}
+.fb-dot-matrix--fade {
+  mask-image:
+    radial-gradient(
+      circle,
+      #000 30%,
+      transparent 80%);
+  -webkit-mask-image:
+    radial-gradient(
+      circle,
+      #000 30%,
+      transparent 80%);
+}
+
+/* src/backgrounds/GradientMesh.css */
+.fb-gradient-mesh {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fb-gradient-mesh__layer {
+  position: absolute;
+  inset: -25%;
+}
+.fb-gradient-mesh__layer--animated {
+  animation: fbGradientMeshMove 8s ease-in-out infinite alternate;
+}
+@keyframes fbGradientMeshMove {
+  from {
+    transform: translate3d(-3%, -2%, 0) scale(1);
+  }
+  to {
+    transform: translate3d(6%, 5%, 0) scale(1.12);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-gradient-mesh__layer {
+    animation: none !important;
+  }
+}
+
+/* src/backgrounds/AuroraGrid.css */
+.fb-aurora-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fb-aurora-grid__grid {
+  position: absolute;
+  inset: -35%;
+  transform: perspective(600px) rotateX(58deg) scale(1.35);
+  transform-origin: center bottom;
+}
+.fb-aurora-grid__grid--animated {
+  animation: fbAuroraGridMove 8s linear infinite;
+}
+.fb-aurora-grid__glow {
+  position: absolute;
+  left: 50%;
+  bottom: -18%;
+  width: 58%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  opacity: 0.4;
+  transform: translateX(-50%);
+}
+.fb-aurora-grid__glow--animated {
+  animation: fbAuroraGlow 6s ease-in-out infinite alternate;
+}
+@keyframes fbAuroraGridMove {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 80px;
+  }
+}
+@keyframes fbAuroraGlow {
+  from {
+    transform: translateX(-50%) scale(0.9);
+    opacity: 0.28;
+  }
+  to {
+    transform: translateX(-50%) scale(1.15);
+    opacity: 0.5;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-aurora-grid__grid,
+  .fb-aurora-grid__glow {
+    animation: none !important;
+  }
+}
+
+/* src/backgrounds/NoiseField.css */
+.fb-noise-field {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fb-noise-field__blob {
+  position: absolute;
+  width: 58%;
+  aspect-ratio: 1;
+  border-radius: 48% 52% 62% 38%;
+  filter: blur(45px);
+}
+.fb-noise-field__blob--one {
+  left: 8%;
+  top: 8%;
+}
+.fb-noise-field__blob--two {
+  right: -5%;
+  bottom: -8%;
+}
+.fb-noise-field__blob--animated {
+  animation: fbNoiseFieldMorph 6s ease-in-out infinite alternate;
+}
+.fb-noise-field__texture {
+  position: absolute;
+  inset: 0;
+  background-image:
+    repeating-radial-gradient(
+      circle at 30% 40%,
+      rgba(255, 255, 255, 0.22) 0 1px,
+      transparent 1px 4px);
+}
+.fb-noise-field__texture--animated {
+  animation: fbNoiseFieldTexture 5s linear infinite;
+}
+@keyframes fbNoiseFieldMorph {
+  from {
+    transform: translate3d(-8%, -5%, 0) rotate(-8deg) scale(0.95);
+  }
+  to {
+    transform: translate3d(14%, 10%, 0) rotate(14deg) scale(1.12);
+  }
+}
+@keyframes fbNoiseFieldTexture {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(16px, -12px, 0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-noise-field__blob,
+  .fb-noise-field__texture {
+    animation: none !important;
+  }
+}
+
+/* src/buttons/MagneticButton.css */
+.fb-magnetic-button {
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.18s ease-out, box-shadow 0.2s ease;
+}
+.fb-magnetic-button:hover {
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+.fb-magnetic-button:focus-visible {
+  outline: 2px solid #9b7cff;
+  outline-offset: 4px;
+}
+
+/* src/buttons/GlowButton.css */
+.fb-glow-button {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.25s ease;
+}
+.fb-glow-button:hover {
+  transform: translateY(-2px) scale(1.02);
+}
+.fb-glow-button:active {
+  transform: translateY(0) scale(0.99);
+}
+.fb-glow-button:focus-visible {
+  outline: 2px solid var( --fb-glow-button-color, #9b7cff );
+  outline-offset: 4px;
+}
+.fb-glow-button__content {
+  position: relative;
+  z-index: 2;
+}
+.fb-glow-button__glow {
+  position: absolute;
+  z-index: 1;
+  inset: -25%;
+  border-radius: inherit;
+  background: var( --fb-glow-button-color, #9b7cff );
+  opacity: 0.16;
+  filter: blur(18px);
+  animation: fbGlowButtonPulse 2.5s ease-in-out infinite alternate;
+}
+@keyframes fbGlowButtonPulse {
+  from {
+    opacity: 0.08;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 0.26;
+    transform: scale(1.15);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-glow-button,
+  .fb-glow-button__glow {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* src/buttons/GlassButton.css */
+.fb-glass-button {
+  position: relative;
+  overflow: hidden;
+  padding: 13px 22px;
+  border: 1px solid;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+.fb-glass-button:hover {
+  transform: translateY(-2px);
+}
+.fb-glass-button:active {
+  transform: translateY(0);
+}
+.fb-glass-button:focus-visible {
+  outline: 2px solid #a88cff;
+  outline-offset: 4px;
+}
+.fb-glass-button__shine {
+  position: absolute;
+  width: 45%;
+  height: 300%;
+  left: -70%;
+  top: -100%;
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.22),
+      transparent);
+  transform: rotate(20deg);
+  transition: left 0.5s ease;
+}
+.fb-glass-button:hover .fb-glass-button__shine {
+  left: 130%;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-glass-button,
+  .fb-glass-button__shine {
+    transition: none !important;
+  }
+}
+
+/* src/text/RevealText.css */
+.fb-reveal-text {
+  display: inline-block;
+  font-weight: 650;
+  letter-spacing: -0.05em;
+  animation: fbRevealText 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes fbRevealText {
+  from {
+    opacity: 0;
+    transform: translateY(22px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-reveal-text {
+    animation: none !important;
+  }
+}
+
+/* src/text/BlurReveal.css */
+.fb-blur-reveal {
+  display: inline-block;
+  font-weight: 650;
+  line-height: 0.92;
+  letter-spacing: -0.045em;
+  animation: fbBlurReveal var( --fb-blur-reveal-duration, 0.8s ) cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.fb-blur-reveal--repeat {
+  animation: fbBlurRevealRepeat calc(var( --fb-blur-reveal-duration, 0.8s ) * 3) cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+@keyframes fbBlurReveal {
+  from {
+    opacity: 0;
+    filter: blur(var( --fb-blur-reveal-blur, 14px ));
+    transform: translateY(var( --fb-blur-reveal-distance, 24px ));
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+@keyframes fbBlurRevealRepeat {
+  0% {
+    opacity: 0;
+    filter: blur(var( --fb-blur-reveal-blur, 14px ));
+    transform: translateY(var( --fb-blur-reveal-distance, 24px ));
+  }
+  28%, 72% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(calc(var( --fb-blur-reveal-blur, 14px ) * 0.5));
+    transform: translateY(calc(var( --fb-blur-reveal-distance, 24px ) * -0.35));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-blur-reveal {
+    animation: none !important;
+    opacity: 1;
+    filter: none;
+    transform: none;
+  }
+}
+
+/* src/ui/SpotlightCard.css */
+.fb-spotlight-card {
+  position: relative;
+  overflow: hidden;
+  min-height: 280px;
+  padding: 32px;
+  border: 1px solid;
+  transition: transform 0.25s ease;
+}
+.fb-spotlight-card:hover {
+  transform: translateY(-4px);
+}
+.fb-spotlight-card > span {
+  display: block;
+  color: #b99cff;
+  font-size: 10px;
+}
+.fb-spotlight-card > strong {
+  display: block;
+  margin-top: 100px;
+  font-size: 34px;
+}
+.fb-spotlight-card > p {
+  color: rgba(255, 255, 255, 0.55);
+}
+
+/* src/ui/GlassCard.css */
+.fb-glass-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  width: min(100%, 390px);
+  min-height: 300px;
+  padding: 30px;
+  border: 1px solid;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: transform 0.3s ease, border-color 0.3s ease;
+}
+.fb-glass-card:hover {
+  transform: translateY(-5px);
+}
+.fb-glass-card__glow {
+  position: absolute;
+  z-index: -1;
+  left: -10%;
+  top: -15%;
+  width: 70%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  opacity: 0.2;
+  pointer-events: none;
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+.fb-glass-card:hover .fb-glass-card__glow {
+  opacity: 0.32;
+  transform: translate3d(30px, 20px, 0) scale(1.1);
+}
+.fb-glass-card__inner {
+  position: relative;
+  z-index: 1;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+}
+.fb-glass-card__eyebrow {
+  color: #bba8ff;
+  font-family: "DM Mono", monospace;
+  font-size: 9px;
+  letter-spacing: 1.4px;
+}
+.fb-glass-card__content {
+  margin-top: auto;
+}
+.fb-glass-card__content strong {
+  display: block;
+  color: white;
+  font-size: clamp(32px, 5vw, 48px);
+  font-weight: 550;
+  line-height: 0.92;
+  letter-spacing: -0.045em;
+}
+.fb-glass-card__content p {
+  max-width: 260px;
+  margin: 18px 0 0;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 12px;
+  line-height: 1.65;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-glass-card,
+  .fb-glass-card__glow {
+    transition: none !important;
+  }
+}
+
+/* src/motion/GlowCursor.css */
+.fb-glow-cursor {
+  position: relative;
+  overflow: hidden;
+}
+.fb-glow-cursor__glow {
+  position: absolute;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition-property: left, top;
+  transition-timing-function: ease-out;
+}
+.fb-glow-cursor__content {
+  position: relative;
+  z-index: 2;
+}
+
+/* src/motion/MagneticCursor.css */
+.fb-magnetic-cursor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fb-magnetic-cursor__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+.fb-magnetic-cursor__ring,
+.fb-magnetic-cursor__dot {
+  position: absolute;
+  z-index: 5;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.fb-magnetic-cursor__ring {
+  border: 1px solid;
+  transition:
+    left 0.14s ease-out,
+    top 0.14s ease-out,
+    width 0.2s ease,
+    height 0.2s ease,
+    opacity 0.15s ease,
+    transform 0.2s ease;
+}
+.fb-magnetic-cursor__dot {
+  transition: opacity 0.12s ease;
+}
+.fb-magnetic-cursor__ring.is-visible,
+.fb-magnetic-cursor__dot.is-visible {
+  opacity: 1;
+}
+.fb-magnetic-cursor__ring.is-targeting {
+  transform: translate(-50%, -50%) scale(1.35);
+  background: rgba(185, 156, 255, 0.08);
+}
+@media (pointer: coarse) {
+  .fb-magnetic-cursor {
+    cursor: auto !important;
+  }
+  .fb-magnetic-cursor__ring,
+  .fb-magnetic-cursor__dot {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-magnetic-cursor__ring,
+  .fb-magnetic-cursor__dot {
+    transition: none !important;
+  }
+}
+
+/* src/ai/AiPromptBox.css */
+.fb-ai-prompt-box {
+  position: relative;
+  width: min(100%, 680px);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.35);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.fb-ai-prompt-box:focus-within {
+  border-color: color-mix(in srgb, var( --fb-ai-prompt-accent, #9b7cff ) 55%, transparent);
+  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var( --fb-ai-prompt-accent, #9b7cff ) 25%, transparent);
+}
+.fb-ai-prompt-box__form {
+  min-height: inherit;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+}
+.fb-ai-prompt-box__field {
+  position: relative;
+  flex: 1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 11px;
+}
+.fb-ai-prompt-box__spark {
+  margin-top: 5px;
+  color: var( --fb-ai-prompt-accent, #9b7cff );
+}
+.fb-ai-prompt-box textarea {
+  width: 100%;
+  min-height: 85px;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.fb-ai-prompt-box textarea::placeholder {
+  color: rgba(255, 255, 255, 0.36);
+}
+.fb-ai-prompt-box__footer {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+}
+.fb-ai-prompt-box__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.fb-ai-prompt-box__secondary,
+.fb-ai-prompt-box__submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  cursor: pointer;
+}
+.fb-ai-prompt-box__secondary {
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.035);
+  color: rgba(255, 255, 255, 0.64);
+}
+.fb-ai-prompt-box__secondary:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+}
+.fb-ai-prompt-box__model {
+  color: rgba(255, 255, 255, 0.42);
+  font-family: "DM Mono", monospace;
+  font-size: 8px;
+}
+.fb-ai-prompt-box__submit {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: var( --fb-ai-prompt-accent, #9b7cff );
+  color: white;
+  transition:
+    transform 0.18s ease,
+    opacity 0.18s ease,
+    box-shadow 0.18s ease;
+}
+.fb-ai-prompt-box__submit:not(:disabled):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 25px color-mix(in srgb, var( --fb-ai-prompt-accent, #9b7cff ) 45%, transparent);
+}
+.fb-ai-prompt-box__submit:disabled {
+  opacity: 0.32;
+  cursor: not-allowed;
+}
+.fb-ai-prompt-box button:focus-visible,
+.fb-ai-prompt-box textarea:focus-visible {
+  outline: 2px solid var( --fb-ai-prompt-accent, #9b7cff );
+  outline-offset: 3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-ai-prompt-box,
+  .fb-ai-prompt-box__submit {
+    transition: none !important;
+  }
+}
+
+/* src/ai/StreamingResponse.css */
+.fb-streaming-response {
+  width: min(100%, 680px);
+  padding: clamp(20px, 4vw, 32px);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.025);
+}
+.fb-streaming-response__status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var( --fb-streaming-accent );
+  font-family: "DM Mono", monospace;
+  font-size: 8px;
+  letter-spacing: 1.4px;
+}
+.fb-streaming-response__status > span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var( --fb-streaming-accent );
+  box-shadow: 0 0 14px var( --fb-streaming-accent );
+  animation: fbStreamingPulse 0.9s ease-in-out infinite alternate;
+}
+.fb-streaming-response__status > span.is-complete {
+  background: #69db9e;
+  box-shadow: none;
+  animation: none;
+}
+.fb-streaming-response p {
+  margin: 20px 0 0;
+  color: inherit;
+  font-size: clamp(14px, 2vw, 18px);
+  line-height: 1.8;
+}
+.fb-streaming-response__cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 4px;
+  vertical-align: -2px;
+  background: var( --fb-streaming-accent );
+  animation: fbStreamingCursor 0.7s steps(1) infinite;
+}
+@keyframes fbStreamingPulse {
+  to {
+    opacity: 0.35;
+    transform: scale(0.75);
+  }
+}
+@keyframes fbStreamingCursor {
+  50% {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-streaming-response * {
+    animation: none !important;
+  }
+}
+
+/* src/heroes/SaasLaunchHero.css */
+.fb-saas-launch-hero {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
+  align-items: center;
+  gap: 50px;
+  padding: clamp(35px, 7vw, 90px);
+  color: white;
+}
+.fb-saas-launch-hero__glow {
+  position: absolute;
+  right: -8%;
+  top: -25%;
+  width: 55%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var( --fb-saas-accent );
+  opacity: 0.16;
+  filter: blur(85px);
+  animation: fbSaasGlow 7s ease-in-out infinite alternate;
+}
+.fb-saas-launch-hero__content {
+  position: relative;
+  z-index: 2;
+}
+.fb-saas-launch-hero__eyebrow {
+  display: block;
+  color: var( --fb-saas-accent );
+  font-family: "DM Mono", monospace;
+  font-size: 9px;
+  letter-spacing: 1.8px;
+}
+.fb-saas-launch-hero h2 {
+  margin: 20px 0 0;
+  font-size: clamp(42px, 7vw, var( --fb-saas-headline-size ));
+  font-weight: 550;
+  line-height: 0.89;
+  letter-spacing: -0.06em;
+}
+.fb-saas-launch-hero h2 span {
+  display: block;
+}
+.fb-saas-launch-hero__content > p {
+  max-width: 580px;
+  margin: 24px 0 0;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 14px;
+  line-height: 1.7;
+}
+.fb-saas-launch-hero__actions {
+  margin-top: 30px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.fb-saas-launch-hero__actions button {
+  padding: 13px 20px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+.fb-saas-launch-hero__actions button:hover {
+  transform: translateY(-2px);
+}
+.fb-saas-launch-hero__primary {
+  border: 0;
+  background: white;
+  color: #08080b;
+}
+.fb-saas-launch-hero__secondary {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.035);
+  color: white;
+}
+.fb-saas-launch-hero__proof {
+  margin-top: 32px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.fb-saas-launch-hero__proof > div {
+  display: flex;
+}
+.fb-saas-launch-hero__proof > div span {
+  width: 25px;
+  height: 25px;
+  margin-left: -6px;
+  border: 2px solid #09090d;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      135deg,
+      var( --fb-saas-accent ),
+      #d6cbff);
+}
+.fb-saas-launch-hero__proof > div span:first-child {
+  margin-left: 0;
+}
+.fb-saas-launch-hero__proof p {
+  margin: 0;
+  max-width: 220px;
+  color: rgba(255, 255, 255, 0.38);
+  font-size: 9px;
+  line-height: 1.5;
+}
+.fb-saas-launch-hero__visual {
+  position: relative;
+  z-index: 2;
+  min-height: 330px;
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  background:
+    linear-gradient(
+      145deg,
+      rgba(255, 255, 255, 0.055),
+      rgba(255, 255, 255, 0.015));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+.fb-saas-launch-hero__visual-card span {
+  color: rgba(255, 255, 255, 0.35);
+  font-family: "DM Mono", monospace;
+  font-size: 8px;
+}
+.fb-saas-launch-hero__visual-card strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 38px;
+  letter-spacing: -0.05em;
+}
+.fb-saas-launch-hero__visual-card small {
+  display: inline-block;
+  margin-top: 6px;
+  color: #79e3a9;
+}
+.fb-saas-launch-hero__bars {
+  height: 120px;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+.fb-saas-launch-hero__bars span {
+  flex: 1;
+  border-radius: 5px 5px 2px 2px;
+  background:
+    linear-gradient(
+      180deg,
+      var( --fb-saas-accent ),
+      rgba(143, 115, 255, 0.14));
+  animation: fbSaasBar 2.8s ease-in-out infinite alternate;
+}
+.fb-saas-launch-hero__bars span:nth-child(even) {
+  animation-delay: -1.2s;
+}
+@keyframes fbSaasGlow {
+  to {
+    transform: translate3d(-35px, 30px, 0) scale(1.15);
+  }
+}
+@keyframes fbSaasBar {
+  from {
+    opacity: 0.55;
+    transform: scaleY(0.82);
+    transform-origin: bottom;
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+@media (max-width: 760px) {
+  .fb-saas-launch-hero {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-saas-launch-hero * {
+    animation: none !important;
+  }
+}
+
+/* src/landing/StartupLanding.css */
+.fb-startup-landing {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  padding: clamp(24px, 5vw, 65px);
+  color: white;
+  background-image:
+    radial-gradient(
+      circle at 50% 12%,
+      color-mix(in srgb, var( --fb-startup-accent ) 18%, transparent),
+      transparent 40%);
+}
+.fb-startup-landing__nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 30px;
+}
+.fb-startup-landing__nav strong {
+  font-size: 17px;
+}
+.fb-startup-landing__nav > div {
+  display: flex;
+  gap: 22px;
+}
+.fb-startup-landing__nav a {
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 11px;
+  text-decoration: none;
+}
+.fb-startup-landing__nav button {
+  justify-self: end;
+  padding: 10px 15px;
+  border: 0;
+  border-radius: 999px;
+  background: white;
+  color: #08080c;
+  cursor: pointer;
+}
+.fb-startup-landing__hero {
+  max-width: 820px;
+  margin: clamp(65px, 10vw, 130px) auto 0;
+  text-align: center;
+}
+.fb-startup-landing__hero > span {
+  color: var( --fb-startup-accent );
+  font-family: "DM Mono", monospace;
+  font-size: 9px;
+  letter-spacing: 1.8px;
+}
+.fb-startup-landing__hero h2 {
+  margin: 20px 0 0;
+  font-size: clamp(54px, 9vw, 110px);
+  font-weight: 500;
+  line-height: 0.84;
+  letter-spacing: -0.07em;
+}
+.fb-startup-landing__hero p {
+  max-width: 520px;
+  margin: 28px auto 0;
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.7;
+}
+.fb-startup-landing__hero button {
+  margin-top: 28px;
+  padding: 13px 20px;
+  border: 0;
+  border-radius: 999px;
+  background: var( --fb-startup-accent );
+  color: white;
+  cursor: pointer;
+}
+.fb-startup-landing__metrics {
+  margin-top: 80px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.fb-startup-landing__metrics article,
+.fb-startup-landing__features article {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var( --fb-startup-radius );
+  background: rgba(255, 255, 255, 0.022);
+}
+.fb-startup-landing__metrics article {
+  padding: 25px;
+}
+.fb-startup-landing__metrics strong {
+  display: block;
+  font-size: 30px;
+}
+.fb-startup-landing__metrics span {
+  color: rgba(255, 255, 255, 0.38);
+  font-size: 10px;
+}
+.fb-startup-landing__features {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.fb-startup-landing__features article {
+  min-height: 220px;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.fb-startup-landing__features article > span {
+  color: var( --fb-startup-accent );
+  font-family: "DM Mono", monospace;
+  font-size: 8px;
+}
+.fb-startup-landing__features h3 {
+  margin-top: auto;
+  margin-bottom: 0;
+  font-size: 27px;
+}
+.fb-startup-landing__features p {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 11px;
+  line-height: 1.5;
+}
+@media (max-width: 700px) {
+  .fb-startup-landing__nav {
+    grid-template-columns: 1fr auto;
+  }
+  .fb-startup-landing__nav > div {
+    display: none;
+  }
+  .fb-startup-landing__metrics,
+  .fb-startup-landing__features {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* src/data/AnimatedCounter.css */
+.fb-animated-counter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.fb-animated-counter__label {
+  color: rgba(255, 255, 255, 0.38);
+  font-family: "DM Mono", monospace;
+  font-size: 9px;
+  letter-spacing: 1.7px;
+}
+.fb-animated-counter strong {
+  margin-top: 10px;
+  color: inherit;
+  font-size: var( --fb-counter-size, 72px );
+  font-weight: 550;
+  line-height: 1;
+  letter-spacing: -0.065em;
+}
+.fb-animated-counter small {
+  margin-top: 12px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var( --fb-counter-accent ) 12%, transparent);
+  color: var( --fb-counter-accent );
+  font-size: 9px;
+}
+
+/* src/data/RadialProgress.css */
+.fb-radial-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.fb-radial-progress svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.fb-radial-progress__value {
+  filter: drop-shadow(0 0 7px color-mix(in srgb, var( --fb-radial-color ) 55%, transparent));
+  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fb-radial-progress__value--animated {
+  animation: fbRadialAppear 0.65s ease-out both;
+}
+@keyframes fbRadialAppear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.fb-radial-progress__content {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+.fb-radial-progress__content strong {
+  display: block;
+  color: white;
+  font-size: 38px;
+  line-height: 1;
+  letter-spacing: -0.06em;
+}
+.fb-radial-progress__content strong small {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.42);
+}
+.fb-radial-progress__content > span {
+  display: block;
+  margin-top: 6px;
+  color: rgba(255, 255, 255, 0.32);
+  font-family: "DM Mono", monospace;
+  font-size: 7px;
+  letter-spacing: 1.3px;
+}
+@keyframes fbRadialAppear {
+  from {
+    opacity: 0;
+    stroke-dashoffset: 999;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-radial-progress__value {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* src/data/MetricGrid.css */
+.fb-metric-grid {
+  width: 100%;
+  display: grid;
+  gap: 12px;
+}
+.fb-metric-grid article {
+  min-width: 0;
+  padding: clamp(18px, 3vw, 28px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var( --fb-metric-radius );
+  background: var( --fb-metric-background );
+  transition: transform 0.22s ease, border-color 0.22s ease;
+}
+.fb-metric-grid article:hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in srgb, var( --fb-metric-accent ) 35%, transparent);
+}
+.fb-metric-grid article > span {
+  color: rgba(255, 255, 255, 0.36);
+  font-size: 10px;
+}
+.fb-metric-grid strong {
+  display: block;
+  margin-top: 10px;
+  color: white;
+  font-size: clamp(24px, 4vw, 38px);
+  letter-spacing: -0.045em;
+}
+.fb-metric-grid small {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 4px 7px;
+  border-radius: 999px;
+  background: rgba(86, 217, 151, 0.08);
+  color: #75dfa7;
+}
+.fb-metric-grid small.is-negative {
+  background: rgba(255, 100, 115, 0.08);
+  color: #ff7c89;
+}
+@media (max-width: 650px) {
+  .fb-metric-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fb-metric-grid article {
+    transition: none !important;
+  }
+}
+/*# sourceMappingURL=index.css.map */