@layer utilities {
  .nav-active { 
    color: black;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(45deg, #578DFF, #1E50A0) 1;
  }
  .card-shadow { @apply shadow-lg hover:shadow-primary/20 transition-all duration-300; }
  .section-padding { @apply py-16 px-4 md:px-8 lg:px-16; }
  .text-gradient { background: linear-gradient(90deg, #165DFF, #7B61FF); -webkit-background-clip: text; color: transparent; }
  .glass-effect { backdrop-filter: blur(10px); }
  .animate-bounce-glow {
    animation: bounce-glow 2s ease-in-out infinite;
  }
}

@keyframes bounce-glow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bubble {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.animate-bubble {
  animation: bubble 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes float-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-float-in {
  animation: float-in 0.5s ease-out forwards;
}

@keyframes bubble-pop {
  0% {
    opacity: 0;
    transform: translate(10px, 10px) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-2px, -2px) scale(1.1);
  }
  50% {
    transform: translate(0, 0) scale(1);
  }
  70% {
    transform: translate(-1px, -1px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes bubble-fade-out {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-5px, -5px) scale(0.9);
  }
}

.animate-bubble-pop {
  animation: bubble-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.animate-bubble-fade-out {
  animation: bubble-fade-out 0.4s ease-out forwards;
}

.hover-community::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(45deg, #578DFF, #143FAD, #030D3D);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.hover-community:hover::before {
  opacity: 1;
}

.hover-community:hover .border-community,
.clicked .border-community {
  padding: 2px !important;
}

.hover-community:hover .relative {
  color: white !important;
}

.hover-community .relative {
  transition: color 0.3s ease;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.social-icon img {
  opacity: 0.35;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: brightness(0) invert(1);
}

.social-icon:hover img,
.social-icon.active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.qr-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}

.social-icon-wrapper:hover .qr-popup,
.social-icon-wrapper.active .qr-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

footer, footer > div, footer .container, footer .flex {
  overflow: visible !important;
}

.level-badge {
  @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.level-1 { 
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  color: #6b7280;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.level-2 { 
  background: linear-gradient(135deg, #f5f7fa 0%, #dfe4e9 100%);
  color: #4b5563;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.level-3 { 
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  border: 1px solid rgba(76,175,80,0.2);
  box-shadow: 0 1px 3px rgba(76,175,80,0.15);
}

.level-4 { 
  background: linear-gradient(135deg, #e0f2f1 0%, #a5d6a7 100%);
  color: #1b5e20;
  border: 1px solid rgba(76,175,80,0.25);
  box-shadow: 0 1px 3px rgba(76,175,80,0.2);
}

.level-5 { 
  background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
  color: #0d47a1;
  border: 1px solid rgba(33,150,243,0.25);
  box-shadow: 0 1px 3px rgba(33,150,243,0.2);
}

.level-6 { 
  background: linear-gradient(135deg, #bbdefb 0%, #64b5f6 100%);
  color: #0d47a1;
  border: 1px solid rgba(33,150,243,0.3);
  box-shadow: 0 1px 3px rgba(33,150,243,0.25);
}

.level-7 { 
  background: linear-gradient(135deg, #ede7f6 0%, #b39ddb 100%);
  color: #4a148c;
  border: 1px solid rgba(156,39,176,0.3);
  box-shadow: 0 1px 3px rgba(156,39,176,0.25);
}

.level-8 { 
  background: linear-gradient(135deg, #e1bee7 0%, #9c27b0 100%);
  color: #ffffff;
  border: 1px solid rgba(156,39,176,0.4);
  box-shadow: 0 2px 6px rgba(156,39,176,0.35), 
              inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.level-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.level-badge:hover::before {
  left: 100%;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-406px * 6));
  }
}

@keyframes scroll-creator {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-326px * 12));
  }
}

.animate-scroll {
  animation: scroll 40s linear infinite;
}

.animate-scroll-creator {
  animation: scroll-creator 60s linear infinite;
}

.animate-scroll-creator:hover {
  animation-play-state: paused;
}

.developer-platform-container {
  margin: 0 auto;
  transform-origin: center top;
}

.news-container {
  margin: 0 auto;
  transform-origin: center top;
}

.product-container {
  margin: 0 auto;
  transform-origin: center top;
}

.about-container {
  margin: 0 auto;
  transform-origin: center top;
}

@media screen and (max-width: 1280px) {
  .developer-platform-container {
    transform: scale(calc(100vw / 1280px));
    margin-left: calc((1280px - 100vw) / 2 * -1);
  }
  .news-container {
    transform: scale(calc(100vw / 1280px));
    margin-left: calc((1280px - 100vw) / 2 * -1);
  }
  .product-container {
    transform: scale(calc(100vw / 1280px));
    margin-left: calc((1280px - 100vw) / 2 * -1);
  }
  .about-container {
    transform: scale(calc(100vw / 1280px));
    margin-left: calc((1280px - 100vw) / 2 * -1);
  }
}

@media screen and (max-width: 750px) {
  .developer-platform-container {
    transform: none;
    width: 100% !important;
    margin-left: 0;
  }
  .news-container {
    transform: none;
    width: 100% !important;
    margin-left: 0;
  }
  .product-container {
    transform: none;
    width: 100% !important;
    margin-left: 0;
  }
  .about-container {
    transform: none;
    width: 100% !important;
    margin-left: 0;
  }
}

.animate-scroll:hover {
  animation-play-state: paused;
}