body { font-family: Arial, sans-serif; background: #f2f2f2; margin: 0; padding: 0; }
h1 { text-align: center; margin: 24px 0; }

.strategy-filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 20px; }
.strategy-filters label { display: flex; flex-direction: column; font-size: 14px; }
.strategy-filters input, .strategy-filters select { margin-top: 4px; padding: 6px 8px; font-size: 14px; }

.badge-filters { display: flex; gap: 8px; margin-top: 8px; }
.badge-filters button { padding: 6px 12px; font-size: 12px; font-weight: bold; border: none; border-radius: 4px; background-color: #1e88e5; color: #fff; cursor: pointer; }
.badge-filters button:hover { background-color: #1565c0; }

.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding: 16px; }

.strategy-card { border: 1px solid #ddd; padding: 16px; background: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.strategy-card h2, .strategy-card h3 { margin-top: 0; }
.strategy-card ul { padding-left: 20px; }

.ea-cta-button { display: inline-block; margin-top: 12px; padding: 10px 16px; background: #1e88e5; color: #fff; text-decoration: none; border-radius: 4px; text-align: center; }

.badges { display: flex; gap: 8px; margin-bottom: 8px; }

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 12px;
  text-transform: uppercase;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.badge.new-release { background-color: #e91e63; }
.badge.top-rated { background-color: #ff9800; }
.badges .expertise { margin-left: auto; }

#filter-new-release,
#filter-top-rated,
#filter-clear-badges { padding: 0px 10px; font-size: 12px; line-height: 30px; height: 32px; margin-top:12px; background-color: #1e88e5; }

.expertise { padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; display: inline-block; }
.expertise-beginner { background: #d4f4dd; color: #333; }
.expertise-intermediate { background: #FFFF79; color: #084c85; }
.expertise-advanced { background: #F4D612; color: #084c85; }
.expertise-specialist { background: #8484FF; color: #F2FFEC; }
.expertise-all-levels { background: #DAAD81; color: #333; }

.currency-info {
  position: relative;
  cursor: help;
  color: #2a7ae2;
}

.currency-info .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow:
                0 0 10px rgba(7, 32, 1, 0.7),
                inset 0 0 5px rgba(15, 1, 29, 0.2);  white-space: nowrap;
  font-size: 13px;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.currency-info:hover {
  text-decoration: underline;
}

.currency-info:hover .tooltip,
.currency-info:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

.hero {
  padding: 2rem 1.5rem;
  background: #050608;
  color: #f5f5f5;
  text-align: center;
}

.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.tagline {
  font-size: 1.2rem;
  color: #c9d1d9;
  margin-bottom: 1.75rem;
}

.intro-copy {
  font-size: 1.20rem;
  line-height: 1.65;
  color: #9ca3af;
}




@media(max-width: 480px) { .strategy-card { padding: 12px; } }