*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }
body {
  overflow-x: clip; /* onomatopee e sticker inclinati sporgono volutamente dai bordi */
  font-family: var(--xc-font-body);
  color: var(--xc-text);
  background-color: var(--xc-bg);
  /* retino halftone da fumetto, appena percettibile */
  background-image: radial-gradient(rgba(139, 92, 246, .08) 1px, transparent 1px);
  background-size: 18px 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* micro-refinement: branded selection colour */
::selection {
  background-color: var(--xc-purple-deep);
  color: var(--xc-cream);
}

h1, h2, h3, .xc-display {
  font-family: var(--xc-font-display);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
a { color: var(--xc-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
p { max-width: 65ch; }

.xc-container { max-width: var(--xc-container); margin-inline: auto; padding-inline: var(--xc-s3); }
.xc-section { position: relative; padding-block: var(--xc-s6); }
.xc-section--raised { position: relative; background: var(--xc-bg-raised); }
/* bordo strappato/zigzag da fumetto al posto del filetto piatto */
.xc-section--raised::before, .xc-section--raised::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 12px; pointer-events: none;
}
.xc-section--raised::before {
  bottom: 100%;
  background: conic-gradient(from 135deg at 50% 0, var(--xc-bg-raised) 90deg, transparent 0) 0 0 / 24px 12px repeat-x;
}
.xc-section--raised::after {
  top: 100%;
  background: conic-gradient(from -45deg at 50% 100%, var(--xc-bg-raised) 90deg, transparent 0) 0 0 / 24px 12px repeat-x;
}
/* macchie di luce per sezione: niente fondi piatti */
.xc-section--glow-purple { background-image: radial-gradient(56rem 30rem at 88% 10%, rgba(139, 92, 246, .14), transparent 70%); }
.xc-section--glow-orange { background-image: radial-gradient(52rem 30rem at 10% 88%, rgba(255, 247, 4, .1), transparent 70%); }

/* parola fantasma dietro le h2 di sezione */
.xc-ghost {
  position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  font-family: var(--xc-font-display); font-weight: 800; line-height: 1;
  font-size: clamp(4rem, 14vw, 11rem); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 244, 230, .09);
  pointer-events: none; user-select: none;
}
.xc-tilt { transform: rotate(-1.5deg); }
.xc-kicker {
  display: inline-block; font-family: var(--xc-font-display); font-weight: 800;
  text-transform: uppercase; font-size: .85rem; letter-spacing: .12em;
  color: var(--xc-orange); margin-bottom: var(--xc-s2);
}
.xc-grid { display: grid; gap: var(--xc-s3); }
@media (min-width: 768px)  { .xc-grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .xc-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .xc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .xc-grid--4 { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}