/* ============================================================
   ARTIC RP - Main Stylesheet v2 - Stile fedele al Tebex originale
   Progetto creato da paku029 che concede tutti i diritti a ARTIC RP FIVEM
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  background-color: #0a0a0a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#0a0a0a; }
::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }

/* ── Sfondo stellato/nebuloso come il Tebex originale ── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  /* Gradiente radiale centrale bianco sfumato verso il nero - identico all'originale */
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,255,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events:none;
}

/* ── Canvas particelle (puntini bianchi sottili come l'originale) ── */
#particles-canvas {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.5;
}

/* ── Tutto il contenuto sopra lo sfondo ── */
.z1 { position:relative; z-index:1; }

/* ============================================================
   COUNTER BAR (visualizzazioni in cima)
   ============================================================ */
.view-counter-bar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  height:36px;
  background:#111;
  border-bottom:1px solid #222;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Inter', sans-serif;
  font-size:0.78rem;
  color:#aaa;
}

.counter-number {
  font-weight:800;
  font-size:0.95rem;
  color:#fff;
  display:inline-block;
  transition:transform 0.2s;
}
.counter-number.bump { animation:counterBump 0.4s ease; }
@keyframes counterBump {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.3); color:#fff; }
  100% { transform:scale(1); }
}

.counter-progress-wrap {
  width:100px; height:3px;
  background:rgba(255,255,255,0.1);
  border-radius:2px; overflow:hidden;
}
.counter-progress-bar {
  height:100%;
  background:#fff;
  border-radius:2px;
  transition:width 1s ease;
}
.counter-label { font-size:0.72rem; color:#888; }
.counter-label strong { color:#fff; }

/* ============================================================
   NAVBAR - identica all'originale: sfondo dark, link bianchi uppercase
   ============================================================ */
.navbar {
  position:fixed;
  top:36px; left:0; right:0;
  z-index:100;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #1a1a1a;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}

.navbar-logo img {
  height:42px;
  filter:brightness(1);
  transition:opacity 0.25s;
}
.navbar-logo img:hover { opacity:0.8; }

/* Nav links - stile Tebex: uppercase, font-weight 600, bianco/grigio */
.nav-links {
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
}
.nav-links a {
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#888;
  text-decoration:none;
  position:relative;
  transition:color 0.2s;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:2px;
  background:#fff;
  transition:width 0.25s;
}
.nav-links a:hover,
.nav-links a.active { color:#fff; }
.nav-links a.active::after,
.nav-links a:hover::after { width:100%; }

/* Pulsante ACCEDI (top right - come l'originale) */
.btn-accedi {
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  background:transparent;
  border:2px solid #fff;
  border-radius:50px;
  padding:8px 22px;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.25s;
}
.btn-accedi:hover {
  background:#fff;
  color:#000;
}

/* Pulsante Dev (discreto) */
.btn-dev-access {
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#444;
  background:transparent;
  border:1px solid #333;
  border-radius:4px;
  padding:4px 10px;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.25s;
}
.btn-dev-access:hover { color:#888; border-color:#555; }

/* Hamburger mobile */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
}
.hamburger span {
  width:22px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:all 0.3s;
}

/* ── Offset pagina ── */
.page-offset { padding-top:calc(36px + 64px + 20px); }
.navbar { top:36px; }

/* ============================================================
   HERO SECTION - sfondo scuro con glow centrale bianco
   Titolo gigante bold bianco, come l'originale
   ============================================================ */
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:7rem 2rem 5rem;
  position:relative;
}

/* Badge "BUONO SHOPPING!" - pillola grigio scuro come l'originale */
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  border-radius:50px;
  padding:8px 20px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#ccc;
  margin-bottom:2.5rem;
}

/* Titolo hero - GIGANTE e BOLD come l'originale */
.hero-title {
  font-size:clamp(2.8rem, 7vw, 5.5rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.01em;
  color:#fff;
  text-transform:uppercase;
  margin-bottom:1.5rem;
  max-width:900px;
}

/* Sottotitolo grigio chiaro */
.hero-sub {
  font-size:1rem;
  font-weight:400;
  color:#888;
  max-width:520px;
  margin:0 auto 2.5rem;
  line-height:1.6;
}

/* Badge Discord - pillola scura come l'originale */
.discord-pill {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  border-radius:50px;
  padding:12px 24px;
  margin-bottom:2rem;
  text-decoration:none;
  transition:border-color 0.25s, background 0.25s;
  max-width:420px;
  width:100%;
}
.discord-pill:hover { background:#222; border-color:#444; }
.discord-pill-icon {
  width:36px; height:36px;
  background:#5865F2;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.discord-pill-text { text-align:left; }
.discord-pill-text strong {
  display:block;
  font-size:0.88rem;
  font-weight:700;
  color:#fff;
}
.discord-pill-text span {
  font-size:0.78rem;
  color:#666;
}

/* CTA bottoni hero - grandi, pillola, come "CERCA ARTICOLI" e "CONNETTITI AL SERVER" */
.hero-ctas {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

/* ============================================================
   SISTEMA BOTTONI - stile Tebex: pillola bianca o dark
   ============================================================ */

/* Bottone primario bianco (come "CERCA ARTICOLI") */
.btn-primary {
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#000;
  background:#fff;
  border:none;
  border-radius:50px;
  padding:16px 36px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.25s;
  white-space:nowrap;
}
.btn-primary:hover {
  background:#e5e5e5;
  transform:translateY(-1px);
}

/* Bottone outline scuro (come "CONNETTITI AL SERVER") */
.btn-outline {
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  background:#1a1a1a;
  border:1px solid #333;
  border-radius:50px;
  padding:15px 36px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.25s;
  white-space:nowrap;
}
.btn-outline:hover {
  background:#222;
  border-color:#555;
  transform:translateY(-1px);
}

/* Bottone Discord (viola) */
.btn-discord {
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  background:#5865F2;
  border:none;
  border-radius:50px;
  padding:16px 36px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.25s;
  white-space:nowrap;
}
.btn-discord:hover {
  background:#4752c4;
  transform:translateY(-1px);
}

/* Bottone Regolamento (verde scuro) */
.btn-rules {
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  background:#1a1a1a;
  border:1px solid #333;
  border-radius:50px;
  padding:15px 36px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.25s;
}
.btn-rules:hover { background:#222; border-color:#555; }

/* Bottone GIOCA ORA - bianco grande con pulse */
.btn-play {
  font-family:'Inter', sans-serif;
  font-size:1rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#000;
  background:#fff;
  border:none;
  border-radius:50px;
  padding:20px 52px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all 0.25s;
  animation:playPulse 2.5s ease-in-out infinite;
}
@keyframes playPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,0.2); }
  50%      { box-shadow:0 0 0 12px rgba(255,255,255,0); }
}
.btn-play:hover {
  background:#e5e5e5;
  transform:translateY(-2px) scale(1.02);
}

/* ============================================================
   FEATURE CARDS - grigio scuro con bordo sottile, come l'originale
   ============================================================ */
.features-section {
  padding:5rem 2rem;
  max-width:1200px;
  margin:0 auto;
}

.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1px; /* gap minimo, come l'originale che usa bordi condivisi */
  background:#1e1e1e;
  border:1px solid #1e1e1e;
  border-radius:16px;
  overflow:hidden;
}

.feature-card {
  background:#111;
  padding:2rem 1.75rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  transition:background 0.25s;
}
.feature-card:hover { background:#161616; }

.feature-card .fc-icon {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.1rem;
  margin-bottom:0.25rem;
}
.feature-card h3 {
  font-size:0.9rem;
  font-weight:700;
  color:#fff;
  letter-spacing:0.01em;
}
.feature-card p {
  font-size:0.85rem;
  color:#666;
  line-height:1.55;
}

/* ============================================================
   SEZIONE TITOLI GRANDI - stile "PAGAMENTI RECENTI", "DOMANDE FREQUENTI"
   ============================================================ */
.big-section-title {
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  letter-spacing:-0.01em;
  margin-bottom:2.5rem;
}

.section-eyebrow {
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#555;
  display:block;
  text-align:center;
  margin-bottom:0.75rem;
}

/* ============================================================
   PAGAMENTI RECENTI - card grigio scuro con avatar iniziale
   ============================================================ */
.payments-section {
  padding:5rem 2rem;
  max-width:1200px;
  margin:0 auto;
}

.payments-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:0.75rem;
}

.payment-card {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:12px;
  padding:1rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
  transition:border-color 0.25s;
}
.payment-card:hover { border-color:#333; }

.payment-avatar {
  width:44px; height:44px;
  border-radius:50%;
  background:#5865F2;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  font-size:1.1rem;
  color:#fff;
  flex-shrink:0;
  text-transform:uppercase;
}
.payment-info { flex:1; }
.payment-name {
  font-size:0.85rem;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.payment-item {
  font-size:0.72rem;
  color:#555;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-top:2px;
}
.payment-amount {
  font-size:0.88rem;
  font-weight:700;
  color:#fff;
  background:#1e1e1e;
  border-radius:6px;
  padding:4px 12px;
  white-space:nowrap;
}

/* ============================================================
   FAQ - accordion stile Tebex: testo numerato, bordo sottile
   ============================================================ */
.faq-section {
  padding:3rem 2rem 5rem;
  max-width:900px;
  margin:0 auto;
}

.faq-item {
  border-bottom:1px solid #1e1e1e;
  padding:1.25rem 0;
  cursor:pointer;
}
.faq-header {
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.faq-num {
  font-size:0.72rem;
  font-weight:700;
  color:#444;
  letter-spacing:0.05em;
  min-width:24px;
}
.faq-question {
  font-size:0.92rem;
  font-weight:600;
  color:#ccc;
  flex:1;
  transition:color 0.2s;
}
.faq-item:hover .faq-question { color:#fff; }
.faq-answer {
  font-size:0.88rem;
  color:#555;
  line-height:1.65;
  padding:0.75rem 0 0 2.5rem;
  display:none;
}
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-question { color:#fff; }

/* ============================================================
   MOTIVATIONAL / CARD SEZIONE HOME
   ============================================================ */
.motiv-section {
  padding:5rem 2rem;
  text-align:center;
}

.motiv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1px;
  background:#1e1e1e;
  border:1px solid #1e1e1e;
  border-radius:16px;
  overflow:hidden;
  max-width:1100px;
  margin:2.5rem auto 0;
}

.motiv-card {
  background:#111;
  padding:2rem 1.75rem;
  text-align:center;
  transition:background 0.25s;
}
.motiv-card:hover { background:#161616; }
.motiv-icon { font-size:1.8rem; margin-bottom:0.75rem; display:block; }
.motiv-card h3 {
  font-size:0.85rem;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.5rem;
}
.motiv-card p { font-size:0.83rem; color:#555; line-height:1.55; }

/* ============================================================
   SHOP PAGE - griglia prodotti
   ============================================================ */
.shop-hero {
  padding:5rem 2rem 3rem;
  text-align:center;
}

.shop-filter-bar {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin-bottom:3rem;
}
.filter-btn {
  font-family:'Inter', sans-serif;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:7px 18px;
  border-radius:50px;
  border:1px solid #222;
  background:#111;
  color:#666;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
  border-color:#555;
  color:#fff;
  background:#1a1a1a;
}

.shop-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1px;
  background:#1e1e1e;
  max-width:1200px;
  margin:0 auto 5rem;
  border:1px solid #1e1e1e;
  border-radius:16px;
  overflow:hidden;
  padding:0 2rem;
}
/* overide per shop grid */
.shop-grid-wrap {
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem 5rem;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1rem;
}

.shop-card {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color 0.25s, background 0.25s;
  position:relative;
}
.shop-card:hover { border-color:#333; background:#131313; }

.shop-card-header {
  padding:1.5rem 1.5rem 0;
  display:flex;
  align-items:center;
  gap:1rem;
}
.shop-card-icon {
  width:52px; height:52px;
  border-radius:10px;
  background:#1a1a1a;
  border:1px solid #222;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  flex-shrink:0;
}
.shop-card-cat {
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#555;
}
.shop-card-name {
  font-size:1rem;
  font-weight:700;
  color:#fff;
  margin-top:2px;
}
.shop-card-body {
  padding:1rem 1.5rem;
  flex:1;
}
.shop-card-desc { font-size:0.85rem; color:#555; line-height:1.55; margin-bottom:0.75rem; }
.shop-card-features { list-style:none; }
.shop-card-features li {
  font-size:0.8rem;
  color:#444;
  padding:3px 0;
  display:flex;
  align-items:center;
  gap:6px;
}
.shop-card-features li::before { content:'—'; color:#333; font-size:0.7rem; }
.shop-card-footer {
  padding:1rem 1.5rem 1.5rem;
  border-top:1px solid #1a1a1a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.shop-card-price {
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
}
.popular-tag {
  position:absolute;
  top:12px; right:12px;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:#fff;
  color:#000;
  padding:3px 10px;
  border-radius:50px;
}

/* ============================================================
   PROMO BANNER
   ============================================================ */
.promo-banner {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:12px;
  padding:1rem 1.75rem;
  max-width:1200px;
  margin:0 auto 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.promo-banner-text {
  font-size:0.85rem;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.promo-code {
  font-size:1rem;
  font-weight:800;
  color:#fff;
  background:#1a1a1a;
  border:1px dashed #444;
  padding:6px 18px;
  border-radius:6px;
  letter-spacing:0.1em;
  cursor:pointer;
  transition:all 0.2s;
}
.promo-code:hover { background:#222; border-color:#666; }

/* ============================================================
   SERVER PAGE
   ============================================================ */
.server-hero {
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6rem 2rem 3rem;
  text-align:center;
}

.server-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1px;
  background:#1e1e1e;
  border:1px solid #1e1e1e;
  border-radius:16px;
  overflow:hidden;
  max-width:900px;
  margin:2.5rem auto;
}
.server-stat {
  background:#111;
  padding:2rem;
  text-align:center;
  transition:background 0.25s;
}
.server-stat:hover { background:#161616; }
.server-stat .stat-num {
  font-size:2.5rem;
  font-weight:900;
  color:#fff;
  display:block;
  line-height:1;
  margin-bottom:0.4rem;
}
.server-stat .stat-label {
  font-size:0.72rem;
  color:#555;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

/* Quote grande */
.big-quote {
  background:#111;
  border:1px solid #1e1e1e;
  border-left:3px solid #fff;
  border-radius:0 12px 12px 0;
  padding:1.75rem 2rem;
  max-width:700px;
  margin:3rem auto;
  font-size:1.15rem;
  font-weight:600;
  font-style:italic;
  color:#ccc;
  line-height:1.5;
}

/* Timeline */
.timeline {
  position:relative;
  max-width:720px;
  margin:3rem auto 0;
  padding-left:2rem;
}
.timeline::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:linear-gradient(180deg, #333, transparent);
}
.timeline-item {
  position:relative;
  margin-bottom:2.5rem;
  padding-left:1.75rem;
}
.timeline-item::before {
  content:'';
  position:absolute;
  left:-1.75rem; top:6px;
  width:8px; height:8px;
  border-radius:50%;
  background:#fff;
  border:2px solid #0a0a0a;
  box-shadow:0 0 0 1px #fff;
}
.timeline-item h3 {
  font-size:0.92rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#fff;
  margin-bottom:0.4rem;
}
.timeline-item p { font-size:0.85rem; color:#555; line-height:1.6; }

/* Play section */
.play-section {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:20px;
  padding:4rem 2rem;
  text-align:center;
  max-width:900px;
  margin:4rem auto;
}
.server-ip-box {
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  background:#1a1a1a;
  border:1px dashed #333;
  border-radius:8px;
  padding:10px 20px;
  font-size:0.92rem;
  font-weight:700;
  color:#ccc;
  margin-bottom:2rem;
  cursor:pointer;
  transition:all 0.2s;
  letter-spacing:0.04em;
}
.server-ip-box:hover { background:#222; border-color:#555; }

/* ============================================================
   GERARCHIA STAFF - pagina pubblica
   ============================================================ */
.staff-page { max-width:1100px; margin:0 auto; padding:0 2rem 5rem; }

.staff-role-section { margin-bottom:4rem; }
.staff-role-title {
  font-size:clamp(1.4rem, 3vw, 2rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#fff;
  text-align:center;
  margin-bottom:1.5rem;
}

.staff-cards-row {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:center;
}

.staff-card {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:12px;
  padding:1.5rem 1.75rem;
  text-align:center;
  min-width:130px;
  transition:border-color 0.25s, background 0.25s;
}
.staff-card:hover { border-color:#333; background:#161616; }
.staff-avatar {
  width:56px; height:56px;
  border-radius:50%;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin:0 auto 0.75rem;
}
.staff-name { font-size:0.92rem; font-weight:700; color:#fff; }
.empty-staff { text-align:center; padding:3rem; color:#444; font-size:0.9rem; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.login-box {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:16px;
  padding:3rem 2.5rem;
  width:100%;
  max-width:420px;
}
.login-logo { display:block; width:64px; margin:0 auto 1.5rem; }
.login-warning {
  font-size:0.78rem;
  color:#888;
  background:#1a1a1a;
  border:1px solid #222;
  border-radius:8px;
  padding:10px 14px;
  text-align:center;
  margin-bottom:1.75rem;
  line-height:1.5;
}
.login-title {
  font-size:1.2rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  text-align:center;
  color:#fff;
  margin-bottom:0.3rem;
}
.login-sub { text-align:center; font-size:0.82rem; color:#555; margin-bottom:2rem; }
.login-error {
  font-size:0.8rem;
  color:#ff4444;
  text-align:center;
  margin-bottom:1rem;
  display:none;
}

.field-group { margin-bottom:1.1rem; }
.field-group label {
  display:block;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#555;
  margin-bottom:5px;
}
.field-group input {
  width:100%;
  background:#0a0a0a;
  border:1px solid #222;
  border-radius:8px;
  padding:11px 14px;
  font-family:'Inter', sans-serif;
  font-size:0.9rem;
  color:#fff;
  outline:none;
  transition:border-color 0.2s;
}
.field-group input:focus { border-color:#555; }
.field-group input::placeholder { color:#333; }

.back-link {
  display:block;
  text-align:center;
  margin-top:1.25rem;
  font-size:0.8rem;
  color:#444;
  text-decoration:none;
  transition:color 0.2s;
}
.back-link:hover { color:#888; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-header-bar {
  background:#0f0f0f;
  border-bottom:1px solid #1e1e1e;
  padding:1.25rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.admin-panel { max-width:900px; margin:0 auto; padding:0 2rem 5rem; }

.admin-action-card {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:12px;
  padding:1.75rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  transition:border-color 0.2s;
}
.admin-action-card:hover { border-color:#333; }
.admin-action-info h3 {
  font-size:0.92rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#fff;
  margin-bottom:0.3rem;
}
.admin-action-info p { font-size:0.82rem; color:#555; }

.staff-manager {
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:14px;
  overflow:hidden;
  margin-top:1.5rem;
}
.staff-manager-header {
  padding:1.25rem 1.75rem;
  border-bottom:1px solid #1e1e1e;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.75rem;
}
.staff-manager-header h2 {
  font-size:0.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#fff;
}
.staff-manager-body { padding:1.75rem; }

.add-staff-form {
  background:#0d0d0d;
  border:1px solid #1a1a1a;
  border-radius:10px;
  padding:1.25rem;
  margin-bottom:1.75rem;
}
.add-staff-form h3 {
  font-size:0.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#888;
  margin-bottom:1rem;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:0.75rem;
  align-items:end;
}
@media(max-width:700px){ .form-row{ grid-template-columns:1fr; } }

.form-row select,
.form-row input[type="text"] {
  width:100%;
  background:#0a0a0a;
  border:1px solid #222;
  border-radius:8px;
  padding:10px 12px;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  color:#fff;
  outline:none;
  transition:border-color 0.2s;
}
.form-row select:focus,
.form-row input[type="text"]:focus { border-color:#555; }
.form-row select option { background:#111; }

.form-group label {
  display:block;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:#555;
  margin-bottom:4px;
}

.staff-list-admin { display:flex; flex-direction:column; gap:0.5rem; }
.staff-list-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#0d0d0d;
  border:1px solid #1a1a1a;
  border-radius:8px;
  padding:12px 16px;
  gap:1rem;
  transition:border-color 0.2s, background 0.2s;
}
.staff-list-item:hover {
  background:#111;
  border-color:#2a2a2a;
}
.staff-list-item-info { display:flex; align-items:center; gap:10px; }
.staff-list-item-icon {
  width:34px; height:34px;
  border-radius:50%;
  background:#1a1a1a;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
}
.staff-list-item-name { font-size:0.88rem; font-weight:600; color:#fff; }
.staff-list-item-role { font-size:0.72rem; color:#555; text-transform:uppercase; letter-spacing:0.05em; }

.btn-remove {
  background:transparent;
  border:1px solid #2a2a2a;
  color:#555;
  border-radius:6px;
  padding:4px 12px;
  font-size:0.75rem;
  font-family:'Inter', sans-serif;
  cursor:pointer;
  transition:all 0.2s;
}
.btn-remove:hover { border-color:#ff4444; color:#ff4444; }

/* ============================================================
   MODAL REGOLAMENTO
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.9);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#111;
  border:1px solid #222;
  border-radius:14px;
  width:100%; max-width:860px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  animation:modalIn 0.25s ease;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.96) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-header {
  padding:1.1rem 1.5rem;
  border-bottom:1px solid #1e1e1e;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-header h2 {
  font-size:0.88rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#fff;
}
.modal-close {
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  color:#888;
  border-radius:6px;
  width:30px; height:30px;
  cursor:pointer;
  font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.modal-close:hover { border-color:#555; color:#fff; }
.modal-iframe-wrap { flex:1; overflow:hidden; border-radius:0 0 0 0; }
.modal-iframe-wrap iframe { width:100%; height:70vh; border:none; }
.modal-footer {
  padding:0.9rem 1.5rem;
  border-top:1px solid #1e1e1e;
  display:flex;
  justify-content:flex-end;
  gap:0.5rem;
}

/* ============================================================
   FOOTER - tre colonne come l'originale
   ============================================================ */
.site-footer {
  border-top:1px solid #1a1a1a;
  padding:4rem 2rem 2rem;
  max-width:1200px;
  margin:0 auto;
}
.footer-inner {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}
@media(max-width:768px){ .footer-inner{ grid-template-columns:1fr; gap:2rem; } }

.footer-col-title {
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#444;
  margin-bottom:1.25rem;
}
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-links-list a {
  font-size:0.92rem;
  font-weight:600;
  color:#ccc;
  text-decoration:none;
  transition:color 0.2s;
}
.footer-links-list a:hover { color:#fff; }
.footer-bold-links a { font-weight:700; }

.footer-social {
  display:flex;
  gap:0.75rem;
  margin-top:0.5rem;
}
.footer-social-btn {
  width:40px; height:40px;
  border-radius:50%;
  background:#1a1a1a;
  border:1px solid #222;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:1rem;
  transition:all 0.2s;
}
.footer-social-btn:hover { background:#222; border-color:#444; }

.footer-about-text { font-size:0.85rem; color:#555; line-height:1.6; }

.footer-bottom {
  border-top:1px solid #1a1a1a;
  padding-top:1.5rem;
  text-align:center;
}
.footer-copy { font-size:0.8rem; color:#333; }
.footer-credit { font-size:0.72rem; color:#2a2a2a; margin-top:0.3rem; }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  width:100%; max-width:1000px;
  margin:0 auto;
  height:1px;
  background:#1a1a1a;
}

/* ============================================================
   ANIMAZIONI ENTRATA
   ============================================================ */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.55s ease, transform 0.55s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

.stagger-children .fade-in:nth-child(1){ transition-delay:0.04s; }
.stagger-children .fade-in:nth-child(2){ transition-delay:0.10s; }
.stagger-children .fade-in:nth-child(3){ transition-delay:0.16s; }
.stagger-children .fade-in:nth-child(4){ transition-delay:0.22s; }
.stagger-children .fade-in:nth-child(5){ transition-delay:0.28s; }
.stagger-children .fade-in:nth-child(6){ transition-delay:0.34s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .nav-links { display:none; }
  .nav-links.open {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:calc(36px + 64px); left:0; right:0;
    background:#0a0a0a;
    border-bottom:1px solid #1a1a1a;
    padding:1.5rem 2rem;
    gap:1.25rem;
    z-index:99;
  }
  .hamburger { display:flex; }
  .view-counter-bar { font-size:0.68rem; gap:6px; }
  .counter-progress-wrap { display:none; }
  .hero-title { font-size:2.2rem; }
  .big-section-title { font-size:2rem; }
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
@keyframes toastIn { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes loginShake {
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(5px); }
}

/* Security dots login */
.security-dots { display:flex; gap:6px; justify-content:center; margin-bottom:1.5rem; }
.security-dots span {
  width:6px; height:6px; border-radius:50%;
  background:#333;
  animation:dotPulse 1.5s ease-in-out infinite;
}
.security-dots span:nth-child(2){ animation-delay:0.25s; }
.security-dots span:nth-child(3){ animation-delay:0.5s; }
@keyframes dotPulse {
  0%,100%{ opacity:0.3; } 50%{ opacity:1; }
}

/* ============================================================
   EVENTO 500 VISUALIZZAZIONI - stili banner e sezione
   ============================================================ */

/* Pulsante copia link nell evento */
#evento-500 .btn-outline {
  border-color: rgba(255,255,255,0.2);
  color: #888;
}
#evento-500 .btn-outline:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.06);
}

/* Counter bar migliorata - testo più visibile */
.view-counter-bar strong {
  color: #fff;
  font-weight: 800;
}

/* Animazione pulse sul counter bar quando quasi raggiunto */
.view-counter-bar.near-goal .counter-number {
  animation: nearGoalPulse 1.2s ease-in-out infinite;
}
@keyframes nearGoalPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Banner compatto responsive */
#evento-banner-compact {
  position: relative;
  z-index: 1;
}
@media(max-width:600px) {
  #evento-banner-compact > div {
    flex-direction: column;
    gap: 0.5rem;
  }
}