@salesmind-ai/design-system 0.2.1 → 0.3.1

package/dist/social-proof/index.css

@@ -0,0 +1,1423 @@
+/* src/components/StarRating/StarRating.css */
+.ds-star-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-star-rating__stars {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ds-star-rating--sm .ds-star-rating__svg {
+  width: 16px;
+  height: 16px;
+}
+.ds-star-rating--md .ds-star-rating__svg {
+  width: 20px;
+  height: 20px;
+}
+.ds-star-rating--lg .ds-star-rating__svg {
+  width: 28px;
+  height: 28px;
+}
+.ds-star-rating__star {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+.ds-star-rating__svg {
+  display: block;
+}
+.ds-star-rating__svg--filled {
+  position: absolute;
+  inset: 0;
+  transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--star-delay, 0ms);
+}
+.ds-star-rating__empty {
+  fill: var(--text-tertiary, rgba(255, 255, 255, 0.15));
+}
+.ds-star-rating__filled {
+  fill: var(--data-yellow, #eab308);
+}
+.ds-star-rating__star {
+  opacity: 1;
+  transform: scale(1);
+}
+.ds-star-rating__star:not(.ds-star-rating__star--visible) {
+  opacity: 0;
+  transform: scale(0.5);
+}
+.ds-star-rating__star--visible {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition-delay: var(--star-delay, 0ms);
+}
+.ds-star-rating__value {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1;
+}
+.ds-star-rating--sm .ds-star-rating__value {
+  font-size: var(--font-size-sm);
+}
+.ds-star-rating--md .ds-star-rating__value {
+  font-size: var(--font-size-base);
+}
+.ds-star-rating--lg .ds-star-rating__value {
+  font-size: var(--font-size-xl);
+}
+.ds-star-rating__value-label {
+  font-weight: var(--font-weight-normal);
+  color: var(--text-secondary);
+  margin-left: var(--space-1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-star-rating__star,
+  .ds-star-rating__star--visible {
+    transition: none;
+  }
+  .ds-star-rating__svg--filled {
+    transition: none;
+  }
+}
+
+/* src/components/PlatformBadge/PlatformBadge.css */
+.ds-platform-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-badge, 999px);
+  background: var(--glass-base, rgba(255, 255, 255, 0.05));
+  border: 1px solid var(--rim-light-bottom, rgba(255, 255, 255, 0.06));
+  transition:
+    background var(--transition-base),
+    border-color var(--transition-base),
+    box-shadow var(--transition-base);
+  white-space: nowrap;
+}
+.ds-platform-badge:hover {
+  background: var(--glass-base-hover, rgba(255, 255, 255, 0.08));
+  border-color: color-mix(in srgb, var(--platform-accent) 30%, transparent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--platform-accent) 15%, transparent);
+}
+.ds-platform-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+}
+.ds-platform-badge__label {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  line-height: 1;
+}
+.ds-platform-badge__rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ds-platform-badge__count {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1;
+}
+.ds-platform-badge--sm {
+  padding: var(--space-1) var(--space-2);
+}
+.ds-platform-badge--sm .ds-platform-badge__label {
+  font-size: var(--font-size-xs);
+}
+.ds-platform-badge--md {
+  padding: var(--space-2) var(--space-3);
+}
+.ds-platform-badge--md .ds-platform-badge__label {
+  font-size: var(--font-size-sm);
+}
+.ds-platform-badge--icon-only {
+  padding: var(--space-1);
+  border-radius: var(--radius-badge, 999px);
+}
+.ds-platform-badge--full {
+  gap: var(--space-2);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-platform-badge {
+    transition: none;
+  }
+}
+
+/* src/components/SocialProof/SocialProof.css */
+.ds-social-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border-radius: var(--radius-card);
+  background: var(--glass-base);
+  border: 1px solid var(--rim-light-bottom);
+  box-shadow: var(--glass-shadow-outer);
+  transition:
+    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+}
+.ds-social-card:hover {
+  transform: translateY(-6px);
+  background: var(--glass-base-hover);
+  border-color: var(--rim-light-top);
+  box-shadow: var(--glass-shadow-elevated), 0 0 20px rgba(var(--brand-pink-rgb, 249, 115, 22), 0.08);
+}
+.ds-social-card--animated {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: ds-card-entrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: var(--card-delay, 0ms);
+}
+@keyframes ds-card-entrance {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-social-card--animated {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}
+.ds-social-card--rating-only {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-top: 2px solid var(--data-yellow, #eab308);
+}
+.ds-social-card__rating-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  width: 100%;
+}
+.ds-social-card--rating-only .ds-social-card__meta {
+  flex: 1;
+  min-width: 0;
+}
+.ds-social-card--simple {
+  justify-content: space-between;
+}
+.ds-social-card__deco-quote {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-4);
+  font-size: 72px;
+  font-family:
+    Georgia,
+    "Times New Roman",
+    serif;
+  line-height: 1;
+  background:
+    linear-gradient(
+      135deg,
+      var(--brand-pink, #f97316),
+      var(--brand-yellow, #8b5cf6));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  opacity: 0.1;
+  pointer-events: none;
+  user-select: none;
+}
+.ds-social-card--social {
+  background: var(--glass-base-subtle, rgba(255, 255, 255, 0.03));
+  border-left: 3px solid var(--brand-pink, #f97316);
+}
+.ds-social-card__quote--clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+}
+.ds-social-card--video {
+  padding: 0;
+  gap: 0;
+}
+.ds-social-card--case-study {
+  padding: 0;
+  gap: 0;
+}
+.ds-social-card__media {
+  width: 100%;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  position: relative;
+  background: var(--glass-base-active);
+}
+.ds-social-card__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ds-social-card__media-placeholder {
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      var(--glass-base-active, rgba(0, 0, 0, 0.4)) 0%,
+      var(--glass-base, rgba(0, 0, 0, 0.2)) 100%);
+}
+.ds-social-card:hover .ds-social-card__media img {
+  transform: scale(1.05);
+}
+.ds-social-card--video .ds-social-card__media::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      to top,
+      var(--overlay-medium, rgba(0, 0, 0, 0.5)) 0%,
+      transparent 60%);
+  pointer-events: none;
+  z-index: 1;
+}
+.ds-social-card__play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+.ds-social-card__play-icon {
+  width: 48px;
+  height: 48px;
+  background: var(--surface-bright, rgba(255, 255, 255, 0.9));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-on-bright, #000);
+  box-shadow: var(--glass-shadow-elevated);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+}
+.ds-social-card__play-icon::after {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.3));
+  animation: ds-play-pulse 2s ease-out infinite;
+}
+@keyframes ds-play-pulse {
+  0% {
+    transform: scale(0.85);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+.ds-social-card:hover .ds-social-card__play-icon {
+  transform: scale(1.1);
+}
+.ds-social-card--case-study {
+  border-bottom: 3px solid transparent;
+  border-image:
+    linear-gradient(
+      to right,
+      var(--brand-pink, #f97316),
+      var(--brand-yellow, #8b5cf6)) 1;
+}
+.ds-social-card__cs-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ds-social-card__cs-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-badge, 8px);
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--glass-base-active, rgba(0, 0, 0, 0.1));
+}
+.ds-social-card__cs-logo img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.ds-social-card__cs-company {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.ds-social-card__cs-industry {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-xs);
+  color: var(--brand-pink, #f97316);
+  background: rgba(var(--brand-pink-rgb, 249, 115, 22), 0.1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-badge, 999px);
+  line-height: 1;
+}
+.ds-social-card__cs-headline {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+.ds-social-card__cs-metrics {
+  display: flex;
+  gap: var(--space-4);
+  padding: var(--space-3) 0;
+  border-top: 1px solid var(--rim-light-bottom, rgba(255, 255, 255, 0.06));
+  border-bottom: 1px solid var(--rim-light-bottom, rgba(255, 255, 255, 0.06));
+}
+.ds-social-card__cs-metric {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  flex: 1;
+  min-width: 0;
+}
+.ds-social-card__cs-metric-value {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--brand-pink, #f97316);
+  line-height: 1;
+}
+.ds-social-card__cs-metric-label {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1.2;
+}
+.ds-social-card__quote--excerpt {
+  font-style: italic;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+.ds-social-card__content {
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  flex: 1;
+}
+.ds-social-card--simple .ds-social-card__content,
+.ds-social-card--social .ds-social-card__content {
+  padding: 0;
+}
+.ds-social-card__author {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-top: auto;
+}
+.ds-social-card__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--glass-base-active);
+  flex-shrink: 0;
+}
+.ds-social-card__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ds-social-card__meta {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+.ds-social-card__name {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}
+.ds-social-card__handle {
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-normal);
+  margin-left: var(--space-1);
+}
+.ds-social-card__role {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+.ds-social-card__quote {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+.ds-social-card--simple .ds-social-card__quote {
+  font-size: var(--font-size-lg);
+  color: var(--text-primary);
+}
+.ds-social-card__source {
+  position: absolute;
+  top: var(--space-6);
+  right: var(--space-6);
+  z-index: 1;
+}
+.ds-social-card--simple .ds-social-card__source {
+  position: static;
+}
+.ds-social-card__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+.ds-social-card__media .ds-social-card__badges {
+  position: absolute;
+  bottom: var(--space-4);
+  left: var(--space-4);
+  z-index: 2;
+  margin: 0;
+}
+.ds-social-card__badge {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background: var(--overlay-heavy, rgba(0, 0, 0, 0.6));
+  color: var(--text-on-dark, white);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-badge);
+  backdrop-filter: blur(4px);
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
+}
+.ds-social-card__cta {
+  margin-top: var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--brand-pink);
+  font-weight: var(--font-weight-medium);
+  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ds-social-card:hover .ds-social-card__cta {
+  color: var(--brand-pink-bright);
+  transform: translateX(4px);
+}
+.ds-social-grid {
+  display: grid;
+  gap: var(--space-6);
+  grid-auto-flow: dense;
+}
+.ds-social-grid--3-col {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 640px) {
+  .ds-social-grid--2-col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .ds-social-grid--3-col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-social-grid--3-col {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-social-grid--4-col {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.ds-social-grid__item--span-2 {
+  grid-column: span 1;
+}
+@media (min-width: 640px) {
+  .ds-social-grid__item--span-2 {
+    grid-column: span 2;
+  }
+}
+.ds-social-masonry {
+  column-count: 1;
+  column-gap: var(--space-6);
+}
+@media (min-width: 640px) {
+  .ds-social-masonry {
+    column-count: 2;
+  }
+}
+@media (min-width: 1024px) {
+  .ds-social-masonry {
+    column-count: 3;
+  }
+}
+.ds-social-masonry .ds-social-card {
+  break-inside: avoid;
+  margin-bottom: var(--space-6);
+}
+.ds-social-carousel:has(.ds-social-card:hover) .ds-social-card:not(:hover),
+.ds-social-grid:has(.ds-social-card:hover) .ds-social-card:not(:hover) {
+  opacity: 0.6;
+  filter: grayscale(0.3);
+  transform: scale(0.98);
+  transition:
+    opacity 0.3s ease,
+    filter 0.3s ease,
+    transform 0.3s ease;
+}
+.ds-social-carousel {
+  position: relative;
+  overflow: hidden;
+  padding: var(--space-4) 0;
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black 5%,
+      black 95%,
+      transparent);
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black 5%,
+      black 95%,
+      transparent);
+}
+.ds-social-carousel__track {
+  display: flex;
+  gap: var(--space-6);
+  width: max-content;
+  animation: ds-social-scroll 60s linear infinite;
+}
+.ds-social-carousel:hover .ds-social-carousel__track {
+  animation-play-state: paused;
+}
+.ds-social-carousel .ds-social-card {
+  width: 320px;
+  flex-shrink: 0;
+  white-space: normal;
+}
+@keyframes ds-social-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+.ds-social-featured-section {
+}
+.ds-social-featured {
+  display: grid;
+  gap: var(--space-8);
+  background: var(--glass-base);
+  border-radius: var(--radius-panel);
+  border: 1px solid var(--rim-light-bottom);
+  overflow: hidden;
+  padding: var(--space-8);
+}
+@media (min-width: 1024px) {
+  .ds-social-featured--horizontal {
+    grid-template-columns: 1.2fr 0.8fr;
+    align-items: center;
+    padding: 0;
+  }
+  .ds-social-featured--horizontal .ds-social-featured__content {
+    padding: var(--space-12);
+  }
+  .ds-social-featured--horizontal .ds-social-featured__media {
+    height: 100%;
+    min-height: 400px;
+  }
+}
+.ds-social-featured--cinematic {
+  background:
+    linear-gradient(
+      135deg,
+      var(--overlay-heavy, rgba(0, 0, 0, 0.8)) 0%,
+      var(--glass-base, rgba(0, 0, 0, 0.4)) 100%);
+  border-color: rgba(var(--brand-pink-rgb, 249, 115, 22), 0.15);
+}
+.ds-social-featured--cinematic .ds-social-featured__quote {
+  font-size: var(--font-size-3xl);
+}
+.ds-social-featured--spotlight {
+  text-align: center;
+  justify-items: center;
+  background:
+    radial-gradient(
+      ellipse at center,
+      rgba(var(--brand-pink-rgb, 249, 115, 22), 0.06) 0%,
+      var(--glass-base, rgba(0, 0, 0, 0.2)) 70%);
+}
+.ds-social-featured--spotlight .ds-social-featured__quote {
+  max-width: 700px;
+}
+.ds-social-featured--spotlight .ds-social-featured__author-large {
+  justify-content: center;
+}
+.ds-social-featured__media {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  background: var(--bg-dark, #000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 1024px) {
+  .ds-social-featured--horizontal .ds-social-featured__media {
+    border-radius: 0;
+  }
+}
+.ds-social-featured__quote {
+  font-family: var(--font-family);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+  margin-bottom: var(--space-8);
+}
+.ds-social-featured__author-large {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.ds-social-featured__author-large .ds-social-card__avatar {
+  width: 64px;
+  height: 64px;
+}
+.ds-social-featured__author-large .ds-social-card__name {
+  font-size: var(--font-size-lg);
+}
+.ds-social-logos {
+  overflow: hidden;
+}
+.ds-social-logos__marquee {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--space-12);
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black 10%,
+      black 90%,
+      transparent);
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black 10%,
+      black 90%,
+      transparent);
+}
+.ds-social-logos__track {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--space-12);
+  min-width: 100%;
+  animation: ds-scroll var(--marquee-duration, 40s) linear infinite;
+  transform: translateZ(0);
+}
+.ds-social-logos__marquee:hover .ds-social-logos__track {
+  animation-play-state: paused;
+}
+@keyframes ds-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--space-12)));
+  }
+}
+.ds-social-logos__item {
+  opacity: 0.5;
+  filter: grayscale(100%);
+  transition:
+    opacity var(--transition-base),
+    filter var(--transition-base),
+    transform var(--transition-base);
+  max-width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  text-decoration: none;
+  position: relative;
+}
+.ds-social-logos__item:hover {
+  opacity: 1;
+  filter: grayscale(0%);
+  transform: scale(1.05);
+}
+.ds-social-logos__item img,
+.ds-social-logos__item svg {
+  max-height: 40px;
+  width: auto;
+  display: block;
+}
+.ds-social-logos__badge {
+  position: absolute;
+  bottom: -16px;
+  right: -12px;
+  font-family: var(--font-family-mono);
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 500;
+  padding: 3px 6px;
+  border-radius: 999px;
+  background: var(--glass-base, rgba(255, 255, 255, 0.1));
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
+  backdrop-filter: blur(8px);
+  white-space: nowrap;
+  pointer-events: none;
+  transition:
+    opacity var(--transition-base),
+    background var(--transition-base),
+    color var(--transition-base),
+    border-color var(--transition-base);
+  opacity: 0.8;
+}
+.ds-social-logos__item:hover .ds-social-logos__badge {
+  opacity: 1;
+  background: var(--glass-base-hover, rgba(255, 255, 255, 0.15));
+  color: var(--text-primary);
+  border-color: var(--border-subtle-hover, rgba(255, 255, 255, 0.3));
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-social-card {
+    transition: none;
+  }
+  .ds-social-card:hover {
+    transform: none;
+  }
+  .ds-social-card__media img {
+    transition: none;
+  }
+  .ds-social-card:hover .ds-social-card__media img {
+    transform: none;
+  }
+  .ds-social-card__play-icon::after {
+    animation: none;
+  }
+  .ds-social-carousel__track {
+    animation: none;
+  }
+  .ds-social-logos__track {
+    animation: none;
+  }
+  .ds-social-carousel:has(.ds-social-card:hover) .ds-social-card:not(:hover),
+  .ds-social-grid:has(.ds-social-card:hover) .ds-social-card:not(:hover) {
+    opacity: 1;
+    filter: none;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* src/components/LayoutPrimitives/LayoutPrimitives.css */
+.ds-box {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+}
+.ds-stack {
+  display: flex;
+  flex-direction: column;
+}
+.ds-stack--horizontal {
+  flex-direction: row;
+}
+.ds-grid {
+  display: grid;
+}
+.ds-grid--cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+.ds-grid--cols-2 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+.ds-grid--cols-3 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.ds-grid--cols-4 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ds-grid--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.ds-grid--cols-5 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1280px) {
+  .ds-grid--cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+.ds-grid--cols-6 {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 640px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1280px) {
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+@media (min-width: 1920px) {
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 2560px) {
+  .ds-grid--cols-2:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .ds-grid--cols-4:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .ds-grid--cols-5:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .ds-grid--cols-6:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 3840px) {
+  .ds-grid--cols-2:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ds-grid--cols-3:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .ds-grid--cols-4:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .ds-grid--cols-5:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(8, 1fr);
+  }
+  .ds-grid--cols-6:not(.ds-grid--fixed) {
+    grid-template-columns: repeat(10, 1fr);
+  }
+}
+:root {
+  --container-default-max: 1200px;
+}
+@media (min-width: 1537px) {
+  :root {
+    --container-default-max: 1400px;
+  }
+}
+@media (min-width: 1921px) {
+  :root {
+    --container-default-max: 1600px;
+  }
+}
+@media (min-width: 2561px) {
+  :root {
+    --container-default-max: 1920px;
+  }
+}
+.ds-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--container-padding-x, var(--space-4));
+  padding-right: var(--container-padding-x, var(--space-4));
+}
+@media (min-width: 1537px) {
+  .ds-container {
+    --container-padding-x: var(--space-6);
+  }
+}
+@media (min-width: 2561px) {
+  .ds-container {
+    --container-padding-x: var(--space-8);
+  }
+}
+.ds-section-block {
+  position: relative;
+}
+.ds-section-block--none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.ds-section-block--sm {
+  padding-top: var(--space-8, 2rem);
+  padding-bottom: var(--space-8, 2rem);
+}
+.ds-section-block--md {
+  padding-top: var(--space-16, 4rem);
+  padding-bottom: var(--space-16, 4rem);
+}
+@media (min-width: 768px) {
+  .ds-section-block--md {
+    padding-top: var(--space-24, 6rem);
+    padding-bottom: var(--space-24, 6rem);
+  }
+}
+.ds-section-block--lg {
+  padding-top: var(--space-24, 6rem);
+  padding-bottom: var(--space-24, 6rem);
+}
+@media (min-width: 768px) {
+  .ds-section-block--lg {
+    padding-top: var(--space-32, 8rem);
+    padding-bottom: var(--space-32, 8rem);
+  }
+}
+.ds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* src/components/SectionShell/SectionShell.css */
+.ds-section {
+  position: relative;
+  width: 100%;
+  padding: var(--space-16) 0;
+  box-sizing: border-box;
+}
+.ds-section--bg-default {
+  background-color: transparent;
+}
+.ds-section--bg-muted {
+  background-color: var(--surface-alpha-1);
+}
+.ds-section--bg-brand {
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      rgba(var(--brand-pink-rgb), 0.15),
+      transparent 70%);
+}
+.ds-section--padding-none {
+  padding: 0;
+}
+.ds-section--padding-sm {
+  padding: var(--space-8) 0;
+}
+.ds-section--padding-md {
+  padding: var(--space-16) 0;
+}
+.ds-section--padding-lg {
+  padding: var(--space-20) 0;
+}
+.ds-section-header {
+  margin-bottom: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-section-header--center {
+  text-align: center;
+  align-items: center;
+}
+.ds-section-header--left {
+  text-align: left;
+  align-items: flex-start;
+}
+.ds-section-header--right {
+  text-align: right;
+  align-items: flex-end;
+}
+.ds-section-header__eyebrow {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--brand-pink);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-medium);
+}
+.ds-section-header__title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+.ds-section-header__subtitle {
+  font-family: var(--font-family);
+  font-size: var(--font-size-lg);
+  color: var(--text-secondary);
+  max-width: 65ch;
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+@media (max-width: 768px) {
+  .ds-section {
+    padding: var(--space-10) 0;
+  }
+  .ds-section--padding-lg {
+    padding: var(--space-12) 0;
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-2xl);
+  }
+}
+@media (min-width: 1920px) {
+  .ds-section {
+    padding: var(--space-20) 0;
+  }
+  .ds-section--padding-sm {
+    padding: var(--space-10) 0;
+  }
+  .ds-section--padding-md {
+    padding: var(--space-20) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 1.25) 0;
+  }
+  .ds-section-header {
+    margin-bottom: var(--space-16);
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-4xl);
+  }
+}
+@media (min-width: 2560px) {
+  .ds-section {
+    padding: calc(var(--space-20) * 1.5) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 1.75) 0;
+  }
+  .ds-section-header {
+    margin-bottom: var(--space-20);
+    gap: var(--space-6);
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-5xl);
+  }
+  .ds-section-header__subtitle {
+    font-size: var(--font-size-xl);
+  }
+}
+@media (min-width: 3840px) {
+  .ds-section {
+    padding: calc(var(--space-20) * 2) 0;
+  }
+  .ds-section--padding-lg {
+    padding: calc(var(--space-20) * 2.5) 0;
+  }
+  .ds-section-header__title {
+    font-size: var(--font-size-6xl);
+  }
+}
+
+/* src/components/VideoLightbox/VideoLightbox.css */
+.ds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.ds-video-lightbox__trigger {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+}
+.ds-video-lightbox__thumbnail-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  background: var(--glass-base-active, rgba(0, 0, 0, 0.3));
+}
+.ds-video-lightbox__thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ds-video-lightbox__trigger:hover .ds-video-lightbox__thumbnail {
+  transform: scale(1.05);
+}
+.ds-video-lightbox__placeholder {
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      var(--glass-base-active, rgba(0, 0, 0, 0.4)) 0%,
+      var(--glass-base, rgba(0, 0, 0, 0.2)) 100%);
+}
+.ds-video-lightbox__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.5) 0%,
+      transparent 60%);
+  transition: background 0.3s ease;
+}
+.ds-video-lightbox__trigger:hover .ds-video-lightbox__overlay {
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.3) 0%,
+      transparent 60%);
+}
+.ds-video-lightbox__play-btn {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.ds-video-lightbox__trigger:hover .ds-video-lightbox__play-btn {
+  transform: scale(1.1);
+}
+.ds-video-lightbox__play-bg {
+  fill: rgba(0, 0, 0, 0.6);
+  transition: fill 0.3s ease;
+}
+.ds-video-lightbox__trigger:hover .ds-video-lightbox__play-bg {
+  fill: var(--brand-pink, #f97316);
+}
+.ds-video-lightbox__play-btn::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  animation: ds-lightbox-pulse 2s ease-out infinite;
+}
+@keyframes ds-lightbox-pulse {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+.ds-video-lightbox__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 9998;
+  animation: ds-lightbox-fade-in 0.25s ease-out;
+}
+.ds-video-lightbox__popup {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  z-index: 9999;
+  animation: ds-lightbox-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ds-video-lightbox__close {
+  all: unset;
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-on-dark, white);
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  transition: opacity var(--transition-base), background var(--transition-base);
+  z-index: 1;
+}
+.ds-video-lightbox__close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.2);
+}
+.ds-video-lightbox__close:focus-visible {
+  outline: 2px solid var(--brand-pink, #f97316);
+  outline-offset: 2px;
+}
+.ds-video-lightbox__iframe-wrap {
+  width: 100%;
+  max-width: 1200px;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-card, 12px);
+  overflow: hidden;
+  background: black;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+.ds-video-lightbox__iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+@keyframes ds-lightbox-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ds-lightbox-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-video-lightbox__backdrop,
+  .ds-video-lightbox__popup {
+    animation: none;
+  }
+  .ds-video-lightbox__thumbnail {
+    transition: none;
+  }
+  .ds-video-lightbox__play-btn::after {
+    animation: none;
+  }
+  .ds-video-lightbox__play-btn {
+    transition: none;
+  }
+}
+
+/* src/components/MetricCounter/MetricCounter.css */
+.ds-metric-counter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-family: var(--font-family);
+}
+.ds-metric-counter__value-wrapper {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  color: var(--text-primary);
+  line-height: var(--line-height-display);
+}
+.ds-metric-counter__prefix,
+.ds-metric-counter__suffix {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: rgb(var(--accent-rgb));
+}
+.ds-metric-counter__value {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-display);
+  font-variant-numeric: tabular-nums;
+}
+.ds-metric-counter__label {
+  margin-top: var(--space-2);
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+@media (max-width: 640px) {
+  .ds-metric-counter__prefix,
+  .ds-metric-counter__suffix {
+    font-size: var(--font-size-2xl);
+  }
+  .ds-metric-counter__value {
+    font-size: var(--font-size-4xl);
+  }
+}
+/*# sourceMappingURL=index.css.map */