@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@300;400;500;600&display=swap");

/* ============================================================
   ProWave — tema riutilizzabile v1
   Palette: logo blue surfaces, warm white text, restrained lime highlights
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --color-bg:           #11284D;
  --color-bg-soft:      #162F55;
  --color-bg-card:      #1C385F;
  --color-bg-elevated:  #29486F;
  --color-text-muted:   #B9C9DE;
  --color-text-sub:     #CAD5E4;
  --color-text:         #F9F8F8;
  --color-blue:         #031026;
  --color-accent:       #dcfc51;
  --color-highlight:    #CFF305;
  --color-accent-dim:   rgba(207, 243, 5, 0.1);
  --color-danger:       #dcfc51;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-full: 999px;

  --shadow-card:   0 4px 24px rgba(3, 16, 38, 0.12);
  --shadow-hover:  0 16px 44px rgba(3, 16, 38, 0.22);

  --transition:  0.3s ease;
  --font-body:   'Inter', system-ui, sans-serif;
  --font-head:   'Syne', system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse at 82% 18%, rgba(41, 72, 111, 0.32) 0%, transparent 62%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ── Utilities ──────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.accent { color: var(--color-accent); }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--color-text-sub);
  max-width: 520px;
  margin: 0 auto;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-highlight);
  color: var(--color-blue);
  box-shadow: 0 0 18px rgba(207, 243, 5, 0.24), 0 0 36px rgba(207, 243, 5, 0.1);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 0 24px rgba(207, 243, 5, 0.42), 0 0 48px rgba(207, 243, 5, 0.18);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(249, 248, 248, 0.3);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-whatsapp {
  background: rgba(249, 248, 248, 0.04);
  color: var(--color-text);
  border: 1.5px solid rgba(249, 248, 248, 0.18);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  color: var(--color-accent);
  border-color: rgba(207, 243, 5, 0.48);
}

.btn-instagram {
  background: rgba(249, 248, 248, 0.04);
  color: var(--color-text);
  border: 1.5px solid rgba(249, 248, 248, 0.18);
}

.btn-instagram:hover,
.btn-instagram:focus-visible {
  color: var(--color-accent);
  border-color: rgba(207, 243, 5, 0.48);
}

.btn-outline,
.btn-whatsapp,
.btn-instagram {
  box-shadow: 0 0 16px rgba(207, 243, 5, 0.08);
}

.btn-outline:hover,
.btn-outline:focus-visible,
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible,
.btn-instagram:hover,
.btn-instagram:focus-visible {
  box-shadow: 0 0 20px rgba(207, 243, 5, 0.24), 0 0 36px rgba(207, 243, 5, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

.btn-full { width: 100%; justify-content: center; }


/* Card generica, indipendente dal contenuto del sito. */
.pw-card {
  padding: 2rem;
  background: var(--color-bg-card);
  border: 1px solid rgba(249, 248, 248, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.pw-card h3 {
  font-family: var(--font-head);
  margin-bottom: 0.75rem;
}

.pw-card p { color: var(--color-text-sub); }

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .btn { white-space: normal; text-align: center; }
}