body {
	padding: 2rem;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
	background: #000000;
	color: #e2e8f0;
}
html {
  scroll-behavior: smooth;
}


h1 {
	font-size: 2.5rem;
	margin-top: 0;
	font-weight: 700;
}
/* Add to your CSS */
.spline-container {
  mix-blend-mode: lighten; /* or try 'screen' or 'overlay' */
  filter: blur(0.5px);
}

.spline-container iframe {
  object-fit: cover;
}
/* Add to your CSS */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.glass-card {
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .spline-container {
    opacity: 0.2;
  }
  
  .hero-content {
    padding-top: 20vh;
  }
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
}

.card p:last-child {
	margin-bottom: 0;
}
@media (max-width: 640px) {
  spline-viewer {
    min-height: 220px !important;
    max-height: 320px !important;
    height: 50vw !important;
    object-fit: contain !important;
  }
}
/* From Uiverse.io by mrhyddenn */ 
.spinloader {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spinloaderloader::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px dashed#444;
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.spinloaderloader::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed#444;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.spinloaderloader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 2s linear infinite;
  border-top: 1px dashed #fff;
}

.spinloaderloader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: seagreen;
  transform-origin: top left;
  transform: rotate(-55deg);
  filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
}
  #animated-padlock {
    transition: transform 0.4s ease;
    cursor: pointer;
  }

  #animated-padlock.open #shackle {
    d: path("M7 10C7 5 17 5 17 10"); /* Open curve */
  }

  #animated-padlock.locked #shackle {
    d: path("M7 10V7a5 5 0 0110 0v3"); /* Closed shackle */
  }


@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* Payment Methods Styling */
.payment-method {
  @apply flex flex-col items-center p-3 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 transition cursor-pointer;
  min-width: 80px;
}

/* Glass Card Consistency */
.glass-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Payment Toggle */
.payment-toggle {
  @apply relative flex bg-slate-800 rounded-lg p-1;
}

.payment-toggle button {
  @apply px-4 py-2 rounded-md text-sm font-medium relative z-10;
}

.payment-toggle .active {
  @apply bg-slate-700 text-white;
}/* Add to your CSS */
.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 80px;
  transition: all 0.3s ease;
}

.payment-method:hover {
  background: rgba(15, 23, 42, 0.6);
  transform: translateY(-2px);
}

.payment-method img {
  filter: grayscale(100%) brightness(1.5);
  transition: filter 0.3s ease;
}

.payment-method:hover img {
  filter: grayscale(0) brightness(1);
}
#qr-modal {
  transition: opacity 0.3s ease;
}
#qr-modal.active {
  display: flex;
  opacity: 1;
}