/* =========================================================
   PORTFOLIO — stile cyberpunk
   Colori principali: modifica le variabili qui sotto
   ========================================================= */
:root {
  --yellow: #fcee0a;
  --cyan: #00f0ff;
  --red: #ff003c;
  --purple: #b026ff;
  --orange: #ff9d00;

  --bg: #0a0a0f;
  --bg-2: #101018;
  --panel: #13131c;
  --line: #2a2a3a;
  --text: #e9e9ee;
  --muted: #9a9aab;

  --f-head: 'Rajdhani', 'Arial Narrow', sans-serif;
  --f-body: 'Chakra Petch', system-ui, sans-serif;
  --f-mono: 'Share Tech Mono', ui-monospace, monospace;

  --cut: 18px;
  --clip: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --clip-btn: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);

  --nav-h: 72px;
  --max: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 700; line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--f-mono); letter-spacing: .08em; }
::selection { background: var(--yellow); color: var(--bg); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--yellow); color: var(--bg); padding: 10px 16px; font-weight: 600;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Scanline su tutta la pagina */
.scanlines {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- Schermata di caricamento ---------- */
.boot {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; cursor: pointer;
  background:
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(252,238,10,.08), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    var(--bg);
  transition: opacity .45s ease, visibility .45s;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.no-boot .boot { display: none; }
.boot__inner { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.boot__logo {
  width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 22px;
  background: var(--yellow); clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
  box-shadow: 0 0 40px rgba(252,238,10,.4); animation: bootLogo 1.6s steps(1, end) infinite;
}
.boot__logo svg { width: 34px; fill: var(--bg); }
@keyframes bootLogo { 0%, 86%, 100% { transform: none; filter: none; } 88% { transform: translateX(-3px); filter: drop-shadow(3px 0 var(--cyan)); } 91% { transform: translateX(2px); filter: drop-shadow(-3px 0 var(--red)); } }
.boot__name { margin: 0; font: 700 34px/1 var(--f-head); letter-spacing: .14em; color: var(--text); }
.boot__name.glitch::before, .boot__name.glitch::after { animation-duration: 1.8s; }
.boot__sub { margin: 10px 0 26px; font-size: 10.5px; color: var(--cyan); letter-spacing: .2em; }
.boot__bar { position: relative; width: 100%; height: 6px; background: var(--line); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.boot__bar span { position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, rgba(252,238,10,.55) 8px 10px); box-shadow: 0 0 12px var(--yellow); }
.boot__meta { width: 100%; display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.boot__pct { color: var(--yellow); font-weight: 400; }

/* ---------- Bottoni ---------- */
.btn {
  --b: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font: 700 17px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; position: relative;
  clip-path: var(--clip-btn);
  transition: transform .15s ease, background-color .2s, color .2s, box-shadow .2s;
}
.btn--yellow { background: var(--yellow); color: var(--bg); }
.btn--yellow:hover { background: var(--cyan); }
.btn--yellow::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px;
  background: var(--red); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.btn--ghost { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); }
.btn--ghost:hover { background: var(--cyan); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Navigazione ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 24px;
  background: rgba(10,10,15,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s;
}
.nav::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 160px; background: var(--yellow);
}
.nav.is-scrolled { background: rgba(10,10,15,.94); }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav__logo-mark {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--yellow); color: var(--bg);
  font: 700 18px/1 var(--f-head);
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
}
.nav__logo-mark svg { width: 20px; height: auto; fill: var(--bg); }
.nav__logo-text { font: 700 20px/1 var(--f-head); letter-spacing: .1em; }
.nav__logo-text em { font-style: normal; color: var(--yellow); }

.nav__menu { display: flex; gap: 4px; }
.nav__menu a {
  position: relative; padding: 8px 14px; text-decoration: none;
  font: 600 16px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  transition: color .2s;
}
.nav__menu a::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__menu a:hover, .nav__menu a.is-active { color: var(--text); }
.nav__menu a:hover::before, .nav__menu a.is-active::before { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid var(--line); }
.lang__btn {
  background: none; border: 0; padding: 6px 10px; cursor: pointer;
  font: 400 13px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted);
}
.lang__btn.is-active { background: var(--cyan); color: var(--bg); }

.nav__burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); cursor: pointer; padding: 0 10px; flex-direction: column; justify-content: center; gap: 5px; }
.nav__burger span { display: block; height: 2px; background: var(--yellow); transition: transform .25s, opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; gap: 0; padding: 24px 16px;
    background: rgba(10,10,15,.98);
    transform: translateX(100%); transition: transform .3s ease; visibility: hidden;
  }
  .nav__menu.is-open { transform: none; visibility: visible; }
  .nav__menu a { padding: 18px 8px; font-size: 26px; border-bottom: 1px solid var(--line); }
  .nav__menu a::before { display: none; }
}
@media (max-width: 600px) {
  .nav { padding: 0 16px; gap: 10px; }
  .nav__logo-text { display: none; }
  .nav__actions { gap: 8px; }
  .nav__cta { padding: 0 12px; }
}

/* ---------- Glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
}
.glitch::before { color: var(--cyan); transform: translate(-3px, 0); clip-path: inset(0 0 100% 0); animation: glitchA 3.2s infinite steps(1); mix-blend-mode: screen; }
.glitch::after  { color: var(--red);  transform: translate(3px, 0);  clip-path: inset(100% 0 0 0); animation: glitchB 3.2s infinite steps(1); mix-blend-mode: screen; }
.glitch--yellow { color: var(--yellow); }

@keyframes glitchA {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  87% { clip-path: inset(10% 0 70% 0); transform: translate(-6px, -2px); }
  89% { clip-path: inset(55% 0 20% 0); transform: translate(5px, 1px); }
  91% { clip-path: inset(30% 0 50% 0); transform: translate(-4px, 0); }
  93% { clip-path: inset(80% 0 5% 0);  transform: translate(3px, 2px); }
}
@keyframes glitchB {
  0%, 86%, 100% { clip-path: inset(100% 0 0 0); }
  88% { clip-path: inset(60% 0 15% 0); transform: translate(6px, 2px); }
  90% { clip-path: inset(5% 0 75% 0);  transform: translate(-5px, -1px); }
  92% { clip-path: inset(40% 0 35% 0); transform: translate(4px, 0); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 48px) 0 120px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(255,0,60,.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(0,240,255,.12), transparent 70%),
    var(--bg);
}
.hero__grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image:
    linear-gradient(rgba(252,238,10,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252,238,10,.35) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 70%, transparent);
  animation: gridMove 3s linear infinite;
  opacity: .5;
}
@keyframes gridMove { to { background-position: 0 60px, 0 0; } }
@keyframes float { 50% { transform: translateY(-16px); } }

.hero__content { position: relative; z-index: 2; }
.tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
  padding: 8px 14px; border: 1px solid rgba(0,240,255,.4); background: rgba(0,240,255,.06);
  font: 400 13px/1 var(--f-mono); letter-spacing: .14em; color: var(--cyan);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2bff88; box-shadow: 0 0 10px #2bff88; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.tag--busy { color: #ffb020; border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.07); }
.tag--busy .dot { background: #ffb020; box-shadow: 0 0 10px #ffb020; }
.works__error { grid-column: 1 / -1; color: var(--muted); }

.hero__title {
  font-size: clamp(64px, 13vw, 190px); line-height: .86; letter-spacing: -.01em;
  display: flex; flex-direction: column; align-items: flex-start;
  text-shadow: 0 0 40px rgba(252,238,10,.08);
}
.hero__roles {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 28px 0 22px;
  font-size: clamp(13px, 1.6vw, 17px); color: var(--text);
}
.hero__roles i { color: var(--red); font-style: normal; }
.hero__lead { max-width: 580px; font-size: clamp(17px, 2vw, 20px); color: var(--muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

.hud-wrap { position: relative; z-index: 2; }
.hud {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.hud__item { background: rgba(10,10,15,.85); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.hud__item b { font: 700 40px/1 var(--f-head); color: var(--yellow); }
.hud__item span { font: 400 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .hud { grid-template-columns: repeat(2, 1fr); margin-top: 48px; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.hero__scroll span { display: inline-block; animation: bob 1.6s infinite; color: var(--yellow); }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- Sezioni ---------- */
.section { position: relative; padding: 120px 0; }
.section--alt { background: var(--bg-2); }
.section--alt::before, .section--yellow::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--yellow) 0 120px, var(--line) 120px);
}
.section__head { margin-bottom: 56px; }
.section__index { color: var(--red); font-size: 14px; margin-bottom: 12px; }
.section__title { font-size: clamp(44px, 7vw, 88px); }
.section__title::after {
  content: ''; display: block; width: 72px; height: 6px; margin-top: 18px; background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.section__sub { margin-top: 18px; color: var(--muted); max-width: 560px; font-size: 18px; }
@media (max-width: 600px) { .section { padding: 84px 0; } .section__head { margin-bottom: 40px; } }

/* Comparsa allo scroll */
.reveal { opacity: 0; }
.reveal.is-visible { opacity: 1; animation: glitchIn .6s steps(1, end) var(--d, 0ms) backwards; }

/* ---------- Servizi ---------- */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .services { grid-template-columns: 1fr; } }

.service {
  --accent: var(--yellow);
  position: relative; display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--line); clip-path: var(--clip);
  transition: transform .25s ease, background-color .25s;
}
.service::before {
  content: ''; position: absolute; inset: 1px; z-index: 0;
  background: linear-gradient(160deg, var(--panel), var(--bg) 80%);
  clip-path: var(--clip);
}
.service > * { position: relative; z-index: 1; }
.service:hover { background: var(--accent); transform: translateY(-6px); }
.service__top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 26px; }
.service__top span:last-child { color: var(--accent); }
.service__icon { width: 48px; height: 48px; fill: none; stroke: var(--accent); stroke-width: 2.5; margin-bottom: 22px; filter: drop-shadow(0 0 8px var(--accent)); }
.service h3 { font-size: 30px; margin-bottom: 14px; }
.service p { color: var(--muted); font-size: 16px; }
.service__list { list-style: none; padding: 0; margin: 4px 0 24px; font-size: 15px; }
.service__list li { padding: 7px 0; border-top: 1px dashed var(--line); display: flex; gap: 10px; }
.service__list li::before { content: '▸'; color: var(--accent); }
.service__cta {
  margin-top: auto; font-size: 14px; color: var(--accent); text-decoration: none;
  align-self: flex-start; padding: 6px 0; border-bottom: 1px solid currentColor;
}
.service__cta:hover { color: var(--text); }

/* ---------- Portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter {
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  padding: 10px 20px; font: 600 15px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); clip-path: var(--clip-btn); transition: all .2s;
}
.filter:hover { color: var(--text); border-color: var(--muted); }
.filter.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }

.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-flow: row dense; }
@media (max-width: 980px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .works { grid-template-columns: 1fr; gap: 16px; } }

.work { --accent: var(--yellow); animation: workIn .45s ease both; }
.work[data-cat="video"] { --accent: var(--red); }
.work[data-cat="foto"] { --accent: var(--cyan); }
.work[data-cat="web"] { --accent: var(--purple); }
.work.is-hidden { display: none; }
@keyframes workIn { from { opacity: 0; transform: scale(.97); } }

.work__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--panel); overflow: hidden; text-align: left;
  clip-path: var(--clip); aspect-ratio: 16 / 10;
}
.work__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s; }
.work__btn::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,10,15,.95) 0%, rgba(10,10,15,.3) 50%, transparent 75%);
}
.work__btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); clip-path: var(--clip);
  transition: border-color .25s, border-width .25s;
}
.work__btn:hover::after, .work__btn:focus-visible::after { border: 2px solid var(--accent); }

/* Mini cornice cyberpunk: angoli a staffa + triangolo nell'angolo tagliato */
.work__frame { position: absolute; inset: 10px; z-index: 3; pointer-events: none; transition: inset .25s ease; }
.work__frame::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 22px no-repeat;
  opacity: .85; transition: opacity .25s;
}
.work__frame::after {
  content: ''; position: absolute; top: -10px; right: -10px; width: 26px; height: 26px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .9; transition: width .25s, height .25s;
}
.work__btn:hover .work__frame, .work__btn:focus-visible .work__frame { inset: 6px; }
.work__btn:hover .work__frame::after, .work__btn:focus-visible .work__frame::after { width: 34px; height: 34px; }
.work__id {
  position: absolute; top: 18px; left: 20px; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--accent); letter-spacing: .14em;
  padding: 4px 8px; background: rgba(10,10,15,.78);
}
.work__id::after {
  content: ''; width: 34px; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px);
  opacity: .8;
}
.work__btn:hover .work__title, .work__btn:focus-visible .work__title { text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
.work__btn:hover img, .work__btn:focus-visible img { transform: scale(1.06); filter: saturate(1.3) contrast(1.05); animation: rgbShift .35s steps(2) 1; }
@keyframes rgbShift {
  0% { filter: drop-shadow(-4px 0 0 rgba(255,0,60,.7)) drop-shadow(4px 0 0 rgba(0,240,255,.7)); transform: scale(1.06) translateX(-3px); }
  100% { filter: none; transform: scale(1.06); }
}
.work__count {
  position: absolute; top: 16px; right: 16px; z-index: 3; padding: 4px 8px;
  font-size: 11px; color: var(--accent); background: rgba(10,10,15,.75); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.work__count { top: 22px; right: 30px; }
.work__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.work__cat { font-size: 11px; color: var(--bg); background: var(--yellow); align-self: flex-start; padding: 3px 8px; }
.work[data-cat="video"] .work__cat { background: var(--red); color: #fff; }
.work[data-cat="foto"] .work__cat { background: var(--cyan); }
.work[data-cat="web"] .work__cat { background: var(--purple); color: #fff; }
.work__title { font: 700 24px/1.1 var(--f-head); text-transform: uppercase; color: var(--text); margin-top: 6px; }
.work__meta { font-size: 12px; color: var(--muted); }
.work__play {
  position: absolute; top: 42%; left: 50%; z-index: 3; width: 58px; height: 58px; transform: translate(-50%, -50%);
  border: 2px solid var(--accent); display: grid; place-items: center; background: rgba(10,10,15,.55);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform .25s ease, background-color .25s;
}
.work__play::after { content: ''; border-left: 16px solid var(--accent); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; transition: border-color .25s; }
.work__btn:hover .work__play { transform: translate(-50%, -50%) scale(1.1); background: var(--accent); }
.work__btn:hover .work__play::after { border-left-color: var(--bg); }

.works__cta {
  margin-top: 64px; padding: 36px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(252,238,10,.03) 18px 20px);
}
.works__cta p { margin: 0; font: 700 clamp(22px, 3vw, 30px)/1.15 var(--f-head); text-transform: uppercase; max-width: 620px; }
@media (max-width: 600px) { .works__cta { padding: 28px 20px; } .works__cta .btn { width: 100%; } }

/* ---------- Metodo (sezione gialla) ---------- */
.section--yellow { background: var(--yellow); color: var(--bg); }
.section--yellow::before { background: var(--bg); height: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 260px 100%, 240px 0, 0 0); }
.section--yellow .section__index { color: var(--red); }
.section--yellow .section__title::after { background: var(--bg); }
.section--yellow .section__sub { color: rgba(10,10,15,.7); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.step { position: relative; padding: 28px 28px 8px 0; border-top: 3px solid var(--bg); }
.step + .step { padding-left: 28px; border-left: 1px solid rgba(10,10,15,.2); }
.step__n { display: inline-block; font-size: 14px; background: var(--bg); color: var(--yellow); padding: 4px 10px; margin-bottom: 18px; }
.step h3 { font-size: 34px; margin-bottom: 12px; }
.step p { font-size: 16px; color: rgba(10,10,15,.8); }
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; row-gap: 24px; }
  .step + .step { padding-left: 0; border-left: 0; }
}

/* ---------- Recensioni ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  margin: 0; padding: 30px; background: var(--panel); border-left: 3px solid var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.review p { font-size: 17px; }
.review footer { font-size: 13px; color: var(--yellow); }

/* ---------- Contatti ---------- */
.contact {
  background:
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255,0,60,.14), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 0%, rgba(0,240,255,.1), transparent 70%),
    var(--bg);
}
.contact__wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
@media (max-width: 960px) { .contact__wrap { grid-template-columns: 1fr; gap: 40px; } }
.contact__intro > p { color: var(--muted); font-size: 18px; max-width: 460px; }
.contact__list { list-style: none; padding: 0; margin: 36px 0 0; font-size: 14px; }
.contact__list li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.contact__list li > span:first-child { color: var(--red); }
.contact__list a { color: var(--yellow); text-decoration: none; word-break: break-all; }
.contact__list a:hover { color: var(--cyan); }
.socials { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.form {
  position: relative; padding: 32px; background: var(--panel);
  clip-path: var(--clip);
  box-shadow: inset 0 0 0 1px var(--line);
}
.form::before { content: ''; position: absolute; top: 0; left: 0; width: 120px; height: 3px; background: var(--yellow); }
.form__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.form__blink { color: #2bff88; animation: blink 1.4s infinite; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form { padding: 24px 18px; } .form__row { grid-template-columns: 1fr; gap: 0; } }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-size: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.field select option { background: var(--bg); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 0 18px rgba(252,238,10,.15); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.field textarea::placeholder { color: #5c5c6e; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 6px 0 24px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--muted); background: var(--bg); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--yellow); border-color: var(--yellow); }
.check input:checked::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg) translate(1px, -1px); }
.check.is-invalid input { border-color: var(--red); }
.check a { color: var(--yellow); }

.form__status { margin: 16px 0 0; min-height: 1.4em; font-size: 14px; }
.form__status.is-ok { color: #2bff88; }
.form__status.is-error { color: var(--red); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 13px; color: var(--muted); }
.footer__wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer p { margin: 0; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--yellow); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
  padding: 24px; background: rgba(5,5,8,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
/* La cornice prende la larghezza dell'immagine/video (dimensioni calcolate in js/main.js):
   didascalia e miniature si adattano senza allargarla */
.lightbox { --accent: var(--yellow); }
.lightbox__frame { width: fit-content; max-width: 100%; min-width: 0; margin: 0 auto; }
.lightbox__caption, .lightbox__thumbs { width: 0; min-width: 100%; }
.lightbox__media { position: relative; margin-top: 26px; }
.lightbox__media > img, .lightbox__media > video, .lightbox__media > iframe {
  display: block; border: 0; max-width: 100%;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  opacity: 0; transition: opacity .25s ease;
}
.lightbox__media > .is-ready { opacity: 1; }
.lightbox__media > img { background: var(--panel); }
.lightbox__media > video { background: var(--bg); object-fit: cover; }
/* Mini cornice cyberpunk attorno al contenuto */
.lightbox__deco { position: absolute; inset: -10px; pointer-events: none; }
.lightbox__deco::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 30px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 30px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 30px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 30px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 12px 2px no-repeat;
}
.lightbox__deco::after {
  content: ''; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.lightbox__tag {
  position: absolute; left: 0; top: -36px; display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .14em; color: var(--accent); white-space: nowrap; pointer-events: none;
}
.lightbox__tag::after { content: ''; width: 40px; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px); }
.lightbox__count { font-size: 13px; color: var(--accent); }
.lightbox__thumbs { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.lightbox__thumbs[hidden] { display: none; }
.lightbox__thumb { flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border: 2px solid transparent; background: var(--panel); cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.lightbox__thumb img, .lightbox__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lightbox__thumb:hover { opacity: .9; }
.lightbox__thumb.is-active { border-color: var(--accent); opacity: 1; }
.lightbox__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 16px 0 0; }
.lightbox__title { font: 700 26px/1 var(--f-head); text-transform: uppercase; }
.lightbox__meta { font-size: 13px; color: var(--muted); }
.lightbox__link { font-size: 14px; color: var(--accent); margin-left: auto; }
.lightbox__close {
  position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; z-index: 2;
  background: var(--yellow); color: var(--bg); border: 0; font-size: 22px; cursor: pointer; clip-path: var(--clip-btn);
}
.lightbox__nav { width: 48px; height: 64px; background: transparent; border: 1px solid var(--line); color: var(--yellow); font-size: 36px; cursor: pointer; }
.lightbox__nav:hover { background: var(--yellow); color: var(--bg); }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; padding: 72px 12px 80px; }
  .lightbox__thumb { width: 64px; height: 44px; }
  .lightbox__nav { position: absolute; bottom: 16px; }
  .lightbox__prev { left: 12px; } .lightbox__next { right: 12px; }
}

/* ---------- Accessibilità: movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .boot { display: none; }
}


/* =========================================================
   MIGLIORAMENTI UX/UI
   ========================================================= */

/* Barra di lettura sotto la navigazione */
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.nav__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--red)); transform: scaleX(0); transform-origin: left; }
.nav::after { z-index: 1; }

/* Hero: pannello "in evidenza" */
.feature {
  --accent: var(--yellow);
  position: absolute; z-index: 5; top: calc(var(--nav-h) + 64px);
  right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  width: min(38vw, 520px);
}
.feature[hidden] { display: none; }
@media (max-width: 1099px) { .feature { display: none; } }
.feature__tag { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.feature__tag span:first-child { color: var(--cyan); }
.feature__tag b { color: var(--accent); font-weight: 400; }
.feature__screen {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; cursor: pointer;
  background: var(--panel); clip-path: var(--clip); text-align: left; overflow: hidden;
}
.feature__screen::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,10,15,.92) 0%, rgba(10,10,15,.2) 45%, transparent 70%),
              repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.feature__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); clip-path: var(--clip); transition: border-color .25s;
}
.feature__screen:hover::after, .feature__screen:focus-visible::after { border: 2px solid var(--accent); }
.feature__screen:hover .work__frame { inset: 6px; }
.feature__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 6s linear;
}
.feature__slides img.is-active { opacity: 1; transform: scale(1); }
.feature__info { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.feature__cat { align-self: flex-start; padding: 3px 8px; font-size: 11px; background: var(--accent); color: var(--bg); }
.feature__title { font: 700 clamp(22px, 2.2vw, 30px)/1.05 var(--f-head); text-transform: uppercase; }
.feature__open { font-size: 12px; color: var(--accent); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.feature__screen:hover .feature__open, .feature__screen:focus-visible .feature__open { opacity: 1; transform: none; }
.feature__bars { display: flex; gap: 6px; margin-top: 12px; }
.feature__bar { position: relative; flex: 1; height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.feature__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 4px; background: var(--line); }
.feature__bar span { position: absolute; left: 0; top: 5px; height: 4px; width: 0; background: var(--accent); }
.feature__bar.is-done span { width: 100%; background: var(--muted); }
.feature__bar.is-active span { animation: featureBar var(--dur, 5s) linear forwards; }
.feature.is-paused .feature__bar.is-active span { animation-play-state: paused; }
@keyframes featureBar { from { width: 0; } to { width: 100%; } }
@media (min-width: 1100px) { .hero__lead { max-width: 520px; } }

/* Filtri con il numero di progetti */
.filter { display: inline-flex; align-items: flex-start; gap: 6px; }
.filter__n { font: 400 11px/1 var(--f-mono); opacity: .7; letter-spacing: 0; }
.filter__n:empty { display: none; }

/* Lightbox: invito al contatto */
.lightbox__cta { min-height: 38px; padding: 0 16px; font-size: 14px; }
.lightbox__link + .lightbox__cta, .lightbox__link[hidden] + .lightbox__cta { margin-left: auto; }
.lightbox__link:not([hidden]) + .lightbox__cta { margin-left: 0; }
.lightbox__cta { background: var(--accent); }
.lightbox__cta:hover { background: var(--text); }
@media (max-width: 700px) { .lightbox__cta { width: 100%; margin-top: 6px; } }

/* Modulo: conferma dopo l'invio */
.form.is-sent > *:not(.form__done):not(.form__head) { display: none; }
.form__done { padding: 24px 0 8px; }
.form__done[hidden] { display: none; }
.form__done-tag { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.form__done-tag span { color: #2bff88; }
.form__done-title { font-size: 40px; margin-bottom: 14px; outline: none; }
.form__done-title::after { content: ''; display: block; width: 64px; height: 5px; margin-top: 14px; background: #2bff88; }
.form__done p { color: var(--muted); }

/* Footer */
.footer { padding: 56px 0 28px; }
.footer__wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; align-items: start; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer__tagline { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.footer__links { display: grid; gap: 10px; font-size: 13px; }
.footer__links a, .footer__contact a:not(.btn) { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer__links a:hover, .footer__contact a:not(.btn):hover { color: var(--yellow); }
.footer__contact { display: grid; gap: 12px; justify-items: start; font-size: 13px; }
.footer__contact #footer-email { color: var(--text); word-break: break-all; }
.footer__contact .btn { margin-top: 6px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; }
@media (max-width: 760px) { .footer__wrap { grid-template-columns: 1fr; gap: 28px; } }

/* Pulsante "torna su" */
.totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 400; width: 48px; height: 48px;
  display: grid; place-items: center; text-decoration: none; font-size: 20px;
  background: var(--yellow); color: var(--bg); clip-path: var(--clip-btn);
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .2s, background-color .2s;
}
.totop[hidden] { display: none; }
.totop:hover { background: var(--cyan); transform: translateY(-3px); }
body.is-locked .totop { display: none; }

.footer .nav__logo-text { color: var(--text); }
@media (max-width: 600px) { .footer .nav__logo-text { display: inline; } }


/* =========================================================
   GLITCH
   ========================================================= */
/* Comparsa degli elementi: fette che saltano + separazione RGB */
@keyframes glitchIn {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(-10px); }
  12%  { opacity: 1; clip-path: inset(8% 0 62% 0); transform: translateX(8px); filter: drop-shadow(-4px 0 rgba(255,0,60,.8)) drop-shadow(4px 0 rgba(0,240,255,.8)); }
  24%  { clip-path: inset(48% 0 18% 0); transform: translateX(-6px); }
  36%  { clip-path: inset(0 0 38% 0); transform: translateX(4px); filter: drop-shadow(3px 0 rgba(255,0,60,.7)) drop-shadow(-3px 0 rgba(0,240,255,.7)); }
  48%  { clip-path: inset(22% 0 0 0); transform: translateX(-3px); }
  60%  { clip-path: inset(0 0 8% 0); transform: translateX(2px); filter: none; }
  72%  { clip-path: inset(0 0 0 0); transform: none; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; filter: none; }
}
/* Titoli di sezione: scossa con aberrazione cromatica quando compaiono */
@keyframes titleGlitch {
  0%, 100% { text-shadow: none; transform: none; }
  10% { text-shadow: -5px 0 var(--red), 5px 0 var(--cyan); transform: translateX(3px) skewX(-6deg); }
  20% { text-shadow: 4px 0 var(--red), -4px 0 var(--cyan); transform: translateX(-4px); }
  30% { text-shadow: none; transform: none; }
  55% { text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); transform: translateX(2px); }
  62% { text-shadow: none; transform: none; }
}
.section__head.is-visible .section__title { animation: titleGlitch 1.1s steps(1, end) calc(var(--d, 0ms) + .25s); }

/* Pulsanti, link del menu e filtri: scatto glitch al passaggio */
@keyframes hoverGlitch {
  0%   { transform: translate(0); text-shadow: none; }
  20%  { transform: translate(-2px, 1px) skewX(-8deg); text-shadow: -3px 0 var(--red), 3px 0 var(--cyan); }
  40%  { transform: translate(2px, -1px); text-shadow: 3px 0 var(--red), -3px 0 var(--cyan); }
  60%  { transform: translate(-1px, 0) skewX(4deg); text-shadow: -1px 0 var(--red), 1px 0 var(--cyan); }
  80%, 100% { transform: translate(0); text-shadow: none; }
}
.btn:hover, .btn:focus-visible, .filter:hover, .nav__menu a:hover { animation: hoverGlitch .32s steps(1, end); }
.nav__logo:hover .nav__logo-mark { animation: hoverGlitch .32s steps(1, end); }

/* Card dei lavori: una fetta dell'immagine "scappa" al passaggio */
@keyframes sliceGlitch {
  0%   { clip-path: inset(0); transform: none; filter: none; }
  15%  { clip-path: inset(30% 0 45% 0); transform: translateX(-12px); filter: hue-rotate(40deg) saturate(1.6); }
  30%  { clip-path: inset(62% 0 12% 0); transform: translateX(10px); }
  45%  { clip-path: inset(10% 0 70% 0); transform: translateX(-6px); filter: hue-rotate(-30deg); }
  60%, 100% { clip-path: inset(0); transform: none; filter: none; }
}
.work__btn:hover .work__info, .work__btn:focus-visible .work__info { animation: hoverGlitch .35s steps(1, end); }

/* Lightbox: ogni nuova immagine/video entra con un glitch */

/* Carosello "in evidenza": glitch al cambio slide */
.feature__screen.is-glitch .feature__slides { animation: sliceGlitch .45s steps(1, end); }
.feature__screen.is-glitch .feature__info { animation: hoverGlitch .4s steps(1, end); }

/* Disturbo saltuario sul nome nella hero (oltre all'effetto già presente) */
@keyframes jitter {
  0%, 93%, 100% { transform: none; }
  94% { transform: translate(4px, -1px) skewX(-10deg); }
  95% { transform: translate(-6px, 1px); }
  96% { transform: translate(2px, 0) skewX(6deg); }
  97% { transform: none; }
}
.hero__title .glitch:last-child { animation: jitter 6s steps(1, end) 2s infinite; }

/* =========================================================
   CHI SONO — profilo
   ========================================================= */
.profile { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 980px) { .profile { grid-template-columns: 1fr; gap: 40px; } }

/* Card con foto, sempre visibile mentre si legge (desktop) */
.profile__card { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 980px) { .profile__card { position: static; grid-template-columns: 220px 1fr; align-items: start; } .profile__card .btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .profile__card { grid-template-columns: 1fr; } }
.profile__photo { position: relative; aspect-ratio: 4 / 5; background: var(--panel); clip-path: var(--clip); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__name { margin: 0 0 6px; font: 700 30px/1 var(--f-head); text-transform: uppercase; }
.profile__role { margin: 0; font-size: 12px; color: var(--cyan); line-height: 1.6; }
.profile__facts dt { color: var(--muted); }
.profile__facts dd { margin: 0; text-align: right; }

/* Colonna principale */
.profile__bio p { color: var(--muted); font-size: 17px; }
.profile__bio .profile__lead { color: var(--text); font-size: clamp(19px, 2vw, 22px); line-height: 1.55; }
.profile__h {
  display: flex; align-items: center; gap: 12px; margin: 44px 0 18px;
  font: 400 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.profile__h::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .areas { grid-template-columns: 1fr; } }
.area__icon { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.8; margin-bottom: 14px; }
.area__title { font-size: 22px; margin-bottom: 8px; }
.area__text { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.area__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.area__tools li { font-size: 11px; padding: 4px 8px; border: 1px solid var(--line); color: var(--text); }

.profile__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 760px) { .profile__cols { grid-template-columns: 1fr; gap: 0; } }

/* Timeline delle esperienze */
.tl { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.tl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl__item { position: relative; padding-bottom: 22px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before { content: ''; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--muted); }
.tl__item.is-live::before { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 10px rgba(252,238,10,.6); }
.tl__date { font-size: 11px; color: var(--cyan); }
.tl__client { margin: 4px 0 2px; font: 700 18px/1.2 var(--f-head); text-transform: uppercase; }
.tl__place { color: var(--muted); font-weight: 600; }
.tl__live { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 6px; font-size: 10px; letter-spacing: .1em; color: var(--bg); background: var(--yellow); }
.tl__role { margin: 0; font-size: 15px; color: var(--muted); }

/* Formazione */
.edus { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edu__course { font: 700 18px/1.2 var(--f-head); text-transform: uppercase; margin-bottom: 4px; }
.edu__school { margin: 0; font-size: 11px; color: var(--muted); }
.edu__score { flex: 0 0 auto; font: 400 13px var(--f-mono); color: var(--muted); }
.edu__score b { font: 700 32px/1 var(--f-head); color: var(--yellow); }
@media (max-width: 560px) { .profile__photo { max-width: 300px; } }

/* ---------- Chi sono: cornici e animazioni coerenti con i lavori ---------- */
/* Cornice riutilizzabile: bordo nel colore d'accento, staffe agli angoli, triangolo nell'angolo tagliato */
.cframe { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cframe::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); clip-path: var(--clip);
  transition: border-color .25s;
}
.cframe::after {
  content: ''; position: absolute; inset: 9px;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 18px no-repeat,
    linear-gradient(135deg, transparent 50%, var(--accent) 50%) right -9px top -9px / 24px 24px no-repeat;
  transition: inset .25s ease;
}
/* Etichetta con tacche (come PRJ_01 sui lavori) */
.ctag { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.ctag::after { content: ''; width: 30px; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px); }

/* Foto */
.profile__card { --accent: var(--yellow); }
.profile__card .ctag--top { margin-bottom: -10px; }
.profile__photo img { transition: filter .3s; }
.profile__photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
              linear-gradient(to top, rgba(10,10,15,.45), transparent 40%);
}
.profile__photo:hover img { filter: saturate(1.15) contrast(1.05); animation: sliceGlitch .4s steps(1, end); }
.profile__photo:hover .cframe::before { border: 2px solid var(--accent); }
.profile__photo:hover .cframe::after { inset: 5px; }

/* Riquadro dati */
.profile__facts { position: relative; margin: 0; padding: 18px 28px 14px 24px; background: var(--panel); clip-path: var(--clip); font-size: 12px; }
.profile__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.profile__facts div:last-of-type { border-bottom: 0; }
.profile__facts dd { color: var(--yellow); }

/* Presentazione: barra laterale come la CTA dei lavori */
.profile__bio { padding-left: 22px; border-left: 3px solid var(--yellow); }

/* Titoletti con quadratino */
.profile__h::before { content: ''; width: 8px; height: 8px; background: var(--red); flex: 0 0 auto; }

/* Aree di competenza */
.area { position: relative; padding: 24px; background: var(--panel); clip-path: var(--clip); transition: transform .25s ease; }
.area .ctag { position: absolute; top: 24px; right: 34px; }
.area:hover { transform: translateY(-4px); }
.area:hover .cframe::before { border: 2px solid var(--accent); }
.area:hover .cframe::after { inset: 5px; }
.area:hover .area__title { animation: hoverGlitch .35s steps(1, end); text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
.area:hover .area__icon { animation: sliceGlitch .4s steps(1, end); filter: drop-shadow(0 0 6px var(--accent)); }
.area__tools li { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

/* Timeline */
.tl::before { background: linear-gradient(var(--yellow), var(--line) 30%); }
.tl__item { transition: transform .2s; }
.tl__item:hover { transform: translateX(4px); }
.tl__item:hover::before { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.tl__item:hover .tl__client { animation: hoverGlitch .35s steps(1, end); }

/* Formazione */
.edu { --accent: var(--yellow); position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; background: var(--panel); clip-path: var(--clip); transition: transform .25s; }
.edu:hover { transform: translateY(-3px); }
.edu:hover .cframe::before { border: 2px solid var(--accent); }
.edu:hover .cframe::after { inset: 5px; }
.edu:hover .edu__score b { animation: hoverGlitch .35s steps(1, end); }

/* Clienti e collaborazioni */
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clients { grid-template-columns: 1fr; } }
.client {
  --accent: var(--yellow);
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px;
  background: var(--panel); clip-path: var(--clip); transition: transform .25s;
}
.client .ctag { margin-bottom: 6px; }
.client__date { font-size: 11px; color: var(--cyan); }
.client__name { margin: 2px 0 0; font: 700 21px/1.15 var(--f-head); text-transform: uppercase; }
.client__name span { color: var(--muted); font-weight: 600; }
.client__role { margin: 0; font-size: 15px; color: var(--muted); }
.client__link {
  align-self: flex-start; margin-top: auto; padding: 10px 0 0; background: none; border: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .1em; color: var(--accent); position: relative; z-index: 3;
}
.client__link[hidden] { display: none; }
.client__link:hover { color: var(--text); animation: hoverGlitch .32s steps(1, end); }
.client:hover { transform: translateY(-3px); }
.client:hover .cframe::before { border: 2px solid var(--accent); }
.client:hover .cframe::after { inset: 5px; }
.client:hover .client__name { animation: hoverGlitch .35s steps(1, end); }

/* ---------- Lightbox: passaggio tra un progetto e l'altro ---------- */
@keyframes lbOutLeft {
  0%   { transform: none; opacity: 1; filter: none; clip-path: inset(-60px); }
  35%  { transform: translateX(-18px) skewX(5deg); clip-path: inset(8% -60px 38% -60px); filter: drop-shadow(-6px 0 rgba(255,0,60,.85)) drop-shadow(6px 0 rgba(0,240,255,.85)); }
  65%  { transform: translateX(-46px); clip-path: inset(52% -60px 12% -60px); opacity: .8; }
  100% { transform: translateX(-40px); clip-path: inset(100% -60px 0 -60px); opacity: 0; }
}
@keyframes lbOutRight {
  0%   { transform: none; opacity: 1; filter: none; clip-path: inset(-60px); }
  35%  { transform: translateX(18px) skewX(-5deg); clip-path: inset(8% -60px 38% -60px); filter: drop-shadow(6px 0 rgba(255,0,60,.85)) drop-shadow(-6px 0 rgba(0,240,255,.85)); }
  65%  { transform: translateX(46px); clip-path: inset(52% -60px 12% -60px); opacity: .8; }
  100% { transform: translateX(40px); clip-path: inset(100% -60px 0 -60px); opacity: 0; }
}
@keyframes lbInRight {
  0%   { transform: translateX(40px); opacity: 0; clip-path: inset(-60px -60px 100% -60px); }
  25%  { transform: translateX(34px); opacity: 1; clip-path: inset(-60px -60px 55% -60px); filter: drop-shadow(-6px 0 rgba(255,0,60,.8)) drop-shadow(6px 0 rgba(0,240,255,.8)); }
  45%  { transform: translateX(-10px) skewX(-3deg); clip-path: inset(30% -60px 10% -60px); }
  65%  { transform: translateX(4px); clip-path: inset(-60px); filter: drop-shadow(3px 0 rgba(255,0,60,.6)) drop-shadow(-3px 0 rgba(0,240,255,.6)); }
  100% { transform: none; opacity: 1; clip-path: inset(-60px); filter: none; }
}
@keyframes lbInLeft {
  0%   { transform: translateX(-40px); opacity: 0; clip-path: inset(-60px -60px 100% -60px); }
  25%  { transform: translateX(-34px); opacity: 1; clip-path: inset(-60px -60px 55% -60px); filter: drop-shadow(6px 0 rgba(255,0,60,.8)) drop-shadow(-6px 0 rgba(0,240,255,.8)); }
  45%  { transform: translateX(10px) skewX(3deg); clip-path: inset(30% -60px 10% -60px); }
  65%  { transform: translateX(-4px); clip-path: inset(-60px); filter: drop-shadow(-3px 0 rgba(255,0,60,.6)) drop-shadow(3px 0 rgba(0,240,255,.6)); }
  100% { transform: none; opacity: 1; clip-path: inset(-60px); filter: none; }
}
.lightbox__frame.is-out-left  { animation: lbOutLeft .28s steps(5, end) forwards; }
.lightbox__frame.is-out-right { animation: lbOutRight .28s steps(5, end) forwards; }
.lightbox__frame.is-in-right  { animation: lbInRight .56s steps(9, end) both; }
.lightbox__frame.is-in-left   { animation: lbInLeft .56s steps(9, end) both; }
/* scansione verticale che attraversa lo schermo nel colore del progetto */
.lightbox__sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.lightbox__sweep::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22vw; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 70%, var(--accent) 96%, transparent);
  mix-blend-mode: screen;
}
.lightbox__sweep::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 2px 6px);
}
.lightbox__sweep.is-fwd::before  { animation: sweepFwd .7s cubic-bezier(.5,0,.3,1); }
.lightbox__sweep.is-back::before { animation: sweepBack .7s cubic-bezier(.5,0,.3,1); }
.lightbox__sweep.is-fwd::after, .lightbox__sweep.is-back::after { animation: sweepLines .7s steps(6, end); }
@keyframes sweepFwd  { 0% { transform: translateX(-25vw); opacity: 1; } 100% { transform: translateX(110vw); opacity: 1; } }
@keyframes sweepBack { 0% { transform: translateX(110vw) scaleX(-1); opacity: 1; } 100% { transform: translateX(-25vw) scaleX(-1); opacity: 1; } }
@keyframes sweepLines { 0%, 100% { opacity: 0; } 20%, 60% { opacity: 1; } 40% { opacity: .3; } }
.lightbox__frame { position: relative; z-index: 2; }
.lightbox__nav { position: relative; z-index: 2; }
.lightbox__close { z-index: 3; }
@media (max-width: 700px) { .lightbox__nav { position: absolute; } }

/* ---------- SEO: sottotitolo nel titolo principale, zone servite ---------- */
.hero__kicker {
  display: block; margin-bottom: 14px; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.3;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); text-shadow: none;
}
.areas-served { margin-top: 32px; padding: 20px 22px; background: var(--panel); border-left: 3px solid var(--cyan); }
.areas-served__title { margin: 0 0 8px; font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.areas-served__text { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.areas-served__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.areas-served__list li { font-size: 11px; padding: 5px 9px; border: 1px solid var(--line); color: var(--text); }
/* versione statica dei lavori (per i motori di ricerca e per chi non ha JavaScript):
   con JavaScript attivo viene sostituita dalla griglia interattiva */
.js .works__static { display: none; }
.works__static { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.works__static img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.works__static h3 { font-size: 20px; margin: 10px 0 4px; }
.works__static p { font-size: 13px; color: var(--muted); }

/* =========================================================
   CATEGORIA SOCIAL E DOPPIE CATEGORIE
   ========================================================= */
.work[data-cat="social"] { --accent: var(--orange); }
.work__cats { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; }
.work__cat[data-c="video"] { background: var(--red); color: #fff; }
.work__cat[data-c="foto"] { background: var(--cyan); color: var(--bg); }
.work__cat[data-c="grafica"] { background: var(--yellow); color: var(--bg); }
.work__cat[data-c="web"] { background: var(--purple); color: #fff; }
.work__cat[data-c="social"] { background: var(--orange); color: var(--bg); }

/* =========================================================
   BANNER NELLA GALLERIA: il lavoro interrompe la griglia in diagonale
   ========================================================= */
.work--banner { grid-column: 1 / -1; position: relative; margin: 14px 0; padding: 3px 0; background: var(--accent);
  clip-path: polygon(0 16%, 100% 0, 100% 84%, 0 100%); }
.work--banner .work__btn {
  aspect-ratio: auto; height: clamp(230px, 24vw, 310px);
  clip-path: polygon(0 16%, 100% 0, 100% 84%, 0 100%);
}
.work--banner .work__btn::before {
  background:
    linear-gradient(90deg, rgba(10,10,15,.96) 0%, rgba(10,10,15,.82) 34%, rgba(10,10,15,.25) 66%, rgba(10,10,15,.05)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.work--banner .work__btn::after { display: none; }
.banner__body {
  /* resta dentro la fascia "sicura" lontana dai bordi diagonali */
  position: absolute; z-index: 3; left: 5%; top: 18%; bottom: 18%; max-width: min(640px, 58%);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
}
.banner__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.banner__tag::after { content: ''; width: 46px; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px); }
.banner__cats { display: flex; gap: 4px; }
.work--banner .work__title { font-size: clamp(26px, 3.6vw, 52px); line-height: .95; margin: 2px 0 0; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.work--banner .work__meta { font-size: 13px; color: #c9c9d6; }
.banner__cta {
  margin-top: 8px; padding: 9px 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: transform .2s;
}
.work--banner .work__btn:hover .banner__cta { transform: translateX(6px); }
.work--banner .work__btn:hover .work__title { text-shadow: -3px 0 var(--red), 3px 0 var(--cyan); }
/* nastro scorrevole in diagonale, come una pubblicità */
.banner__ticker {
  position: absolute; z-index: 3; right: -4%; bottom: 22%; width: 52%; overflow: hidden; white-space: nowrap;
  padding: 7px 0; font-size: 12px; letter-spacing: .2em; color: var(--bg); background: var(--accent);
  transform: rotate(-3deg); box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.banner__ticker > span { display: inline-block; animation: ticker 18s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.work--banner .work__play { top: 50%; left: auto; right: 14%; }
@media (max-width: 760px) {
  .work--banner, .work--banner .work__btn { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }
  .work--banner .work__btn { height: 310px; }
  .banner__body { max-width: 88%; left: 6%; }
  .work--banner .work__btn::before { background: linear-gradient(0deg, rgba(10,10,15,.96) 10%, rgba(10,10,15,.55) 60%, rgba(10,10,15,.2)); }
  .banner__body { top: 26%; bottom: 11%; justify-content: flex-end; }
  .banner__ticker { width: 70%; bottom: auto; top: 9%; right: -6%; font-size: 10px; }
  .work--banner .work__play { display: none; }
}

/* =========================================================
   CAROSELLO IN EVIDENZA: frecce
   ========================================================= */
.feature__controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.feature__controls .feature__bars { flex: 1; margin-top: 0; }
.feature__arrow {
  flex: 0 0 auto; width: 36px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--accent); font: 400 22px/1 var(--f-head);
  transition: background-color .2s, color .2s, border-color .2s;
}
.feature__arrow:hover, .feature__arrow:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.feature__arrow[hidden] { display: none; }

/* =========================================================
   GALLERIA: cambio foto più leggero
   ========================================================= */
@keyframes slideSwap {
  0%   { opacity: 0; transform: translateX(6px); filter: drop-shadow(-2px 0 rgba(255,0,60,.45)) drop-shadow(2px 0 rgba(0,240,255,.45)); }
  60%  { opacity: 1; transform: none; filter: drop-shadow(-1px 0 rgba(255,0,60,.25)) drop-shadow(1px 0 rgba(0,240,255,.25)); }
  100% { opacity: 1; transform: none; filter: none; }
}
.lightbox__media > .is-ready { animation: slideSwap .32s ease-out backwards; }
/* cambio progetto: stessa idea, meno spostamento e più breve */
.lightbox__frame.is-out-left  { animation-duration: .22s; }
.lightbox__frame.is-out-right { animation-duration: .22s; }
.lightbox__frame.is-in-right, .lightbox__frame.is-in-left { animation-duration: .42s; }
.lightbox__sweep::before { opacity: 0; }
.lightbox__sweep.is-fwd::before, .lightbox__sweep.is-back::before { animation-duration: .55s; }

/* =========================================================
   SOCIAL ABBINATO: tonalità più scura della categoria compagna
   ========================================================= */
.work__cat.is-paired { background: color-mix(in srgb, var(--accent) 58%, #000) !important; color: #fff !important; }


/* =========================================================
   GALLERIA: slide finale "il lavoro"
   ========================================================= */
.lightbox__info {
  position: relative; overflow-y: auto; padding: clamp(22px, 4%, 52px); background:
    radial-gradient(ellipse 60% 60% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), var(--panel);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.lbi__tag { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; color: var(--accent); }
.lbi__title { font-size: clamp(30px, 4vw, 58px); margin-bottom: 14px; }
.lbi__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; font-size: 13px; }
.lbi__meta em { font-style: normal; color: var(--muted); margin-right: 8px; }
.lbi__text { font-size: clamp(16px, 1.6vw, 20px); color: #cfcfda; max-width: 820px; margin-bottom: 18px; }
.lbi__h { margin: 18px 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lbi__did { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.lbi__did li { position: relative; padding-left: 20px; font-size: 16px; }
.lbi__did li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--accent); }
.lbi__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lbi__tools li { font-size: 12px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (max-width: 700px) { .lbi__did { grid-template-columns: 1fr; } }
.lightbox__thumb-info { display: grid; place-items: center; width: 100%; height: 100%; font-size: 11px; color: var(--accent); background: var(--panel); }

/* =========================================================
   BANNER: zoom e inquadratura dell'immagine scelti dal pannello
   ========================================================= */
.work--banner .work__btn img.banner__img { object-position: var(--ox, 50%) var(--oy, 35%); transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 35%); }
.work--banner .work__btn:hover img.banner__img, .work--banner .work__btn:focus-visible img.banner__img { transform: scale(calc(var(--z, 1) * 1.05)); animation: none; }

/* =========================================================
   GALLERIA PER TIPOLOGIA
   ========================================================= */
.works-groups { display: grid; gap: 20px; }
.wgroup[hidden] { display: none; }
.wgroup__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.wgroup__n { font-size: 13px; color: var(--accent); }
.wgroup__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: var(--text); }
.wgroup__title::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 10px; background: var(--accent); vertical-align: middle;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wgroup__count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wgroup__count b { color: var(--accent); font-weight: 400; }
.wgroup__line { flex: 1; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 7px); opacity: .45; }
@media (max-width: 600px) { .works-groups { gap: 16px; } }

/* Caricamento: breve inceppo con glitch */
.boot.is-stall .boot__bar span { background: repeating-linear-gradient(90deg, var(--red) 0 8px, rgba(255,0,60,.55) 8px 10px); box-shadow: 0 0 14px var(--red); }
.boot.is-stall .boot__inner { animation: bootStall .26s steps(1, end); }
.boot.is-stall .boot__status, .boot.is-stall .boot__pct { color: var(--red); }
@keyframes bootStall {
  0%   { transform: translateX(-4px); filter: drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--red)); clip-path: inset(0 0 0 0); }
  25%  { transform: translateX(5px) skewX(-6deg); clip-path: inset(30% 0 20% 0); }
  50%  { transform: translateX(-2px); clip-path: inset(0 0 45% 0); filter: drop-shadow(-4px 0 var(--cyan)) drop-shadow(4px 0 var(--red)); }
  75%  { transform: translateX(3px); clip-path: inset(15% 0 0 0); }
  100% { transform: none; filter: none; clip-path: inset(0); }
}

/* =========================================================
   BANNER: fascia a tutto schermo, immagine della larghezza della pagina al centro
   ========================================================= */
.work--banner {
  --bw: min(100vw - 48px, var(--max) - 48px);
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
}
.work--banner .work__btn { background: var(--bg); }
.work--banner .work__btn::before { display: none; }
.banner__frame { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--bw); transform: translateX(-50%); overflow: hidden; }
.banner__frame img.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* velo scuro a sinistra per leggere il testo, dentro l'immagine */
.banner__frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,15,.95) 0%, rgba(10,10,15,.8) 30%, rgba(10,10,15,.2) 60%, transparent 75%),
              repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.banner__body { left: calc(50% - var(--bw) / 2 + 60px); }
.work--banner .work__play { right: calc(50% - var(--bw) / 2 + 14%); }
@media (max-width: 760px) {
  .work--banner { --bw: calc(100vw - 32px); }
  .banner__frame::after { background: linear-gradient(0deg, rgba(11,11,16,.96) 12%, rgba(11,11,16,.55) 55%, rgba(11,11,16,.15)); }
  .banner__body { left: calc(50% - var(--bw) / 2 + 22px); right: calc(50% - var(--bw) / 2 + 12px); max-width: none; }
}

/* nastro scorrevole: dentro l'immagine, come nel banner largo quanto la pagina */
.banner__frame .banner__ticker { right: -4%; width: 52%; bottom: 22%; z-index: 2; }
@media (max-width: 760px) { .banner__frame .banner__ticker { width: 70%; bottom: auto; top: 9%; right: -6%; } }

/* transizione verso la fascia: l'immagine sfuma ai lati… */
.banner__frame img.banner__img {
  /* dissolvenza morbida su tutti i lati: l'immagine si fonde con la fascia */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%),
                      linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 9%, #000 24%, #000 76%, rgba(0,0,0,.5) 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%),
              linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 9%, #000 24%, #000 76%, rgba(0,0,0,.5) 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* le fette che escono seguono la stessa sfumatura in alto e in basso */
.banner__leak { -webkit-mask-size: 100% 100%, 100% 180%; }
@media (max-width: 760px) {
  .banner__frame img.banner__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}
/* …e alcune fette dell'immagine "scappano" oltre il bordo, a scatti */
.banner__leak {
  position: absolute; top: 0; bottom: 0; left: 50%; width: var(--bw); z-index: 1; overflow: hidden; pointer-events: none;
  --gx: 46px;
  -webkit-mask-image: var(--mx), linear-gradient(180deg, transparent 0 8%, #000 8% 10.5%, transparent 10.5% 21%, #000 21% 22%, transparent 22% 34%, #000 34% 38%, transparent 38% 52%, #000 52% 53.5%, transparent 53.5% 66%, #000 66% 69.5%, transparent 69.5% 81%, #000 81% 82%, transparent 82% 90%, #000 90% 92%, transparent 92%);
  mask-image: var(--mx), linear-gradient(180deg, transparent 0 8%, #000 8% 10.5%, transparent 10.5% 21%, #000 21% 22%, transparent 22% 34%, #000 34% 38%, transparent 38% 52%, #000 52% 53.5%, transparent 53.5% 66%, #000 66% 69.5%, transparent 69.5% 81%, #000 81% 82%, transparent 82% 90%, #000 90% 92%, transparent 92%);
  -webkit-mask-size: 100% 100%, 100% 180%; mask-size: 100% 100%, 100% 180%;
  -webkit-mask-repeat: no-repeat, repeat-y; mask-repeat: no-repeat, repeat-y;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.banner__leak img.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* scie colorate sulle fette */
.banner__leak::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .28;
  background: linear-gradient(180deg, rgba(255,0,60,.9) 0 30%, rgba(0,240,255,.9) 30% 60%, color-mix(in srgb, var(--accent) 90%, transparent) 60%); }
.banner__leak--l { --mx: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30px, #000 75px, #000 95px, transparent 140px); filter: brightness(.55) saturate(.9); animation: leakL 2.4s steps(1, end) infinite; }
.banner__leak--r { --mx: linear-gradient(270deg, transparent 0, rgba(0,0,0,.35) 30px, #000 75px, #000 95px, transparent 140px); animation: leakR 2.4s steps(1, end) infinite -1.1s; }
@keyframes leakL {
  0%   { transform: translateX(calc(-50% - var(--gx))); -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  14%  { transform: translateX(calc(-50% - var(--gx) * 1.6)); -webkit-mask-position: 0 0, 0 -18%; mask-position: 0 0, 0 -18%; }
  27%  { transform: translateX(calc(-50% - var(--gx) * .6)); -webkit-mask-position: 0 0, 0 -41%; mask-position: 0 0, 0 -41%; }
  41%  { transform: translateX(calc(-50% - var(--gx) * 1.2)); -webkit-mask-position: 0 0, 0 -9%; mask-position: 0 0, 0 -9%; }
  58%  { transform: translateX(calc(-50% - var(--gx) * .3)); -webkit-mask-position: 0 0, 0 -63%; mask-position: 0 0, 0 -63%; }
  72%  { transform: translateX(calc(-50% - var(--gx) * 1.9)); -webkit-mask-position: 0 0, 0 -27%; mask-position: 0 0, 0 -27%; }
  86%  { transform: translateX(calc(-50% - var(--gx) * .9)); -webkit-mask-position: 0 0, 0 -52%; mask-position: 0 0, 0 -52%; }
}
@keyframes leakR {
  0%   { transform: translateX(calc(-50% + var(--gx))); -webkit-mask-position: 0 0, 0 -33%; mask-position: 0 0, 0 -33%; }
  16%  { transform: translateX(calc(-50% + var(--gx) * .7)); -webkit-mask-position: 0 0, 0 -6%; mask-position: 0 0, 0 -6%; }
  31%  { transform: translateX(calc(-50% + var(--gx) * 1.7)); -webkit-mask-position: 0 0, 0 -58%; mask-position: 0 0, 0 -58%; }
  47%  { transform: translateX(calc(-50% + var(--gx) * .4)); -webkit-mask-position: 0 0, 0 -21%; mask-position: 0 0, 0 -21%; }
  63%  { transform: translateX(calc(-50% + var(--gx) * 1.3)); -webkit-mask-position: 0 0, 0 -71%; mask-position: 0 0, 0 -71%; }
  80%  { transform: translateX(calc(-50% + var(--gx) * .8)); -webkit-mask-position: 0 0, 0 -44%; mask-position: 0 0, 0 -44%; }
}
@media (max-width: 760px) { .banner__leak { --gx: 10px; } .banner__leak--l { --mx: linear-gradient(90deg, transparent 0, #000 16px, #000 24px, transparent 40px); } .banner__leak--r { --mx: linear-gradient(270deg, transparent 0, #000 16px, #000 24px, transparent 40px); } }
@media (prefers-reduced-motion: reduce) { .banner__leak--l { transform: translateX(calc(-50% - var(--gx))); } .banner__leak--r { transform: translateX(calc(-50% + var(--gx))); } }

/* fette glitch: più tenui e sfumate su entrambi i lati, così non coprono la dissolvenza dell'immagine */
.banner__leak--l, .banner__leak--r { filter: brightness(.6) saturate(.9); }
.banner__leak--l { --mx: linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.6) 80px, rgba(0,0,0,.6) 100px, transparent 160px); }
.banner__leak--r { --mx: linear-gradient(270deg, transparent 0, rgba(0,0,0,.25) 30px, rgba(0,0,0,.6) 80px, rgba(0,0,0,.6) 100px, transparent 160px); }
@media (max-width: 760px) {
  .banner__leak--l { --mx: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 16px, rgba(0,0,0,.55) 24px, transparent 44px); }
  .banner__leak--r { --mx: linear-gradient(270deg, transparent 0, rgba(0,0,0,.55) 16px, rgba(0,0,0,.55) 24px, transparent 44px); }
}

/* dissolvenza simmetrica e più graduale: destra uguale alla sinistra */
@media (min-width: 761px) {
  .banner__frame img.banner__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 4%, rgba(0,0,0,.45) 10%, rgba(0,0,0,.82) 17%, #000 24%, #000 76%, rgba(0,0,0,.82) 83%, rgba(0,0,0,.45) 90%, rgba(0,0,0,.12) 96%, transparent 100%),
                        linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 9%, #000 24%, #000 76%, rgba(0,0,0,.5) 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 4%, rgba(0,0,0,.45) 10%, rgba(0,0,0,.82) 17%, #000 24%, #000 76%, rgba(0,0,0,.82) 83%, rgba(0,0,0,.45) 90%, rgba(0,0,0,.12) 96%, transparent 100%),
                linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 9%, #000 24%, #000 76%, rgba(0,0,0,.5) 91%, transparent 100%);
  }
  .banner__frame::after {
    background: linear-gradient(90deg, rgba(10,10,15,.95) 0%, rgba(10,10,15,.8) 30%, rgba(10,10,15,.2) 60%, transparent 72%, transparent 80%, rgba(10,10,15,.55) 100%),
                repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  }
}

/* ---------- Attrezzatura: fascia diagonale tra il CV e i contatti ---------- */
.gear { position: relative; padding: 20px 0 40px; }
.gear[hidden] { display: none; }
.gear__band {
  position: relative; padding: 3px 0; background: var(--yellow);
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
}
.gear__band::before {
  content: ''; position: absolute; inset: 3px 0; z-index: 0;
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 50% 90% at 85% 50%, rgba(252,238,10,.07), transparent 70%),
    linear-gradient(100deg, #0d0d14, var(--bg-2) 60%, #0d0d14);
}
.gear__wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(240px, 330px) 1fr; gap: 40px; align-items: center;
  padding-top: 88px; padding-bottom: 88px;
}
.gear__tag { margin: 0 0 12px; font-size: 13px; color: var(--yellow); }
.gear__blink { animation: gearBlink 1.1s steps(1, end) infinite; }
@keyframes gearBlink { 50% { opacity: 0; } }
.gear__title { margin: 0; font: 700 clamp(34px, 4.2vw, 54px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; }
.gear__sub { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.gear__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gear__item {
  --cut: 12px; position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 14px 16px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border-left: 3px solid var(--accent); clip-path: var(--clip);
  transition: background .25s, transform .25s;
}
.gear__item::after {
  content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.gear__item:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(255,255,255,.015)); transform: translateY(-2px); }
.gear__kind { font-size: 11px; color: var(--accent); }
.gear__name { font: 700 21px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.gear__note { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) {
  .gear__wrap { grid-template-columns: 1fr; gap: 26px; padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 760px) {
  .gear__band, .gear__band::before { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
  .gear__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gear__item { min-height: 92px; padding: 12px 12px 14px; }
  .gear__name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gear__blink { animation: none; } }
.gear { margin-top: -50px; }
@media (max-width: 760px) { .gear { margin-top: -40px; } }

/* scheda servizio larga (social): testo a sinistra, elenco su due colonne a destra */
.service--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 56px; align-items: start; }
.service--wide .service__main, .service--wide .service__side { position: relative; z-index: 1; }
.service--wide .service__side { display: flex; flex-direction: column; height: 100%; padding-top: 38px; }
.service--wide .service__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
@media (max-width: 760px) {
  .service--wide { grid-template-columns: 1fr; }
  .service--wide .service__side { padding-top: 0; }
  .service--wide .service__list { grid-template-columns: 1fr; }
}

/* ---------- Cornici anche su servizi e attrezzatura (colore della scheda) ---------- */
.service { background: transparent; }
.service::before { inset: 0; }
.service > .cframe { position: absolute; z-index: 2; }
.service:hover { background: transparent; }
.service:hover .cframe::before { border: 2px solid var(--accent); }
.service:hover .cframe::after { inset: 5px; }
.service:hover h3 { animation: hoverGlitch .35s steps(1, end); text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
.service:hover .service__icon { animation: sliceGlitch .4s steps(1, end); }
.service .service__top { padding-right: 18px; }
.gear__item { border-left: 0; background: var(--panel); padding: 18px 20px 18px; }
.gear__item::after { display: none; }
.gear__item > :not(.cframe) { position: relative; z-index: 1; }
.gear__item:hover { background: var(--panel); }
.gear__item:hover .cframe::before { border: 2px solid var(--accent); }
.gear__item:hover .cframe::after { inset: 5px; }
.gear__item:hover .gear__name { animation: hoverGlitch .35s steps(1, end); }

/* ---------- Conversione: rassicurazioni, passaggi, chip nel modulo, WhatsApp ---------- */
.hero__trust { margin: 16px 0 0; font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.hero__trust::before { content: '✓ '; color: var(--yellow); }

.next { margin: 30px 0 0; padding: 18px 22px 8px; background: var(--panel); border-left: 3px solid var(--yellow); max-width: 460px; }
.next__title { margin: 0 0 10px; font-size: 12px; color: var(--yellow); }
.next__steps { list-style: none; counter-reset: nx; margin: 0; padding: 0; }
.next__steps li { counter-increment: nx; display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.45; }
.next__steps li:first-child { border-top: 0; }
.next__steps li::before { content: counter(nx, decimal-leading-zero); font: 400 13px/1.6 var(--f-mono); color: var(--cyan); }

.chips-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.chips-field legend { padding: 0; display: block; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.chips-field__hint { font-style: normal; text-transform: none; letter-spacing: .04em; opacity: .75; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { --accent: var(--yellow); position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 42px;
  font: 600 15px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); clip-path: var(--clip-btn); transition: background .15s, border-color .15s, color .15s;
}
.chip span::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--accent); transition: background .15s; }
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); border-color: var(--accent); }
.chip input:checked + span::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips--sm .chip span { font: 400 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: none; padding: 9px 13px; min-height: 38px; }
.chips--sm .chip span::before { border-radius: 50%; }
.chips-field.is-invalid .chip span { border-color: color-mix(in srgb, var(--red) 70%, var(--line)); }
.chips-field.is-invalid legend { color: var(--red); }

.form__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.form__trust li::before { content: '✓ '; color: var(--yellow); }
.form__wa {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 12px; text-decoration: none;
  font: 600 15px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: #25d366;
  border: 1px dashed color-mix(in srgb, #25d366 55%, var(--line)); transition: background .2s;
}
.form__wa[hidden] { display: none; }
.form__wa svg { width: 20px; height: 20px; fill: currentColor; }
.form__wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); }

/* Telefono: il modulo subito dopo titolo e passaggi; email, social e zone servite dopo */
@media (max-width: 960px) {
  .contact__wrap { gap: 0; }
  .contact__intro { display: contents; }
  .contact__intro > .section__head { order: 1; }
  .contact__intro > p { order: 2; }
  .contact__intro > .next { order: 3; margin-bottom: 28px; }
  .contact__wrap > .form { order: 4; }
  .contact__intro > .contact__list { order: 5; }
  .contact__intro > .areas-served { order: 6; }
}
.contact__list li[hidden] { display: none; }

/* Telefono: link più comodi da toccare (almeno 32 px di altezza) */
@media (max-width: 760px) {
  .contact__list a, .socials a, .footer a, .hero__scroll { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
}

/* Nota "* qualità ridotta per il web": sotto foto e video del visualizzatore e in fondo alla galleria */
.lightbox__note { display: none; width: 0; min-width: 100%; margin: 8px 0 0; font-size: 11px; line-height: 1.4; letter-spacing: .04em; color: var(--muted); text-align: right; opacity: .8; }
.lightbox__frame:has(.lightbox__media > img, .lightbox__media > video) .lightbox__note { display: block; }
.works__note { margin: 28px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--muted); opacity: .8; }
@media (max-width: 700px) { .lightbox__note { font-size: 10px; } }

/* =========================================================
   Hero: sfondi alternativi (Impostazioni → Aspetto nel pannello)
   ========================================================= */
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hbg { display: none; position: absolute; inset: 0; }
.hero[data-bg="grid"] .hero__grid { display: block; }
.hero:not([data-bg="grid"]) .hero__grid { display: none; }
.hero[data-bg="viewfinder"] .hbg--viewfinder, .hero[data-bg="city"] .hbg--city, .hero[data-bg="rain"] .hbg--rain { display: block; }
/* mirino REC sopra qualsiasi sfondo (Impostazioni → Aspetto) */
.hero[data-rec="on"] .hbg--viewfinder { display: block; }
.hero[data-rec="on"]:not([data-bg="viewfinder"]) .vf__thirds { opacity: .6; }

/* ---------- Mirino della fotocamera ---------- */
.hero[data-bg="viewfinder"] {
  background:
    radial-gradient(ellipse 55% 60% at 78% 42%, rgba(0,240,255,.07), transparent 70%),
    radial-gradient(ellipse 45% 45% at 12% 85%, rgba(252,238,10,.05), transparent 70%),
    linear-gradient(180deg, #0b0b11, var(--bg) 60%);
}
.hbg--viewfinder { --vf-x: max(18px, calc((100vw - var(--max)) / 2 - 40px)); --vf-top: calc(var(--nav-h) + 22px); --vf-bot: 26px;
  bottom: 0; }   /* l'inquadratura copre tutta la hero, numeri compresi */
.hbg--viewfinder::before { /* grana leggera e righe del sensore */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
.vf__thirds { position: absolute; left: var(--vf-x); right: var(--vf-x); top: var(--vf-top); bottom: var(--vf-bot);
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.045) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.045) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255,255,255,.045) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.045) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vf__corner { position: absolute; width: 38px; height: 38px; border: 0 solid rgba(233,233,238,.55); }
.vf__corner--tl { left: var(--vf-x); top: var(--vf-top); border-width: 2px 0 0 2px; }
.vf__corner--tr { right: var(--vf-x); top: var(--vf-top); border-width: 2px 2px 0 0; }
.vf__corner--bl { left: var(--vf-x); bottom: var(--vf-bot); border-width: 0 0 2px 2px; }
.vf__corner--br { right: var(--vf-x); bottom: var(--vf-bot); border-width: 0 2px 2px 0; }
.vf__cross { position: absolute; left: 50%; top: 52%; width: 26px; height: 26px; transform: translate(-50%, -50%); opacity: .35;
  background: linear-gradient(rgba(233,233,238,.8), rgba(233,233,238,.8)) center / 1px 100% no-repeat, linear-gradient(90deg, rgba(233,233,238,.8), rgba(233,233,238,.8)) center / 100% 1px no-repeat; }
.hbg--viewfinder .mono { position: absolute; font-size: 11px; letter-spacing: .14em; color: rgba(233,233,238,.55); white-space: nowrap; }
.vf__rec { right: calc(var(--vf-x) + 54px); top: calc(var(--vf-top) + 12px); color: rgba(233,233,238,.75) !important; }
.vf__rec b { color: var(--red); font-weight: 400; animation: vfBlink 1s steps(1, end) infinite; text-shadow: 0 0 8px var(--red); }
.vf__tc { margin-left: 10px; font-variant-numeric: tabular-nums; }
.vf__fmt { color: rgba(233,233,238,.5); }
.vf__exp { right: calc(var(--vf-x) + 54px); bottom: calc(var(--vf-bot) + 12px); }
.vf__gps { right: calc(var(--vf-x) + 54px); bottom: calc(var(--vf-bot) + 34px); display: flex; align-items: center; gap: 10px; }
.vf__bat { display: inline-block; width: 20px; height: 9px; border: 1px solid rgba(233,233,238,.55); position: relative; }
.vf__bat::before { content: ''; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 70%; background: var(--yellow); }
.vf__bat::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; background: rgba(233,233,238,.55); }
/* esposimetro: tacche sul lato destro */
.vf__meter { position: absolute; right: calc(var(--vf-x) + 14px); top: 34%; height: 32%; width: 8px;
  background: repeating-linear-gradient(to bottom, rgba(233,233,238,.35) 0 1px, transparent 1px 10%) right / 6px 100% no-repeat,
              linear-gradient(var(--yellow), var(--yellow)) left 50% / 8px 2px no-repeat; }
@keyframes vfBlink { 50% { opacity: .15; } }
@media (max-width: 1099px) {
  .vf__fmt, .vf__meter { display: none; }
  .vf__exp { display: none; }
}
@media (max-width: 760px) {
  .hbg--viewfinder { --vf-x: 8px; --vf-top: calc(var(--nav-h) + 10px); --vf-bot: 10px; }
  .vf__corner { width: 24px; height: 24px; }
  .vf__rec { right: calc(var(--vf-x) + 34px); top: calc(var(--vf-top) + 8px); font-size: 10px !important; }
  .vf__gps { display: none; }
  .vf__thirds { opacity: .7; }
}

/* ---------- Città notturna ---------- */
.hero[data-bg="city"] {
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255,0,60,.16), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 25%, rgba(0,240,255,.08), transparent 70%),
    linear-gradient(180deg, #08070d, #0f0a18 70%, #140b1c);
}
.hbg--city { top: auto; bottom: auto; top: 22vh; height: 78vh; opacity: .95;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.hbg--city svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.hbg--city .cs { animation: citySign 6s steps(1, end) infinite; }
.hbg--city .cs:nth-of-type(2n) { animation-delay: -2.3s; }
@keyframes citySign { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .2; } 50% { opacity: 1; } 52% { opacity: .4; } 53% { opacity: 1; } }
.hero[data-bg="city"]::after { /* strato scuro dietro ai testi a sinistra */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,15,.88), rgba(10,10,15,.55) 45%, rgba(10,10,15,.1) 70%, transparent 85%);
}
.hero[data-bg="city"] .hero__content, .hero[data-bg="city"] .hud-wrap { z-index: 3; }
@media (max-width: 760px) { .hbg--city { top: 52vh; height: 48vh; } .hero[data-bg="city"]::after { background: linear-gradient(180deg, rgba(10,10,15,.4), rgba(10,10,15,.75)); } }

/* ---------- Pioggia digitale ---------- */
.hero[data-bg="rain"] {
  background:
    radial-gradient(ellipse 60% 55% at 75% 30%, rgba(176,38,255,.16), transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 92%, rgba(120,20,200,.14), transparent 70%),
    linear-gradient(180deg, #0b0812, var(--bg) 70%);
}
.hbg--rain { width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%); }
@media (max-width: 760px) { .hbg--rain { -webkit-mask-image: none; mask-image: none; opacity: .6; } }

@media (prefers-reduced-motion: reduce) { .vf__rec b, .hbg--city .cs { animation: none; } }

/* =========================================================
   Interruttore effetti sonori (menu)
   ========================================================= */
.sfx { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin-right: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted); transition: color .2s, border-color .2s; }
.sfx:hover { color: var(--text); border-color: var(--muted); }
.sfx__label { font-size: 11px; letter-spacing: .12em; }
.sfx__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sfx__bars i { width: 2px; height: 3px; background: currentColor; transition: height .2s; }
.sfx[aria-pressed="true"] { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, var(--line)); }
.sfx[aria-pressed="true"] .sfx__bars i { animation: sfxEq .9s ease-in-out infinite; }
.sfx[aria-pressed="true"] .sfx__bars i:nth-child(2) { animation-delay: -.3s; }
.sfx[aria-pressed="true"] .sfx__bars i:nth-child(3) { animation-delay: -.6s; }
.sfx[aria-pressed="true"] .sfx__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes sfxEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@media (max-width: 1100px) { .sfx__label { display: none; } .sfx { padding: 0 8px; margin-right: 2px; } }
@media (max-width: 380px) { .sfx { display: none; } }
@media (prefers-reduced-motion: reduce) { .sfx[aria-pressed="true"] .sfx__bars i { animation: none; height: 8px; } }

/* ---------- Foto "Chi sono": effetto cyberpunk (duotono viola, luce neon, righe) ---------- */
.profile__photo.is-cyber img { filter: url(#cyberTone) contrast(1.08) saturate(.9); }
.profile__photo.is-cyber::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 55% 70% at 100% 30%, rgba(0,240,255,.32), transparent 65%),
    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(255,0,170,.28), transparent 65%),
    linear-gradient(to top, rgba(176,38,255,.25), transparent 45%);
}
.profile__photo.is-cyber:hover img { filter: url(#cyberTone) contrast(1.2) saturate(1.3); }

/* =========================================================
   Pagine per servizio (es. /videomaker-como/)
   ========================================================= */
.lp-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px max(16px, calc((100vw - var(--max)) / 2)); background: rgba(10,10,15,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lp-nav__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--yellow); text-decoration: none; }
.lp-nav__logo svg { width: 30px; height: auto; }
.lp-nav__logo span { font: 700 18px/1 var(--f-head); letter-spacing: .12em; color: var(--text); }
.lp-nav__logo em { color: var(--yellow); font-style: normal; }
.lp-nav__links { display: flex; gap: 22px; margin-left: auto; font-size: 13px; }
.lp-nav__links a { color: var(--muted); text-decoration: none; }
.lp-nav__links a:hover { color: var(--text); }
@media (max-width: 700px) { .lp-nav__links { display: none; } .lp-nav .btn { margin-left: auto; } .lp-nav__logo span { font-size: 15px; } }
.lp-hero { position: relative; padding: 90px 0 70px; overflow: hidden;
  background: radial-gradient(ellipse 55% 60% at 80% 30%, rgba(176,38,255,.16), transparent 70%), radial-gradient(ellipse 40% 40% at 10% 90%, rgba(0,240,255,.07), transparent 70%), var(--bg); }
.lp-crumb { margin: 0 0 22px; font-size: 12px; color: var(--muted); }
.lp-crumb a { color: var(--muted); }
.lp-hero__title { margin: 10px 0 22px; font: 700 clamp(44px, 7vw, 92px)/.95 var(--f-head); text-transform: uppercase; }
.lp-hero__lead { max-width: 700px; font-size: 19px; color: var(--muted); margin: 0 0 30px; }
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .lp-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-points { grid-template-columns: 1fr; } }
.lp-points li { position: relative; padding: 20px 22px 20px 50px; background: var(--panel); border: 1px solid var(--line); clip-path: var(--clip); font-size: 16px; }
.lp-points li::before { content: '▸'; position: absolute; left: 22px; top: 19px; color: var(--yellow); }
.lp-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .lp-works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-works { grid-template-columns: 1fr; } }
.lp-work a { display: block; color: var(--text); text-decoration: none; background: var(--panel); clip-path: var(--clip); }
.lp-work img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.lp-work a:hover img { transform: scale(1.04); }
.lp-work__t { display: block; padding: 14px 16px 2px; font: 700 19px/1.15 var(--f-head); text-transform: uppercase; }
.lp-work__m { display: block; padding: 0 16px 16px; font-size: 12px; color: var(--muted); }
.lp-more { margin: 26px 0 0; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .lp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-steps li { padding: 22px; background: var(--panel); border-top: 2px solid var(--yellow); }
.lp-steps b { color: var(--yellow); font-size: 13px; }
.lp-steps h3 { margin: 10px 0 8px; font: 700 21px/1.1 var(--f-head); text-transform: uppercase; }
.lp-steps p { margin: 0; color: var(--muted); font-size: 15px; }
.lp-faq { display: grid; gap: 10px; max-width: 900px; }
.lp-faq__item { background: var(--panel); border: 1px solid var(--line); }
.lp-faq__item summary { cursor: pointer; padding: 18px 22px; font: 700 19px/1.25 var(--f-head); text-transform: uppercase; list-style: none; position: relative; padding-right: 50px; }
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after { content: '+'; position: absolute; right: 22px; top: 14px; font: 400 26px/1 var(--f-mono); color: var(--yellow); }
.lp-faq__item[open] summary::after { content: '−'; }
.lp-faq__item p { margin: 0; padding: 0 22px 20px; color: var(--muted); }
.lp-cta { margin-top: 0; }
.lp-areas { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); max-width: 620px; }
.lp-others { margin-top: 40px; }
.lp-others p { font-size: 12px; color: var(--red); margin: 0 0 12px; }
.lp-others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-others a { display: inline-block; padding: 10px 14px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font: 600 15px/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.lp-others a:hover { border-color: var(--yellow); color: var(--yellow); }
.lp-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 28px max(16px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lp-foot a { color: var(--muted); }
.lp-foot span { margin-right: auto; }
.footer__services { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12px; }
.footer__services a { color: var(--muted); text-decoration: none; }
.footer__services a:hover { color: var(--yellow); }

.service__more { align-self: flex-start; margin: auto 0 10px; font-size: 13px; color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.service__more:hover { color: var(--accent); }
.service__more + .service__cta { margin-top: 0; }
@media (max-width: 760px) { .lp-crumb a, .lp-foot a { display: inline-block; padding: 8px 0; } }

/* =========================================================
   Pagine per servizio: identità della categoria (--accent)
   ========================================================= */
.lp .hero__kicker, .lp .section__index { color: var(--accent); }
.lp .section__title::after { background: var(--accent); }
.lp .section__title:hover { animation: hoverGlitch .35s steps(1, end); text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
.lp .btn--ghost { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.lp .btn--ghost:hover { background: var(--accent); color: var(--bg); }
.lp .section--alt::before { background: linear-gradient(90deg, var(--accent) 0 120px, var(--line) 120px); }
.lp-nav { border-bottom-color: var(--line); }
.lp-nav::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 160px; height: 2px; background: var(--accent); }
.lp-nav .sfx { margin-right: 0; }
.lp-hero { min-height: min(760px, 92vh); display: flex; align-items: center;
  background: radial-gradient(ellipse 55% 60% at 80% 30%, rgba(var(--acc-rgb), .16), transparent 70%), radial-gradient(ellipse 40% 40% at 10% 90%, rgba(176,38,255,.10), transparent 70%), linear-gradient(180deg, #0b0812, var(--bg) 70%); }
.lp-hero > .container { position: relative; z-index: 2; width: 100%; }
.lp-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 50%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 50%); }
.lp-hud { display: block; z-index: 1; height: 100%; --vf-top: 18px; --vf-bot: 18px; }
.lp-hud .vf__fmt { color: var(--accent); }
.lp-hero__title { animation: glitchIn .6s steps(1, end) .1s backwards; }
.lp-hero__title:hover { animation: hoverGlitch .35s steps(1, end); text-shadow: -3px 0 var(--red), 3px 0 var(--cyan); }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 10px 5px 0; font-size: 12px; letter-spacing: .16em; color: var(--bg); }
.lp-badge span { padding: 5px 8px; margin: -5px 0; color: var(--muted); background: var(--panel); }
.lp-badge { background: var(--accent); padding-left: 0; }
.lp--video .lp-badge, .lp--web .lp-badge { color: #fff; }
/* punti con cornice ed etichetta del colore della categoria */
.lp-points li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 22px; border: 0; background: var(--panel); transition: transform .25s; }
.lp-points li::before { display: none; }
.lp-points li:hover { transform: translateY(-3px); }
.lp-points li:hover .cframe::before { border: 2px solid var(--accent); }
.lp-points li:hover .cframe::after { inset: 5px; }
.lp-points li .ctag { font-size: 10px; }
.lp-points__t { position: relative; z-index: 1; font-size: 16px; }
/* lavori come nella galleria */
.lp-work a { position: relative; background: var(--panel); clip-path: var(--clip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.lp-work__img { position: relative; display: block; overflow: hidden; }
.lp-work__id { position: absolute; top: 18px; left: 22px; z-index: 4; padding: 3px 7px; font-size: 10px; color: var(--accent); background: rgba(10,10,15,.75); }
.lp-work a:hover .work__frame { inset: 6px; }
.lp-work a:hover img { transform: scale(1.04); animation: sliceGlitch .4s steps(1, end); }
.lp-work__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.lp-work__cat { align-self: flex-start; padding: 3px 8px; font-size: 10px; color: var(--bg); background: var(--accent); }
.lp-work[style*="--red"] .lp-work__cat, .lp-work[style*="--purple"] .lp-work__cat { color: #fff; }
.lp-work__t { padding: 0; }
.lp-work__m { padding: 0; }
.lp-work a:hover .lp-work__t { animation: hoverGlitch .35s steps(1, end); }
/* passi, domande, chiusura */
.lp-steps li { border-top-color: var(--accent); position: relative; }
.lp-steps b { color: var(--accent); }
.lp-faq__item { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line)); }
.lp-faq__item summary::after { color: var(--accent); }
.lp-faq__item[open] { border-left-color: var(--accent); }
.lp-cta { border-left-color: var(--accent) !important; background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(var(--acc-rgb), .04) 18px 20px) !important; }
.lp-others p { color: var(--accent); }
.lp-others a { border-left: 3px solid var(--c, var(--yellow)); }
.lp-others a:hover { border-color: var(--c); color: var(--c); }
@media (max-width: 760px) { .lp-hero { min-height: 0; padding: 70px 0 60px; } .lp-hud .vf__gps, .lp-hud .vf__exp { display: none; } }

/* ---------- Pagine servizi: conversione (modulo rapido, prove, barra fissa) ---------- */
.lp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.lp-tags .lp-badge { margin: 0; }
.lp-avail { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; color: #2bff88; }
.lp-avail i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: blink 1.6s infinite; }
.lp-avail.is-busy { color: var(--orange); }
.lp .hero__trust::before { color: var(--accent); }
.lp-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 26px 0 0; font-size: 12px; color: var(--muted); }
.lp-proof span { letter-spacing: .16em; margin-right: 4px; }
.lp-proof b { padding: 5px 10px; font: 600 14px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: rgba(10,10,15,.7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--line)); }
.lp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-benefits li { position: relative; padding: 26px 24px 24px; background: var(--panel); transition: transform .25s; }
.lp-benefits li:hover { transform: translateY(-3px); }
.lp-benefits li:hover .cframe::before { border: 2px solid var(--accent); }
.lp-benefits li:hover .cframe::after { inset: 5px; }
.lp-benefits__n { color: var(--accent); font-size: 13px; }
.lp-benefits h3 { margin: 10px 0 8px; font: 700 23px/1.1 var(--f-head); text-transform: uppercase; }
.lp-benefits p { margin: 0; color: var(--muted); font-size: 15px; }
.lp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-review { position: relative; margin: 0; padding: 26px 24px; background: var(--panel); }
.lp-review p { margin: 0 0 14px; font-size: 16px; }
.lp-review p::before { content: '“'; display: block; font: 700 46px/.6 var(--f-head); color: var(--accent); margin-bottom: 8px; }
.lp-review footer { font-size: 12px; color: var(--accent); }
.lp-form-sec { border-top: 1px solid var(--line); background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(var(--acc-rgb), .035) 18px 20px); }
.lp-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.lp-form-intro .section__title { margin-bottom: 18px; }
.lp-form-lead { margin: 0 0 20px; font-size: 18px; color: var(--muted); max-width: 520px; }
.lp-form-intro .lp-avail { margin-bottom: 22px; }
.lp-wa { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 0 0 18px; padding: 14px 16px; color: var(--text); text-decoration: none; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s; }
.lp-wa svg { width: 26px; height: 26px; flex: none; fill: #25d366; }
.lp-wa b { color: #25d366; }
.lp-wa:hover { border-color: #25d366; }
.lp-form { margin: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lp-form .field input:focus, .lp-form .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(var(--acc-rgb), .15); }
.lp-form .field textarea { min-height: 110px; }
.lp-form .field input[type="date"] { color-scheme: dark; }
.lp-form .form__trust li::before { color: var(--accent); }
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,10,15,.94); border-top: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .3s; }
.lp-sticky .btn { flex: 1; min-height: 46px; padding: 0 12px; font-size: 15px; }
.lp-sticky .btn--ghost { flex: 0 0 auto; }
.lp-sticky.is-on { transform: none; }
@media (max-width: 960px) {
  .lp-benefits { grid-template-columns: 1fr; }
  .lp-form-wrap { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .lp-sticky { display: flex; }
  .lp-foot { padding-bottom: 90px; }
  .lp-nav__links { display: none; }
  .lp-nav .btn--sm { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } .lp-avail i { animation: none; } }
.lp-form-intro .section__title { font-size: clamp(34px, 4.4vw, 58px); }

/* ---------- Pagina 404 ---------- */
.e404 { position: relative; min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; overflow: hidden; padding: 70px 0;
  background: radial-gradient(ellipse 60% 55% at 70% 35%, rgba(176,38,255,.14), transparent 70%), radial-gradient(ellipse 45% 40% at 10% 90%, rgba(255,0,60,.10), transparent 70%), var(--bg); }
.e404__noise { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); animation: e404roll 7s linear infinite; }
.e404__noise::after { content: ''; position: absolute; left: 0; right: 0; height: 90px; top: -90px; background: linear-gradient(transparent, rgba(176,38,255,.08), transparent); animation: e404bar 5s linear infinite; }
@keyframes e404roll { to { background-position: 0 60px; } }
@keyframes e404bar { to { top: 100%; } }
.e404__vf { display: block; --vf-top: 22px; --vf-bot: 22px; }
.e404__vf .vf__rec b { color: var(--red); }
.e404__box { position: relative; z-index: 2; }
.e404__title { margin: 6px 0 10px; font: 700 clamp(120px, 24vw, 260px)/.85 var(--f-head); color: var(--yellow); letter-spacing: .02em; }
.e404__lead { max-width: 560px; margin: 0 0 6px; font-size: 20px; }
.e404__en { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.e404__services { margin-top: 46px; }
.e404__services > p { margin: 0 0 12px; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.e404__services .footer__services { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .e404__noise, .e404__noise::after { animation: none; } }
.e404__services .footer__services { gap: 10px; margin: 0; font-size: 14px; }
.e404__services .footer__services a { padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--purple); color: var(--text); font: 600 15px/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.e404__services .footer__services a:hover { border-color: var(--yellow); color: var(--yellow); }