/* ============================================================
   LIQUID GLASS — Apple-inspired hover illumination
   ============================================================ */

/* ── Variabile mouse position per ogni card ── */
:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* ── GLASS CARDS: feature-card ── */
.feature-card {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 1.25rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  cursor: default;
}
/* Specular highlight (striscia di luce in cima) */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.02) 40%,
    transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
/* Luce che segue il cursore */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(212,168,32,0.08) 0%,
    rgba(212,168,32,0.05) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.feature-card:hover::after { opacity: 1; }
.feature-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.3),
              0 20px 60px rgba(0,0,0,0.5),
              0 0 40px rgba(212,168,32,0.1) !important;
  border-color: rgba(212,168,32,0.35) !important;
}
.feature-card > * { position: relative; z-index: 2; }

/* ── GLASS CARDS: product-card ── */
.product-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(212,168,32,0.20) 0%,
    rgba(212,168,32,0.06) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.product-card:hover::after { opacity: 1; }
.product-card:hover {
  transform: translateY(-7px) scale(1.015) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.4),
              0 25px 70px rgba(0,0,0,0.55),
              0 0 50px rgba(212,168,32,0.12) !important;
  border-color: rgba(212,168,32,0.4) !important;
}

/* ── GLASS CARDS: usecase-card ── */
.usecase-card {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 1.25rem !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.usecase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.usecase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(212,168,32,0.22) 0%,
    rgba(212,168,32,0.06) 40%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.usecase-card:hover::after { opacity: 1; }
.usecase-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.35),
              0 20px 60px rgba(0,0,0,0.5),
              0 0 40px rgba(212,168,32,0.10) !important;
  border-color: rgba(212,168,32,0.35) !important;
}
.usecase-card > * { position: relative; z-index: 2; }

/* ── GLASS NAV ── */
.site-header {
  background: rgba(17,17,17,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── PULSANTI: glow al hover ── */
.btn-wa {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-wa:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 0 30px rgba(212,168,32,0.4),
              0 8px 25px rgba(0,0,0,0.4) !important;
}

/* ── WhatsApp float: pulse glow ── */
.btn-wa-float {
  box-shadow: 0 4px 20px rgba(37,211,102,0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-wa-float:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 40px rgba(37,211,102,0.55),
              0 8px 30px rgba(0,0,0,0.4) !important;
}

/* ── Category cards (se presenti) ── */
.category-card, .cat-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.category-card::after, .cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(212,168,32,0.20) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.category-card:hover::after, .cat-card:hover::after { opacity: 1; }
.category-card:hover, .cat-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.35),
              0 20px 60px rgba(0,0,0,0.5) !important;
}


/* ══════════════════════════════════════════════════════════════
   HERO — Liquid Glass
   ══════════════════════════════════════════════════════════════ */

/* Pannello vetro contenuto hero */
.hero-inner {
  background: rgba(8, 8, 8, 0.08) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 1.6rem !important;
  padding: 2.2rem 2.2rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 32px 80px rgba(0,0,0,0.6) !important;
  max-width: 600px;
}
/* Specular line top */
.hero-inner::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10%;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.30) 30%,
    rgba(212,168,32,0.40) 50%,
    rgba(255,255,255,0.30) 70%,
    transparent) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.hero-inner::after {
  content: '' !important;
  position: absolute !important;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,168,32,0.10) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hero-inner > * { position: relative !important; z-index: 2 !important; }

/* Label pill */
.hero-label {
  display: inline-block !important;
  background: rgba(212,168,32,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(212,168,32,0.28) !important;
  border-radius: 99px !important;
  padding: 0.3rem 1rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.13em !important;
  color: #d4a820 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
  margin-bottom: 1rem !important;
}

/* Titolo */
.hero-title { color: #ffffff !important; text-shadow: 0 2px 16px rgba(0,0,0,0.55) !important; }
.hero-title span { background: none !important; -webkit-text-fill-color: unset !important; padding: 0 !important; box-decoration-break: unset !important; }
.hero-sub { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important; }

/* ── SHIKO KATALOGUN — glass gold ── */
a.btn.btn-gold,
.btn-gold {
  display: block !important;
  background: rgba(212,168,32,0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(212,168,32,0.50) !important;
  border-radius: 99px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 24px rgba(212,168,32,0.22),
    0 1px 0 rgba(212,168,32,0.12) !important;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
  text-decoration: none !important;
}
a.btn.btn-gold::before,
.btn-gold::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%) !important;
  border-radius: 99px 99px 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
a.btn.btn-gold:hover,
.btn-gold:hover {
  transform: translateY(-2px) !important;
  background: rgba(212,168,32,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 8px 32px rgba(212,168,32,0.40),
    0 0 50px rgba(212,168,32,0.15) !important;
}

/* ── KËRKONI ÇMIMIN — glass white ── */
a.btn.btn-outline,
.btn-outline {
  display: block !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 99px !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 4px 20px rgba(0,0,0,0.30) !important;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
  text-decoration: none !important;
}
a.btn.btn-outline::before,
.btn-outline::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%) !important;
  border-radius: 99px 99px 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
a.btn.btn-outline:hover,
.btn-outline:hover {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 8px 28px rgba(0,0,0,0.40) !important;
}

/* Rimuovi box scuro del sottotitolo */
.hero-sub,
.hero-sub *,
.hero-title span,
.hero-title * {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-decoration-break: unset !important;
  box-decoration-break: unset !important;
  padding: 0 !important;
}
.hero-sub {
  color: rgba(255,255,255,0.90) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7) !important;
}

/* ══════════════════════════════════════════════════════════════
   KATALOG — Foto con angoli arrotondati + glass cards
   ══════════════════════════════════════════════════════════════ */

/* Foto prodotti — angoli arrotondati */
.product-thumb {
  border-radius: 1rem 1rem 0 0 !important;
  overflow: hidden !important;
}
.product-thumb img {
  border-radius: 1rem 1rem 0 0 !important;
  display: block;
  width: 100%;
  transition: transform 0.5s ease !important;
}
.product-card:hover .product-thumb img {
  transform: scale(1.04) !important;
}

/* Catalog product card — glass */
.catalog-product.product-card,
.product-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.catalog-product.product-card::after,
.product-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212,168,32,0.18) 0%,
    rgba(212,168,32,0.04) 35%,
    transparent 65%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
  z-index: 3 !important;
  border-radius: inherit !important;
}
.catalog-product.product-card:hover::after,
.product-card:hover::after { opacity: 1 !important; }
.catalog-product.product-card:hover,
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.35),
              0 24px 60px rgba(0,0,0,0.55),
              0 0 40px rgba(212,168,32,0.10) !important;
  border-color: rgba(212,168,32,0.35) !important;
}

/* Bottone WhatsApp prodotto */
.product-wa {
  border-radius: 99px !important;
  background: rgba(37,211,102,0.12) !important;
  border: 1px solid rgba(37,211,102,0.30) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
}
.product-wa:hover {
  transform: translateY(-2px) !important;
  background: rgba(37,211,102,0.22) !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.30) !important;
}

/* ══════════════════════════════════════════════════════════════
   KONTAKT — Glass contact cards
   ══════════════════════════════════════════════════════════════ */
.contact-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 1.25rem !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.contact-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212,168,32,0.18) 0%,
    transparent 60%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.contact-card:hover::after { opacity: 1 !important; }
.contact-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,168,32,0.30) !important;
  box-shadow: 0 0 0 1px rgba(212,168,32,0.25),
              0 20px 50px rgba(0,0,0,0.45) !important;
}
.contact-card > * { position: relative !important; z-index: 2 !important; }

/* Pulsanti .btn-dark → glass dark */
.btn-dark {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 99px !important;
  color: rgba(255,255,255,0.90) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
}
.btn-dark:hover {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              0 8px 25px rgba(0,0,0,0.35) !important;
}

/* Page hero (katalog/kontakt) */
.page-hero {
  position: relative !important;
}

/* Map wrap */
.map-wrap {
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* CTA strip — glass dark band */
.cta-strip {
  background: rgba(212,168,32,0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Fix coming-soon-banner (sfondo bianco → glass dark) ── */
.coming-soon-banner {
  background: rgba(255,255,255,0.04) !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 1rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.coming-soon-banner h3 { color: var(--cream) !important; }
.coming-soon-banner p { color: rgba(255,255,255,0.70) !important; }

/* ── Fix nav categorie (sfondo bianco) ── */
div[style*="background:#fff"] {
  background: rgba(17,17,17,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}