@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap");

:root {
  --store-bg: #111713;
  --store-panel: #19201b;
  --store-line: #354037;
  --store-acid: #d7ef43;
  --store-paper: #f1eddf;
}

body {
  padding-bottom: 4rem;
  background: var(--store-bg);
  font-family: "Manrope", Arial, sans-serif;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--store-acid);
  outline-offset: 3px;
}

.store-top {
  min-height: 4.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 4vw, 4rem);
  border-bottom: 1px solid var(--store-line);
  font: 500 .7rem "DM Mono", monospace;
  text-transform: uppercase;
}

.store-top > div { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.store-top a { color: #b9c4bb; }
.store-top a:hover { color: var(--store-acid); }
.store-top .store-brand { color: var(--store-paper); font: 700 1rem "Manrope", sans-serif; text-transform: none; }

.hero {
  padding: clamp(4.5rem, 9vw, 8rem) 1.5rem clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 80% 15%, rgba(215, 239, 67, .16), transparent 26%),
    var(--store-bg);
}

.hero h1 {
  max-width: 900px;
  margin-inline: auto;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.065em;
}

.hero h1 span { color: var(--store-acid); font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; }
.hero p { font-family: "Manrope", sans-serif; }
.price-badge { background: transparent; border: 1px solid var(--store-line); color: var(--store-acid); }

.lang-nav { position: sticky; top: 0; z-index: 5; background: rgba(17, 23, 19, .94); backdrop-filter: blur(12px); }
.lang-btn { font-family: "DM Mono", monospace; }
.lang-btn:hover,
.lang-btn.active { background: var(--store-acid); border-color: var(--store-acid); color: var(--store-bg); }

.section { max-width: 1240px; padding-block: clamp(3rem, 6vw, 5rem); }
.section-title { color: #9aa59c; font-family: "DM Mono", monospace; font-size: .72rem; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; min-height: 15rem; background: var(--store-panel); border-color: var(--store-line); border-radius: .8rem; padding: 1.5rem; }
.card:hover { border-color: #7b8d7e; transform: translateY(-2px); }
.card-title { color: var(--store-paper); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.card-desc { color: #9aa59c; font-size: .82rem; }
.card-footer { margin-top: auto; }
.card-price { color: var(--store-acid); }
.card-btn { background: transparent; border: 1px solid #7c8b7e; border-radius: 999px; }
.card-btn:hover { background: var(--store-acid); border-color: var(--store-acid); color: var(--store-bg); }

footer { color: #879188; }
footer a { color: #b7c0b8; }

@media (max-width: 680px) {
  .store-top { align-items: flex-start; }
  .store-top > div { justify-content: flex-end; }
  .store-top > div a:nth-child(2) { display: none; }
}