/* Global Resets */
:root {
  --font-family: "Mona Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --bg-body: #f3f4f6;
  --bg-dark: #000000;
  --text-light: #ffffff;
  --text-dark: #111827;
  --text-gray: #6b7280;
  --accent-green: #4ade80;
  --accent-pink-bg: #fce7f3;
  --accent-pink-text: #db2777;
  --gradient-eth: linear-gradient(90deg, #d946ef, #8b5cf6, #3b82f6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
button{
    cursor: pointer;
}
body {
  font-family: var(--font-family);
  background-color: var(--bg-body);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.body-wrapper {
  margin: 0 auto;
  max-width: 90%;
}

/* Navbar & Marquee Container */
.site-navbar-floating {
  width: calc(100% - 48px);
  background-color: #000000;
  border-radius: 12px;
  margin: 12px auto 8px auto; /* Top margin */
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100; /* Increased z-index to stay above overlay */
  position: sticky;
  top: 12px;
}

.nav-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  flex: 1; /* Space distribution */
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 20px;
  color: white;
  letter-spacing: -0.5px;
}

.brand-name {
  margin-left: 8px;
}

.nav-menu-centered {
  flex: 2;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.nav-item {
  color: white; /* Gray-400 */
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  cursor: pointer;
}

.icon-ecosystem {
  display: flex;
  align-items: center;
  color: #3b82f6; /* Blue tint for globe */
}

.nav-item:hover {
  color: white;
}

.nav-actions {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.sign-in-btn {
  background-color: white;
  color: black;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.1s;
}

.sign-in-btn:hover {
  transform: scale(1.02);
}

.btn-text-mobile {
  display: none;
}

/* Floating Marquee */
.marquee-floating {
  width: calc(100% - 48px);
  background-color: #000000;
  border-radius: 50px; /* Full pill shape */
  margin: 0 auto 20px auto;
  padding: 8px 0;
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  padding-left: 24px;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: white; /* Default text color */
}

/* Remove old pill background if any */
.marquee-item {
  background-color: transparent !important;
  padding: 0 !important;
}

.avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #333;
}

.user-name {
  color: #d1d5db; /* Gray-300 */
}

.user-profit.positive {
  color: #ffffff; /* White profit text per image */
  font-weight: 700;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Hero Section */
.hero-wrapper {
  padding: 40px 24px;
  padding-top: 5px;
  display: flex;
  justify-content: center;
  flex-grow: 1;
}

@media (max-width: 900px) {
  .hero-wrapper {
    padding: 0px 24px;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    margin-bottom: 25px;
  }
}

.hero-container {
  display: flex;
  gap: 24px;
  width: 100%;
  /* max-width: 1200px; */
  height: 400px; /* Fixed height for the hero cards layout */
}

.hero-card {
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Left Card: Treasure Map */
.map-card {
  flex: 3; /* Wider card */
  background-color: #0f172a; /* Fallback dark */
  background-image: url("assets/1_2_3_bg.png");
  background-size: cover;
  background-position: center;
  color: var(--text-light);
  justify-content: center; /* Vertically center content if needed, designs shows left */
}

/* Overlay gradient to ensure text readability on image */
.map-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
}

.card-content-left {
  position: relative;
  z-index: 2;
  max-width: 450px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title-lg {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
  font-family: var(--font-family); /* Or display font if needed */
}

.card-desc-lg {
  font-size: 18px;
  color: #d1d5db;
  margin-bottom: 24px;
  line-height: 1.5;
}

.prize-highlight {
  font-size: 48px;
  font-weight: 900;
  background: var(--gradient-eth);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 32px;
}

.btn-soon {
  background-color: var(--text-light);
  color: var(--text-dark);
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
}

button {
  cursor: pointer;
}

/* Right Card: Rewards */
.rewards-card {
  flex: 2; /* Narrower */
  background-color: white;
  justify-content: space-between;
}

.card-header-right {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.badge-special {
  background-color: var(--accent-pink-bg);
  color: var(--accent-pink-text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-dots {
  font-size: 24px;
  line-height: 0.5;
  color: var(--text-gray);
  cursor: pointer;
}

.card-content-right {
  margin-bottom: auto; /* Push footer down */
}

.card-title-md {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

.card-desc-md {
  font-size: 16px;
  color: var(--text-gray);
  line-height: 1.5;
}

.rewards-footer {
  margin-top: 32px;
}

.rewards-label {
  display: block;
  font-size: 14px;
  color: var(--text-gray);
  font-weight: 500;
  margin-bottom: 12px;
}

.reward-pills {
  display: flex;
  gap: 16px;
}

.reward-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-bolt {
  font-size: 18px;
  color: #8b5cf6; /* purple bolt */
}

.icon-orb {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #facc15, #ec4899, #3b82f6);
  border-radius: 50%;
}

.value {
  font-weight: 800;
  font-size: 18px;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-container {
    flex-direction: column;
    height: auto;
  }

  .hero-card {
    width: 100%;
    min-height: 400px;
  }

  .map-card {
    min-height: 500px; /* Give space for image */
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 12px 16px;
  }

  .nav-menu {
    display: none; /* Hide nav links on mobile */
  }

  .card-title-lg {
    font-size: 32px;
  }

  .prize-highlight {
    font-size: 36px;
  }
}

/* Campaign Sections */
.content-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 60px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.campaign-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row-header h2 {
  font-size: 24px;
  font-weight: 800;
}

.row-nav {
  display: flex;
  gap: 8px;
}

.nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background-color: #e5e7eb;
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
}

.nav-arrow:hover:not(.disabled) {
  background-color: #d1d5db;
}

.nav-arrow.disabled {
  opacity: 0.5;
  cursor: default;
}

.cards-scroller {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 20px; /* Space for scrollbar or shadow */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

.cards-scroller::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.campaign-card {
  min-width: 280px;
  width: 280px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.campaign-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.card-image {
  height: 140px;
  background-size: cover;
  background-position: center;
  position: relative;
  /* Overlay gradient */
  box-shadow: inset 0 -40px 40px -20px rgba(0, 0, 0, 0.5);
}

.card-overlay-text {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 40px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
  pointer-events: none;
}

.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
}

.badge-daily {
  background-color: rgba(255, 230, 240, 0.9);
  color: #db2777;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.badge-users {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto; /* Push to right */
  backdrop-filter: blur(4px);
}

.card-logo {
  position: relative;
  margin-top: -24px;
  margin-left: 16px;
  margin-bottom: 8px;
}

.logo-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  color: white;
}

.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback colors for logos */
.bg-purple {
  background-color: #8b5cf6;
}
.bg-red {
  background-color: #ef4444;
}
.bg-blue {
  background-color: #3b82f6;
}
.bg-green {
  background-color: #10b981;
}
.bg-dark {
  background-color: #111827;
}

.card-body {
  padding: 0 20px;
  flex-grow: 1;
}

.provider-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.card-footer {
  padding: 20px;
  display: flex;
  gap: 10px;
  margin-top: auto; /* Push to bottom */
}

.pill-gray {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-orb-sm {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #facc15, #ec4899, #3b82f6);
  border-radius: 50%;
}

/* Section specific overrides if necessary */

@media (max-width: 600px) {
  .content-wrapper {
    padding: 0 16px 40px;
  }

  .row-nav {
    display: none; /* Hide nav arrows on mobile, scroll is natural */
  }
}

.btn-check-eligibility {
  width: 100%;
  background-color: #111827;
  color: white;
  border: none;
  padding: 10px 0;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.btn-check-eligibility:hover {
  background-color: #000;
  transform: translateY(-1px);
}

/* Footer */
.site-footer {
  padding: 0 24px 40px 24px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-container {
  width: 100%;
  max-width: 1248px; /* Restoring max-width for the footer content specifically if desired, or keep it fluid */
  background: linear-gradient(90deg, #1e1b2e 0%, #0f172a 40%, #000000 100%);
  border-radius: 24px;
  padding: 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
  min-height: 200px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.copyright {
  font-size: 14px;
  color: #6b7280;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-column h4 {
  font-size: 16px;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 4px;
}

.footer-column a {
  color: #f3f4f6;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: var(--accent-green);
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-icon {
  width: 24px;
  height: 24px;
  fill: white;
  opacity: 0.8;
  transition: opacity 0.2s;
  cursor: pointer;
}

.social-icon:hover {
  opacity: 1;
}

@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    padding: 40px;
    gap: 40px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
    justify-content: space-between;
  }

  .footer-left {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    gap: 32px;
  }
}
/* Mobile Menu & Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative; /* Essential for z-index */
  z-index: 1100; /* Above overlay */
  margin-left: 16px;
  padding: 0;
}

.bar {
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  transform-origin: left center;
}

/* Hamburger animation state */
.hamburger-btn.active .bar:nth-child(1) {
  transform: rotate(45deg);
}

.hamburger-btn.active .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.hamburger-btn.active .bar:nth-child(3) {
  transform: rotate(-45deg);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1050; /* Below nav but above everything else, actually needs to cover nav if fullscreen, but let's keep nav visible or cover it? 
                 If we keep nav visible, we need to handle top padding. 
                 Let's make it cover everything but the header if possible, or just fullscreen. 
                 Actually, often better to sit below the floating header or cover nicely.
                 Let's fix it to top 0 but with padding-top matching header.
                 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 24px;
}

.mobile-nav-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.mobile-nav-item {
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
}

.mobile-nav-item:hover {
  color: var(--accent-pink-text);
}

.mobile-sign-in {
  width: 100%;
  max-width: 200px;
  height: 50px;
  font-size: 16px;
}

@media (max-width: 900px) {
  .body-wrapper {
    max-width: 100%;
    margin: 0; /* Reset global margin */
  }

  .site-navbar-floating,
  .marquee-floating {
    width: calc(100% - 32px); /* Slightly more width on mobile */
  }

  .hamburger-btn {
    display: flex;
  }

  .nav-menu-centered {
    display: none;
  }

  /* Show connect button but adjust size */
  .sign-in-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .btn-text-desktop {
    display: none;
  }

  .btn-text-mobile {
    display: inline;
  }
}

/* Intro Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-navbar-floating {
  animation: fadeInUp 0.6s ease-out forwards;
}

.marquee-floating {
  opacity: 0; /* Initial state */
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
}

.hero-wrapper {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.4s forwards;
}

.content-wrapper {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.6s forwards;
}