:root {
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

      /* Navigation */
      .descopera-nav {
          background: white;
          box-shadow: 0 2px 10px rgba(0,0,0,0.08);
          padding: 12px 0;
          margin-bottom: 30px;
      }

      .descopera-nav .nav-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .descopera-nav .nav-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #2c3e50;
          font-weight: 500;
          font-size: 18px;
      }

      .descopera-nav .nav-brand img {
          height: 40px;
      }

      /* Page Header */
      .page-header {
          text-align: center;
          margin-bottom: 40px;
      }

      .page-header h1 {
          font-weight: 300;
          color: #2c3e50;
          font-size: 32px;
          margin-bottom: 10px;
      }

      .page-header p {
          color: #6c757d;
          font-size: 16px;
      }

      /* Leaderboard Styles */
      .leaderboard-card {
          background: var(--gradient-blue);
          color: white;
      }

      .podium-container {
          padding: 30px 20px 20px 20px;
      }

      .podium {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          gap: 10px;
          margin-bottom: 20px;
      }

      .podium-place {
          position: relative;
          text-align: center;
          border-radius: 8px 8px 0 0;
          padding: 20px 10px;
          width: 30%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          transition: none;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }

      .first-place {
          background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
          height: 160px;
      }

      .second-place {
          background: linear-gradient(135deg, #C0C0C0 0%, #B8B8B8 100%);
          height: 130px;
      }

      .third-place {
          background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
          height: 110px;
      }

      .podium-rank {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 5px;
          text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }

      .podium-name {
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 5px;
          word-break: break-word;
      }

      .podium-points {
          font-size: 11px;
          opacity: 0.9;
      }

      .leaderboard-list {
          background: white;
          border-radius: 0 0 12px 12px;
          padding: 20px;
      }

      .leaderboard-item {
          display: flex;
          align-items: center;
          padding: 12px;
          border-radius: 8px;
          margin-bottom: 8px;
          background: #f8f9fa;
          transition: all 0.2s ease;
          border: 1px solid #e9ecef;
      }

      .leaderboard-item:hover {
          background: #fff;
          box-shadow: 0 2px 8px rgba(0,0,0,0.05);
          transform: translateX(2px);
      }

      .leaderboard-rank {
          width: 40px;
          height: 40px;
          background: var(--gradient-purple);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 14px;
          margin-right: 12px;
          flex-shrink: 0;
          box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
      }

      .leaderboard-info {
          flex: 1;
      }

      .leaderboard-name {
          font-weight: 600;
          color: #2c3e50;
          font-size: 14px;
          margin-bottom: 2px;
      }

      .leaderboard-points {
          font-size: 12px;
          color: #6c757d;
          font-weight: 500;
      }

      .leaderboard-points strong {
          color: #495057;
          font-weight: 600;
      }

      /* See more message in leaderboard */
      .see-more-message {
          text-align: center;
          padding: 20px;
          background: #f8f9fa;
          border-radius: 8px;
          margin-top: 12px;
          color: #6c757d;
          font-size: 14px;
          border: 1px dashed #dee2e6;
      }

      .see-more-message i {
          color: #ffc107;
      }

      /* Stats Section */
      .stats-section {
          margin: 40px 0;
      }

      .stat-card {
          background: white;
          border-radius: 12px;
          padding: 30px;
          text-align: center;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          height: 100%;
          transition: transform 0.3s ease;
      }

      .stat-card:hover {
          transform: translateY(-2px);
      }

      .stat-icon {
          width: 60px;
          height: 60px;
          background: var(--gradient-purple);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          margin: 0 auto 15px;
      }

      .stat-value {
          font-size: 32px;
          font-weight: 700;
          color: #2c3e50;
          margin-bottom: 5px;
      }

      .stat-label {
          color: #6c757d;
          font-size: 14px;
      }

      /* Features Section */
      .features-section {
          margin: 40px 0;
      }

      .feature-card {
          background: white;
          border-radius: 12px;
          padding: 30px;
          height: 100%;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          transition: transform 0.3s ease;
      }

      .feature-card:hover {
          transform: translateY(-2px);
      }

      .feature-icon {
          font-size: 48px;
          margin-bottom: 20px;
      }

      .feature-icon.challenges { color: #f093fb; }
      .feature-icon.shop { color: #667eea; }
      .feature-icon.social { color: #4facfe; }
      .feature-icon.beta { color: #ff6b6b; }

      .feature-title {
          font-size: 20px;
          font-weight: 500;
          color: #2c3e50;
          margin-bottom: 15px;
      }

      .feature-description {
          color: #6c757d;
          font-size: 14px;
          line-height: 1.6;
      }

      /* Beta badge styling */
      .beta-badge {
          display: inline-block;
          background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
          color: white;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
          margin-left: 10px;
          box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
      }

      /* Activity Feed */
      .activity-feed {
          background: white;
          border-radius: 12px;
          padding: 30px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      }

      .activity-feed h3 {
          font-size: 24px;
          font-weight: 500;
          color: #2c3e50;
          margin-bottom: 20px;
      }

      .activity-item {
          display: flex;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid #f8f9fa;
      }

      .activity-item:last-child {
          border-bottom: none;
      }

      .activity-icon {
          width: 40px;
          height: 40px;
          background: #f8f9fa;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          flex-shrink: 0;
      }

      .activity-icon.challenge {
          background: var(--gradient-pink);
          color: white;
      }

      .activity-icon.purchase {
          background: var(--gradient-purple);
          color: white;
      }

      .activity-icon.social {
          background: var(--gradient-blue);
          color: white;
      }

      .activity-content {
          flex: 1;
      }

      .activity-text {
          font-size: 14px;
          color: #495057;
          margin-bottom: 2px;
      }

      .activity-time {
          font-size: 12px;
          color: #6c757d;
      }

      /* Sample Cards */
      .sample-card {
          background: white;
          border-radius: 12px;
          padding: 25px;
          height: 100%;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          transition: transform 0.3s ease;
          position: relative;
          overflow: hidden;
      }

      .sample-card:hover {
          transform: translateY(-2px);
      }

      .sample-badge {
          position: absolute;
          top: 15px;
          right: 15px;
          background: var(--gradient-pink);
          color: white;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
          box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3);
      }

      .sample-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          margin-bottom: 15px;
      }

      .sample-title {
          font-size: 16px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 10px;
      }

      .sample-description {
          font-size: 13px;
          color: #6c757d;
          line-height: 1.5;
      }

      /* Product Preview Cards */
      .product-preview-card {
          background: white;
          border-radius: 12px;
          overflow: hidden;
          height: 100%;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          transition: transform 0.3s ease;
          position: relative;
      }

      .product-preview-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      }

      .product-image-preview {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          background: #f8f9fa;
      }

      .product-image-preview img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .price-badge-preview {
          position: absolute;
          top: 15px;
          right: 15px;
          background: var(--gradient-purple);
          color: white;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 600;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }

      .product-preview-card .card-body {
          padding: 20px;
      }

      .product-preview-card .card-title {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 10px;
      }

      .product-preview-card .card-text {
          font-size: 14px;
          color: #6c757d;
          line-height: 1.5;
      }

      /* Empty State */
      .empty-state {
          padding: 60px 20px;
          text-align: center;
          background: #f8f9fa;
          border-radius: 12px;
          margin: 20px 0;
      }

      .empty-state-icon {
          font-size: 64px;
          color: #dee2e6;
          margin-bottom: 20px;
      }

      .empty-state-title {
          font-size: 24px;
          color: #6c757d;
          margin-bottom: 10px;
          font-weight: 300;
      }

      .empty-state-description {
          color: #adb5bd;
          font-size: 16px;
          margin-bottom: 20px;
      }

	  .empty-state .btn {
          margin-top: 20px;
      }

      /* Fade in animation */
      .fade-in {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      }

      .fade-in.visible {
          opacity: 1;
          transform: translateY(0);
      }

      /* Slide animations using transitions */
      .slide-in-left {
          opacity: 0;
          transform: translateX(-50px);
          transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      }

      .slide-in-left.visible {
          opacity: 1;
          transform: translateX(0);
      }

      .slide-in-right {
          opacity: 0;
          transform: translateX(50px);
          transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      }

      .slide-in-right.visible {
          opacity: 1;
          transform: translateX(0);
      }

      .slide-in-up {
          opacity: 0;
          transform: translateY(30px);
          transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      }

      .slide-in-up.visible {
          opacity: 1;
          transform: translateY(0);
      }

      /* Transition Delays */
      .animation-delay-200 { transition-delay: 0.2s; }
      .animation-delay-300 { transition-delay: 0.3s; }
      .animation-delay-400 { transition-delay: 0.4s; }
      .animation-delay-500 { transition-delay: 0.5s; }
      .animation-delay-600 { transition-delay: 0.6s; }
      .animation-delay-700 { transition-delay: 0.7s; }
      .animation-delay-800 { transition-delay: 0.8s; }
      .animation-delay-900 { transition-delay: 0.9s; }
      .animation-delay-1000 { transition-delay: 1s; }
      .animation-delay-1100 { transition-delay: 1.1s; }
      .animation-delay-1200 { transition-delay: 1.2s; }
      .animation-delay-1300 { transition-delay: 1.3s; }

      /* Mobile Responsive */
      @media (max-width: 768px) {
          .page-header h1 {
              font-size: 24px;
          }

          .page-header p {
              font-size: 14px;
          }

          .descopera-nav .nav-brand {
              font-size: 15px;
          }

          .descopera-nav .nav-brand img {
              height: 32px;
          }

          /* Reduce row gaps on mobile */
          .row.g-4 {
              --bs-gutter-y: 0.5rem;
              --bs-gutter-x: 0.5rem;
          }

          /* Stats section adjustments */
          .stats-section {
              margin: 15px 0;
          }

          .stat-card {
              padding: 15px 10px;
              margin-bottom: 8px;
          }

          .stat-value {
              font-size: 24px;
          }

          .stat-icon {
              width: 45px;
              height: 45px;
              font-size: 18px;
              margin-bottom: 8px;
          }

          .stat-label {
              font-size: 14px;
          }

          /* Activity feed adjustments */
          .activity-feed {
              padding: 15px 10px;
              margin-bottom: 10px;
          }

          .activity-feed h3 {
              font-size: 20px !important;
              margin-bottom: 12px;
          }

          .activity-item {
              padding: 10px 0;
          }

          .activity-icon {
              width: 35px;
              height: 35px;
              margin-right: 10px;
              font-size: 16px;
          }

          .activity-text {
              font-size: 14px;
          }

          .activity-time {
              font-size: 12px;
          }

          /* Leaderboard adjustments */
          .podium-container {
              padding: 15px 10px;
          }

          .podium-container h4 {
              font-size: 18px !important;
              margin-bottom: 12px;
          }

          .leaderboard-list {
              padding: 10px;
          }

          .leaderboard-item {
              padding: 10px;
              margin-bottom: 6px;
          }

          .leaderboard-rank {
              width: 35px;
              height: 35px;
              font-size: 14px;
              margin-right: 10px;
          }

          .leaderboard-name {
              font-size: 14px;
          }

          .leaderboard-points {
              font-size: 12px;
          }

          /* See more message mobile */
          .see-more-message {
              font-size: 13px;
              padding: 15px;
          }

          /* Feature cards adjustments */
          .features-section {
              margin: 20px 0;
          }

          .feature-card {
              padding: 20px 15px;
              margin-bottom: 10px;
          }

          .feature-icon {
              font-size: 36px;
              margin-bottom: 12px;
          }

          .feature-title {
              font-size: 18px;
              margin-bottom: 10px;
          }

          .feature-description {
              font-size: 14px;
              line-height: 1.6;
          }

          .feature-card ul li {
              font-size: 13px;
              margin-bottom: 6px;
          }

          /* Beta badge mobile */
          .beta-badge {
              display: block;
              margin-left: 0;
              margin-top: 8px;
              width: fit-content;
          }

          /* Sample cards adjustments */
          .sample-card {
              padding: 20px 15px;
              margin-bottom: 10px;
          }

          .sample-icon {
              width: 40px;
              height: 40px;
              font-size: 20px;
              margin-bottom: 10px;
          }

          .sample-title {
              font-size: 16px;
              margin-bottom: 8px;
          }

          .sample-description {
              font-size: 13px;
              line-height: 1.5;
          }

          .sample-badge {
              padding: 5px 10px;
              font-size: 12px;
              top: 10px;
              right: 10px;
          }

          /* Product preview cards */
          .product-preview-card {
              margin-bottom: 10px;
          }

          .product-preview-card .card-body {
              padding: 15px !important;
          }

          .product-preview-card .card-title {
              font-size: 16px;
              margin-bottom: 8px;
          }

          .product-preview-card .card-text {
              font-size: 14px;
              line-height: 1.5;
          }

          .price-badge-preview {
              padding: 6px 12px;
              font-size: 13px;
              top: 10px;
              right: 10px;
          }

          /* Empty states */
          .empty-state {
              padding: 40px 15px;
              margin: 10px 0;
          }

          .empty-state-icon {
              font-size: 48px;
              margin-bottom: 15px;
          }

          .empty-state-title {
              font-size: 20px;
          }

          .empty-state-description {
              font-size: 15px;
              margin-bottom: 15px;
          }

          /* Podium adjustments */
          .podium {
              gap: 5px;
              margin-bottom: 15px;
          }

          .podium-place {
              padding: 12px 5px;
              border-radius: 6px 6px 0 0;
          }

          .first-place {
              height: 110px;
          }

          .second-place {
              height: 95px;
          }

          .third-place {
              height: 80px;
          }

          .podium-rank {
              font-size: 22px;
              margin-bottom: 4px;
          }

          .podium-name {
              font-size: 12px;
              margin-bottom: 3px;
          }

          .podium-points {
              font-size: 11px;
          }
      }

      /* Very small screens (below 400px) */
      @media (max-width: 400px) {
          .row.g-4 {
              --bs-gutter-y: 0.25rem;
              --bs-gutter-x: 0.25rem;
          }

          .stat-card {
              padding: 12px 8px;
          }

          .stat-value {
              font-size: 22px;
          }

          .stat-icon {
              width: 40px;
              height: 40px;
              font-size: 16px;
          }

          /* Stack stats in single column on very small screens */
          .stats-section .col-6 {
              width: 100%;
          }

          /* Activity text smaller but readable */
          .activity-text {
              font-size: 13px;
          }

          .activity-time {
              font-size: 11px;
          }

          /* Leaderboard more compact but readable */
          .leaderboard-rank {
              width: 30px;
              height: 30px;
              font-size: 13px;
          }

          .leaderboard-name {
              font-size: 13px;
          }

          .leaderboard-points {
              font-size: 11px;
          }

          /* Challenge meta items stack */
          .challenge-meta {
              flex-direction: column;
              align-items: flex-start;
              gap: 3px;
          }

          /* Feature cards ultra compact but readable */
          .feature-card {
              padding: 15px 10px;
          }

          .feature-icon {
              font-size: 28px;
          }

          .feature-title {
              font-size: 16px;
          }

          .feature-description {
              font-size: 13px;
          }

          /* Product cards ultra compact but readable */
          .product-preview-card .card-body {
              padding: 12px !important;
          }

          .product-preview-card .card-title {
              font-size: 15px;
          }

          .product-preview-card .card-text {
              font-size: 13px;
          }

          /* Empty states more compact but readable */
          .empty-state {
              padding: 25px 10px;
          }

          .empty-state-icon {
              font-size: 40px;
          }

          .empty-state-title {
              font-size: 18px;
          }

          .empty-state-description {
              font-size: 14px;
          }
      }

/* Utility classes for previously inline styles */
.section-heading {
    font-weight: 300;
    color: #2c3e50;
}

.sample-icon-challenge {
    background: var(--gradient-pink);
    color: white;
}

.product-image-placeholder {
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 48px;
    color: #dee2e6;
}

.price-badge-social {
    background: var(--gradient-blue);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.feature-list-item {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 8px;
}

.feature-list-item:last-child {
    margin-bottom: 0;
}

.feature-check-icon {
    color: #84fab0;
    margin-right: 8px;
}

.cta-card {
    background: var(--gradient-pink);
    color: white;
}

.cta-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.cta-heading {
    font-weight: 300;
    margin-bottom: 20px;
}

.cta-text {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-btn {
    color: #f5576c;
    font-weight: 500;
}