/* === DESIGN TOKENS === */
:root {
  --radius: 0.875rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.16 0.03 255);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.16 0.03 255);
  --muted: oklch(0.975 0.005 250);
  --muted-foreground: oklch(0.5 0.02 255);
  --border: oklch(0.92 0.008 250);
  --input: oklch(0.94 0.008 250);
  --ring: oklch(0.55 0.18 248);
  --primary: oklch(0.46 0.18 252);
  --primary-foreground: oklch(0.99 0 0);
  --primary-deep: oklch(0.32 0.15 258);
  --accent: oklch(0.72 0.16 55);
  --gold: oklch(0.78 0.15 80);
  --success: oklch(0.6 0.16 150);
  --destructive: oklch(0.6 0.22 25);
  --shadow-soft: 0 1px 2px oklch(0.2 0.05 250 / 0.04), 0 4px 14px -6px oklch(0.2 0.05 250 / 0.08);
  --shadow-card: 0 4px 6px -2px oklch(0.2 0.05 250 / 0.05), 0 18px 40px -16px oklch(0.2 0.08 250 / 0.18);
  --shadow-elev: 0 30px 60px -25px oklch(0.18 0.08 250 / 0.3);
  --shadow-glow: 0 0 0 1px oklch(0.55 0.18 248 / 0.15), 0 8px 30px -8px oklch(0.55 0.18 248 / 0.35);
  --gradient-hero: linear-gradient(135deg, oklch(0.22 0.08 252) 0%, oklch(0.32 0.14 248) 55%, oklch(0.42 0.16 240) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, oklch(0.05 0.05 250 / 0.85) 100%);
}

* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  letter-spacing: -0.022em;
  margin: 0;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: oklch(0.55 0.18 248 / 0.2); }

/* === UTILITY BACKGROUNDS / SHADOWS === */
.bg-hero-gradient { background: var(--gradient-hero); }
.bg-primary-gradient { background: var(--gradient-primary); }
.bg-fade-bottom { background: var(--gradient-fade-bottom); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-elev { box-shadow: var(--shadow-elev); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.font-display { font-family: "Plus Jakarta Sans", "Inter", sans-serif; }

/* === ANIMATIONS === */
@keyframes float-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: float-up .7s cubic-bezier(.16,1,.3,1) both; }

@keyframes fade-in-soft { from { opacity: 0; } to { opacity: 1; } }
.fade-soft { animation: fade-in-soft .6s ease-out both; }

@keyframes scale-in-soft {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.scale-in-soft { animation: scale-in-soft .35s cubic-bezier(.16,1,.3,1) both; }

@keyframes slide-up-toast {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-in { animation: slide-up-toast .45s cubic-bezier(.16,1,.3,1) both; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(0.62 0.2 150 / .55); }
  70%  { box-shadow: 0 0 0 12px oklch(0.62 0.2 150 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.2 150 / 0); }
}
.pulse-ring { animation: pulse-ring 2.2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.sr.is-visible { opacity: 1; transform: translateY(0); }

.card-lift { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.zoomable { overflow: hidden; }
.zoomable img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.zoomable:hover img { transform: scale(1.06); }

.btn-press { transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; }
.btn-press:hover { transform: translateY(-1px); }
.btn-press:active { transform: translateY(0); opacity: .92; }

/* === HEADER: leggibilità garantita === */
/* Stato iniziale (hero scuro alle spalle) — testo nav sempre bianco pieno */
#header .nav-link { color: #fff !important; }
#header .logo-text { color: #fff !important; }
#header .logo-sub { color: rgba(255,255,255,.75) !important; }
#header #mobile-toggle { color: #fff !important; }

.hdr-scrolled {
  background: #ffffff !important; /* opaco, niente colore che traspare */
  box-shadow: 0 1px 0 0 var(--border), 0 6px 20px -10px oklch(0.2 0.06 250 / .15);
}
.hdr-scrolled .nav-link { color: var(--foreground) !important; }
.hdr-scrolled .logo-text { color: var(--foreground) !important; }
.hdr-scrolled .logo-sub { color: var(--muted-foreground) !important; }
.hdr-scrolled #mobile-toggle { color: var(--foreground) !important; }
.hdr-scrolled #mobile-toggle:hover { background: var(--muted) !important; }

/* Hidden utility must beat sm:block on the social toast */
#social-toast.hidden { display: none !important; }

/* === Force white text on primary/whatsapp CTA buttons === */
/* Any button/link with the blue gradient background must have white text */
.bg-primary-gradient,
.bg-primary-gradient * {
  color: #ffffff !important;
}
/* WhatsApp green buttons (inline style background:#25D366) */
a[style*="#25D366"],
a[style*="#25D366"] * {
  color: #ffffff !important;
}

/* Header "Chiama Ora" button: text always white, even when scrolled */
.hdr-scrolled .bg-primary-gradient,
.hdr-scrolled .bg-primary-gradient * {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .hero-bg { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-soft, .scale-in-soft, .toast-in, .pulse-ring, .pulse-dot,
  .sr, .card-lift, .zoomable img, .btn-press {
    animation: none !important;
    transition: none !important;
  }
  .sr { opacity: 1; transform: none; }
}

/* === FAQ collapse === */
.faq-item .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item .faq-body > div { overflow: hidden; }
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* === Star icons === */
.star { color: #f59e0b; fill: #f59e0b; }
.star-empty { color: #e5e7eb; }