/* ────────────────────────────────────────────────────────
   P3 · sistema componenti sito
   Tutti i componenti del sistema PERIMETRO
   ──────────────────────────────────────────────────────── */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-wide { max-width: 1380px; margin: 0 auto; padding: 0 var(--pad-x); }

/* ── NAV ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,17,21,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display:flex; align-items:center; gap:32px;
  padding: 14px var(--pad-x);
}
.nav-logo {
  font-family: var(--font-mono); font-weight:600;
  font-size: 22px; letter-spacing:-0.04em; line-height:1;
  display:inline-flex; align-items:center; gap:6px;
  color: var(--text);
}
.nav-logo .brk { color: var(--signal); font-weight:400; }
.nav-status {
  margin-left: 14px; display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color: var(--bone-mute);
}
.nav-status::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--signal); box-shadow: 0 0 10px var(--signal);
  animation: led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.nav-links {
  margin-left:auto; display:flex; align-items:center; gap: clamp(14px, 2.2vw, 28px);
  font-family: var(--font-mono); font-size:12px;
  letter-spacing:.06em;
}
.nav-links a {
  color: var(--bone-dim);
  padding: 8px 0;
  position:relative;
  transition: color var(--fast) var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after,
.nav-links a:hover::after {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--signal);
}
.nav-cta {
  font-family: var(--font-mono); font-size:12px;
  letter-spacing:.06em;
  color: var(--grafite-950) !important;
  background: var(--signal);
  padding: 10px 14px;
  display:inline-flex; align-items:center; gap:7px;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav-cta:hover { background: var(--bone); transform: translateY(-1px); }
.nav-cta::before, .nav-cta::after { color: var(--grafite-950); }

/* ── hamburger + mobile panel ── */
.nav-burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent; cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.nav-burger:hover { border-color: var(--signal); }
.nav-burger span { display:block; width: 18px; height: 2px; background: var(--text); transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.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); }

.nav-mobile {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(15,17,21,0.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 84px var(--pad-x) 40px;
  flex-direction: column;
}
.nav-mobile.open { display: flex; animation: navfade var(--medium) var(--ease); }
@keyframes navfade { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: none; } }
.nav-mobile .close {
  position: absolute; top: 16px; right: var(--pad-x);
  width: 42px; height: 42px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 20px; color: var(--text); background: transparent;
}
.nav-mobile .close:hover { border-color: var(--signal); color: var(--signal); }
.nav-mobile .ml {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(28px, 9vw, 40px); letter-spacing: -0.03em;
  color: var(--text); padding: 14px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
}
.nav-mobile .ml:hover, .nav-mobile .ml.active { color: var(--signal); }
.nav-mobile .ml .mn { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--bone-mute); }
.nav-mobile .mcta {
  margin-top: 28px;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em;
  background: var(--signal); color: var(--grafite-950) !important;
  padding: 16px 20px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.nav-mobile .mmeta {
  margin-top: auto; padding-top: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--bone-mute); line-height: 1.7;
}
.nav-mobile .mmeta b { color: var(--text); }

@media(max-width:880px) {
  .nav-links { display:none; }
  .nav-status { display:none; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
}

/* ── TYPOGRAPHY (sezioni & heading) ────────────────── */
.kicker {
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--font-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--signal);
  font-weight:500;
}
.kicker::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--signal); box-shadow: 0 0 12px var(--signal);
  animation: led-pulse 2.4s ease-in-out infinite;
}
.eyebrow {
  font-family: var(--font-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--signal);
  display:flex; align-items:center; gap:12px;
  font-weight:500;
  margin-bottom: 22px;
}
.eyebrow::before { content:''; width:28px; height:1px; background: var(--signal); }
.eyebrow .num { color: var(--text); font-weight:600; }
.eyebrow .meta { color: var(--bone-mute); margin-left:auto; letter-spacing:.14em; }

h1.display {
  font-family: var(--font-body); font-weight:800;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 1.0; letter-spacing:-0.035em;
  text-wrap: balance;
  color: var(--text);
}
h1.display em { font-style:normal; color: var(--signal); }

h2.sec {
  font-family: var(--font-body); font-weight:800;
  font-size: clamp(28px, 5.2vw, 54px);
  line-height: 1.02; letter-spacing:-0.03em;
  text-wrap: balance;
  margin-bottom: 22px; color: var(--text);
}
h2.sec em { font-style:normal; color: var(--signal); }

p.lead {
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.65; max-width: 760px;
  color: var(--bone-dim);
}

h3.sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--signal);
  font-weight:600;
  margin: 64px 0 22px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}

p.body {
  font-size: 15px; line-height:1.7; color: var(--bone-dim);
  max-width: 760px;
}
p.body + p.body { margin-top: 16px; }
p.body b { color: var(--text); }

/* ── SECTION SKELETON ──────────────────────────────── */
section.block { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
section.block.alt { background: var(--bg-alt); }
section.block.deep { background: var(--bg-deep); }
section.block + section.block { border-top: 1px solid var(--line); }

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing:.05em;
  padding: 14px 20px;
  border: 1px solid var(--line);
  color: var(--text);
  transition: all var(--fast) var(--ease);
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn .brk { color: var(--signal); }
.btn-primary {
  background: var(--signal); color: var(--grafite-950);
  border-color: var(--signal);
}
.btn-primary:hover { background: var(--bone); color: var(--grafite-950); border-color: var(--bone); }
.btn-arrow::after { content:'→'; transition: transform var(--fast) var(--ease); }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ── GRID texture (brandbook §08) ──────────────────── */
.grid-tex {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.5;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%);
  pointer-events:none;
}

/* ── PERIMETRO FRAME (cornice generativa) ─────────── */
.perim {
  position:relative;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--line);
  background: var(--surface);
}
.perim::before {
  content:''; position:absolute; top:-1px; left:24px;
  width:60px; height:2px; background: var(--signal);
}

/* ── FOOTER ────────────────────────────────────────── */
.foot {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: clamp(72px, 9vw, 110px) 0 36px;
  position:relative;
}
.foot-top {
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.foot-brand .lg {
  font-family: var(--font-mono); font-weight:600;
  font-size: 48px; letter-spacing:-0.04em; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
}
.foot-brand .lg .brk { color: var(--signal); font-weight:400; }
.foot-brand .tg {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--signal-dim); margin-top: 18px;
}
.foot-brand .ad {
  font-size: 13px; color: var(--bone-mute); margin-top: 24px; line-height:1.7;
  max-width: 280px;
}
.foot-col h5 {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--signal); font-weight:600;
  margin-bottom: 18px;
}
.foot-col ul { list-style:none; }
.foot-col li { padding: 5px 0; }
.foot-col a {
  font-size: 13.5px; color: var(--bone-dim);
  transition: color var(--fast) var(--ease);
}
.foot-col a:hover { color: var(--signal); }
.foot-bot {
  margin-top: 36px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing:.06em; color: var(--bone-mute);
}
.foot-bot .legal { display:flex; flex-wrap:wrap; gap:24px; }
.foot-bot a:hover { color: var(--signal); }

@media (max-width:980px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap:32px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width:560px) {
  .foot-top { grid-template-columns: 1fr; }
}

/* ── LIGHT mood (brandbook §04.2 · su carta/light) ── */
section.block.light {
  background: var(--bone);
  --text: #15171C;
  --text-dim: #3D424C;
  --text-mute: #6B6E76;
  --bone-dim: #3D424C;
  --bone-mute: #6B6E76;
  --line: rgba(15,17,21,0.13);
  --line-soft: rgba(15,17,21,0.07);
  --surface: #E6E3DA;
  --bg: var(--bone);
  --bg-deep: #E9E6DD;
  --signal: #137A52;
  --signal-dim: #1C6B4B;
  color: var(--text);
}
section.block.light h2.sec,
section.block.light h1.display { color: var(--text); }
section.block.light ::selection { background: #137A52; color: var(--bone); }

/* ── TICKER (marquee compliance/prodotti) ───────── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: inline-flex; align-items: center; gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .04em; color: var(--bone-dim);
}
.ticker-item b { color: var(--text); font-weight: 600; }
.ticker-item .dot { color: var(--signal); }
.ticker-item .sep { color: var(--signal); font-size: 9px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Animations (brandbook §09 motion patterns) ─── */
@keyframes bl { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes br { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-6px)} }
@keyframes blink-cursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ── ARTICLE reading layout (blog posts) ── */
.art-hero { padding: clamp(40px,5vw,64px) 0 clamp(32px,4vw,52px); background: radial-gradient(circle at 88% 8%, rgba(77,230,161,.10), transparent 42%), var(--bg-deep); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.art-hero .inner { position:relative; z-index:1; max-width: 860px; }
.art-back { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-mute); display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; }
.art-back:hover { color:var(--signal); }
.art-cat { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.art-cat .pill { border:1px solid var(--signal-dim); padding:3px 9px; }
.art-hero h1 { font-family:var(--font-body); font-weight:800; font-size:clamp(32px,5vw,58px); line-height:1.02; letter-spacing:-.032em; text-wrap:balance; color:var(--text); }
.art-hero h1 em { font-style:normal; color:var(--signal); }
.art-meta { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--bone-mute); letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.art-meta b { color:var(--text); font-weight:600; }

.article { max-width: 720px; margin: 0 auto; }
.article > .lede { font-size:clamp(17px,2.2vw,21px); line-height:1.5; color:var(--text); font-weight:500; letter-spacing:-.01em; margin-bottom:36px; text-wrap:pretty; }
.article h2 { font-family:var(--font-body); font-weight:800; font-size:clamp(24px,3.4vw,34px); line-height:1.1; letter-spacing:-.025em; margin:48px 0 16px; scroll-margin-top:90px; }
.article h2 em { font-style:normal; color:var(--signal); }
.article h2 .sn { display:block; font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:var(--signal-dim); font-weight:500; margin-bottom:8px; }
.article h3 { font-weight:700; font-size:clamp(18px,2.4vw,22px); letter-spacing:-.015em; margin:32px 0 12px; color:var(--text); }
.article p { font-size:16.5px; line-height:1.68; color:var(--bone); margin-bottom:18px; text-wrap:pretty; }
.article p b { color:var(--text); font-weight:700; }
.article p em { font-style:normal; color:var(--signal); }
.article a.inl { color:var(--signal); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--signal-dim); }
.article a.inl:hover { text-decoration-color:var(--signal); }
.article ul, .article ol { margin:0 0 20px; padding-left:0; list-style:none; }
.article li { font-size:16px; line-height:1.6; color:var(--bone-dim); padding:8px 0 8px 28px; position:relative; }
.article li::before { content:'→'; position:absolute; left:0; color:var(--signal); font-family:var(--font-mono); }
.article li b { color:var(--text); }
.article .pull { border-left:3px solid var(--signal); padding:6px 0 6px 22px; margin:32px 0; font-family:var(--font-body); font-weight:600; font-size:clamp(19px,2.6vw,25px); line-height:1.3; color:var(--text); letter-spacing:-.01em; text-wrap:balance; }
.article .pull em { font-style:normal; color:var(--signal); }
.article .term { background:var(--bg-deep); border:1px solid var(--line); padding:22px 24px; font-family:var(--font-mono); font-size:13px; line-height:1.7; color:var(--bone-dim); margin:28px 0; overflow-x:auto; }
.article .term .pr { color:var(--signal); }
.article .term .hi { color:var(--text); }
.article .term .warn { color:var(--signal); }
.article .term .c { color:var(--bone-mute); }
.article .note { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--signal); padding:20px 24px; margin:28px 0; font-size:15px; line-height:1.6; color:var(--bone-dim); }
.article .note b { color:var(--text); }
.article .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:32px 0; }
.article .kpis .k { background:var(--bg-deep); padding:22px 20px; }
.article .kpis .big { font-family:var(--font-mono); font-weight:600; font-size:30px; color:var(--signal); line-height:1; letter-spacing:-.02em; }
.article .kpis .lab { font-size:13px; color:var(--bone-dim); margin-top:8px; line-height:1.4; }
@media(max-width:560px){ .article .kpis { grid-template-columns:1fr; } }

/* author + share footer */
.art-author { max-width:720px; margin:48px auto 0; border-top:1px solid var(--line); padding-top:28px; display:grid; grid-template-columns:60px 1fr; gap:18px; align-items:start; }
.art-author .av { width:60px; height:60px; background:var(--bg-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:20px; color:var(--text); position:relative; overflow:hidden; }
.art-author .av::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 22%, rgba(77,230,161,.22), transparent 55%); }
.art-author .av .mk { position:relative; z-index:1; font-family:var(--font-mono); font-weight:600; font-size:17px; letter-spacing:-.04em; color:var(--text); }
.art-author .av .mk .b { color:var(--signal); font-weight:400; }
.art-author .nm { font-weight:700; font-size:17px; letter-spacing:-.01em; }
.art-author .role { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin-top:4px; }
.art-author .bio { font-size:13.5px; color:var(--bone-dim); line-height:1.6; margin-top:10px; }
.art-author .bio a { color:var(--text); } .art-author .bio a:hover { color:var(--signal); }

/* related */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
.related a { border:1px solid var(--line); background:var(--surface); padding:24px 26px; transition:border-color var(--fast) var(--ease); }
.related a:hover { border-color:var(--signal-dim); }
.related .cat { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); }
.related h4 { font-weight:700; font-size:17px; letter-spacing:-.015em; margin-top:10px; color:var(--text); line-height:1.2; }
.related a:hover h4 { color:var(--signal); }
@media(max-width:680px){ .related { grid-template-columns:1fr; } }