/* Null Origin Studios — v2, linguaggio grafico brutalista/glitch */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }

:root {
  --bg: #0C0B0E;
  --ink: #0B0A0E;
  --paper: #E9E6EC;
  --text: #EDEBF0;
  --muted: #A8A2B1;
  --line: #6E6876;
  --violet: #B94BF7;
  --violet-2: #C77DFF;
  --violet-3: #8A3BD0;
  --wrap: 1256px;
  --cond: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: url("../img/grain.png"); opacity: .22; mix-blend-mode: overlay; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--cond); font-stretch: 78%; line-height: 1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
mark { background: var(--violet); color: var(--ink); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
code { font-family: var(--mono); background: var(--ink); color: var(--violet-2); padding: 0 6px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--violet); color: var(--ink); padding: 8px 14px; font-weight: 700; }
.skip:focus { left: 16px; }
.sl { color: var(--violet); margin-right: .25em; }
.blink { color: var(--violet); font-style: normal; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* carta */
.paper { background: var(--paper) url("../img/paper.webp"); color: var(--ink); }

/* ===== Header ===== */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid #1d1b22; }
.hdr-in { height: 58px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand img { transition: transform .4s; }
.brand:hover img { transform: rotate(-25deg); }
.brand-name { font: 700 23px/1 var(--cond); font-stretch: 88%; letter-spacing: -.005em; white-space: nowrap; }
.hdr-sep { width: 1px; height: 24px; background: var(--line); }
.hdr-tag { font-style: italic; font-size: 13.5px; white-space: nowrap; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 26px; }
.nav a { position: relative; font: 500 15.5px/1 var(--cond); font-stretch: 90%; white-space: nowrap; transition: color .2s; }
.nav a:hover { color: var(--violet-2); }
.nav a.is-active { color: var(--violet-2); }
.nav a.is-active::before { content: "[ "; }
.nav a.is-active::after { content: " ]"; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 6px; padding: 0 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--text); transition: transform .3s, opacity .3s; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font: 700 14px/1 var(--cond); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.btn-violet { background: var(--violet); color: var(--ink); }
.btn-violet:hover { background: var(--violet-2); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--text); }
.btn-ink:hover { color: var(--violet-2); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--violet); }
.more { display: inline-block; margin-top: 22px; font-weight: 500; color: var(--violet-2); }
.more:hover { color: var(--text); text-decoration: underline; }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; min-height: 560px; padding: 56px 0 84px; }
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.glitch-slice { position: absolute; left: 30%; right: 0; height: 9px; background: url("../img/hero-duo-1600.webp") center / cover; opacity: .9; mix-blend-mode: multiply; animation: slice 6s steps(1) infinite; }
.s1 { top: 30%; animation-delay: .4s; } .s2 { top: 54%; height: 5px; animation-delay: 2.1s; } .s3 { top: 71%; height: 14px; animation-delay: 4s; }
@keyframes slice { 0%, 100% { transform: none; opacity: 0; } 2% { transform: translateX(-28px); opacity: .9; } 4% { transform: translateX(14px); } 6% { opacity: 0; } }
.px { position: absolute; background: var(--ink); }
.px.p1 { left: 41%; top: 18%; width: 14px; height: 14px; }
.px.p2 { left: 47%; top: 62%; width: 22px; height: 8px; background: var(--violet); }
.px.p3 { left: 38%; top: 74%; width: 8px; height: 8px; }
.px.p4 { left: 55%; top: 10%; width: 30px; height: 4px; background: var(--violet); }
.px.p5 { right: 6%; top: 84%; width: 12px; height: 12px; background: var(--violet); }
.px.p6 { left: 44%; top: 40%; width: 6px; height: 18px; }
.crosshair { position: absolute; left: 50%; top: 46%; width: 26px; height: 26px; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ink); }
.crosshair::before { left: 12px; top: 0; width: 2px; height: 100%; }
.crosshair::after { top: 12px; left: 0; height: 2px; width: 100%; }
.hero-in { position: relative; z-index: 2; }
.bracket-tl { position: absolute; left: -26px; top: -6px; width: 14px; height: 32px; border-top: 4px solid var(--violet); border-left: 4px solid var(--violet); }
.eyebrow { font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { font: 800 clamp(54px, 8.6vw, 112px)/.9 var(--cond); font-stretch: 72%; letter-spacing: -.02em; margin: 14px 0 18px; max-width: 760px; }
.hero-title:hover, .big-h:hover { text-shadow: 3px 0 var(--violet), -3px 0 rgba(80, 20, 120, .6); }
.hero-sub { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--cond); font-stretch: 85%; margin-bottom: 28px; }
.hero-row { display: flex; align-items: flex-start; gap: 22px; max-width: 640px; }
.slash { flex: none; width: 4px; height: 60px; background: var(--violet); transform: skewX(-24deg); margin-top: 4px; }
.hero-lead { font-size: 14.5px; max-width: 330px; }
.term { flex: none; border-left: 1px solid var(--ink); padding-left: 20px; display: grid; gap: 5px; }
.term li { background: var(--ink); color: var(--text); font-size: 13px; padding: 1px 10px 1px 8px; width: max-content; }
.term li::before { content: "> "; color: var(--violet-2); }
.term li:last-child::after { content: "_"; color: var(--violet); animation: blink 1s steps(1) infinite; }
.term-ink { border-left-color: var(--ink); margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0; border-left: 0; }
.term-ink li:last-child::after { content: ""; }
.term-ink .loop { background: var(--violet); color: var(--ink); }
.term-ink .loop::before { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-eq { position: absolute; z-index: 2; right: 44px; top: 54px; margin: 0; font-size: 13.5px; line-height: 1.5; background: rgba(233, 230, 236, .85); padding: 10px 14px; border-left: 3px solid var(--violet); }
.hero-eq div { display: flex; gap: 8px; }
.hero-eq dt { font-weight: 700; min-width: 58px; }
.hero-eq dt::after { content: " ="; font-weight: 400; }
.hero-eq dd { margin: 0; }
.eq-inf { margin-top: 6px; }
.eq-inf dt::after { content: ""; }

/* ===== Sezioni ===== */
.sec { padding: 72px 0; position: relative; }
.sec-h { font: 600 26px/1 var(--cond); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 26px; }
.kicker { font-weight: 500; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.big-h { font: 800 clamp(40px, 5.4vw, 72px)/.92 var(--cond); font-stretch: 72%; letter-spacing: -.015em; margin-bottom: 20px; }

/* progetto */
.projects { padding-top: 46px; }
.proj-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: stretch; }
.proj { position: relative; border: 1px solid var(--violet-3); background: #121016; transition: transform .25s, box-shadow .25s; }
.proj:hover { transform: translateY(-3px); box-shadow: 0 0 28px rgba(185, 75, 247, .35); }
.corner { position: absolute; z-index: 3; width: 22px; height: 22px; border: 4px solid var(--violet); }
.c-tl { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.c-tr { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
.c-bl { left: -6px; bottom: -6px; border-right: 0; border-top: 0; }
.c-br { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.proj-art { position: relative; overflow: hidden; aspect-ratio: 1600 / 447; }
.proj-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.proj:hover .proj-art img { transform: scale(1.04); }
.proj-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px); }
.proj-body { padding: 20px 24px 24px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border: 1px solid var(--line); }
.tag-v { background: var(--violet); color: var(--ink); border-color: var(--violet); font-weight: 700; }
.proj-title { font: 800 34px/1 var(--cond); font-stretch: 78%; margin-bottom: 12px; }
.proj-body p { font-size: 14px; max-width: 720px; }
.dim { color: var(--muted); margin-top: 6px; }
.note { position: relative; padding: 26px 24px; display: flex; flex-direction: column; }
.corner-k { position: absolute; width: 26px; height: 26px; border: 4px solid var(--ink); }
.k-tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.k-bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.note-k { font-weight: 500; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.note-big { font: 800 34px/1.02 var(--cond); font-stretch: 74%; margin-top: auto; margin-bottom: auto; }

/* pilastri */
.pillars { border-block: 1px solid #1d1b22; background: #0e0d11; }
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar { display: flex; gap: 16px; padding: 30px 22px; }
.pillar + .pillar { border-left: 1px solid #24222a; }
.pillar svg { flex: none; width: 44px; height: 44px; color: var(--violet); filter: drop-shadow(0 0 8px rgba(185, 75, 247, .5)); }
.pillar h3 { font: 700 17px/1.1 var(--cond); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.pillar p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* studio */
.studio-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.studio-text { position: relative; }
.studio-text .bracket-tl { left: -22px; }
.studio-tag { font-size: 14px; margin-bottom: 16px; }
.studio-tag mark { font-weight: 700; }
.studio-text p:not(.kicker):not(.studio-tag) { font-size: 14.5px; color: #d6d1de; }
.studio-art { position: relative; border: 1px solid #2b2832; }
.studio-art img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.studio-art .px.p1 { left: -7px; top: 18%; } .studio-art .px.p3 { right: -4px; left: auto; top: 70%; background: var(--violet); } .studio-art .px.p5 { left: 30%; top: -6px; }
.scan { position: absolute; inset: 0; background: linear-gradient(transparent 0, rgba(185, 75, 247, .22) 50%, transparent 52%) 0 0 / 100% 240%; animation: scan 5s linear infinite; pointer-events: none; mix-blend-mode: screen; }
@keyframes scan { from { background-position: 0 -120%; } to { background-position: 0 120%; } }

/* filosofia */
.philo { padding: 96px 0; }
.ink { color: var(--ink); }
.kicker-ink { color: var(--ink); }
.philo-head { max-width: 760px; margin-bottom: 40px; }
.lead-ink { font-size: 15px; }
.philo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.word-card { border: 2px solid var(--ink); padding: 28px 28px 26px; background: rgba(255, 255, 255, .25); transition: transform .25s, box-shadow .25s; }
.word-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--violet); }
.word { display: block; font: 900 clamp(56px, 7vw, 92px)/.85 var(--cond); font-stretch: 68%; letter-spacing: -.02em; margin-bottom: 18px; }
.word-card h3 { font: 700 21px/1.1 var(--cond); font-stretch: 86%; margin-bottom: 12px; }
.word-card p { font-size: 14px; }
.word-card p + p { margin-top: 10px; }
.word-card--dark { grid-column: 1 / -1; background: var(--ink); color: var(--text); border-color: var(--ink); }
.word-card--dark:hover { box-shadow: 6px 6px 0 var(--violet); }
.word-card--dark code { background: #222; }
.wc-row { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
.word-card--dark .word { margin: 0; }
.word .v { color: var(--violet); }
.word-card--dark p { color: #d6d1de; }
.nuor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.nuor img { width: 120px; }
.nuor p { font-size: 13.5px; }
.nuor strong { color: var(--violet-2); }

.symbol { margin-top: 20px; display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; border: 2px solid var(--ink); padding: 30px 34px; }
.sym { width: 100%; height: auto; overflow: visible; }
.sym > * { transition: opacity .35s, transform .45s, fill .35s; transform-origin: 100px 100px; }
.sym-ring { stroke: var(--ink); stroke-dasharray: 100; }
.sym-void { fill: var(--violet); opacity: .18; }
.sym-slash { fill: var(--violet); }
.symbol.is-in .sym-ring { animation: draw 1.8s cubic-bezier(.6, 0, .2, 1) both; }
.symbol.is-in .sym-slash { animation: slash .7s 1.2s steps(4) both; }
@keyframes draw { from { stroke-dashoffset: 100; } }
@keyframes slash { from { opacity: 0; transform: translate(26px, -30px); } }
.sym.hl-ring .sym-void, .sym.hl-ring .sym-slash, .sym.hl-void .sym-ring, .sym.hl-void .sym-slash, .sym.hl-slash .sym-ring, .sym.hl-slash .sym-void { opacity: .12; }
.sym.hl-void .sym-void { opacity: .6; transform: scale(1.15); }
.symbol-h { font: 800 34px/1 var(--cond); font-stretch: 76%; margin-bottom: 6px; }
.symbol-lead { font-size: 14px; margin-bottom: 18px; }
.symbol-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.symbol-list li { display: flex; gap: 10px; padding: 12px 14px; border-left: 3px solid var(--ink); cursor: default; transition: background .2s, color .2s, border-color .2s; }
.symbol-list li:hover, .symbol-list li:focus-visible, .symbol-list li.is-on { background: var(--ink); color: var(--text); border-left-color: var(--violet); }
.symbol-list .n { font-weight: 700; color: var(--violet-3); }
.symbol-list h4 { font: 700 17px/1.1 var(--cond); font-stretch: 88%; margin-bottom: 6px; }
.symbol-list p { font-size: 13px; line-height: 1.5; }

/* mission vision */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mv-card { position: relative; padding: 30px 30px 32px; }
.mv-claim { font: 800 clamp(30px, 3.2vw, 42px)/.98 var(--cond); font-stretch: 72%; letter-spacing: -.01em; margin-bottom: 20px; max-width: 520px; }
.mv-text { font-size: 14px; max-width: 520px; }

/* valori */
.values-list { border-top: 1px solid #2b2832; }
.values-list li { display: grid; grid-template-columns: 70px 300px 1fr; gap: 20px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid #2b2832; transition: background .2s, padding .2s; }
.values-list li:hover { background: #141219; padding-left: 14px; }
.vn { color: var(--violet); font-weight: 700; }
.values-list h3 { font: 700 26px/1 var(--cond); font-stretch: 80%; text-transform: uppercase; letter-spacing: .02em; }
.values-list li:hover h3 { text-shadow: 2px 0 var(--violet), -2px 0 rgba(80, 20, 120, .6); }
.values-list p { font-size: 13.5px; color: var(--muted); }

/* manifesto */
.manifesto { padding: 100px 0 110px; }
.manifesto-in { max-width: 900px; }
.manifesto-h { font: 900 clamp(40px, 6vw, 82px)/.9 var(--cond); font-stretch: 70%; letter-spacing: -.02em; margin-bottom: 40px; }
.lines { display: grid; gap: 10px; border-left: 4px solid var(--ink); padding-left: 22px; }
.line { font-size: clamp(14.5px, 1.4vw, 17px); opacity: .1; transform: translateX(-8px); transition: opacity .6s, transform .6s; }
.line.is-in { opacity: 1; transform: none; }
.line-strong { font-weight: 700; }
.line-strong::before { content: "> "; color: var(--violet-3); }
.manifesto-end { margin-top: 40px; font: 800 clamp(28px, 3.6vw, 44px)/1 var(--cond); font-stretch: 74%; }

/* footer */
.ftr { background: var(--ink); border-top: 1px solid #1d1b22; padding: 26px 0; }
.ftr-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; }
.ftr .brand-name { font-size: 20px; }
.ftr-desc { margin-top: 10px; font-size: 12px; color: var(--muted); }
.ftr-legal { display: flex; gap: 22px; font-size: 13px; }
.ftr-legal a:hover { color: var(--violet-2); }
.ftr-end { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: end; }
.ftr-nuor { width: 74px; }
.copy { font-size: 12px; color: var(--muted); }

/* trailer */
.trailer { padding: 0; border: 1px solid var(--violet-3); background: var(--ink); color: var(--text); width: min(960px, 100% - 32px); }
.trailer::backdrop { background: rgba(5, 4, 8, .85); }
.trailer-frame { position: relative; aspect-ratio: 16 / 9; }
.trailer-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) grayscale(.6) brightness(.6); transform: scale(1.08); }
.trailer-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; }
.trailer-msg h2 { font: 800 clamp(28px, 4vw, 48px)/1 var(--cond); font-stretch: 74%; }
.stamp { font: 800 22px/1 var(--cond); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); border: 3px solid var(--violet); padding: 4px 12px; transform: rotate(-6deg); }
.trailer-close { position: absolute; z-index: 2; top: 10px; right: 12px; width: 38px; height: 38px; font-size: 18px; background: var(--ink); border: 1px solid var(--line); }
.trailer-close:hover { color: var(--violet-2); border-color: var(--violet); }

/* reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal, .no-js .line { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .hdr-sep, .hdr-tag { display: none; }
  .nav-toggle { display: flex; }
  .nav { position: fixed; inset: 58px 0 auto; margin: 0; background: var(--ink); border-bottom: 2px solid var(--violet); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .3s; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  .nav a { display: block; padding: 14px 0; font-size: 20px; border-bottom: 1px solid #24222a; }
  .nav-open .nav { clip-path: inset(0); visibility: visible; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hero-art { width: 100%; opacity: .32; }
  .hero-art img { -webkit-mask-image: none; mask-image: none; }
  .hero-eq { display: none; }
  .proj-grid, .studio-grid, .mv-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(3) { border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid #24222a; }
  .symbol { grid-template-columns: 1fr; }
  .symbol-art { max-width: 220px; }
  .values-list li { grid-template-columns: 50px 1fr; }
  .values-list p { grid-column: 2; }
  .ftr-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ftr-brand .brand { justify-content: center; }
  .ftr-end { justify-self: center; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 40px 0 70px; min-height: 0; }
  .bracket-tl { left: -12px; top: -14px; }
  .hero-row { flex-direction: column; gap: 14px; }
  .slash { display: none; }
  .term { border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .sec { padding: 56px 0; }
  .philo { padding: 72px 0; }
  .philo-grid { grid-template-columns: 1fr; }
  .wc-row { grid-template-columns: 1fr; gap: 16px; }
  .symbol { padding: 24px 18px; }
  .symbol-list { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid #24222a; }
  .pillar { padding: 22px 4px; }
  .note-big { font-size: 30px; }
  .ftr-legal { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .line { opacity: 1; transform: none; }
}

/* ===== Pagine legali ===== */
.legal { padding: 70px 0 100px; }
.legal-in { max-width: 880px; }
.legal-kicker { font-weight: 500; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.legal-kicker::before { content: "/ "; color: var(--violet-3); }
.legal h1 { font: 900 clamp(48px, 7vw, 88px)/.9 var(--cond); font-stretch: 70%; letter-spacing: -.02em; margin-bottom: 14px; }
.legal-updated { font-size: 13px; margin-bottom: 28px; }
.legal-intro { font-size: 15px; margin-bottom: 28px; }
.legal h2 { font: 800 30px/1 var(--cond); font-stretch: 78%; margin: 46px 0 14px; padding-top: 18px; border-top: 2px solid var(--ink); scroll-margin-top: 80px; }
.legal h3 { font: 700 19px/1.1 var(--cond); font-stretch: 88%; margin: 22px 0 8px; }
.legal p, .legal li { font-size: 14.5px; line-height: 1.7; }
.legal p + p { margin-top: 10px; }
.legal ul { list-style: square; padding-left: 22px; margin: 10px 0; }
.legal ol { list-style: decimal; padding-left: 22px; }
.legal a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--violet-3); }
.legal a:not(.btn):hover { color: var(--violet-3); }
.legal-toc { border: 2px solid var(--ink); padding: 18px 24px; }
.legal-toc ol { columns: 2; column-gap: 30px; margin: 0; }
.legal-toc li { font-size: 13.5px; break-inside: avoid; }
.legal-toc a { text-decoration: none !important; }
.legal-callout { background: var(--ink); color: var(--text); padding: 18px 22px; border-left: 6px solid var(--violet); }
.legal-callout strong { color: var(--violet-2); }
.legal-table-wrap { overflow-x: auto; margin: 14px 0; border: 2px solid var(--ink); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid rgba(11, 10, 14, .2); }
.legal-table th { background: var(--ink); color: var(--text); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.legal mark.todo { background: #ffd27a; color: var(--ink); outline: 1px dashed #a6740d; }
.legal-back { margin-top: 46px; }
@media (max-width: 760px) { .legal-toc ol { columns: 1; } }

/* bordi strappati (generati) */
.torn-b { clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 11.8px), 99.01% calc(100% - 1.3px), 97.63% calc(100% - 3.9px), 96.67% calc(100% - 6.0px), 95.76% calc(100% - 2.0px), 94.31% calc(100% - 4.0px), 93.46% calc(100% - 11.8px), 92.1% calc(100% - 2.7px), 91.23% calc(100% - 7.1px), 89.9% calc(100% - 4.6px), 89.17% calc(100% - 0.3px), 87.73% calc(100% - 9.0px), 86.99% calc(100% - 6.1px), 85.29% calc(100% - 9.4px), 84.54% calc(100% - 6.2px), 83.26% calc(100% - 10.8px), 82.09% calc(100% - 1.4px), 80.92% calc(100% - 11.0px), 79.84% calc(100% - 12.2px), 78.56% calc(100% - 2.1px), 78.11% calc(100% - 13.3px), 77.0% calc(100% - 5.8px), 75.83% calc(100% - 1.4px), 74.2% calc(100% - 1.9px), 73.37% calc(100% - 11.7px), 71.92% calc(100% - 13.5px), 70.87% calc(100% - 4.4px), 70.23% calc(100% - 1.8px), 68.89% calc(100% - 0.7px), 67.54% calc(100% - 4.8px), 66.5% calc(100% - 12.6px), 65.67% calc(100% - 5.9px), 64.35% calc(100% - 5.3px), 63.34% calc(100% - 2.2px), 61.88% calc(100% - 3.5px), 60.85% calc(100% - 2.9px), 60.3% calc(100% - 3.3px), 58.94% calc(100% - 9.2px), 57.9% calc(100% - 0.8px), 56.36% calc(100% - 5.4px), 55.73% calc(100% - 3.7px), 54.2% calc(100% - 6.1px), 53.18% calc(100% - 11.0px), 51.99% calc(100% - 13.0px), 50.88% calc(100% - 1.3px), 50.33% calc(100% - 13.2px), 48.57% calc(100% - 13.1px), 48.04% calc(100% - 5.1px), 46.45% calc(100% - 2.7px), 45.25% calc(100% - 5.0px), 44.34% calc(100% - 5.4px), 43.15% calc(100% - 1.3px), 42.38% calc(100% - 11.6px), 40.81% calc(100% - 4.2px), 39.81% calc(100% - 13.2px), 38.55% calc(100% - 3.7px), 37.73% calc(100% - 3.1px), 36.8% calc(100% - 9.4px), 35.88% calc(100% - 12.6px), 34.18% calc(100% - 2.3px), 33.55% calc(100% - 11.4px), 32.04% calc(100% - 1.1px), 31.1% calc(100% - 13.8px), 30.03% calc(100% - 0.0px), 29.13% calc(100% - 1.3px), 28.11% calc(100% - 1.5px), 26.39% calc(100% - 13.4px), 25.71% calc(100% - 3.7px), 24.77% calc(100% - 8.5px), 23.4% calc(100% - 6.6px), 21.94% calc(100% - 8.8px), 21.39% calc(100% - 14.0px), 19.84% calc(100% - 3.7px), 18.82% calc(100% - 11.0px), 18.07% calc(100% - 3.0px), 16.48% calc(100% - 2.0px), 15.68% calc(100% - 12.7px), 14.47% calc(100% - 2.9px), 13.13% calc(100% - 5.9px), 12.14% calc(100% - 2.3px), 11.45% calc(100% - 13.3px), 10.05% calc(100% - 3.2px), 8.59% calc(100% - 12.4px), 7.99% calc(100% - 13.6px), 6.38% calc(100% - 11.8px), 5.4% calc(100% - 1.4px), 4.66% calc(100% - 9.8px), 3.48% calc(100% - 6.3px), 1.89% calc(100% - 1.5px), 0.86% calc(100% - 7.6px), 0.0% calc(100% - 0.2px)); }
.torn-t { clip-path: polygon(0.0% 2.9px, 1.26% 2.5px, 2.5% 13.4px, 3.53% 9.7px, 4.13% 6.4px, 5.67% 11.7px, 6.98% 11.8px, 7.93% 5.2px, 9.06% 3.5px, 10.19% 3.9px, 11.26% 2.1px, 11.97% 4.4px, 13.27% 0.9px, 14.37% 0.3px, 15.54% 10.1px, 16.59% 13.1px, 17.8% 12.6px, 18.69% 4.7px, 20.16% 13.5px, 21.45% 5.7px, 21.93% 2.5px, 23.25% 10.7px, 24.29% 10.8px, 25.79% 0.7px, 26.47% 6.0px, 28.09% 0.1px, 28.87% 6.5px, 30.19% 3.8px, 31.31% 8.1px, 32.28% 10.5px, 33.64% 3.7px, 34.17% 5.4px, 35.76% 7.5px, 36.36% 5.9px, 37.5% 12.0px, 39.12% 10.3px, 40.08% 12.7px, 41.09% 11.7px, 42.1% 3.9px, 43.15% 3.8px, 44.44% 5.0px, 45.44% 12.3px, 46.51% 1.2px, 47.77% 9.0px, 48.85% 1.9px, 49.86% 7.4px, 51.46% 6.4px, 52.05% 1.2px, 53.12% 8.3px, 54.78% 10.1px, 55.46% 4.5px, 57.0% 1.8px, 57.5% 6.7px, 58.67% 5.9px, 59.93% 4.0px, 61.33% 8.9px, 62.05% 2.6px, 63.53% 4.2px, 64.31% 3.8px, 65.64% 0.5px, 66.43% 4.3px, 67.59% 4.4px, 69.19% 3.9px, 69.95% 4.1px, 70.81% 10.5px, 72.18% 5.6px, 73.33% 0.6px, 74.61% 0.2px, 75.91% 1.7px, 76.65% 2.5px, 77.87% 4.9px, 78.76% 5.8px, 79.85% 13.0px, 81.15% 4.5px, 82.48% 8.4px, 83.59% 7.3px, 84.53% 7.7px, 85.51% 0.8px, 86.81% 0.1px, 88.12% 11.0px, 88.62% 11.2px, 90.15% 11.7px, 90.93% 2.4px, 92.48% 5.8px, 93.56% 8.2px, 94.7% 4.7px, 95.52% 9.8px, 96.48% 10.4px, 97.7% 13.7px, 99.21% 6.1px, 100.0% 10.9px, 100% 100%, 0 100%); }
.torn-t.torn-b { clip-path: polygon(0.0% 2.9px, 1.26% 2.5px, 2.5% 13.4px, 3.53% 9.7px, 4.13% 6.4px, 5.67% 11.7px, 6.98% 11.8px, 7.93% 5.2px, 9.06% 3.5px, 10.19% 3.9px, 11.26% 2.1px, 11.97% 4.4px, 13.27% 0.9px, 14.37% 0.3px, 15.54% 10.1px, 16.59% 13.1px, 17.8% 12.6px, 18.69% 4.7px, 20.16% 13.5px, 21.45% 5.7px, 21.93% 2.5px, 23.25% 10.7px, 24.29% 10.8px, 25.79% 0.7px, 26.47% 6.0px, 28.09% 0.1px, 28.87% 6.5px, 30.19% 3.8px, 31.31% 8.1px, 32.28% 10.5px, 33.64% 3.7px, 34.17% 5.4px, 35.76% 7.5px, 36.36% 5.9px, 37.5% 12.0px, 39.12% 10.3px, 40.08% 12.7px, 41.09% 11.7px, 42.1% 3.9px, 43.15% 3.8px, 44.44% 5.0px, 45.44% 12.3px, 46.51% 1.2px, 47.77% 9.0px, 48.85% 1.9px, 49.86% 7.4px, 51.46% 6.4px, 52.05% 1.2px, 53.12% 8.3px, 54.78% 10.1px, 55.46% 4.5px, 57.0% 1.8px, 57.5% 6.7px, 58.67% 5.9px, 59.93% 4.0px, 61.33% 8.9px, 62.05% 2.6px, 63.53% 4.2px, 64.31% 3.8px, 65.64% 0.5px, 66.43% 4.3px, 67.59% 4.4px, 69.19% 3.9px, 69.95% 4.1px, 70.81% 10.5px, 72.18% 5.6px, 73.33% 0.6px, 74.61% 0.2px, 75.91% 1.7px, 76.65% 2.5px, 77.87% 4.9px, 78.76% 5.8px, 79.85% 13.0px, 81.15% 4.5px, 82.48% 8.4px, 83.59% 7.3px, 84.53% 7.7px, 85.51% 0.8px, 86.81% 0.1px, 88.12% 11.0px, 88.62% 11.2px, 90.15% 11.7px, 90.93% 2.4px, 92.48% 5.8px, 93.56% 8.2px, 94.7% 4.7px, 95.52% 9.8px, 96.48% 10.4px, 97.7% 13.7px, 99.21% 6.1px, 100.0% 10.9px, 100.0% calc(100% - 11.8px), 99.01% calc(100% - 1.3px), 97.63% calc(100% - 3.9px), 96.67% calc(100% - 6.0px), 95.76% calc(100% - 2.0px), 94.31% calc(100% - 4.0px), 93.46% calc(100% - 11.8px), 92.1% calc(100% - 2.7px), 91.23% calc(100% - 7.1px), 89.9% calc(100% - 4.6px), 89.17% calc(100% - 0.3px), 87.73% calc(100% - 9.0px), 86.99% calc(100% - 6.1px), 85.29% calc(100% - 9.4px), 84.54% calc(100% - 6.2px), 83.26% calc(100% - 10.8px), 82.09% calc(100% - 1.4px), 80.92% calc(100% - 11.0px), 79.84% calc(100% - 12.2px), 78.56% calc(100% - 2.1px), 78.11% calc(100% - 13.3px), 77.0% calc(100% - 5.8px), 75.83% calc(100% - 1.4px), 74.2% calc(100% - 1.9px), 73.37% calc(100% - 11.7px), 71.92% calc(100% - 13.5px), 70.87% calc(100% - 4.4px), 70.23% calc(100% - 1.8px), 68.89% calc(100% - 0.7px), 67.54% calc(100% - 4.8px), 66.5% calc(100% - 12.6px), 65.67% calc(100% - 5.9px), 64.35% calc(100% - 5.3px), 63.34% calc(100% - 2.2px), 61.88% calc(100% - 3.5px), 60.85% calc(100% - 2.9px), 60.3% calc(100% - 3.3px), 58.94% calc(100% - 9.2px), 57.9% calc(100% - 0.8px), 56.36% calc(100% - 5.4px), 55.73% calc(100% - 3.7px), 54.2% calc(100% - 6.1px), 53.18% calc(100% - 11.0px), 51.99% calc(100% - 13.0px), 50.88% calc(100% - 1.3px), 50.33% calc(100% - 13.2px), 48.57% calc(100% - 13.1px), 48.04% calc(100% - 5.1px), 46.45% calc(100% - 2.7px), 45.25% calc(100% - 5.0px), 44.34% calc(100% - 5.4px), 43.15% calc(100% - 1.3px), 42.38% calc(100% - 11.6px), 40.81% calc(100% - 4.2px), 39.81% calc(100% - 13.2px), 38.55% calc(100% - 3.7px), 37.73% calc(100% - 3.1px), 36.8% calc(100% - 9.4px), 35.88% calc(100% - 12.6px), 34.18% calc(100% - 2.3px), 33.55% calc(100% - 11.4px), 32.04% calc(100% - 1.1px), 31.1% calc(100% - 13.8px), 30.03% calc(100% - 0.0px), 29.13% calc(100% - 1.3px), 28.11% calc(100% - 1.5px), 26.39% calc(100% - 13.4px), 25.71% calc(100% - 3.7px), 24.77% calc(100% - 8.5px), 23.4% calc(100% - 6.6px), 21.94% calc(100% - 8.8px), 21.39% calc(100% - 14.0px), 19.84% calc(100% - 3.7px), 18.82% calc(100% - 11.0px), 18.07% calc(100% - 3.0px), 16.48% calc(100% - 2.0px), 15.68% calc(100% - 12.7px), 14.47% calc(100% - 2.9px), 13.13% calc(100% - 5.9px), 12.14% calc(100% - 2.3px), 11.45% calc(100% - 13.3px), 10.05% calc(100% - 3.2px), 8.59% calc(100% - 12.4px), 7.99% calc(100% - 13.6px), 6.38% calc(100% - 11.8px), 5.4% calc(100% - 1.4px), 4.66% calc(100% - 9.8px), 3.48% calc(100% - 6.3px), 1.89% calc(100% - 1.5px), 0.86% calc(100% - 7.6px), 0.0% calc(100% - 0.2px)); }
