/* ======================================================
   POCIO — STREET / URBAN BRUTALIST
   ====================================================== */

:root {
  --bg: #0a0a0a;
  --ink: #f2f0e8;
  --paper: #ece7d8;
  --accent: #f4ff00;     /* acid spray yellow */
  --hot: #ff2d2d;        /* spray red */
  --cyan: #00e0ff;
  --muted: #8a8a82;
  --line: rgba(242,240,232,0.18);

  --f-display: "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --f-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* === NOISE OVERLAY === */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (max-width: 768px) { .noise { display: none; } }

/* === CUSTOM CURSOR === */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
  mix-blend-mode: difference;
}
.cursor-label { display: none; }
@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

/* === NAV === */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  font: 700 18px var(--f-mono);
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.nav__dot {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .6; }
}
.nav__slash { color: var(--muted); margin: 0 2px; }
.nav__sub { color: var(--muted); font-weight: 400; }
.nav__links {
  display: flex; gap: 28px;
  font: 700 13px var(--f-mono);
  letter-spacing: .12em;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
}
.nav__links a::after {
  content: ""; position: absolute;
  left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent);
  transition: width .25s ease;
}
.nav__links a:hover::after { width: 100%; }
.nav__burger {
  display: none;
  background: none; border: 0;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav__burger span {
  width: 28px; height: 2px; background: var(--ink);
}

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 28px 60px;
  display: flex; flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* === HERO BACKGROUND ANIMATIONS === */
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform;
}
.hero__blob--1 {
  top: 12%; right: -6%;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, var(--hot) 0%, transparent 60%);
  opacity: .35;
  animation: float1 18s ease-in-out infinite;
}
.hero__blob--2 {
  bottom: -10%; left: -10%;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: .22;
  animation: float2 22s ease-in-out infinite;
}
.hero__blob--3 {
  top: 40%; left: 30%;
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  opacity: .18;
  animation: float3 26s ease-in-out infinite;
}
@keyframes float1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-40px, 60px) scale(1.15); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.1); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-80px, -50px) scale(1.25); }
}

/* TRANSLUCENT FLOATING SPHERES */
.hero__sphere {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Each sphere: glassy radial gradient with white highlight top-left + colored body + subtle rim */
.hero__sphere--1 {
  width: 160px; height: 160px;
  top: 18%; left: 12%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(244,255,0,.55) 0%, rgba(244,255,0,.25) 60%, rgba(244,255,0,.05) 100%);
  box-shadow:
    inset -20px -20px 40px rgba(0,0,0,.25),
    inset 8px 8px 30px rgba(255,255,255,.25),
    0 0 60px rgba(244,255,0,.35);
  animation: sphereFloat1 16s ease-in-out infinite;
}
.hero__sphere--2 {
  width: 90px; height: 90px;
  top: 30%; right: 22%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(255,45,45,.6) 0%, rgba(255,45,45,.3) 60%, rgba(255,45,45,.05) 100%);
  box-shadow:
    inset -14px -14px 30px rgba(0,0,0,.3),
    inset 6px 6px 20px rgba(255,255,255,.2),
    0 0 40px rgba(255,45,45,.4);
  animation: sphereFloat2 13s ease-in-out infinite .5s;
}
.hero__sphere--3 {
  width: 220px; height: 220px;
  bottom: 8%; left: 28%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.12) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(0,224,255,.45) 0%, rgba(0,224,255,.2) 60%, rgba(0,224,255,.04) 100%);
  box-shadow:
    inset -28px -28px 50px rgba(0,0,0,.3),
    inset 10px 10px 40px rgba(255,255,255,.2),
    0 0 80px rgba(0,224,255,.35);
  animation: sphereFloat3 22s ease-in-out infinite;
}
.hero__sphere--4 {
  width: 70px; height: 70px;
  top: 14%; right: 8%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(255,122,217,.6) 0%, rgba(255,122,217,.3) 60%, rgba(255,122,217,.05) 100%);
  box-shadow:
    inset -12px -12px 24px rgba(0,0,0,.3),
    inset 5px 5px 16px rgba(255,255,255,.25),
    0 0 36px rgba(255,122,217,.45);
  animation: sphereFloat4 11s ease-in-out infinite 1s;
}
.hero__sphere--5 {
  width: 130px; height: 130px;
  bottom: 22%; right: 8%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.15) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(124,255,90,.5) 0%, rgba(124,255,90,.22) 60%, rgba(124,255,90,.04) 100%);
  box-shadow:
    inset -18px -18px 36px rgba(0,0,0,.3),
    inset 7px 7px 26px rgba(255,255,255,.22),
    0 0 56px rgba(124,255,90,.4);
  animation: sphereFloat5 18s ease-in-out infinite .8s;
}
.hero__sphere--6 {
  width: 50px; height: 50px;
  top: 58%; left: 6%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(244,255,0,.65) 0%, rgba(244,255,0,.3) 60%, rgba(244,255,0,.05) 100%);
  box-shadow:
    inset -10px -10px 20px rgba(0,0,0,.3),
    inset 4px 4px 12px rgba(255,255,255,.25),
    0 0 28px rgba(244,255,0,.5);
  animation: sphereFloat6 10s ease-in-out infinite 2s;
}
.hero__sphere--7 {
  width: 110px; height: 110px;
  top: 8%; left: 42%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.12) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(0,224,255,.5) 0%, rgba(0,224,255,.22) 60%, rgba(0,224,255,.04) 100%);
  box-shadow:
    inset -16px -16px 32px rgba(0,0,0,.3),
    inset 6px 6px 22px rgba(255,255,255,.22),
    0 0 48px rgba(0,224,255,.4);
  animation: sphereFloat7 14s ease-in-out infinite 1.4s;
}
.hero__sphere--8 {
  width: 38px; height: 38px;
  bottom: 38%; left: 48%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 14%, transparent 38%),
    radial-gradient(circle at 60% 60%, rgba(255,45,45,.65) 0%, rgba(255,45,45,.3) 60%, rgba(255,45,45,.05) 100%);
  box-shadow:
    inset -8px -8px 16px rgba(0,0,0,.3),
    inset 3px 3px 10px rgba(255,255,255,.25),
    0 0 22px rgba(255,45,45,.5);
  animation: sphereFloat8 9s ease-in-out infinite;
}

@keyframes sphereFloat1 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(30px, -40px); }
}
@keyframes sphereFloat2 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-25px, 35px); }
}
@keyframes sphereFloat3 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(40px, -50px); }
}
@keyframes sphereFloat4 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-30px, 25px); }
}
@keyframes sphereFloat5 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-40px, -30px); }
}
@keyframes sphereFloat6 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(20px, 30px); }
}
@keyframes sphereFloat7 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-20px, 40px); }
}
@keyframes sphereFloat8 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(35px, -25px); }
}

/* BACKGROUND MARQUEE BEHIND TITLE */
.hero__bgmarq {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 1;
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: clamp(60px, 14vw, 220px);
  line-height: 1;
  color: rgba(242,240,232,0.04);
  display: flex;
  animation: bgmarq 40s linear infinite;
  pointer-events: none;
}
.hero__bgmarq span { padding-right: 60px; }
@keyframes bgmarq {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-50%, -50%); }
}

.hero__live {
  display: inline-flex; align-items: center; gap: 8px;
  color: #00ff66;
  text-shadow: 0 0 12px rgba(0,255,102,.55);
}
.hero__live i {
  width: 9px; height: 9px;
  background: #00ff66;
  border-radius: 50%;
  display: inline-block;
  box-shadow:
    0 0 12px #00ff66,
    0 0 24px rgba(0,255,102,.6);
  animation: pulse 1.2s infinite;
}

.hero__meta {
  font: 700 12px var(--f-mono);
  letter-spacing: .2em;
  color: var(--muted);
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 30px;
  position: relative; z-index: 2;
  flex-wrap: wrap;
}
.hero__meta-dot { color: var(--accent); font-size: 8px; }

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(80px, 22vw, 340px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
}
.hero__title .letter {
  position: relative;
  display: inline-block;
  transform-origin: 50% 70%;
  animation: letterIn .9s cubic-bezier(.2,.8,.2,1) backwards;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .35s, text-shadow .35s;
}
.hero__title .letter:nth-child(1) { animation-delay: 0.05s; }
.hero__title .letter:nth-child(2) { animation-delay: 0.15s; }
.hero__title .letter:nth-child(3) { animation-delay: 0.25s; }
.hero__title .letter:nth-child(4) { animation-delay: 0.35s; }
.hero__title .letter:nth-child(5) { animation-delay: 0.45s; }

@keyframes letterIn {
  0% {
    opacity: 0;
    transform: translateY(60%) rotate(-12deg) scale(.7);
    filter: blur(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
    filter: blur(0);
  }
}

/* Red offset shadow behind every letter */
.hero__title .letter::before {
  content: attr(data-l);
  position: absolute;
  left: 6px; top: 6px;
  color: var(--hot);
  z-index: -1;
  opacity: .55;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .35s;
}
/* Cyan secondary offset */
.hero__title .letter::after {
  content: attr(data-l);
  position: absolute;
  left: -4px; top: -4px;
  color: var(--cyan);
  z-index: -2;
  opacity: 0;
  transition: opacity .35s, transform .35s;
}

.hero__title .letter:hover {
  transform: translateY(-12px) rotate(-4deg) scale(1.08);
  color: var(--accent);
}
.hero__title .letter:hover::before {
  transform: translate(12px, 12px) rotate(6deg);
}
.hero__title .letter:hover::after {
  opacity: .9;
  transform: translate(-8px, -8px);
}

.hero__title .accent {
  color: var(--accent);
  font-style: italic;
  animation: letterIn .9s cubic-bezier(.2,.8,.2,1) backwards, flicker 6s 2s infinite;
}
.hero__title .accent::before { color: var(--hot); }
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; filter: none; }
  93% { opacity: .4; filter: blur(2px); }
  94% { opacity: 1; filter: none; }
  95% { opacity: .2; filter: blur(1px); }
  96% { opacity: 1; filter: none; }
}

/* Glitch class toggled by JS occasionally */
.hero__title.is-glitch .letter {
  animation: glitch .4s steps(2) 2;
}
@keyframes glitch {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-4px, 2px) skewX(4deg); }
  40%  { transform: translate(3px, -3px) skewX(-3deg); }
  60%  { transform: translate(-2px, 1px); }
  80%  { transform: translate(2px, -1px); }
  100% { transform: translate(0,0); }
}

.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30px;
  gap: 30px;
  position: relative; z-index: 2;
  flex-wrap: wrap;
}
.hero__tag {
  font: 500 22px/1.4 var(--f-grotesk);
  max-width: 480px;
  font-family: var(--f-body);
}
.hero__strike {
  text-decoration: line-through;
  text-decoration-color: var(--hot);
  text-decoration-thickness: 3px;
  color: var(--muted);
}
.hero__accent { color: var(--accent); }

.hero__sticker {
  position: relative;
  width: 160px; height: 160px;
}
.hero__sticker--1 { animation: spin 16s linear infinite; }
.hero__sticker--1 svg { width: 100%; height: 100%; fill: var(--accent); }
.hero__sticker--1::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  border-radius: 50%;
  z-index: -1;
}
.hero__sticker-core {
  position: absolute;
  inset: 30px;
  display: grid; place-items: center;
  background: #0a0a0a;
  color: var(--accent);
  border-radius: 50%;
  font: 700 16px var(--f-mono);
  text-align: center;
  animation: spin 16s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__sticker--2 {
  width: 110px; height: 110px;
  background: var(--hot);
  color: #fff;
  display: grid; place-items: center;
  font: 700 22px var(--f-display);
  text-align: center;
  transform: rotate(-12deg);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 4px var(--hot);
  align-self: center;
}

.hero__cta {
  display: flex; gap: 16px; margin-top: 50px;
  flex-wrap: wrap;
  position: relative; z-index: 2;
}

.hero__corner {
  position: absolute;
  font: 700 11px var(--f-mono);
  letter-spacing: .2em;
  color: var(--muted);
  z-index: 2;
}
.hero__corner--tl { top: 92px; left: 28px; display: none; }
.hero__corner--tr { top: 92px; right: 28px; }
.hero__corner--bl { bottom: 28px; left: 28px; }
.hero__corner--br { bottom: 28px; right: 28px; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center;
  gap: 10px;
  padding: 18px 28px;
  font: 700 14px var(--f-mono);
  letter-spacing: .14em;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #0a0a0a;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--hot);
}
.btn--big {
  padding: 22px 36px;
  font-size: 15px;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* === MARQUEE === */
.marquee {
  background: var(--accent);
  color: #0a0a0a;
  border-block: 3px solid #0a0a0a;
  overflow: hidden;
  padding: 18px 0;
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  font: 700 32px var(--f-display);
  letter-spacing: .04em;
  animation: marquee 28s linear infinite;
  gap: 30px;
}
.marquee__track span { padding-inline: 12px; }
.marquee__track .dot { color: var(--hot); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === SECTION HEAD === */
.section-head {
  padding: 100px 28px 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.section-head__num {
  font: 700 13px var(--f-mono);
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-head__title {
  font-family: var(--f-display);
  font-size: clamp(48px, 9vw, 130px);
  line-height: .95;
  letter-spacing: -.03em;
}
.section-head__title-sub {
  font-family: var(--f-mono);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--muted);
  margin-left: 18px;
  letter-spacing: .15em;
  text-transform: uppercase;
  vertical-align: middle;
}
.section-head__desc {
  margin-top: 20px;
  max-width: 620px;
  color: var(--paper);
  font-size: 18px;
}

/* === WORKS / GALLERY === */
.works { padding-bottom: 80px; }

.works__filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 28px 28px;
  max-width: 1400px; margin: 0 auto;
}
.chip {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 16px;
  font: 700 12px var(--f-mono);
  letter-spacing: .14em;
  transition: all .2s;
}
.chip:hover { border-color: var(--accent); }
.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

.grid {
  padding: 0 40px;
  max-width: 1800px;
  margin: 0 auto;
  column-count: 3;
  column-gap: 28px;
}
/* very large screens — keep 3 wide, but airier */
@media (min-width: 1700px) {
  .grid { column-count: 3; column-gap: 36px; padding: 0 60px; }
}
/* standard desktop — 2 columns so each image breathes */
@media (max-width: 1400px) { .grid { column-count: 2; column-gap: 24px; } }
@media (max-width: 720px)  { .grid { column-count: 1; padding: 0 20px; } }

.card {
  break-inside: avoid;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
  display: block;
}
.card img {
  width: 100%;
  height: auto;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
  filter: saturate(.85);
}
.card:hover img {
  transform: scale(1.06);
  filter: saturate(1.15) contrast(1.05);
}
.card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,10,10,.94));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px 30px;
  opacity: 0;
  transition: opacity .3s;
}
.card:hover .card__overlay { opacity: 1; }
.card__num {
  font: 700 12px var(--f-mono);
  letter-spacing: .22em;
  color: var(--accent);
}
.card__title {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.6vw, 40px);
  margin-top: 8px;
  line-height: 1;
  letter-spacing: -.01em;
}
.card__tag {
  font: 400 13px var(--f-mono);
  letter-spacing: .14em;
  color: var(--muted);
  margin-top: 10px;
  text-transform: uppercase;
}
.card__badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--accent);
  color: #0a0a0a;
  font: 700 12px var(--f-mono);
  letter-spacing: .14em;
  padding: 6px 10px;
  transform: rotate(-3deg);
  z-index: 2;
}
.card.is-hidden { display: none; }

/* === BIO === */
.bio {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: #0a0a0a;
  padding-bottom: 80px;
  border-block: 3px solid #0a0a0a;
}

.bio__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.bio__orb--1 {
  top: 2%; left: -6%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--hot) 0%, transparent 60%);
  opacity: .55;
  animation: sphereFloat1 14s ease-in-out infinite;
}
.bio__orb--2 {
  top: 18%; right: -4%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  opacity: .50;
  animation: sphereFloat3 18s ease-in-out infinite;
}
.bio__orb--3 {
  top: 40%; left: 10%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: .50;
  animation: sphereFloat5 16s ease-in-out infinite;
}
.bio__orb--4 {
  top: 55%; right: 15%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, #a855f7 0%, transparent 60%);
  opacity: .50;
  animation: sphereFloat2 20s ease-in-out infinite;
}
.bio__orb--5 {
  bottom: 8%; right: -5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, #ff6b2d 0%, transparent 60%);
  opacity: .50;
  animation: sphereFloat4 22s ease-in-out infinite;
}
.bio__orb--6 {
  top: 10%; left: 40%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, #ff2d92 0%, transparent 60%);
  opacity: .45;
  animation: sphereFloat6 17s ease-in-out infinite;
}
.bio__orb--7 {
  bottom: 25%; left: -5%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, #7cff5a 0%, transparent 60%);
  opacity: .40;
  animation: sphereFloat7 19s ease-in-out infinite;
}
.bio__orb--8 {
  top: 75%; right: 40%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, #1877f2 0%, transparent 60%);
  opacity: .45;
  animation: sphereFloat8 21s ease-in-out infinite;
}
.bio__orb--9 {
  top: 35%; right: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--hot) 0%, transparent 55%);
  opacity: .35;
  animation: sphereFloat1 25s ease-in-out infinite reverse;
}
.bio__orb--10 {
  bottom: 2%; left: 50%;
  width: 340px; height: 340px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 55%);
  opacity: .40;
  animation: sphereFloat5 23s ease-in-out infinite reverse;
}

.bio__grid, .bio .section-head { position: relative; z-index: 1; }
.bio .section-head__num { color: var(--hot); }
.bio .section-head__title-sub { color: #555; }
.bio .section-head__desc { color: #333; }

.bio__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 50px;
  padding: 0 28px 0;
  max-width: 1400px; margin: 0 auto;
}
@media (max-width: 900px) { .bio__grid { grid-template-columns: 1fr; } }

.bio__lead {
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.35;
  font-weight: 500;
  margin-bottom: 22px;
}
.bio__text p {
  margin-bottom: 24px;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.7;
}
.bio__text strong { background: var(--accent); padding: 0 4px; }
.bio__text em { font-style: italic; color: #1f1f1f; }

/* pull-quote — fills the column with a big statement */
.bio__quote {
  font-family: var(--f-display);
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em;
  border-left: 6px solid #0a0a0a;
  padding: 18px 0 18px 26px;
  margin: 32px 0 !important;
  color: #0a0a0a;
}
.bio__quote-accent {
  background: var(--hot);
  color: var(--paper);
  padding: 0 8px;
  display: inline-block;
  transform: rotate(-1.5deg);
}

/* numbers strip */
.bio__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
}
.bio__stat {
  padding: 22px 16px;
  border-right: 1px solid rgba(10,10,10,.2);
  display: flex; flex-direction: column; gap: 6px;
}
.bio__stat:last-child { border-right: 0; }
.bio__stat-num {
  font: 700 clamp(36px, 4vw, 56px)/1 var(--f-display);
  color: #0a0a0a;
  letter-spacing: -.03em;
}
.bio__stat-label {
  font: 700 11px var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #555;
}
@media (max-width: 700px) {
  .bio__stats { grid-template-columns: repeat(2, 1fr); }
  .bio__stat:nth-child(2) { border-right: 0; }
  .bio__stat:nth-child(1),
  .bio__stat:nth-child(2) { border-bottom: 1px solid rgba(10,10,10,.2); }
}

.bio__manifesto-title {
  font: 700 14px var(--f-mono);
  letter-spacing: .2em;
  color: var(--hot);
  margin-top: 36px;
  margin-bottom: 16px;
}
.bio__manifesto {
  list-style: none;
  border-top: 2px solid #0a0a0a;
}
.bio__manifesto li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,10,10,.15);
  font-size: 19px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  counter-increment: m;
}
.bio__manifesto { counter-reset: m; }
.bio__manifesto li::before {
  content: "0" counter(m);
  font: 700 14px var(--f-mono);
  color: var(--hot);
  min-width: 30px;
}

.bio__audio {
  width: 100%;
  margin-top: 36px;
  filter: invert(0);
}
.bio__audio-cap {
  font: 400 13px var(--f-mono);
  color: #555;
  margin-top: 6px;
}

.bio__side {
  display: flex; flex-direction: column; gap: 22px;
}

.bio__portrait {
  position: relative;
  border: 2px solid #0a0a0a;
  background: #0a0a0a;
  overflow: hidden;
  isolation: isolate;
}
.bio__portrait img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  filter: grayscale(.15) contrast(1.05);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.bio__portrait::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.bio__portrait:hover img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.1);
}
.bio__portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink);
}
.bio__portrait-tag {
  font: 700 11px var(--f-mono);
  letter-spacing: .28em;
  color: var(--accent);
}
.bio__portrait-name {
  font: 700 22px/1 var(--f-display);
  letter-spacing: -.01em;
}
.bio__portrait-name em {
  font: 400 italic 12px var(--f-mono);
  color: var(--muted);
  letter-spacing: .1em;
}
.bio__card, .bio__timeline {
  background: #0a0a0a;
  color: var(--ink);
  padding: 26px;
  position: relative;
}
.bio__card-label {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--accent);
  color: #0a0a0a;
  font: 700 11px var(--f-mono);
  letter-spacing: .2em;
  padding: 4px 10px;
}
.bio__card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  margin-top: 8px;
}
.bio__card dt {
  font: 700 12px var(--f-mono);
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bio__card dd { font-size: 16px; transition: color .25s, transform .25s; }
.bio__card dl > dt,
.bio__card dl > dd {
  padding: 6px 4px;
  transition: background .25s, color .25s, transform .25s;
  border-radius: 3px;
}
.bio__card dl > dt:hover { color: var(--accent); }
.bio__card dl > dt:hover + dd {
  background: var(--accent);
  color: #0a0a0a;
  transform: translateX(4px);
}
.bio__timeline ul {
  list-style: none;
  margin-top: 8px;
  position: relative;
  padding-left: 28px;
}
.bio__timeline ul::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--hot), var(--cyan));
}
.bio__timeline li {
  padding: 14px 0 14px 20px;
  border-bottom: none;
  font-size: 15px;
  position: relative;
}
.bio__timeline li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 3px solid #0a0a0a;
  border-radius: 50%;
  z-index: 1;
  transition: transform .25s, background .25s;
}
.bio__timeline li:nth-child(2)::before { background: var(--hot); }
.bio__timeline li:nth-child(3)::before { background: var(--cyan); }
.bio__timeline li:nth-child(4)::before { background: #ff7ad9; }
.bio__timeline li:nth-child(5)::before { background: #7cff5a; }
.bio__timeline li:nth-child(6)::before { background: var(--accent); }
.bio__timeline li {
  transition: background .25s, transform .25s;
  border-radius: 4px;
  cursor: default;
}
.bio__timeline li:hover {
  background: rgba(244, 255, 0, .08);
  transform: translateX(6px);
}
.bio__timeline li:hover::before { transform: scale(1.6); box-shadow: 0 0 12px currentColor; }
.bio__timeline li:last-child { border-bottom: 0; }
.bio__timeline b { color: var(--accent); font-family: var(--f-mono); margin-right: 8px; font-size: 16px; }

/* === CONTATTI === */
.logo-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 24px;
}
.logo-strip__img {
  width: min(70vw, 500px);
  height: auto;
  opacity: .7;
}

.contact { padding-bottom: 80px; }

.contact__hero-email {
  text-align: center;
  padding: 60px 28px;
  max-width: 1400px;
  margin: 0 auto;
}
.contact__email-big {
  font-family: var(--f-display);
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.1;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--accent) 50% 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .4s;
  display: inline-block;
  word-break: break-all;
}
.contact__email-big:hover { background-position: -100% 0; }
.contact__email-sub {
  font: 400 16px var(--f-mono);
  letter-spacing: .15em;
  color: var(--muted);
  margin-top: 16px;
}

.contact__socials .social-card {
  min-height: 200px;
}
.contact__socials .social-card__handle {
  font-size: clamp(22px, 3vw, 32px);
}

/* === SOCIAL STRIP — fra form e mappa === */
.contact__social-strip {
  max-width: 1400px;
  margin: 70px auto 0;
  padding: 0 28px;
}
.contact__social-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.contact__social-num {
  font: 700 13px var(--f-mono);
  letter-spacing: .25em;
  color: var(--accent);
}
.contact__social-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -.02em;
}
.contact__social-title span {
  font: 400 14px var(--f-mono);
  letter-spacing: .15em;
  color: var(--muted);
  margin-left: 10px;
}

/* === SOCIAL CARDS — brutalist hover === */
.contact__socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .contact__socials { grid-template-columns: repeat(2, 1fr); }
}
.social-card {
  --card-color: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas:
    "icon body arrow"
    "marquee marquee marquee";
  column-gap: 18px;
  align-items: center;
  padding: 22px 20px 0;
  min-height: 150px;
  background: #0f0f0f;
  border: 2px solid var(--ink);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              border-color .25s, color .25s;
}
.social-card--ig { --card-color: #ff2d92; }
.social-card--tt { --card-color: var(--cyan); }
.social-card--yt { --card-color: var(--hot); }
.social-card--be { --card-color: var(--accent); }
.social-card--fb { --card-color: #1877f2; }
.social-card--em { --card-color: #7cff5a; }

/* sliding background fill */
.social-card__bg {
  position: absolute;
  inset: auto -8% -8% -8%;
  height: 0;
  background: var(--card-color);
  z-index: -2;
  transition: height .45s cubic-bezier(.7,0,.2,1);
  transform: skewY(-2deg);
  transform-origin: bottom left;
}
/* dotted spray noise that appears on hover */
.social-card__noise {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  background-image:
    radial-gradient(rgba(0,0,0,.6) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.4) 1px, transparent 1.4px);
  background-size: 14px 14px, 22px 22px;
  background-position: 0 0, 7px 11px;
  mix-blend-mode: multiply;
  transition: opacity .35s .1s;
}

.social-card__icon {
  grid-area: icon;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  background: #0a0a0a;
  color: var(--card-color);
  transition: transform .4s cubic-bezier(.2,.7,.2,1),
              background .3s, color .3s, border-color .3s;
}
.social-card__icon svg { width: 26px; height: 26px; }

.social-card__body {
  grid-area: body;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.social-card__tag {
  font: 700 11px var(--f-mono);
  letter-spacing: .22em;
  color: var(--muted);
  transition: color .25s;
}
.social-card__handle {
  font: 700 clamp(22px, 2.3vw, 30px) var(--f-display);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.social-card__meta {
  font: 400 12px var(--f-mono);
  color: var(--muted);
  letter-spacing: .06em;
  transition: color .25s;
}
.social-card__arrow {
  grid-area: arrow;
  font: 700 26px var(--f-display);
  color: var(--card-color);
  transform: translate(0, 0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s;
}

/* marquee strip at the bottom */
.social-card__marquee {
  grid-area: marquee;
  margin-top: 18px;
  margin-inline: -20px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ink);
  color: #0a0a0a;
  overflow: hidden;
  font: 700 11px var(--f-mono);
  letter-spacing: .25em;
  position: relative;
  transition: background .25s, color .25s;
}
.social-card__marquee span {
  white-space: nowrap;
  padding: 0 6px;
  animation: marquee-scroll 14s linear infinite;
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* HOVER STATE */
.social-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--card-color);
  box-shadow: 6px 6px 0 0 var(--card-color);
  color: #0a0a0a;
}
.social-card:hover .social-card__bg { height: 160%; }
.social-card:hover .social-card__noise { opacity: .35; }
.social-card:hover .social-card__icon {
  background: #0a0a0a;
  color: var(--card-color);
  transform: rotate(-8deg) scale(1.08);
  border-color: #0a0a0a;
}
.social-card:hover .social-card__handle { transform: translateX(4px); }
.social-card:hover .social-card__tag,
.social-card:hover .social-card__meta { color: #0a0a0a; }
.social-card:hover .social-card__arrow {
  color: #0a0a0a;
  transform: translate(6px, -6px) rotate(8deg);
}
.social-card:hover .social-card__marquee {
  background: #0a0a0a;
  color: var(--card-color);
}
.social-card:hover .social-card__marquee span { animation-play-state: running; }

.social-card:focus-visible {
  outline: 3px solid var(--card-color);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .contact__socials { grid-template-columns: 1fr; }
}

/* === EVENT CARD === */
.event-card {
  position: relative;
  display: block;
  padding: 26px 26px 22px;
  background: var(--paper);
  color: #0a0a0a;
  border: 2px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s, background .35s, color .35s;
}
.event-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(244,255,0,.0) 0 18px,
      rgba(244,255,0,.18) 18px 19px);
  z-index: -1;
  opacity: 0;
  transition: opacity .35s;
}
.event-card::after {
  content: "";
  position: absolute;
  top: -40%; left: -10%;
  width: 60%; height: 180%;
  background: var(--accent);
  transform: translateX(-130%) skewX(-18deg);
  z-index: -1;
  transition: transform .55s cubic-bezier(.7,0,.2,1);
}
.event-card__flag {
  display: inline-block;
  font: 700 11px var(--f-mono);
  letter-spacing: .25em;
  background: #0a0a0a;
  color: var(--accent);
  padding: 5px 9px;
  margin-bottom: 12px;
}
.event-card__date {
  display: block;
  font: 700 11px var(--f-mono);
  letter-spacing: .22em;
  color: #555;
  margin-bottom: 8px;
}
.event-card__title {
  font: 700 clamp(22px, 2.6vw, 32px) var(--f-display);
  line-height: .98;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.event-card__title span {
  display: block;
  font: 400 italic 15px var(--f-body);
  letter-spacing: 0;
  color: #444;
  margin-top: 6px;
}
.event-card__desc {
  font: 400 14px/1.55 var(--f-body);
  color: #1a1a1a;
  margin-bottom: 16px;
}
.event-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--f-mono);
  letter-spacing: .22em;
  padding: 10px 14px;
  background: #0a0a0a;
  color: var(--paper);
  transition: background .25s, color .25s, transform .25s;
}
.event-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 0 #0a0a0a;
}
.event-card:hover::before { opacity: 1; }
.event-card:hover::after { transform: translateX(220%) skewX(-18deg); }
.event-card:hover .event-card__cta {
  background: var(--hot);
  color: var(--ink);
  transform: translateX(4px);
}

.contact__address {
  font: 400 14px var(--f-mono);
  color: var(--muted);
  line-height: 1.7;
}

/* === MAP === */
.map-wrap {
  max-width: 1400px;
  margin: 80px auto 0;
  padding: 0 28px;
}
.map-head { margin-bottom: 24px; }
.map-head__num {
  font: 700 13px var(--f-mono);
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: 12px;
}
.map-head__title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -.02em;
}
.map-head__desc {
  font: 400 14px var(--f-mono);
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 10px;
}
.map {
  height: 480px;
  width: 100%;
  border: 3px solid var(--accent);
  box-shadow: 10px 10px 0 0 var(--hot);
  background: #eaf2e8; /* soft pale tone matching Voyager while tiles load */
  position: relative;
  z-index: 1;
}
.map-foot {
  display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  font: 700 12px var(--f-mono);
  letter-spacing: .18em;
  color: var(--muted);
}
.map-foot span { color: var(--accent); }
.map-foot a:hover { color: var(--accent); }

/* Reset Leaflet's default div-icon background/border for our custom marker */
.poc-pin-wrap,
.leaflet-div-icon.poc-pin-wrap {
  background: transparent !important;
  border: none !important;
}

/* === Pocio map pin (typographic "P", hero-style) === */
.poc-pin-art {
  position: relative;
  width: 80px; height: 80px;
  pointer-events: auto;
  cursor: pointer;
}

/* yellow brutalist circle backdrop */
.poc-pin-art__bg {
  position: absolute;
  inset: 8px;
  background: var(--accent);
  border: 3px solid #0a0a0a;
  border-radius: 50%;
  box-shadow: 4px 4px 0 0 var(--hot);
  z-index: 1;
}

/* the giant "P" — same family as hero title */
.poc-pin-art__p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 52px;
  line-height: 1;
  color: #0a0a0a;
  letter-spacing: -.04em;
  z-index: 3;
  pointer-events: none;
  text-indent: -2px; /* optical centering for the "P" tail */
}
/* red offset shadow (same trick as .hero__title .letter::before) */
.poc-pin-art__p::before {
  content: attr(data-l);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(4px, 4px);
  color: var(--hot);
  z-index: -1;
  text-indent: -2px;
}
/* cyan secondary offset (revealed/animated on hover) */
.poc-pin-art__p::after {
  content: attr(data-l);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(-3px, -3px);
  color: var(--cyan);
  z-index: -2;
  opacity: .55;
  text-indent: -2px;
}

/* hover: lettera "salta" come nell'hero, le ombre si aprono */
.poc-pin-art:hover .poc-pin-art__p {
  transform: translateY(-4px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.poc-pin-art:hover .poc-pin-art__p::before {
  transform: translate(-50%, -50%) translate(8px, 8px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.poc-pin-art:hover .poc-pin-art__p::after {
  transform: translate(-50%, -50%) translate(-7px, -7px);
  opacity: 1;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}

/* pulsing rings around the badge */
.poc-pin-art__ring,
.poc-pin-art__ring2 {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  z-index: 0;
}
.poc-pin-art__ring {
  border: 3px solid var(--accent);
  opacity: .85;
  animation: pinPulse 2.2s ease-out infinite;
}
.poc-pin-art__ring2 {
  border: 3px solid var(--hot);
  opacity: .65;
  animation: pinPulse 2.2s ease-out infinite 1.1s;
}
@keyframes pinPulse {
  0%   { transform: scale(.55); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}


/* === MANIFESTO === */
.manifesto {
  position: relative;
  padding: 120px 28px 100px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(244,255,0,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255,45,45,.10) 0%, transparent 50%),
    #0a0a0a;
  overflow: hidden;
}

.manifesto__splat {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .65;
  pointer-events: none;
  z-index: 0;
}
.manifesto__splat--1 {
  top: 8%; left: -4%;
  width: 280px; height: 280px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.4) 0%, transparent 25%),
              radial-gradient(circle, var(--accent) 0%, transparent 65%);
  animation: sphereFloat1 14s ease-in-out infinite;
}
.manifesto__splat--2 {
  bottom: 12%; right: -6%;
  width: 360px; height: 360px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.3) 0%, transparent 25%),
              radial-gradient(circle, var(--hot) 0%, transparent 65%);
  animation: sphereFloat3 18s ease-in-out infinite;
}
.manifesto__splat--3 {
  top: 50%; left: 55%;
  width: 200px; height: 200px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.4) 0%, transparent 25%),
              radial-gradient(circle, var(--cyan) 0%, transparent 65%);
  animation: sphereFloat5 16s ease-in-out infinite;
}

.manifesto__head {
  max-width: 1400px;
  margin: 0 auto 70px;
  position: relative;
  z-index: 1;
}
.manifesto__num {
  font: 700 13px var(--f-mono);
  letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 18px;
}
.manifesto__title {
  font-family: var(--f-display);
  font-size: clamp(56px, 11vw, 160px);
  line-height: .9;
  letter-spacing: -.035em;
}
.manifesto__title span { display: inline-block; margin-right: 24px; }
.manifesto__title .accent {
  color: var(--accent);
  font-style: italic;
  position: relative;
}
.manifesto__title .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 8px; bottom: -6px;
  height: 8px;
  background: var(--accent);
  opacity: .25;
}
.manifesto__title .hot { color: var(--hot); }
.manifesto__desc {
  margin-top: 24px;
  max-width: 600px;
  font: 500 19px/1.5 var(--f-body);
  color: var(--paper);
}

.manifesto__list {
  max-width: 1400px;
  margin: 0 auto;
  list-style: none;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
}
.manifesto__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 30px;
  align-items: baseline;
  padding: 36px 0;
  border-top: 2px solid var(--ink);
  transition: padding .25s ease, background .25s ease;
  position: relative;
}
.manifesto__item:last-child { border-bottom: 2px solid var(--ink); }
.manifesto__item:hover {
  padding-left: 24px;
}
.manifesto__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(244,255,0,.08), transparent);
  transition: width .25s ease;
  z-index: -1;
}
.manifesto__item:hover::before { width: 100%; }

.manifesto__no {
  font-family: var(--f-display);
  font-size: clamp(60px, 8vw, 110px);
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 4px 4px 0 var(--hot);
}
.manifesto__item:nth-child(2) .manifesto__no { color: var(--hot); text-shadow: 4px 4px 0 var(--accent); }
.manifesto__item:nth-child(3) .manifesto__no { color: var(--cyan); text-shadow: 4px 4px 0 var(--hot); }
.manifesto__item:nth-child(4) .manifesto__no { color: #7cff5a; text-shadow: 4px 4px 0 var(--cyan); }

.manifesto__statement {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.manifesto__sub {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--accent);
  font-style: italic;
}
.manifesto__item:nth-child(2) .manifesto__sub { color: var(--hot); }
.manifesto__item:nth-child(3) .manifesto__sub { color: var(--cyan); }
.manifesto__item:nth-child(4) .manifesto__sub { color: #7cff5a; }

.manifesto__sign {
  max-width: 1400px;
  margin: 60px auto 0;
  font: 700 13px var(--f-mono);
  letter-spacing: .25em;
  color: var(--muted);
  text-align: right;
  position: relative;
  z-index: 1;
}

/* === PROCESSO (timeline commissione) === */
.processo {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}
.processo__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.processo__orb--1 {
  top: 5%; left: -8%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--hot) 0%, transparent 60%);
  opacity: .3;
  animation: sphereFloat1 16s ease-in-out infinite;
}
.processo__orb--2 {
  top: 40%; right: -5%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  opacity: .25;
  animation: sphereFloat3 20s ease-in-out infinite;
}
.processo__orb--3 {
  bottom: 10%; left: 30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: .25;
  animation: sphereFloat5 18s ease-in-out infinite;
}

.processo__head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 60px;
  position: relative;
  z-index: 1;
}
.processo__num {
  font: 700 13px var(--f-mono);
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: 14px;
}
.processo__title {
  font-family: var(--f-display);
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.03em;
}
.processo__desc {
  max-width: 600px;
  font-size: 18px;
  color: #fff;
  margin-top: 18px;
  line-height: 1.6;
}

.processo__timeline {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

.processo__step {
  display: grid;
  grid-template-columns: 60px 48px 1fr;
  gap: 0 16px;
  padding-bottom: 50px;
  position: relative;
}
.processo__step-line {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.processo__step-line::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -50px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--hot));
  opacity: .4;
}
.processo__step--last .processo__step-line::after { display: none; }
.processo__step-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #0a0a0a;
  z-index: 1;
  flex-shrink: 0;
  transition: transform .3s, box-shadow .3s;
}
.processo__step:hover .processo__step-dot {
  transform: scale(2);
  box-shadow: 0 0 30px var(--accent), 0 0 60px var(--accent);
}

.processo__step-num {
  grid-column: 2;
  font: 700 28px var(--f-mono);
  color: var(--accent);
  line-height: 1;
  padding-top: 2px;
}

.processo__step-content {
  grid-column: 3;
  padding: 16px 20px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .35s, border-color .35s, transform .35s;
}
.processo__step:hover .processo__step-content {
  background: rgba(255,255,255,.04);
  border-color: rgba(244,255,0,.15);
  transform: translateX(8px);
}
.processo__step-icon {
  width: 48px; height: 48px;
  color: var(--accent);
  margin-bottom: 12px;
  transition: transform .35s, filter .35s;
}
.processo__step:hover .processo__step-icon {
  transform: rotate(-12deg) scale(1.25);
  filter: drop-shadow(0 0 12px currentColor);
}
.processo__step-icon svg { width: 100%; height: 100%; }

.processo__step-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: var(--accent);
  transition: color .3s, text-shadow .3s;
}
.processo__step:nth-child(2) .processo__step-title { color: #ff6b2d; }
.processo__step:nth-child(3) .processo__step-title { color: var(--cyan); }
.processo__step:nth-child(4) .processo__step-title { color: #a855f7; }
.processo__step:nth-child(5) .processo__step-title { color: #ff6b2d; }
.processo__step:nth-child(6) .processo__step-title { color: #ff2d92; }
.processo__step:nth-child(7) .processo__step-title { color: #7cff5a; }
.processo__step:hover .processo__step-title {
  text-shadow: 0 0 20px currentColor;
}

.processo__step-text {
  font-size: 16px;
  line-height: 1.7;
  color: #fff;
  max-width: 560px;
}

.processo__step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.processo__tag {
  font: 700 11px var(--f-mono);
  letter-spacing: .1em;
  padding: 5px 12px;
  border: 1px solid var(--muted);
  color: var(--muted);
  border-radius: 2px;
  transition: border-color .25s, color .25s, background .25s;
}
.processo__tag--tech {
  border-color: var(--accent);
  color: var(--accent);
}
.processo__step:hover .processo__tag {
  border-color: var(--ink);
  color: var(--ink);
}
.processo__step:hover .processo__tag--tech {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}

.processo__cta {
  text-align: center;
  padding: 60px 28px 0;
  position: relative;
  z-index: 1;
}
.processo__cta-text {
  font-family: var(--f-display);
  font-size: clamp(24px, 4vw, 42px);
  margin-bottom: 24px;
}
.btn--accent {
  display: inline-block;
  font: 700 14px var(--f-mono);
  letter-spacing: .15em;
  padding: 16px 36px;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.btn--accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(244, 255, 0, .3);
}

@media (max-width: 720px) {
  .processo__step {
    grid-template-columns: 40px 36px 1fr;
    gap: 0 10px;
    padding-bottom: 36px;
  }
  .processo__step-num { font-size: 20px; }
  .processo__step-line::after { bottom: -36px; }
  .processo__step-icon { width: 36px; height: 36px; }
}

@media (max-width: 720px) {
  .manifesto__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0;
  }
  .manifesto__no { font-size: 56px; }
  .manifesto__title span { margin-right: 14px; }
}

/* Leaflet — controlli in stile brutalist su tile colorate */
.leaflet-container {
  background: #eaf2e8 !important; /* matches Voyager base while loading */
  font-family: var(--f-mono) !important;
}
.leaflet-control-zoom a {
  background: #0a0a0a !important;
  color: var(--accent) !important;
  border: 2px solid #0a0a0a !important;
  font-weight: 900 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 30px !important;
}
.leaflet-control-zoom a:hover {
  background: var(--accent) !important;
  color: #0a0a0a !important;
}
.leaflet-control-attribution {
  background: rgba(10,10,10,.85) !important;
  color: var(--paper) !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-popup-content-wrapper {
  background: #0a0a0a !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--hot) !important;
}
.leaflet-popup-tip { background: var(--accent) !important; }
.leaflet-popup-content {
  font-family: var(--f-mono) !important;
  font-size: 13px !important;
  margin: 14px 18px !important;
}
.leaflet-popup-content b {
  display: block;
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* === FOOTER === */
.footer {
  position: relative;
  padding: 80px 28px 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, #050505 100%);
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto 60px;
}
@media (max-width: 1000px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

.footer__col h4 {
  font: 700 12px var(--f-mono);
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 8px; }
.footer__col li a {
  font: 500 15px var(--f-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s, transform .2s;
}
.footer__col li a span { color: var(--muted); font-size: 12px; }
.footer__col li a:hover {
  color: var(--accent);
  transform: translateX(4px);
}

.footer__logo {
  display: flex; align-items: center;
  margin-bottom: 18px;
}
.footer__logo-img {
  height: 50px;
  width: auto;
}
.footer__dot {
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent);
  animation: pulse 1.8s infinite;
}
.footer__slash { color: var(--muted); }
.footer__claim {
  font: 500 18px/1.4 var(--f-body);
  color: var(--paper);
  margin-bottom: 24px;
}
.footer__claim-accent { color: var(--accent); }

.footer__contact-big {
  margin-top: 8px;
}
.footer__mail-big {
  display: block;
  font: 700 clamp(18px, 2.2vw, 26px) var(--f-display);
  color: var(--accent);
  letter-spacing: -.01em;
  margin-bottom: 14px;
  transition: color .2s;
  word-break: break-all;
}
.footer__mail-big:hover { color: var(--hot); }
.footer__social-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__social-links a {
  font: 700 13px var(--f-mono);
  letter-spacing: .1em;
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.footer__social-links a:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}

.footer__newsletter label {
  display: block;
  font: 700 11px var(--f-mono);
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 10px;
}
.footer__newsletter-row {
  display: flex;
  border: 2px solid var(--line);
  transition: border-color .2s;
}
.footer__newsletter-row:focus-within { border-color: var(--accent); }
.footer__newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 12px 14px;
  font: 400 15px var(--f-body);
  outline: none;
}
.footer__newsletter button {
  background: var(--accent);
  color: #0a0a0a;
  border: 0;
  padding: 0 18px;
  font: 700 20px var(--f-display);
  transition: background .2s;
}
.footer__newsletter button:hover { background: var(--hot); color: #fff; }
.footer__news-msg {
  font: 700 11px var(--f-mono);
  letter-spacing: .15em;
  color: var(--accent);
  margin-top: 8px;
  min-height: 14px;
}

address {
  font: 400 14px var(--f-mono);
  color: var(--paper);
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 14px;
}
.footer__mail, .footer__phone {
  display: block;
  font: 700 14px var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  transition: color .2s, padding .2s;
}
.footer__mail:hover, .footer__phone:hover {
  color: var(--accent);
  padding-left: 6px;
}

/* COLORFUL GIANT POCIO */
.footer__big {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: var(--f-display);
  font-size: clamp(110px, 28vw, 420px);
  line-height: .8;
  letter-spacing: -.04em;
  margin: 40px 0 30px;
  user-select: none;
  position: relative;
}
.bigL {
  display: inline-block;
  position: relative;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.bigL::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bigL--1 {
  color: var(--accent);
  text-shadow:
    4px 4px 0 var(--hot),
    8px 8px 0 var(--cyan);
  animation: bigDance 5s ease-in-out infinite;
}
.bigL--2 {
  color: var(--hot);
  text-shadow:
    -4px 4px 0 var(--accent),
    -8px 8px 0 #ff7ad9;
  animation: bigDance 5s ease-in-out infinite .25s;
}
.bigL--3 {
  color: var(--cyan);
  text-shadow:
    4px -4px 0 var(--accent),
    8px -8px 0 var(--hot);
  animation: bigDance 5s ease-in-out infinite .5s;
}
.bigL--4 {
  color: #ff7ad9; /* magenta */
  text-shadow:
    -4px -4px 0 var(--cyan),
    -8px -8px 0 var(--accent);
  animation: bigDance 5s ease-in-out infinite .75s;
}
.bigL--5 {
  color: #7cff5a; /* lime */
  text-shadow:
    4px 4px 0 var(--hot),
    -4px -4px 0 var(--cyan),
    8px 8px 0 var(--accent);
  animation: bigDance 5s ease-in-out infinite 1s;
}
@keyframes bigDance {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}
.bigL:hover {
  transform: translateY(-20px) rotate(-6deg) scale(1.1);
}

.footer__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  font: 700 11px var(--f-mono);
  letter-spacing: .18em;
  color: var(--muted);
  flex-wrap: wrap;
  max-width: 1400px;
  margin-left: auto; margin-right: auto;
}
.footer__row-left, .footer__row-right {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
}
.footer__sep { color: var(--accent); font-size: 8px; }
.footer__row a:hover { color: var(--accent); }
.footer__top-link { color: var(--accent); }

.footer__ticker {
  background: var(--accent);
  color: #0a0a0a;
  border-top: 3px solid #0a0a0a;
  overflow: hidden;
  padding: 12px 0;
  margin: 0 -28px;
}
.footer__ticker-track {
  display: inline-flex;
  white-space: nowrap;
  font: 700 14px var(--f-mono);
  letter-spacing: .2em;
  gap: 50px;
  animation: marquee 32s linear infinite;
}

/* === CORSI === */
.corsi { padding-bottom: 80px; }
.corsi__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) { .corsi__grid { grid-template-columns: 1fr; } }

.corsi__card {
  background: #0f0f0f;
  border: 2px solid var(--ink);
  padding: 36px 30px;
  position: relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.corsi__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--accent);
}
.corsi__card--adulti { border-color: var(--hot); }
.corsi__card--adulti:hover { box-shadow: 6px 6px 0 0 var(--hot); }

.corsi__card-flag {
  display: inline-block;
  font: 700 11px var(--f-mono);
  letter-spacing: .25em;
  background: var(--accent);
  color: #0a0a0a;
  padding: 5px 9px;
  margin-bottom: 16px;
}
.corsi__card--adulti .corsi__card-flag { background: var(--hot); color: #fff; }

.corsi__card-title {
  font: 700 clamp(28px, 3vw, 40px) var(--f-display);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  margin-top: 16px;
}
.corsi__card-title--glow {
  color: var(--accent);
  text-shadow: 0 0 20px rgba(244,255,0,.5), 0 0 40px rgba(244,255,0,.25);
}
.corsi__card-title--hot {
  color: var(--hot);
  text-shadow: 0 0 20px rgba(255,45,45,.5), 0 0 40px rgba(255,45,45,.25);
}
.corsi__card-sub {
  font: 400 15px var(--f-mono);
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 20px;
}
.corsi__card-list {
  list-style: none;
  margin-bottom: 24px;
}
.corsi__card-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  padding-left: 20px;
  position: relative;
}
.corsi__card-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.corsi__card--adulti .corsi__card-list li::before { color: var(--hot); }

.corsi__card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
}
.corsi__card-dt {
  display: block;
  font: 700 10px var(--f-mono);
  letter-spacing: .2em;
  color: var(--muted);
}
.corsi__card-dd {
  display: block;
  font-size: 14px;
  margin-top: 4px;
}

.corsi__carousel-section {
  max-width: 1400px;
  margin: 60px auto 0;
  padding: 0 28px;
}
.corsi__carousel-title {
  font: 700 clamp(20px, 3vw, 28px) var(--f-display);
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--ink);
}
.corsi__carousel {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--line);
}
.corsi__carousel-track {
  display: flex;
  transition: transform .4s ease;
}
.corsi__carousel-track img {
  min-width: 100%;
  max-width: 100%;
  height: 400px;
  object-fit: cover;
  flex-shrink: 0;
}
.corsi__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--bg);
  border: 2px solid var(--ink);
  color: var(--ink);
  font: 700 20px var(--f-mono);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.corsi__carousel-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.corsi__carousel-btn--prev { left: 12px; }
.corsi__carousel-btn--next { right: 12px; }
.corsi__carousel-placeholder {
  min-width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 18px var(--f-mono);
  color: var(--muted);
  letter-spacing: .1em;
  border: 2px dashed var(--line);
}
@media (max-width: 600px) {
  .corsi__carousel-track img,
  .corsi__carousel-placeholder { height: 250px; }
}

.corsi__info {
  max-width: 1400px;
  margin: 60px auto 0;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 900px) { .corsi__info { grid-template-columns: 1fr; } }

.corsi__info-block {
  background: var(--paper);
  color: #0a0a0a;
  padding: 30px;
  border: 2px solid #0a0a0a;
}
.corsi__info-block h3 {
  font: 700 clamp(20px, 2vw, 28px) var(--f-display);
  margin-bottom: 12px;
}
.corsi__info-block p {
  font-size: 16px;
  line-height: 1.6;
}
.corsi__cta {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
}
.corsi__cta p {
  font: 700 14px var(--f-mono);
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* === RECENSIONI === */
.recensioni { padding-bottom: 80px; }
.recensioni__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1000px) { .recensioni__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .recensioni__grid { grid-template-columns: 1fr; } }

.recensioni__card {
  background: #0f0f0f;
  border: 2px solid var(--line);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s;
}
.recensioni__card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--accent);
  box-shadow: 6px 6px 0 0 var(--accent);
}
.recensioni__media {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.recensioni__media video,
.recensioni__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recensioni__media--placeholder {
  background: linear-gradient(135deg, rgba(244,255,0,.08), rgba(255,45,45,.08), rgba(0,224,255,.08));
  display: grid;
  place-items: center;
  border-bottom: 2px solid var(--line);
}
.recensioni__media--placeholder span {
  font: 700 14px var(--f-mono);
  letter-spacing: .25em;
  color: var(--muted);
  padding: 20px;
  border: 2px dashed var(--line);
}
.recensioni__body {
  padding: 22px 20px;
}
.recensioni__stars {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: 12px;
}
.recensioni__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 14px;
}
.recensioni__author {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.recensioni__name {
  font: 700 12px var(--f-mono);
  letter-spacing: .15em;
  color: var(--muted);
}
.recensioni__cta {
  max-width: 1400px;
  margin: 50px auto 0;
  padding: 0 28px;
  text-align: center;
}
.recensioni__cta p {
  font: 700 14px var(--f-mono);
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* === STAMPA / RASSEGNA === */
.stampa__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) { .stampa__grid { grid-template-columns: 1fr; } }

.stampa__placeholder {
  border: 2px dashed var(--line);
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 30px;
}
.stampa__placeholder-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stampa__placeholder-icon {
  font-size: 36px;
}
.stampa__placeholder-text {
  font: 700 14px var(--f-mono);
  letter-spacing: .25em;
  color: var(--muted);
}
.stampa__placeholder p {
  font-size: 14px;
  color: var(--muted);
  max-width: 300px;
  line-height: 1.5;
}

/* === LANGUAGE SWITCHER === */
.lang-switch {
  position: relative;
  margin-left: 18px;
}
.lang-switch__current {
  font: 700 11px var(--f-mono);
  letter-spacing: .1em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background .2s, color .2s;
}
.lang-switch__current:hover,
.lang-switch.is-open .lang-switch__current {
  background: var(--accent);
  color: #0a0a0a;
}
.lang-switch__arrow {
  font-size: 8px;
  transition: transform .2s;
}
.lang-switch.is-open .lang-switch__arrow { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: none;
  flex-direction: column;
  z-index: 100;
  min-width: 100%;
}
.lang-switch.is-open .lang-switch__menu { display: flex; }
.lang-switch__menu a {
  font: 700 11px var(--f-mono);
  letter-spacing: .1em;
  padding: 8px 12px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.lang-switch__menu a:hover {
  background: var(--accent);
  color: #0a0a0a;
}

.load-more {
  display: block;
  margin: 40px auto;
}

/* === LIGHTBOX === */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.96);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 60px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.lightbox.is-open { display: flex; }
.lightbox__fig {
  max-width: 90vw;
  max-height: 85vh;
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: center;
}
.lightbox__fig img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--line);
}
.lightbox__fig figcaption {
  font: 700 14px var(--f-mono);
  letter-spacing: .2em;
  color: var(--paper);
  text-align: center;
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  width: 56px; height: 56px;
  font-size: 24px;
  display: grid; place-items: center;
  transition: all .2s;
}
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

/* === REVEAL ON SCROLL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s, transform .8s;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: #0a0a0a;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line);
  }
  .hero { padding: 110px 18px 50px; }
  .hero__corner--bl, .hero__corner--br { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__sticker--1 { width: 120px; height: 120px; }
  .section-head, .grid, .contact__grid, .bio__grid, .works__filters { padding-inline: 18px; }
  .marquee__track { font-size: 22px; }
  body { cursor: auto; }
  .btn, .card, .chip, .contact__form input { cursor: pointer; }
}
