/* ==========================================================================
   ADIEM — variante di tema sul sistema di design condiviso.
   Stessa struttura di Budgy, ancorata ai colori dell'app: fondo neutro
   quasi nero e verde menta come unico accento. Le categorie riprendono
   esattamente i colori usati dentro l'app.
   ========================================================================== */

:root {
  --navy-950: #131417;
  --navy-800: #1D1F23;
  --navy-700: #262A2F;
  --navy-600: #3A3F46;
  --peach-300: #B6F0CF;
  --clay-500: #7EE0A8;
  --clay-400: #9BE9BC;
  --ink-50: #F1F3F1;
  --ink-200: #C6CBC8;
  --ink-400: #8B928F;
  --line: rgba(241, 243, 241, 0.13);

  --c-documento: #5A8FC7;
  --c-ricorso: #8E7BD0;
  --c-bolletta: #4E9E5C;
  --c-salute: #E0563F;
  --c-auto: #7B79E8;
  --c-casa: #D99A2B;
  --c-buoni: #E07A9E;
  --c-altro: #8B928F;
}

a { border-bottom-color: rgba(182, 240, 207, 0.32); }

.tier.premium {
  border-color: rgba(126, 224, 168, 0.4);
  background: linear-gradient(180deg, rgba(126, 224, 168, 0.08), rgba(126, 224, 168, 0.02));
}
.store-badge--primary small { color: rgba(19, 20, 23, 0.65); }
.trust-row li::before { color: var(--clay-400); }
.hero::before {
  background: radial-gradient(closest-side, rgba(126, 224, 168, 0.11), rgba(126, 224, 168, 0.035) 55%, transparent 72%);
}
.store-badge--primary { box-shadow: 0 12px 34px -14px rgba(126, 224, 168, 0.7); }
.how-card:hover, .shot-card:hover, .tier:hover, .contact-card:hover {
  border-color: rgba(126, 224, 168, 0.35);
}
.lang-switch button[aria-pressed="true"] { background: transparent; color: var(--ink-50); }

/* Categorie dell'app, come griglia di etichette */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.cats li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--ink-200);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 15px 7px 12px;
  background: var(--navy-800);
}
.cats li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat, var(--clay-500));
}

/* Contatore del limite gratuito */
.quota {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-400);
}
.quota-bar {
  flex: 1 1 240px;
  height: 6px;
  border-radius: 99px;
  background: var(--navy-700);
  overflow: hidden;
  min-width: 180px;
}
.quota-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--clay-500), var(--clay-400));
  transform-origin: left center;
  animation: fillBar 1.1s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: .2s;
}


/* Icona nella nav: alone verde sotto, per staccarla dal fondo */
.brand-mark {
  box-shadow:
    0 1px 0 rgba(241, 243, 241, 0.18) inset,
    0 0 0 1px rgba(126, 224, 168, 0.35),
    0 0 10px 1px rgba(126, 224, 168, 0.85),
    0 0 22px 4px rgba(126, 224, 168, 0.5),
    0 0 38px 10px rgba(126, 224, 168, 0.3);
}

/* Postilla sui prezzi per paese */
.price-note {
  margin-top: 14px;
  font-weight: 700;
  max-width: 62ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-400);
}