@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/social-proof/index.css

@@ -154,1109 +154,6 @@
   }
 }
 
-/* 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 {
-  flex-shrink: 0;
-  z-index: 1;
-}
-.ds-social-card--simple .ds-social-card__source {
-}
-.ds-social-card--social .ds-social-card__source {
-  float: right;
-  margin-left: var(--space-3);
-  margin-bottom: var(--space-2);
-}
-.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__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-.ds-social-featured__logo {
-  display: flex;
-  align-items: center;
-}
-.ds-social-featured__logo img,
-.ds-social-featured__logo svg {
-  max-height: 40px;
-  width: auto;
-}
-.ds-social-featured__trust {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  flex-wrap: wrap;
-}
-.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: var(--font-size-xs);
-  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--bg-transparent {
-  background-color: transparent;
-}
-.ds-section--bg-dark {
-  background-color: var(--void-forced-dark, #08040a);
-  color: var(--dark-text-primary, rgba(255, 255, 255, 0.98));
-  background-image:
-    radial-gradient(
-      ellipse at 50% 0%,
-      rgba(var(--brand-pink-rgb), 0.08) 0%,
-      transparent 60%);
-  --text-primary: var(--dark-text-primary, rgba(255, 255, 255, 0.98));
-  --text-secondary: var(--dark-text-secondary, rgba(255, 255, 255, 0.8));
-  --surface-alpha-1: var(--dark-surface-alpha, rgba(255, 255, 255, 0.06));
-}
-.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 {
-  --ds-section-header-margin-bottom: var(--space-12);
-  --ds-section-header-title-size: var(--font-size-3xl);
-  margin-bottom: var(--ds-section-header-margin-bottom);
-  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--compact {
-  --ds-section-header-margin-bottom: var(--space-6);
-  --ds-section-header-title-size: var(--font-size-2xl);
-}
-.ds-section-header--large {
-  --ds-section-header-margin-bottom: var(--space-16);
-  --ds-section-header-title-size: var(--font-size-4xl);
-}
-.ds-section-header__eyebrow {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  color: var(--brand-pink-readable, 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(--ds-section-header-title-size);
-  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 {
-    --ds-section-header-title-size: var(--font-size-2xl);
-  }
-  .ds-section-header--compact {
-    --ds-section-header-title-size: var(--font-size-xl);
-  }
-  .ds-section-header--large {
-    --ds-section-header-title-size: var(--font-size-3xl);
-  }
-}
-@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 {
-    --ds-section-header-margin-bottom: var(--space-16);
-    --ds-section-header-title-size: var(--font-size-4xl);
-  }
-  .ds-section-header--compact {
-    --ds-section-header-margin-bottom: var(--space-12);
-    --ds-section-header-title-size: var(--font-size-3xl);
-  }
-  .ds-section-header--large {
-    --ds-section-header-margin-bottom: var(--space-20);
-    --ds-section-header-title-size: var(--font-size-5xl);
-  }
-}
-@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 {
-    --ds-section-header-margin-bottom: var(--space-20);
-    --ds-section-header-title-size: var(--font-size-5xl);
-    gap: var(--space-6);
-  }
-  .ds-section-header--compact {
-    --ds-section-header-margin-bottom: var(--space-16);
-    --ds-section-header-title-size: var(--font-size-4xl);
-  }
-  .ds-section-header--large {
-    --ds-section-header-margin-bottom: calc(var(--space-20) * 1.25);
-    --ds-section-header-title-size: var(--font-size-6xl);
-  }
-  .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 {
-    --ds-section-header-title-size: var(--font-size-6xl);
-  }
-  .ds-section-header--compact {
-    --ds-section-header-title-size: var(--font-size-5xl);
-  }
-}
-
 /* src/components/VideoLightbox/VideoLightbox.css */
 .ds-sr-only {
   position: absolute;
@@ -1339,7 +236,7 @@
   position: absolute;
   inset: -8px;
   border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  border: 2px solid var(--glass-white-alpha-30);
   animation: ds-lightbox-pulse 2s ease-out infinite;
 }
 @keyframes ds-lightbox-pulse {
@@ -1385,13 +282,13 @@
   opacity: 0.7;
   cursor: pointer;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--glass-white-alpha-10);
   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);
+  background: var(--glass-white-alpha-20);
 }
 .ds-video-lightbox__close:focus-visible {
   outline: 2px solid var(--brand-pink, #f97316);