/* ═══════════════════════════════════════════════
   JEMAI Solutions · design system "developer"
   scuro, griglia, monospace, componenti tipo IDE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #08090b;
  --bg2: #0e1014;
  --bg3: #151821;
  --ivory: #f2f4f7;
  --text: #e3e6eb;
  --text2: #9299a5;
  --text3: #5b616c;
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .13);
  --red: #e30613;
  --red2: #ff3d47;
  --red-soft: rgba(255, 61, 71, .1);
  --gold: #3ddc97;
  --cyan: #56c8ff;
  --purple: #b39bff;
  --green: #3ddc97;
  --amber: #ffb547;
  --li: #0a66c2;
  --serif: 'Geist', 'Inter', system-ui, sans-serif;
  --sans: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --max: 1240px;
  --sec: clamp(80px, 10vw, 140px);
  --r: 6px; --r2: 10px; --r3: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 60%, transparent); }
body::after { content: ''; position: fixed; inset: -20vh -10vw auto; height: 70vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 0%, rgba(227,6,19,.18), transparent 60%), radial-gradient(ellipse at 85% 10%, rgba(86,200,255,.07), transparent 55%); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.mono { font-family: var(--mono); }
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -.2em; }
#scrollProgress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--amber)); }
kbd { font-family: var(--mono); font-size: .7rem; padding: 2px 6px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; color: var(--text2); background: var(--bg2); }

/* ── TIPOGRAFIA ── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: var(--ivory); }
h1 em, h2 em, h3 em { font-style: normal; background: linear-gradient(90deg, var(--red2), #ff8a5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; color: var(--text2); margin-bottom: 20px; }
.eyebrow b { color: var(--green); font-weight: 400; }
.eyebrow::before { content: '//'; color: var(--text3); }
.lead { color: var(--text2); font-size: 1.12rem; max-width: 620px; line-height: 1.7; }
.muted { color: var(--text2); }

/* ── NAV ── */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.site-nav.scrolled, .site-nav.solid { background: rgba(8,9,11,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.site-nav .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { width: 30px; height: 30px; border-radius: 6px; }
.brand strong { font-family: var(--mono); font-size: .98rem; font-weight: 600; color: var(--ivory); letter-spacing: .02em; line-height: 1; }
.brand small { display: block; font-family: var(--mono); font-size: .62rem; color: var(--text3); margin-top: 3px; }
.brand small::before { content: '~/'; }
.nav-links { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: .8rem; color: var(--text2); }
.nav-links a { padding: 7px 11px; border-radius: 7px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ivory); background: var(--bg3); }
.nav-links a.active, .nav-links a[aria-current] { color: var(--ivory); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--line2); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.cmdk-btn { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); color: var(--text3); font-family: var(--mono); font-size: .76rem; cursor: pointer; }
.cmdk-btn:hover { color: var(--text2); border-color: var(--text3); }
.cmdk-btn .ic { width: 14px; height: 14px; }
.lang-switch { display: flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; font-family: var(--mono); font-size: .7rem; }
.lang-switch button { background: none; border: 0; padding: 7px 9px; color: var(--text3); cursor: pointer; }
.lang-switch button.on { background: var(--bg3); color: var(--ivory); }
.hamburger { display: none; width: 38px; height: 38px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger span { width: 15px; height: 1.5px; background: var(--ivory); }
.mobile-menu { position: fixed; inset: 0; z-index: 1500; background: var(--bg); display: none; flex-direction: column; padding: 18px 20px 30px; }
.mobile-menu.open { display: flex; animation: fadeIn .2s ease; }
.mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { font-family: var(--mono); font-size: 1.15rem; color: var(--ivory); padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.mobile-menu nav a::before { content: '>'; color: var(--green); margin-right: 12px; }
.mobile-menu nav a span { flex: 1; }
.mobile-menu nav a .ic { color: var(--text3); }
.mobile-menu .btn-primary { margin-top: auto; justify-content: center; }
.icon-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text2); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--ivory); border-color: var(--text3); }
.icon-btn .ic { width: 17px; height: 17px; }

/* ── BOTTONI ── */
.btn-primary, .btn-ghost, .btn-li, .btn-line { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .82rem; font-weight: 500; padding: 12px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px -8px rgba(227,6,19,.6); }
.btn-primary:hover { background: var(--red2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line2); color: var(--ivory); background: var(--bg2); }
.btn-ghost:hover { border-color: var(--text3); background: var(--bg3); }
.btn-li { background: var(--li); color: #fff; }
.btn-li:hover { filter: brightness(1.15); }
.btn-line { padding: 6px 0; border-radius: 0; color: var(--ivory); border-bottom: 1px dashed var(--text3); background: none; }
.btn-line:hover { color: var(--green); border-color: var(--green); }
.btn-primary .ic, .btn-ghost .ic, .btn-line .ic, .btn-li .ic { width: 15px; height: 15px; }
.btn-sm { padding: 8px 12px; font-size: .75rem; }
.btn-primary[disabled] { opacity: .6; cursor: wait; }

/* ── SEZIONI ── */
section { padding: var(--sec) 0; position: relative; }
.section-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { color: var(--text2); font-size: 1.02rem; max-width: 460px; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.tag { display: inline-block; font-family: var(--mono); font-size: .68rem; color: var(--text2); padding: 3px 8px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); padding: 26px; }

/* ── HERO ── */
.hero { padding: 130px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero-grid > *, .about-grid > *, .contact-shell > *, .lab-shell > *, .profile-layout > *, .profile-hero > *, .section-head > *, .services-list > *, .post-layout > * { min-width: 0; }
.hero .status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; color: var(--text2); margin-bottom: 26px; padding: 6px 12px 6px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg2); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,151,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
.hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -.05em; line-height: .98; margin-bottom: 24px; }
.hero h1 .cursor { display: inline-block; width: .45em; height: .82em; background: var(--red2); vertical-align: -.06em; margin-left: .08em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .lead { margin-bottom: 32px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-cmd { font-family: var(--mono); font-size: .76rem; color: var(--text3); margin-top: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-bottom { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r3); background: var(--bg2); overflow: hidden; }
.hero-bottom div { padding: 20px 22px; border-right: 1px solid var(--line); }
.hero-bottom div:last-child { border-right: 0; }
.hero-bottom strong { display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 500; color: var(--ivory); }
.hero-bottom span { font-size: .82rem; color: var(--text2); }

/* ── STACK MARQUEE ── */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); background: var(--bg2); }
.marquee-track { display: flex; gap: 36px; width: max-content; animation: marquee 45s linear infinite; }
.marquee-track span { font-family: var(--mono); font-size: .84rem; color: var(--text2); white-space: nowrap; display: flex; align-items: center; gap: 36px; }
.marquee-track span::after { content: '/'; color: var(--text3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── DASHBOARD VIRTUALI (viz.js) ── */
[data-viz] { min-height: 120px; }
.vz-win { background: linear-gradient(180deg, #11141a, #0c0e12); border: 1px solid var(--line2); border-radius: var(--r3); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); font-size: .82rem; position: relative; }
.vz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.vz-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2a2e37; flex: 0 0 auto; }
.vz-bar > i:nth-child(1) { background: #ff5f57; } .vz-bar > i:nth-child(2) { background: #febc2e; } .vz-bar > i:nth-child(3) { background: #28c840; }
.vz-title { font-family: var(--mono); font-size: .72rem; color: var(--text2); margin-left: 8px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-live { font-family: var(--mono); font-size: .66rem; color: var(--green); white-space: nowrap; }
.vz-live.warn { color: var(--amber); }
.vz-tag { font-family: var(--mono); font-size: .64rem; color: var(--cyan); border: 1px solid rgba(86,200,255,.3); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.vz-sim { font-family: var(--mono); font-size: .6rem; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.vz-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; color: var(--text3); }
.vz-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-foot b { color: var(--ivory); font-weight: 500; }
.vz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.vz-kpis div { padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
.vz-kpis div:last-child { border-right: 0; }
.vz-kpis small { display: block; font-size: .64rem; color: var(--text3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-kpis b { font-family: var(--mono); font-size: 1.02rem; font-weight: 500; color: var(--ivory); white-space: nowrap; }
.vz-table { padding: 6px 14px 10px; }
.vz-th, .vz-tr { display: grid; grid-template-columns: 64px 54px 1fr 108px; gap: 10px; align-items: center; padding: 7px 0; }
.vz-th { font-family: var(--mono); font-size: .62rem; color: var(--text3); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.vz-tr { border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--text); }
.vz-tr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-tr.in { animation: rowIn .5s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } }
.vz-tr .mono { color: var(--text2); font-size: .72rem; }
.vz-ch { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; color: var(--text2); }
.vz-ch.pdf { color: var(--purple); } .vz-ch.call { color: var(--cyan); }
.vz-pill { font-family: var(--mono); font-size: .64rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); text-align: center; white-space: nowrap; transition: all .3s; }
.vz-pill.a { color: var(--cyan); border-color: rgba(86,200,255,.35); }
.vz-pill.m { color: var(--amber); border-color: rgba(255,181,71,.4); }
.vz-pill.d { color: var(--purple); border-color: rgba(179,155,255,.4); }
.vz-pill.v { color: var(--green); border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.06); }
.vz-svg { display: block; width: 100%; height: auto; }
.vz-edge { stroke: var(--line2); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.vz-node rect { fill: var(--bg3); stroke: var(--line2); }
.vz-node text { fill: var(--text); font-family: var(--mono); font-size: 10px; }
.vz-node.ai rect { stroke: var(--red2); fill: rgba(255,61,71,.08); }
.vz-packet { fill: var(--green); }
.vz-log { padding: 4px 14px 10px; font-family: var(--mono); font-size: .7rem; color: var(--text2); min-height: 66px; }
.vz-log div { padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rowIn .4s; }
.vz-log span { color: var(--text3); } .vz-log b { color: var(--green); font-weight: 400; }
.vz-chart { padding: 8px 4px 0; }
.vz-grid { stroke: var(--line); }
.vz-tick { fill: var(--text3); font-family: var(--mono); font-size: 9px; }
.vz-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-line.fc { stroke: var(--red2); stroke-dasharray: 5 4; }
.vz-band { fill: rgba(255,61,71,.12); }
.vz-now { stroke: var(--text3); stroke-dasharray: 2 3; }
.vz-dot { fill: var(--red2); }
.vz-line.draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.vz-line.fc.draw { stroke-dasharray: 5 4; stroke-dashoffset: 0; opacity: 0; }
.vz-on .vz-line.draw { animation: draw 2.4s var(--ease) forwards; }
.vz-on .vz-line.fc.draw { animation: fadeInF 1s 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeInF { to { opacity: 1; } }
.vz-legend { display: flex; gap: 16px; align-items: center; padding: 8px 14px 10px; font-family: var(--mono); font-size: .66rem; color: var(--text2); flex-wrap: wrap; }
.vz-legend span:not(.vz-sim)::before { content: ''; display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }
.vz-legend .a::before { background: var(--cyan); } .vz-legend .b::before { background: var(--red2); } .vz-legend .c::before { height: 8px !important; background: rgba(255,61,71,.25); }
.vz-legend .vz-sim { margin-left: auto; }
.vz-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.vz-tile { background: #0e1116; padding: 12px 14px; min-width: 0; }
.vz-tile small { display: block; font-family: var(--mono); font-size: .62rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-tile b { font-family: var(--mono); font-size: 1.2rem; font-weight: 500; color: var(--ivory); display: block; }
.vz-tile em { font-style: normal; font-family: var(--mono); font-size: .64rem; color: var(--green); }
.vz-kgrid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 14px; padding: 14px; align-items: end; }
.vz-bars { display: flex; gap: 5px; align-items: flex-end; height: 92px; border-bottom: 1px solid var(--line); }
.vz-bars i { flex: 1; background: linear-gradient(180deg, var(--cyan), rgba(86,200,255,.2)); border-radius: 3px 3px 0 0; transition: height .9s var(--ease); }
.vz-bars i:nth-child(3n) { background: linear-gradient(180deg, var(--red2), rgba(255,61,71,.2)); }
.vz-ring { position: relative; text-align: center; }
.vz-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); display: block; margin: 0 auto; }
.vz-ring .bg, .vz-scores .bg { fill: none; stroke: var(--bg3); stroke-width: 7; }
.vz-ring .fg, .vz-scores .fg { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.vz-ring span { position: absolute; top: 28px; left: 0; right: 0; font-family: var(--mono); font-size: .9rem; color: var(--ivory); }
.vz-ring small, .vz-spark small { font-family: var(--mono); font-size: .62rem; color: var(--text3); }
.vz-spark svg { width: 100%; height: 60px; display: block; margin-top: 8px; }
.vz-agrid { display: grid; grid-template-columns: 1.6fr 1fr; }
.vz-normal { fill: rgba(61,220,151,.05); }
.vz-anom { fill: var(--red2); }
.vz-anom.pulse { fill: none; stroke: var(--red2); transform-box: fill-box; transform-origin: center; animation: anom 1.8s infinite; }
@keyframes anom { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.vz-scan { stroke: rgba(86,200,255,.5); stroke-width: 1; }
.vz-on .vz-scan { animation: scan 5s linear infinite; }
@keyframes scan { to { transform: translateX(520px); } }
.vz-alerts { border-left: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.vz-alerts div { border: 1px solid rgba(255,61,71,.25); background: rgba(255,61,71,.05); border-radius: 8px; padding: 8px 10px; }
.vz-alerts b { display: block; font-size: .74rem; color: var(--ivory); font-weight: 500; }
.vz-alerts span { font-family: var(--mono); font-size: .64rem; color: var(--text2); }
.vz-q { margin: 14px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); font-size: .84rem; color: var(--ivory); min-height: 46px; display: flex; gap: 10px; align-items: center; }
.vz-q .mono { color: var(--green); }
.vz-caret { display: inline-block; width: 7px; height: 1.05em; background: var(--green); vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
.vz-res { padding: 0 14px; display: flex; flex-direction: column; gap: 6px; }
.vz-r { display: grid; grid-template-columns: 26px 1fr auto 70px 34px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; opacity: 0; transform: translateY(6px); transition: all .4s var(--ease) calc(var(--d) * .15s); }
.vz-res.on .vz-r { opacity: 1; transform: none; }
.vz-r .mono { color: var(--cyan); font-size: .7rem; }
.vz-r b { font-weight: 500; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-r small { font-family: var(--mono); font-size: .64rem; color: var(--text3); }
.vz-sc { height: 4px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.vz-sc i { display: block; height: 100%; background: var(--green); }
.vz-r em { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--green); }
.vz-ans { margin: 10px 14px 14px; padding: 12px 14px; border-left: 2px solid var(--red2); background: rgba(255,61,71,.04); opacity: 0; transition: opacity .5s; }
.vz-ans.on { opacity: 1; }
.vz-ans small { font-family: var(--mono); font-size: .62rem; color: var(--text3); text-transform: uppercase; }
.vz-ans p { font-size: .8rem; color: var(--text); margin-top: 4px; }
.vz-ans sup { color: var(--cyan); font-family: var(--mono); }
.vz-web { margin: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); }
.vz-wnav { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.vz-wnav i { width: 18px; height: 18px; border-radius: 5px; background: var(--red); }
.vz-wnav span { height: 6px; width: 40px; border-radius: 4px; background: var(--bg3); }
.vz-wnav span:first-of-type { margin-left: auto; }
.vz-whero b { display: block; height: 14px; border-radius: 4px; background: #262a33; width: 70%; margin-bottom: 8px; }
.vz-whero b + b { width: 45%; }
.vz-whero s { display: inline-block; height: 18px; width: 90px; border-radius: 6px; background: var(--red); margin: 8px 0 14px; }
.vz-wcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vz-wcards i { height: 48px; border-radius: 6px; background: var(--bg3); }
.vz-scores { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 14px 14px; text-align: center; }
.vz-scores div { position: relative; }
.vz-scores svg { width: 52px; height: 52px; transform: rotate(-90deg); display: block; margin: 0 auto 4px; }
.vz-scores .bg, .vz-scores .fg { stroke-width: 4; }
.vz-scores b { position: absolute; top: 16px; left: 0; right: 0; font-family: var(--mono); font-size: .78rem; color: var(--green); font-weight: 500; }
.vz-scores small { font-size: .62rem; color: var(--text3); font-family: var(--mono); }
.vz-code .vz-editor { display: grid; grid-template-columns: 34px 1fr; min-height: 318px; }
.vz-gutter { padding: 14px 0; text-align: right; font-family: var(--mono); font-size: .72rem; line-height: 1.7; color: var(--text3); border-right: 1px solid var(--line); user-select: none; }
.vz-gutter span { display: block; padding-right: 8px; }
.vz-editor pre { padding: 14px 16px; font-family: var(--mono); font-size: .76rem; line-height: 1.7; color: #d7dae0; overflow: hidden; white-space: pre; }
.tk-k { color: var(--red2); } .tk-s { color: var(--green); } .tk-v { color: var(--cyan); } .tk-c { color: var(--text3); font-style: italic; }
.vz-term { border-top: 1px solid var(--line); background: #090a0d; font-family: var(--mono); font-size: .72rem; min-height: 136px; }
.vz-tbar { padding: 6px 14px; color: var(--text3); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.vz-term [data-term] { padding: 8px 14px 12px; color: var(--text2); }
.vz-term [data-term] div { padding: 2px 0; animation: rowIn .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-term .ok { color: var(--green); } .vz-term .warn { color: var(--amber); }

/* ── SERVIZI ── */
.services-list { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.svc-rows { border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.svc-row .num { font-family: var(--mono); font-size: .78rem; color: var(--text3); }
.svc-row h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); display: flex; align-items: center; gap: 14px; transition: color .2s; }
.svc-row h3 .ic { width: 22px; height: 22px; color: var(--text3); transition: color .2s; }
.svc-row p { color: var(--text2); font-size: .94rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; grid-column: 2 / 3; }
.svc-row .go { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--text2); transition: all .2s; }
.svc-row .go .ic { width: 15px; height: 15px; }
.svc-row .svc-meta { grid-column: 2 / 3; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.svc-row.active .num { color: var(--green); }
.svc-row.active h3 .ic { color: var(--red2); }
.svc-row.active p { max-height: 160px; opacity: 1; margin-top: -6px; }
.svc-row.active .svc-meta { max-height: 120px; opacity: 1; }
.svc-row.active .go, .svc-row:hover .go { background: var(--ivory); color: var(--bg); border-color: var(--ivory); }
.svc-visual { position: sticky; top: 96px; }
.svc-visual > [data-slot] { display: none; }
.svc-visual > [data-slot].on { display: block; animation: fadeIn .4s ease; }

/* ── PROGETTI ── */
.projects { border-top: 1px solid var(--line); }
.proj-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.proj { position: relative; border-radius: var(--r3); border: 1px solid var(--line); background: var(--bg2); cursor: pointer; text-align: left; padding: 0; color: inherit; display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s, transform .25s; font: inherit; }
.proj:hover { border-color: var(--line2); transform: translateY(-3px); }
.proj.w7 { grid-column: span 7; } .proj.w5 { grid-column: span 5; } .proj.w6 { grid-column: span 6; } .proj.w4 { grid-column: span 4; } .proj.w8 { grid-column: span 8; }
.proj .p-viz { padding: 18px 18px 0; position: relative; pointer-events: none; max-height: 340px; overflow: hidden; }
.proj .p-viz .vz-win { box-shadow: none; }
.proj .p-viz::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, var(--bg2)); }
.proj .p-body { padding: 6px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj .p-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: .72rem; color: var(--text3); }
.proj .p-cat { display: flex; align-items: center; gap: 8px; color: var(--green); }
.proj .p-cat .ic { width: 14px; height: 14px; }
.proj h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.proj p { color: var(--text2); font-size: .92rem; }
.proj .p-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.proj .p-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.proj .p-open { font-family: var(--mono); font-size: .74rem; color: var(--ivory); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.proj .p-open .ic { width: 14px; height: 14px; transition: transform .2s; }
.proj:hover .p-open .ic { transform: translateX(3px); }
.proj-note { margin-top: 22px; font-family: var(--mono); font-size: .72rem; color: var(--text3); }
.proj-note::before { content: '* '; color: var(--amber); }
.proj-modal { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(3,4,6,.82); backdrop-filter: blur(8px); padding: 24px; overflow-y: auto; }
.proj-modal.open { display: block; animation: fadeIn .2s ease; }
.pm-inner { max-width: 1000px; margin: 3vh auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r3); overflow: hidden; animation: popIn .3s var(--ease); }
.pm-hero { position: relative; padding: 60px 22px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.pm-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.pm-body { padding: 30px clamp(22px, 4vw, 44px) 40px; }
.pm-body h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 4px 0 16px; }
.pm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; margin: 26px 0; }
.pm-cols > div { background: var(--bg2); padding: 18px; }
.pm-cols h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--green); margin-bottom: 8px; letter-spacing: 0; }
.pm-cols h4::before { content: '## '; color: var(--text3); }
.pm-cols p { color: var(--text2); font-size: .92rem; }
.pm-stack { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { transform: translateY(16px); opacity: 0; } }

/* ── METODO ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: var(--bg2); }
.step { padding: 26px 24px 28px; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: 0; }
.step .st-num { font-family: var(--mono); font-size: .74rem; color: var(--green); display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.step .st-num::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 0 0 4px rgba(61,220,151,.1); }
.step .st-time { font-family: var(--mono); font-size: .7rem; color: var(--text3); display: block; margin-bottom: 8px; }
.step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step p { color: var(--text2); font-size: .9rem; }
.promise-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.promise { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r2); font-size: .86rem; color: var(--text2); background: var(--bg2); }
.promise .ic { width: 18px; height: 18px; color: var(--green); }

/* ── INSIGHTS ── */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.art-card { display: flex; flex-direction: column; gap: 12px; color: inherit; border: 1px solid var(--line); border-radius: var(--r3); padding: 12px 12px 20px; background: var(--bg2); transition: border-color .2s, transform .2s; }
.art-card:hover { border-color: var(--line2); transform: translateY(-3px); }
.art-card > :not(.a-img) { padding: 0 8px; }
.art-card .a-img { aspect-ratio: 16/10; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--bg3); }
.art-card .a-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.art-card:hover .a-img img { transform: scale(1.04); }
.art-card .a-badge { position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: .64rem; background: rgba(8,9,11,.8); backdrop-filter: blur(6px); padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line2); z-index: 1; }
.art-card .a-badge .ic { width: 12px; height: 12px; }
.art-card .a-badge.li { background: var(--li); border-color: transparent; color: #fff; }
.art-card .a-meta { font-family: var(--mono); font-size: .7rem; color: var(--text3); display: flex; gap: 12px; }
.art-card h3 { font-size: 1.25rem; transition: color .2s; }
.art-card:hover h3 { color: var(--red2); }
.art-card p { color: var(--text2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-card .a-more { font-family: var(--mono); font-size: .74rem; color: var(--ivory); display: flex; align-items: center; gap: 6px; margin-top: auto; }
.art-card .a-more .ic { width: 13px; height: 13px; }
.li-text-art { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 18px 16px; background: linear-gradient(160deg, #10141c, #0b0d11); position: relative; }
.li-text-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; }
.li-text-art q { position: relative; font-family: var(--mono); font-size: .86rem; line-height: 1.55; color: var(--ivory); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.li-text-art q::before { content: '> '; color: var(--green); }
.li-text-art q::after { content: none; }
.li-text-art .who { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; color: var(--text2); }
.li-text-art .who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.post-embed { border-radius: var(--r2); overflow: hidden; background: #fff; margin-top: 10px; }
.post-embed iframe { width: 100%; border: 0; display: block; min-height: 520px; }
.posts-empty { grid-column: 1 / -1; text-align: center; padding: 56px 24px; border: 1px dashed var(--line2); border-radius: var(--r3); }
.posts-empty h3 { margin-bottom: 10px; font-size: 1.5rem; }
.posts-empty p { color: var(--text2); max-width: 480px; margin: 0 auto 24px; }
.skeleton { border-radius: var(--r3); background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2)); background-size: 200% 100%; animation: sk 1.6s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.newsletter-box { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 28px 30px; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--bg2); }
.newsletter-box .nb-bg { display: none; }
.newsletter-box h3 { font-size: 1.5rem; margin-bottom: 6px; }
.newsletter-box h3::before { content: '$ subscribe --newsletter'; font-family: var(--mono); font-size: .76rem; color: var(--green); font-weight: 400; letter-spacing: 0; display: block; margin-bottom: 8px; }
.newsletter-box p { color: var(--text2); }
.subscribe-form { display: flex; gap: 8px; }
.subscribe-form input[type=email] { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; outline: none; padding: 12px 14px; font-family: var(--mono); font-size: .86rem; color: var(--ivory); }
.subscribe-form input:focus { border-color: var(--cyan); }
.subscribe-form input::placeholder { color: var(--text3); }
.subscribe-form button { background: var(--ivory); color: var(--bg); border: 0; border-radius: 8px; padding: 0 16px; font-family: var(--mono); font-size: .8rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.subscribe-form button:hover { background: #fff; }
.subscribe-form button .ic { width: 14px; height: 14px; }
.subscribe-msg { font-size: .82rem; margin-top: 10px; min-height: 1.2em; }
.subscribe-legal { font-size: .72rem; color: var(--text3); margin-top: 6px; }
.subscribe-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ── CHI SIAMO (studio) ── */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-copy h2 { margin-bottom: 20px; }
.about-copy > p { color: var(--text2); margin-bottom: 16px; font-size: 1.04rem; max-width: 620px; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 0; }
.fact { padding: 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg2); display: flex; gap: 14px; align-items: flex-start; }
.fact .ic { width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
.fact strong { display: block; font-size: .95rem; color: var(--ivory); font-weight: 600; }
.fact span { font-size: .84rem; color: var(--text2); }
.contact-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); font-family: var(--mono); font-size: .76rem; transition: border-color .2s; }
.chip-link:hover { border-color: var(--text3); }
.chip-link .ic { width: 15px; height: 15px; color: var(--green); }
.founder-card { border: 1px solid var(--line2); border-radius: var(--r3); background: var(--bg2); overflow: hidden; }
.founder-card .fc-head { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.founder-card .fc-head img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; object-position: center 20%; border: 1px solid var(--line2); }
.founder-card .fc-head strong { display: block; font-size: 1.05rem; color: var(--ivory); }
.founder-card .fc-head span { font-family: var(--mono); font-size: .74rem; color: var(--text2); }
.founder-card pre { padding: 18px 20px; font-family: var(--mono); font-size: .78rem; line-height: 1.8; color: var(--text2); white-space: pre-wrap; }
.founder-card pre .k { color: var(--cyan); } .founder-card pre .s { color: var(--green); } .founder-card pre .c { color: var(--text3); }
.founder-card .fc-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

/* ── CONTATTI ── */
.contact { border-top: 1px solid var(--line); }
.contact-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-copy h2 { margin-bottom: 18px; }
.contact-copy > p { color: var(--text2); margin-bottom: 30px; font-size: 1.04rem; }
.contact-list { list-style: none; border: 1px solid var(--line); border-radius: var(--r3); background: var(--bg2); overflow: hidden; }
.contact-list li { display: flex; gap: 14px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--text2); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list li .ic { width: 18px; height: 18px; color: var(--green); }
.contact-list a { color: var(--ivory); }
.contact-list a:hover { color: var(--green); }
.qform { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r3); padding: clamp(22px, 3.4vw, 36px); position: relative; }
.qform::before { content: 'request.form'; position: absolute; top: -10px; left: 18px; font-family: var(--mono); font-size: .66rem; color: var(--text3); background: var(--bg); padding: 0 8px; }
.qprogress { display: flex; gap: 6px; margin-bottom: 26px; }
.qprogress span { flex: 1; height: 3px; border-radius: 3px; background: var(--bg3); transition: background .3s; }
.qprogress span.on { background: var(--green); }
.qstep { display: none; animation: fadeIn .3s ease; }
.qstep.active { display: block; }
.qstep h3 { font-size: 1.6rem; margin-bottom: 4px; }
.qstep .q-sub { color: var(--text2); font-size: .9rem; margin-bottom: 20px; }
.q-label { display: block; font-family: var(--mono); font-size: .72rem; color: var(--text2); margin: 20px 0 10px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line2); background: var(--bg); font-size: .88rem; transition: border-color .15s, background .15s; height: 100%; }
.choice span .ic { width: 17px; height: 17px; color: var(--text3); }
.choice span b { font-weight: 500; }
.choice input:checked + span { border-color: var(--green); background: rgba(61,220,151,.06); color: var(--ivory); }
.choice input:checked + span .ic { color: var(--green); }
.choice input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choice:hover span { border-color: var(--text3); }
.field { display: block; margin-top: 16px; }
.field > span { display: block; font-family: var(--mono); font-size: .72rem; color: var(--text2); margin-bottom: 6px; }
.field > span i { color: var(--red2); font-style: normal; }
.field input, .field textarea { width: 100%; padding: 11px 13px; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; outline: none; transition: border-color .2s; font-size: .95rem; color: var(--ivory); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--cyan); }
.field input::placeholder, .field textarea::placeholder { color: var(--text3); }
.field.invalid input, .field.invalid textarea { border-color: var(--amber); }
.field .err { display: none; font-size: .74rem; color: var(--amber); margin-top: 5px; font-family: var(--mono); }
.field.invalid .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.char-count { text-align: right; font-size: .68rem; color: var(--text3); margin-top: 4px; font-family: var(--mono); }
.privacy-row { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--text2); margin-top: 18px; cursor: pointer; }
.privacy-row input { margin-top: 3px; accent-color: var(--red); width: 16px; height: 16px; flex: 0 0 auto; }
.privacy-row a { text-decoration: underline; text-underline-offset: 3px; }
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; }
.q-back { background: none; border: 0; color: var(--text2); cursor: pointer; font-family: var(--mono); font-size: .78rem; }
.q-back:hover { color: var(--ivory); }
.q-note { font-family: var(--mono); font-size: .7rem; color: var(--text3); margin-top: 16px; display: flex; gap: 8px; align-items: center; }
.q-note .ic { width: 13px; height: 13px; }
.q-summary { border: 1px dashed var(--line2); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: .76rem; color: var(--text2); margin-top: 18px; }
.q-summary b { color: var(--green); font-weight: 400; }
.q-alert { display: none; margin-top: 14px; padding: 11px 13px; border-radius: 8px; font-size: .86rem; border: 1px solid rgba(255,181,71,.4); color: var(--amber); background: rgba(255,181,71,.05); }
.q-alert.show { display: block; }
.q-alert a { color: var(--ivory); text-decoration: underline; }
.q-success { display: none; text-align: center; padding: 34px 10px; }
.q-success.show { display: block; animation: popIn .4s var(--ease); }
.q-success .ok-ic { width: 64px; height: 64px; border-radius: 14px; margin: 0 auto 20px; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green); background: rgba(61,220,151,.08); }
.q-success .ok-ic .ic { width: 28px; height: 28px; }
.q-success h3 { font-size: 1.9rem; margin-bottom: 8px; }
.q-success p { color: var(--text2); }
.q-success .ref { font-family: var(--mono); font-size: .8rem; color: var(--green); border: 1px solid var(--line2); padding: 6px 12px; border-radius: 8px; display: inline-block; margin: 16px 0; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LAB ── */
.lab { border-top: 1px solid var(--line); }
.lab-shell { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.lab-intro { position: sticky; top: 96px; }
.lab-intro h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.lab-intro p { color: var(--text2); margin: 16px 0 22px; }
.lab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.lab-stats div { padding: 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg2); }
.lab-stats strong { font-family: var(--mono); font-size: 1.4rem; font-weight: 500; color: var(--ivory); display: block; }
.lab-stats span { font-size: .76rem; color: var(--text2); }
.games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.game-card { position: relative; text-align: left; cursor: pointer; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); color: inherit; padding: 18px; display: flex; flex-direction: column; gap: 6px; min-height: 170px; transition: border-color .2s, transform .2s; font: inherit; }
.game-card:hover { border-color: var(--line2); transform: translateY(-3px); }
.game-card .gc-art { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--green); margin-bottom: auto; background: var(--bg); }
.game-card .gc-art .ic { width: 18px; height: 18px; }
.game-card h3 { font-size: 1.1rem; margin-top: 18px; }
.game-card p { font-size: .8rem; color: var(--text2); }
.game-card .gc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-family: var(--mono); font-size: .66rem; }
.game-card .gc-best { color: var(--text3); }
.game-card .gc-best.has { color: var(--green); }
.game-card .gc-play { color: var(--ivory); display: flex; align-items: center; gap: 5px; }
.game-card .gc-play .ic { width: 11px; height: 11px; }
.game-card .gc-badge { position: absolute; top: 18px; right: 16px; font-family: var(--mono); font-size: .62rem; color: var(--red2); }
.game-card.featured { grid-column: span 2; background: radial-gradient(circle at 100% 0%, rgba(255,61,71,.14), transparent 60%), var(--bg2); }
.game-card.featured h3 { font-size: 1.6rem; }
.game-card.gc-cta { border-style: dashed; }
.game-card.gc-cta h3 { color: var(--green); }
.lab-page-grid { grid-template-columns: repeat(4, 1fr) !important; }
.game-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(3,4,6,.85); backdrop-filter: blur(8px); }
.game-modal.open { display: flex; animation: fadeIn .2s ease; }
.game-modal-inner { width: min(560px, 100%); max-height: calc(100svh - 32px); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r3); box-shadow: 0 40px 120px rgba(0,0,0,.7); overflow: hidden; animation: popIn .3s var(--ease); }
.gm-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.gm-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gm-icon { color: var(--green); display: grid; } .gm-icon .ic { width: 18px; height: 18px; }
.gm-name { font-family: var(--mono); font-size: .95rem; color: var(--ivory); }
.gm-best { font-family: var(--mono); font-size: .66rem; color: var(--green); white-space: nowrap; }
.gm-tools { display: flex; gap: 6px; }
.gm-body { flex: 1; overflow-y: auto; padding: 20px; }
.gm-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gm-nav { display: flex; gap: 6px; }
.gm-score { font-family: var(--mono); font-size: .76rem; color: var(--text2); text-align: center; margin-top: 12px; }
.gm-score b { color: var(--ivory); }
.gm-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gm-btn { font-family: var(--mono); font-size: .74rem; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg); color: var(--text2); cursor: pointer; transition: .2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.gm-btn .ic { width: 13px; height: 13px; }
.gm-btn:hover { border-color: var(--text3); color: var(--ivory); }
.gm-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.gm-btn.primary:hover { background: var(--red2); }
.gm-hint { font-family: var(--mono); font-size: .68rem; color: var(--text3); text-align: center; margin-top: 10px; }
.gm-canvas { display: block; margin: 0 auto; border-radius: var(--r2); border: 1px solid var(--line); max-width: 100%; touch-action: none; }
.gm-record { text-align: center; font-family: var(--mono); font-size: .76rem; color: var(--green); min-height: 1.2em; padding: 0 14px 6px; }
#reactionZone { height: 160px; border-radius: var(--r2); border: 1px solid var(--line2); display: grid; place-items: center; cursor: pointer; font-family: var(--mono); font-size: .9rem; color: var(--text2); transition: background .1s; user-select: none; text-align: center; padding: 10px; }
#reactionZone.rdy { background: rgba(255,181,71,.07); border-color: rgba(255,181,71,.35); color: var(--amber); }
#reactionZone.go { background: rgba(61,220,151,.16); border-color: var(--green); color: #fff; font-size: 1.6rem; }
#reactionZone.early { background: var(--red-soft); border-color: rgba(255,61,71,.45); color: var(--red2); }
#typingDisplay { font-family: var(--mono); font-size: .88rem; line-height: 1.9; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px; min-height: 76px; word-break: break-all; }
.tc { color: var(--green); } .tw { color: var(--red2); background: var(--red-soft); } .tp { color: var(--text3); }
#typingInput, #numInput { width: 100%; margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r2); font-family: var(--mono); font-size: .9rem; outline: none; color: var(--ivory); }
#numInput { text-align: center; font-size: 1.3rem; letter-spacing: .2em; }
#typingInput:focus, #numInput:focus { border-color: var(--cyan); }
.typing-stats { font-family: var(--mono); font-size: .74rem; color: var(--text2); margin-top: 10px; text-align: center; }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.mem-card { aspect-ratio: 1; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--bg); cursor: pointer; display: grid; place-items: center; font-size: 1.5rem; transition: transform .15s, background .15s; user-select: none; color: inherit; }
.mem-card:hover:not(.matched) { background: var(--bg3); }
.mem-card.flipped { border-color: var(--cyan); background: rgba(86,200,255,.08); }
.mem-card.matched { border-color: var(--green); background: rgba(61,220,151,.08); cursor: default; }
.mem-back { color: var(--text3); font-family: var(--mono); } .mem-front { display: none; }
.mem-card.flipped .mem-front, .mem-card.matched .mem-front { display: block; }
.mem-card.flipped .mem-back, .mem-card.matched .mem-back { display: none; }
#numDisplay { font-family: var(--mono); font-size: 2rem; letter-spacing: .14em; text-align: center; padding: 22px; background: var(--bg); border-radius: var(--r2); border: 1px solid var(--line); min-height: 90px; display: grid; place-items: center; word-break: break-all; color: var(--ivory); }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 0 auto; }
.ttt-grid button { aspect-ratio: 1; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--bg); cursor: pointer; font-family: var(--mono); font-size: 2.2rem; transition: background .15s; }
.ttt-grid button:hover:not(:disabled) { background: var(--bg3); }
.simon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
.simon-grid button { aspect-ratio: 1; border-radius: var(--r3); border: 0; opacity: .45; cursor: pointer; transition: opacity .12s, transform .1s; }
.math-problem { font-family: var(--mono); font-size: 2.4rem; text-align: center; padding: 24px; background: var(--bg); border-radius: var(--r2); border: 1px solid var(--line); color: var(--ivory); }

/* ── COMMAND PALETTE ── */
.cmdk { position: fixed; inset: 0; z-index: 4000; display: none; background: rgba(3,4,6,.7); backdrop-filter: blur(6px); padding: 12vh 16px 16px; }
.cmdk.open { display: block; animation: fadeIn .15s ease; }
.cmdk-box { max-width: 580px; margin: 0 auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r3); box-shadow: 0 40px 120px rgba(0,0,0,.7); overflow: hidden; animation: popIn .2s var(--ease); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-in .ic { color: var(--text3); }
.cmdk-in input { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono); font-size: .92rem; color: var(--ivory); }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-group { font-family: var(--mono); font-size: .62rem; color: var(--text3); text-transform: uppercase; letter-spacing: .1em; padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--text); }
.cmdk-item .ic { width: 16px; height: 16px; color: var(--text3); }
.cmdk-item.sel { background: var(--bg3); }
.cmdk-item.sel .ic { color: var(--green); }
.cmdk-item small { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--text3); }
.cmdk-empty { padding: 20px; text-align: center; font-family: var(--mono); font-size: .8rem; color: var(--text3); }
.cmdk-foot { display: flex; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .66rem; color: var(--text3); }

/* ── FOOTER ── */
.site-footer { border-top: 1px solid var(--line); padding: 70px 0 30px; font-size: .88rem; color: var(--text2); background: var(--bg2); }
.footer-big { font-family: var(--serif); font-weight: 600; letter-spacing: -.04em; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; color: var(--ivory); margin-bottom: 50px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.footer-big em { font-style: normal; color: var(--red2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-top: 40px; border-top: 1px solid var(--line); }
.footer-grid h4 { font-family: var(--mono); font-size: .7rem; font-weight: 500; color: var(--text3); margin-bottom: 14px; letter-spacing: 0; }
.footer-grid h4::before { content: '// '; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a:hover { color: var(--ivory); }
.footer-brand p { margin-top: 14px; max-width: 300px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .7rem; color: var(--text3); }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.sys-status { display: inline-flex; align-items: center; gap: 8px; }
.sys-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ── COOKIE BAR ── */
.cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 2500; max-width: 420px; display: none; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r3); background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.cookie-bar.show { display: flex; animation: popIn .3s var(--ease); }
.cookie-bar p { font-size: .82rem; color: var(--text2); }
.cookie-bar p a { text-decoration: underline; color: var(--ivory); }
.cookie-bar .cb-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── PAGINE INTERNE ── */
.page-hero { padding: 140px 0 40px; position: relative; }
.page-hero .ph-bg { display: none; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -.045em; margin-bottom: 18px; line-height: 1; }
.breadcrumb { font-family: var(--mono); font-size: .74rem; color: var(--text3); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--ivory); }
.breadcrumb::before { content: '$ cd '; color: var(--green); }
.page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.page-hero-grid > * { min-width: 0; }
.profile-hero { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.profile-hero .ph { aspect-ratio: 4/5; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line2); }
.profile-hero .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.profile-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.profile-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.profile-side .contact-chips { flex-direction: column; align-items: stretch; }
.profile-side h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--green); margin-bottom: 12px; letter-spacing: 0; }
.profile-side h4::before { content: '// '; color: var(--text3); }
.skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-list li { list-style: none; display: flex; justify-content: space-between; font-size: .9rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lang-list li:last-child { border: 0; }
.lang-list li span:last-child { color: var(--text3); font-family: var(--mono); font-size: .76rem; }
.timeline { border-left: 1px solid var(--line2); margin-left: 6px; }
.tl-item { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 0 0 34px 26px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text3); }
.tl-item.current::before { border-color: var(--green); box-shadow: 0 0 0 4px rgba(61,220,151,.12); }
.tl-meta { font-family: var(--mono); font-size: .72rem; color: var(--text3); padding-top: 3px; }
.tl-item.current .tl-meta { color: var(--green); }
.tl-item h3 { font-size: 1.25rem; }
.tl-org { font-family: var(--mono); font-size: .8rem; color: var(--red2); margin: 4px 0 10px; }
.tl-item ul { padding-left: 18px; color: var(--text2); font-size: .92rem; display: flex; flex-direction: column; gap: 5px; }
.block-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 70px 0 26px; }
.block-title::before { content: '# '; font-family: var(--mono); color: var(--text3); font-weight: 400; }
.block-title:first-child { margin-top: 0; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); padding: 22px; }
.project .p-meta { font-family: var(--mono); font-size: .7rem; color: var(--green); }
.project h3 { font-size: 1.15rem; margin: 8px 0; }
.project p { font-size: .88rem; color: var(--text2); }
.project .s-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ── BLOG ── */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-list .art-card.big { grid-column: span 3; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 12px; }
.blog-list .art-card.big > :not(.a-img) { padding: 0; }
.blog-list .art-card.big h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-bar a { font-family: var(--mono); font-size: .76rem; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line2); color: var(--text2); background: var(--bg2); }
.filter-bar a.on, .filter-bar a:hover { border-color: var(--text3); color: var(--ivory); }
.post-hero { padding: 140px 0 32px; }
.post-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.045em; max-width: 960px; margin-bottom: 22px; line-height: 1.04; }
.post-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: .74rem; color: var(--text3); }
.post-meta .author { display: flex; align-items: center; gap: 10px; color: var(--ivory); }
.post-meta .author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.post-cover { border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 2/1; margin-bottom: 56px; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-layout { display: grid; grid-template-columns: 1fr minmax(0, 720px) 1fr; gap: 40px; }
.post-layout > .prose { grid-column: 2; }
.prose { font-size: 1.08rem; line-height: 1.8; color: #cfd3da; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: 1.9rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h4 { font-size: 1.05rem; margin-top: 1.4em; }
.prose a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--red2); text-underline-offset: 4px; }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose blockquote { border-left: 2px solid var(--green); padding: 4px 0 4px 22px; font-size: 1.2rem; color: var(--ivory); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--r2); border: 1px solid var(--line); width: 100%; }
.prose figcaption { font-family: var(--mono); font-size: .74rem; color: var(--text3); margin-top: 8px; text-align: center; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--bg3); padding: 2px 6px; border-radius: 5px; color: var(--green); }
.prose pre { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2); padding: 18px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; color: #d7dae0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }
.post-foot { grid-column: 2; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .nav-links, .cmdk-btn { display: none; }
  .hamburger { display: flex; }
  .nav-right .btn-primary { display: none; }
  .lab-shell { grid-template-columns: 1fr; gap: 30px; }
  .lab-intro { position: static; }
  .games-grid, .lab-page-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .services-list { grid-template-columns: 1fr; }
  .svc-visual { position: static; }
  .proj.w7, .proj.w5, .proj.w6, .proj.w4, .proj.w8 { grid-column: span 12; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .promise-row { grid-template-columns: repeat(2, 1fr); }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .insights-grid, .blog-list { grid-template-columns: repeat(2, 1fr); }
  .blog-list .art-card.big { grid-column: span 2; }
}
@media (max-width: 860px) {
  .hero-grid, .about-grid, .contact-shell, .section-head, .newsletter-box, .page-hero-grid { grid-template-columns: 1fr; }
  .section-head { gap: 14px; }
  .hero { padding-top: 110px; }
  .hero-bottom { grid-template-columns: 1fr 1fr; }
  .hero-bottom div:nth-child(2) { border-right: 0; }
  .hero-bottom div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero .ph { max-width: 220px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .pm-cols { grid-template-columns: 1fr; }
  .blog-list .art-card.big { grid-template-columns: 1fr; gap: 14px; }
  .post-layout { grid-template-columns: 1fr; }
  .post-layout > .prose, .post-foot { grid-column: 1; }
  .vz-agrid { grid-template-columns: 1fr; }
  .vz-alerts { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
  .brand small { display: none; }
  .steps, .promise-row, .fact-grid, .project-grid, .insights-grid, .blog-list { grid-template-columns: 1fr; }
  .blog-list .art-card.big { grid-column: auto; }
  .step { border-right: 0 !important; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
  .games-grid, .lab-page-grid { grid-template-columns: 1fr 1fr !important; }
  .game-card { padding: 14px; min-height: 150px; }
  .game-card p { display: none; }
  .game-card.featured { grid-column: 1 / -1; }
  .choice-grid, .choice-grid.cols-3, .field-row { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 34px 1fr auto; gap: 12px; }
  .svc-row h3 .ic { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .cookie-bar { left: 10px; right: 10px; max-width: none; }
  .game-modal { padding: 0; }
  .game-modal-inner { max-height: 100svh; height: 100svh; border-radius: 0; width: 100%; }
  .vz-kpis, .vz-tiles { grid-template-columns: 1fr 1fr; }
  .vz-kpis div:nth-child(2) { border-right: 0; }
  .vz-kpis div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vz-th, .vz-tr { grid-template-columns: 50px 36px 1fr 92px; gap: 6px; }
  .vz-kgrid { grid-template-columns: 1fr 1fr; }
  .vz-bars { grid-column: 1 / -1; }
  .vz-r { grid-template-columns: 22px 1fr 50px 30px; }
  .vz-r small { display: none; }
  .vz-editor pre { font-size: .64rem; }
  .vz-code .vz-editor { min-height: 0; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { padding: 12px; justify-content: center; }
  .post-cover { aspect-ratio: 16/10; }
  .hero-bottom div { padding: 16px; }
}

/* ── dettagli dashboard v5 ── */
.vz-mini { display: block; width: 100%; height: 16px; margin-top: 6px; }
.vz-mini path { fill: none; stroke: var(--cyan); stroke-width: 1.4; opacity: .8; vector-effect: non-scaling-stroke; }
.vz-tile .vz-mini path { stroke: var(--green); }
.vz-th, .vz-tr { grid-template-columns: 58px 44px 1fr 70px 100px; }
.vz-conf { display: flex; align-items: center; gap: 6px; }
.vz-conf i { display: block; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--amber), var(--green)); flex: 0 0 auto; max-width: 36px; }
.vz-conf em { font-style: normal; font-family: var(--mono); font-size: .64rem; color: var(--text2); }
.vz-draft { margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--line); border-left: 2px solid var(--purple); border-radius: 8px; background: rgba(179,155,255,.04); }
.vz-draft small { font-family: var(--mono); font-size: .62rem; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.vz-draft p { font-size: .78rem; color: var(--text); margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-cite { font-family: var(--mono); font-size: .62rem; color: var(--cyan); }
.vz-node text.sub { fill: var(--text3); font-size: 8px; }
.vz-node.hu rect { stroke: var(--purple); }
.vz-node .cnt rect { fill: var(--bg); stroke: var(--green); stroke-width: 1; }
.vz-node .cnt text { fill: var(--green); font-size: 8px; }
.vz-log b.ok { color: var(--green); } .vz-log b.warn { color: var(--amber); }
.vz-tabs { display: flex; gap: 4px; align-items: center; padding: 10px 14px 0; }
.vz-tabs button { font-family: var(--mono); font-size: .66rem; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line2); background: none; color: var(--text2); cursor: pointer; }
.vz-tabs button.on { background: var(--bg3); color: var(--ivory); border-color: var(--text3); }
.vz-tabs-r { margin-left: auto; font-family: var(--mono); font-size: .6rem; color: var(--text3); }
.vz-chartwrap { position: relative; }
.vz-cross, .vz-hdot { opacity: 0; transition: opacity .15s; }
.vz-cross { stroke: var(--text3); stroke-dasharray: 2 2; }
.vz-hdot { fill: var(--ivory); stroke: var(--bg); stroke-width: 2; }
.vz-hit { fill: transparent; cursor: crosshair; }
.vz-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: var(--bg); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 9px; font-family: var(--mono); font-size: .66rem; color: var(--ivory); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.vz-tip span { color: var(--text3); }
.vz-hover .vz-cross, .vz-hover .vz-hdot, .vz-hover .vz-tip { opacity: 1; }
.vz-line.fc { transition: d .6s var(--ease); }
.vz-errs { display: flex; align-items: flex-end; gap: 12px; padding: 4px 14px 0; }
.vz-errs small { font-family: var(--mono); font-size: .6rem; color: var(--text3); white-space: nowrap; }
.vz-errs div { flex: 1; display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.vz-errs i { flex: 1; background: rgba(86,200,255,.35); border-radius: 2px 2px 0 0; }
.vz-cap { display: block; font-family: var(--mono); font-size: .62rem; color: var(--text3); margin-bottom: 6px; }
.vz-months { display: flex; gap: 5px; margin-top: 4px; }
.vz-months span { flex: 1; text-align: center; font-family: var(--mono); font-size: .54rem; color: var(--text3); }
.vz-feed { border-top: 1px solid var(--line); padding: 6px 14px; font-family: var(--mono); font-size: .68rem; color: var(--text2); }
.vz-feed div { display: flex; gap: 10px; padding: 3px 0; animation: rowIn .4s; white-space: nowrap; overflow: hidden; }
.vz-feed span { color: var(--text3); } .vz-feed b { color: var(--cyan); font-weight: 400; min-width: 52px; } .vz-feed b.warn { color: var(--amber); }
.vz-thr { stroke: rgba(61,220,151,.35); stroke-dasharray: 4 3; }
.vz-tick.an { fill: var(--red2); }
.vz-alerts div { position: relative; animation: rowIn .4s; }
.vz-alerts div.sev-md { border-color: rgba(255,181,71,.3); background: rgba(255,181,71,.05); }
.vz-alerts div.sev-lo { border-color: var(--line2); background: transparent; }
.vz-alerts em { position: absolute; top: 8px; right: 10px; font-style: normal; font-family: var(--mono); font-size: .58rem; color: var(--text3); }
.vz-r > div { min-width: 0; }
.vz-snip { display: block; font-family: var(--sans) !important; font-size: .66rem !important; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .64rem; color: var(--text3); }
.vz-meta b { color: var(--ivory); font-weight: 500; }
.vz-ftabs { display: flex; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; }
.vz-ftabs span { padding: 7px 14px; color: var(--text3); border-right: 1px solid var(--line); }
.vz-ftabs span.on { color: var(--ivory); background: rgba(255,255,255,.03); box-shadow: inset 0 -2px 0 var(--red2); }
.vz-status { display: flex; gap: 14px; padding: 5px 14px; background: rgba(227,6,19,.12); border-top: 1px solid var(--line); font-family: var(--mono); font-size: .62rem; color: var(--text2); }
.vz-status .r { margin-left: auto; }
@media (max-width: 600px) {
  .vz-th, .vz-tr { grid-template-columns: 48px 34px 1fr 82px; }
  .vz-th span:nth-child(4), .vz-tr .vz-conf { display: none; }
  .vz-tabs-r, .vz-status .r { display: none; }
}

/* ── v6: ritmo verticale, founder, mobile ── */
:root { --sec: clamp(64px, 8vw, 112px); }
.hero-meta { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin-top: 26px; }
.hero-meta .hero-cmd { margin-top: 0; }
.hero-founder { display: inline-flex; align-items: center; gap: 12px; padding: 5px 16px 5px 5px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255,255,255,.025); color: inherit; transition: border-color .2s, background .2s; }
.hero-founder:hover { border-color: var(--text3); background: rgba(255,255,255,.05); }
.hero-founder img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 1px solid var(--line2); display: block; }
.hero-founder strong { display: block; font-size: .86rem; font-weight: 600; color: var(--ivory); line-height: 1.25; }
.hero-founder small { display: block; font-family: var(--mono); font-size: .68rem; color: var(--text2); }

/* founder card con ritratto grande, stessa altezza della colonna testo */
.about-grid { align-items: stretch; }
.founder-card { display: flex; flex-direction: column; }
.fc-photo { position: relative; flex: 1 1 auto; min-height: 380px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg3); }
.fc-photo picture, .fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-photo img { object-fit: cover; object-position: center 6%; filter: saturate(.92) brightness(.94) contrast(1.04); }
.fc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0) 55%, rgba(8,9,11,.88) 100%); pointer-events: none; }
.fc-tag { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; color: var(--ivory); background: rgba(8,9,11,.72); backdrop-filter: blur(6px); border: 1px solid var(--line2); border-radius: 7px; padding: 5px 10px; }
.fc-name { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; }
.fc-name strong { display: block; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.fc-name span { font-family: var(--mono); font-size: .74rem; color: var(--text2); }
.founder-card pre { flex: none; }

/* insights: la griglia si adatta al numero di card */
@media (min-width: 601px) {
  .insights-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .insights-grid[data-count="1"] { grid-template-columns: minmax(0, 560px); }
  .insights-grid[data-count="2"] .a-img { aspect-ratio: 2 / 1; }
}
.art-card h3 { line-height: 1.25; }

@media (max-width: 1100px) {
  .svc-rows .svc-visual { margin: 0 0 22px; }
  .svc-row.active { border-bottom-color: transparent; }
}
@media (max-width: 860px) {
  .fc-photo { flex: none; min-height: 0; aspect-ratio: 4 / 4.2; max-height: 560px; }
  .hero-cmd { display: none; }
  .hero-grid { gap: 36px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 96px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 2.9rem); }
  .hero .lead { font-size: 1rem; }
  .hero-actions > a { flex: 1 1 auto; justify-content: center; }
  .hero-bottom { margin-top: 36px; }
  .hero-bottom strong { font-size: 1rem; word-break: break-word; }
  .hero-bottom span { font-size: .76rem; line-height: 1.45; display: block; margin-top: 4px; }
  .section-head { margin-bottom: 28px; }
  .section-head h2, section h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .svc-row { padding: 18px 0; }
  .svc-row h3 { font-size: 1.12rem; }
  .vz-ftabs span { padding: 6px 10px; }
  .vz-term [data-term] div, .vz-term > div:last-child { font-size: .62rem; }
  .fc-photo { aspect-ratio: 1 / 1.1; }
  .fc-name strong { font-size: 1.2rem; }
  .founder-card pre { font-size: .72rem; padding: 14px 16px; }
  .fc-foot { padding: 12px 16px; }
  .newsletter-box { padding: 22px 18px; }
  .footer-grid { gap: 26px; }
}
@media (max-width: 600px) {
  .other-grid > .other:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .other-grid > .other:nth-child(5):last-child { grid-column: span 2; }
}

/* ── v7: spaziatura, servizi "scopri di più", founder senza tagli ── */
:root { --sec: clamp(52px, 6vw, 84px); }
.section-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.marquee + section { padding-top: clamp(56px, 6vw, 84px); }
.hero { padding-bottom: 28px; }
.hero-bottom { margin-top: 48px; }

/* servizi */
.svc-row .go { background: transparent; cursor: pointer; padding: 0; }
.svc-row .go:hover { background: var(--red); border-color: var(--red); color: #fff; }
.svc-row .svc-meta { flex-direction: column; align-items: stretch; gap: 14px; }
.svc-row.active .svc-meta { max-height: 220px; }
.svc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-acts { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-bottom: 2px; }
.svc-acts .btn-primary .ic { width: 14px; height: 14px; }
.svc-visual > [data-slot] { position: relative; }
.svc-expand { margin: 10px 0 0 auto; display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line2); border-radius: 7px; padding: 6px 11px; font-family: var(--mono); font-size: .7rem; color: var(--text2); cursor: pointer; transition: all .2s; }
.svc-expand:hover { color: var(--ivory); border-color: var(--text3); }
.svc-expand .ic { width: 13px; height: 13px; }

/* modale servizio */
.proj-modal.pm-svc .pm-inner { max-width: 1120px; }
.proj-modal.pm-svc .pm-hero { padding: 58px clamp(16px, 3vw, 34px) 26px; }
.pm-svc .pm-viz .vz-win { font-size: 1.04em; }
.sm-explain { margin: 24px 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); padding: 18px 20px; }
.sm-explain h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--green); margin-bottom: 10px; letter-spacing: 0; }
.sm-explain h4::before { content: '## '; color: var(--text3); }
.sm-explain ul { list-style: none; padding: 0; margin: 0; counter-reset: sx; display: grid; gap: 10px; }
.sm-explain li { counter-increment: sx; display: grid; grid-template-columns: 28px 1fr; color: var(--text); font-size: .95rem; line-height: 1.5; }
.sm-explain li::before { content: counter(sx, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--text3); padding-top: 3px; }
.sm-acts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sm-note { margin-top: 18px; font-family: var(--mono); font-size: .68rem; color: var(--text3); }

/* founder: foto intera 4:5, mai tagliata */
@media (min-width: 861px) { .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.fc-photo { flex: none; min-height: 0; aspect-ratio: 4 / 5; max-height: none; }
.fc-photo img { object-position: center top; }
.fc-photo::after { background: linear-gradient(180deg, rgba(8,9,11,0) 70%, rgba(8,9,11,.82) 100%); }
.founder-card pre { padding: 16px 20px; }

@media (max-width: 860px) {
  .fc-photo { aspect-ratio: 4 / 5; max-height: none; }
  .founder-card { max-width: 520px; width: 100%; }
}
@media (max-width: 600px) {
  :root { --sec: 52px; }
  .fc-photo { aspect-ratio: 4 / 5; }
  .proj-modal { padding: 0; }
  .pm-inner { margin: 0; min-height: 100%; border-radius: 0; border: 0; }
  .proj-modal.pm-svc .pm-hero { padding: 56px 10px 14px; }
  .pm-body { padding: 22px 18px 32px; }
  .sm-acts > a { flex: 1 1 100%; justify-content: center; }
  .svc-acts { gap: 14px; }
}
@media (min-width: 1000px) {
  .proj-modal.pm-svc .pm-inner { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); position: relative; margin-top: 6vh; }
  .proj-modal.pm-svc .pm-hero { position: static; display: flex; align-items: center; padding: 64px 28px 28px; border-bottom: 0; border-right: 1px solid var(--line); }
  .proj-modal.pm-svc .pm-viz { width: 100%; }
  .proj-modal.pm-svc .pm-body { padding: 56px 34px 34px; display: flex; flex-direction: column; }
  .proj-modal.pm-svc .pm-body h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  .proj-modal.pm-svc .lead { font-size: 1rem; }
}

.fc-name small { display: block; margin-top: 6px; font-family: var(--mono); font-size: .68rem; color: rgba(255,255,255,.62); }
.fc-photo::after { background: linear-gradient(180deg, rgba(8,9,11,0) 62%, rgba(8,9,11,.9) 100%); }
@media (max-width: 860px) { .founder-card { justify-self: start; } }
.fc-name span { color: rgba(255,255,255,.82); }
.fc-name strong, .fc-name span, .fc-name small { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.fc-photo::after { background: linear-gradient(180deg, rgba(8,9,11,0) 52%, rgba(8,9,11,.55) 72%, rgba(8,9,11,.92) 100%); }
@media (max-width: 860px) {
  .about-grid { display: flex; flex-direction: column; gap: 0; }
  .about-copy { display: contents; }
  .about-copy .fact-grid { order: 3; margin-top: 22px; }
  .founder-card { order: 2; margin-top: 10px; }
}
@media (max-width: 600px) {
  .founder-card .fc-foot { gap: 8px; }
  .founder-card .fc-foot .btn-sm, .founder-card .fc-foot .chip-link { font-size: .7rem; padding: 7px 10px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-big { gap: 18px; }
}
.fc-photo::after { background: linear-gradient(180deg, rgba(8,9,11,0) 64%, rgba(8,9,11,.62) 80%, rgba(8,9,11,.94) 100%); }

/* ── v8: pagina demo web, link login discreto ── */
.choice-grid:not(.cols-3) > .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
.demo-hero2 { padding-bottom: 26px; }
.demo-hero2 .lead { max-width: 640px; }
.demo-tabs { position: sticky; top: 68px; z-index: 50; background: rgba(8,9,11,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dt-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.dt-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dt-list::-webkit-scrollbar { display: none; }
.dt-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text2); font-family: var(--mono); font-size: .82rem; cursor: pointer; transition: all .2s; }
.dt-tab .ic { width: 16px; height: 16px; }
.dt-tab:hover { color: var(--ivory); background: var(--bg3); }
.dt-tab.on { color: var(--ivory); background: var(--bg3); border-color: var(--line2); box-shadow: inset 0 -2px 0 var(--red); }
.dt-right { display: flex; align-items: center; gap: 14px; }
.dt-view { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: .7rem; color: var(--text3); }
.dt-view > span { margin-right: 4px; }
.dt-view button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--text2); font-family: var(--mono); font-size: .7rem; cursor: pointer; }
.dt-view button .ic { width: 14px; height: 14px; }
.dt-view button.on { color: var(--ivory); border-color: var(--text3); background: var(--bg3); }
.demo-stage2 { padding: 28px 0 var(--sec); }
.demo-wrap .browser-frame { transition: max-width .45s ease; max-width: 100%; margin: 0 auto; }
.demo-wrap .browser-frame.as-phone { max-width: 400px; border-radius: 30px; }
.demo-wrap .browser-frame.as-phone .browser-body { max-height: 760px; overflow-y: auto; }
.demo-note2 { text-align: center; margin-top: 16px; font-family: var(--mono); font-size: .72rem; color: var(--text3); }
.demo-inc { margin-top: 44px; }
.demo-inc .eyebrow { margin-bottom: 16px; font-weight: 400; font-size: .76rem; }
.demo-inc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.demo-inc li { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg2); color: var(--text); font-size: .9rem; line-height: 1.45; }
.demo-inc li .ic { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 1px; }
.demo-cta2 { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; border: 1px solid var(--line2); border-radius: var(--r3); background: linear-gradient(120deg, rgba(227,6,19,.12), transparent 60%), var(--bg2); }
.demo-cta2 h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.demo-cta2 p { color: var(--text2); max-width: 560px; }
.demo-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 2000; background: var(--bg3); border: 1px solid var(--line2); color: var(--ivory); font-family: var(--mono); font-size: .78rem; padding: 10px 16px; border-radius: 9px; transition: all .3s; max-width: calc(100% - 32px); }
.demo-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ft-login { opacity: .28; font-family: var(--mono); font-size: .66rem; margin-left: 10px; transition: opacity .2s; }
.ft-login:hover { opacity: .8; }
@media (max-width: 1100px) { .demo-inc ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .dt-view { display: none; } }
@media (max-width: 600px) {
  .dt-inner { min-height: 54px; gap: 10px; }
  .dt-right .btn-sm { display: none; }
  .dt-tab { padding: 8px 12px; font-size: .78rem; }
  .demo-stage2 .container { padding-left: 10px; padding-right: 10px; }
  .demo-inc ul { grid-template-columns: 1fr; }
  .demo-cta2 { flex-direction: column; align-items: stretch; padding: 22px 18px; }
  .demo-cta2 .btn-primary { justify-content: center; }
}

/* ── v9: progetti con dettaglio (come, agenti, strumenti, privacy) ── */
.p-kind { font-family: var(--mono); font-size: .64rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); white-space: nowrap; }
.p-kind.real { color: var(--green); border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.06); }
.p-kind.case { color: var(--cyan); border-color: rgba(86,200,255,.35); background: rgba(86,200,255,.06); }
.proj .p-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 2px; font-family: var(--mono); font-size: .7rem; color: var(--text3); }
.proj .p-facts > span { display: inline-flex; align-items: center; gap: 6px; }
.proj .p-facts .ic { width: 13px; height: 13px; color: var(--text2); }
.pd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-top .eyebrow { margin-bottom: 0; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.pd-box { border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg2); padding: 18px; min-width: 0; }
.pd-box h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--green); margin-bottom: 12px; letter-spacing: 0; }
.pd-box h4::before { content: '## '; color: var(--text3); }
.pd-box .pm-stack { margin-bottom: 0; }
.pd-how { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: 10px; }
.pd-how li { counter-increment: st; display: grid; grid-template-columns: 26px 1fr; font-size: .9rem; color: var(--text); line-height: 1.5; }
.pd-how li::before { content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: .7rem; color: var(--text3); padding-top: 3px; }
.pd-agents, .pd-privacy { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pd-agents li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--text2); line-height: 1.45; }
.pd-agents li b { color: var(--ivory); font-weight: 600; margin-right: 2px; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(86,200,255,.12); flex: none; margin-top: 6px; }
.ag-dot.human { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,181,71,.14); }
.pd-privacy li { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: var(--text2); line-height: 1.45; }
.pd-privacy .ic { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 2px; }
.pv-band { margin-top: 26px; border: 1px solid var(--line2); border-radius: var(--r3); background: linear-gradient(120deg, rgba(61,220,151,.06), transparent 50%), var(--bg2); padding: 20px 22px; }
.pv-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; color: var(--green); margin-bottom: 14px; }
.pv-head .ic { width: 15px; height: 15px; }
.pv-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv-item { display: flex; gap: 12px; align-items: flex-start; }
.pv-item > .ic { width: 20px; height: 20px; color: var(--ivory); flex: none; margin-top: 2px; }
.pv-item strong { display: block; font-size: .95rem; color: var(--ivory); margin-bottom: 3px; }
.pv-item span { font-size: .85rem; color: var(--text2); line-height: 1.45; }
.proj-more { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.proj-more .proj-note { margin-top: 0; max-width: 760px; }
.proj-more .btn-ghost { flex: none; }
/* pagina progetti */
.pj-tabs { top: 68px; }
.pj-tabs .dt-tab span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pj-sec { padding: clamp(44px, 5vw, 72px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.pj-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.pj-viz { position: sticky; top: 150px; }
.pj-detail h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 10px 0 12px; }
.pj-detail .pd-grid { grid-template-columns: 1fr; }
.pj-acts { margin-top: 4px; }
.pj-cta { padding: var(--sec) 0; }
@media (max-width: 1100px) { .pv-items { grid-template-columns: 1fr 1fr; } .pj-grid { grid-template-columns: 1fr; } .pj-viz { position: static; } }
@media (max-width: 860px) { .pd-grid { grid-template-columns: 1fr; } .proj-more { flex-direction: column; align-items: flex-start; } }
@media (max-width: 600px) { .pv-items { grid-template-columns: 1fr; } .pv-band { padding: 18px 16px; } .pd-box { padding: 16px; } }
.dt-list { min-width: 0; flex: 1 1 auto; }
@media (max-width: 1100px) { .pj-grid { grid-template-columns: minmax(0, 1fr); } .pj-grid > * { min-width: 0; } }

/* ── v10: menu a pagine, voce attiva, sezione app in home ── */
.mobile-menu nav a[aria-current] { color: var(--red2); }
.nav-links a { padding: 7px 10px; }
@media (max-width: 1280px) { .nav-links { gap: 2px; font-size: .76rem; } .nav-links a { padding: 7px 8px; } .cmdk-btn span, .cmdk-btn kbd { display: none; } }
.sec-hero { padding-bottom: 10px; }
.sec-hero + section, .sec-hero + section#services { padding-top: 30px; }
.sec-cta { padding: 0 0 var(--sec); }
.home-apps .happ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.happ-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 26px; border: 1px solid var(--line2); border-radius: var(--r3); background: var(--bg2); transition: transform .25s, border-color .25s; overflow: hidden; }
.happ-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.happ-card.pdf::before { background: radial-gradient(ellipse at 0% 0%, rgba(255,90,95,.14), transparent 55%); }
.happ-card.games::before { background: radial-gradient(ellipse at 0% 0%, rgba(86,200,255,.14), transparent 55%); }
.happ-card:hover { transform: translateY(-3px); border-color: var(--text3); }
.happ-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; position: relative; }
.happ-card.pdf .happ-ic { color: #ff5a5f; background: rgba(255,90,95,.12); border: 1px solid rgba(255,90,95,.3); }
.happ-card.games .happ-ic { color: var(--cyan); background: rgba(86,200,255,.12); border: 1px solid rgba(86,200,255,.3); }
.happ-ic .ic { width: 28px; height: 28px; }
.happ-body { position: relative; min-width: 0; }
.happ-tag { font-family: var(--mono); font-size: .7rem; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; }
.happ-body h3 { font-size: 1.5rem; margin: 4px 0 8px; }
.happ-body p { color: var(--text2); font-size: .95rem; margin: 0 0 14px; }
.happ-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.happ-chips span { font-family: var(--mono); font-size: .68rem; padding: 4px 9px; border: 1px solid var(--line2); border-radius: 999px; color: var(--text2); }
.happ-go { position: absolute; right: 22px; top: 24px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .74rem; color: var(--text2); }
.happ-go .ic { width: 14px; height: 14px; }
@media (max-width: 860px) { .home-apps .happ-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .happ-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; } .happ-ic { width: 44px; height: 44px; border-radius: 12px; } .happ-ic .ic { width: 22px; height: 22px; } .happ-go { top: 30px; } .happ-body h3 { font-size: 1.3rem; } }
main > .sec-hero + section, main > .sec-hero + section.contact, main > .sec-hero + section.services { padding-top: 24px; border-top: 0; }
.sec-hero + .contact .contact-list { margin-top: 0; }