/* ── Layout concept: enormi titoli a trazione stretta su fondo quasi nero,
   etichette monospace maiuscole a trazione larga come elementi strutturali,
   sezioni numerate come capitoli editoriali, nessuna card/ombra/angolo
   arrotondato — un solo colore d'accento (il blu già usato dal sito), usato
   con parsimonia. Tema unico e deliberato: nessuna variante chiara. ── */
:root{
  --ink:#0a0a0a; --ink2:#121211; --paper:#f2efe9; --dim:#a9a49c; --dim2:#5c5952;
  --line:rgba(242,239,233,.14); --accent:#2997ff;
  --f-display:'Geist','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--paper); font-family:var(--f-display); line-height:1.5; -webkit-font-smoothing:antialiased; margin:0}
h1,h2,h3,p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.mono{font-family:var(--f-mono)}
.label{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim)}

.banner{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:50;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:9px 18px; border-radius:999px;
  box-shadow:0 8px 28px rgba(0,0,0,.45); white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis}
.banner b{color:var(--accent)}

/* ── nav ── */
nav{position:sticky; top:0; z-index:40; background:rgba(10,10,10,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:24px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:1.05rem; letter-spacing:.03em}
.logo-mark{border:1px solid var(--line); border-radius:50%; overflow:hidden; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex:none}
.logo-mark img{width:100%; height:100%; display:block; object-fit:cover}
.logo-sub{display:block; font-size:.6rem; letter-spacing:.2em; color:var(--dim); margin-top:2px}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.nav-links a{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--paper)}
@media(max-width:820px){.nav-links{display:none}}

/* ── hero generico ── */
.hero{padding:70px 0 56px}
.hero-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.hero-eyebrow .dot{width:7px; height:7px; background:var(--accent); flex:none; animation:blink 1.4s step-end infinite}
@keyframes blink{50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.hero-eyebrow .dot{animation:none}}
.hero-title{font-size:clamp(2.4rem,6.6vw,5.4rem); font-weight:500; letter-spacing:-.04em; line-height:1.02; text-wrap:balance; max-width:16ch}
.hero-title .ln{display:block}
.hero-title .accent{color:var(--accent)}
.hero-foot{display:flex; gap:40px; flex-wrap:wrap; margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.hero-desc{font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--dim); max-width:46ch; line-height:1.7}
.hero-roles{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:right; line-height:2.1; margin-left:auto; white-space:nowrap}
.hero-roles b{color:var(--dim); font-weight:400}
@media(max-width:700px){.hero-foot{flex-direction:column; gap:20px}.hero-roles{text-align:left; margin-left:0}}

.breadcrumb{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); padding:24px 0 0}
.breadcrumb a{color:var(--dim)}
.breadcrumb a:hover{color:var(--paper)}

section{padding:88px 0}

/* ── punto di vista ── */
.pov{display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start}
.pov-label{font-family:var(--f-mono); font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); line-height:1.5}
.pov-text{font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.025em; line-height:1.22}
.pov-text .fade{color:var(--dim2)}
@media(max-width:820px){.pov{grid-template-columns:1fr; gap:20px}}

.portrait-wrap{margin-bottom:36px; display:flex; align-items:center; gap:32px}
.portrait-wrap img{width:220px; height:220px; flex:none; display:block; border-radius:50%; aspect-ratio:1; object-fit:cover}
.portrait-name{font-size:clamp(1.8rem,4.2vw,4rem); font-weight:500; letter-spacing:-.04em; line-height:1; text-wrap:balance}
@media(max-width:700px){.portrait-wrap{gap:20px}.portrait-wrap img{width:140px; height:140px}}

/* ── capitoli ── */
.chapters{border-top:1px solid var(--line)}

/* ── servizi (lista) ── */
.svc-row{display:grid; grid-template-columns:72px 1fr auto; gap:24px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line)}
.svc-row:first-of-type{border-top:1px solid var(--line)}
.svc-row.link{cursor:pointer; transition:padding-left .2s}
.svc-row.link:hover{padding-left:10px}
.svc-num{font-family:var(--f-mono); font-size:.78rem; color:var(--dim2)}
.svc-name{font-size:clamp(1.1rem,2vw,1.5rem); font-weight:500; letter-spacing:-.015em}
.svc-desc{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.02em; color:var(--dim); text-align:right; max-width:30ch}
@media(max-width:700px){.svc-row{grid-template-columns:40px 1fr}.svc-desc{grid-column:2; text-align:left; margin-top:6px; max-width:none}}

/* ── servizio: corpo editoriale ── */
.article-body{max-width:72ch}
.article-body h2{font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:500; letter-spacing:-.015em; margin:52px 0 18px}
.article-body p{color:var(--dim); font-size:1.02rem; line-height:1.85; margin-bottom:18px}
.article-body p:first-of-type{color:var(--paper); font-size:1.18rem}
.quote-block{border-left:2px solid var(--accent); padding:4px 0 4px 24px; margin:40px 0; font-size:1.3rem; letter-spacing:-.015em; line-height:1.4; max-width:50ch}

.faq-list{border-top:1px solid var(--line); margin-top:56px}
.faq-item{border-bottom:1px solid var(--line); padding:24px 0}
.faq-item summary{font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; font-family:var(--f-mono); color:var(--dim2); flex:none}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin-top:16px; color:var(--dim); line-height:1.8; max-width:62ch}

.inline-cta{margin-top:56px; padding-top:40px; border-top:1px solid var(--line)}
.inline-cta p{font-size:1.2rem; max-width:40ch; margin-bottom:20px}
.btn-outline{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:13px 22px; transition:border-color .2s}
.btn-outline:hover{border-color:var(--accent)}

/* ── news ── */
.news-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap}
.news-lead{border-top:1px solid var(--line); padding-top:28px}
.news-lead .meta{display:flex; gap:14px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); margin-bottom:18px}
.news-lead .meta .tag{color:var(--accent)}
.news-lead h3,.news-lead a h3{font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:500; letter-spacing:-.03em; line-height:1.15; max-width:22ch; text-wrap:balance}
.news-lead p{margin-top:16px; color:var(--dim); max-width:60ch; font-size:1rem; line-height:1.7}
.news-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px}
.news-item{border-top:1px solid var(--line); padding-top:22px; display:block}
.news-item .meta{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); margin-bottom:10px}
.news-item h4{font-size:1.1rem; font-weight:500; letter-spacing:-.01em; line-height:1.35}
.news-item:hover h4{color:var(--accent)}
@media(max-width:700px){.news-grid{grid-template-columns:1fr}}
.more-link{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid var(--accent); padding-bottom:3px}

/* ── archivio news: elenco impaginato ── */
.news-archive-list{margin-top:8px}
.news-row{display:block; border-top:1px solid var(--line); padding:28px 0; transition:padding-left .15s}
.news-row:last-child{border-bottom:1px solid var(--line)}
.news-row:hover{padding-left:10px}
.news-row .meta{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim2); margin-bottom:10px}
.news-row h3{font-size:1.35rem; font-weight:500; letter-spacing:-.02em; line-height:1.3; max-width:46ch}
.news-row:hover h3{color:var(--accent)}
.news-row p{margin-top:8px; color:var(--dim); max-width:62ch; font-size:.95rem; line-height:1.65}

.pager{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:56px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em}
.pager a,.pager span{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); color:var(--dim)}
.pager a:hover{border-color:var(--accent); color:var(--paper)}
.pager .current{background:var(--accent); border-color:var(--accent); color:#fff}
.pager .arrow{text-transform:uppercase; letter-spacing:.1em; padding:0 16px}
.pager .disabled{opacity:.28; pointer-events:none}
.pager-info{text-align:center; margin-top:16px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim2)}

/* ── articolo news: box commento/fonte ── */
.comment-box{border-top:1px solid var(--accent); border-bottom:1px solid var(--line); margin:40px 0; padding:28px 0}
.comment-box .tag{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block}
.comment-box p{color:var(--paper); font-size:1rem; line-height:1.85; margin-bottom:14px; max-width:68ch}
.source-line{font-family:var(--f-mono); font-size:.76rem; color:var(--dim2); margin-top:28px}
.source-line a{color:var(--dim); border-bottom:1px solid var(--line)}

/* ── cta finale ── */
.cta{border-top:1px solid var(--line); padding:90px 0 60px}
.cta-label{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:18px}
.cta-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cta-title{font-size:clamp(2.6rem,8vw,6.5rem); font-weight:500; letter-spacing:-.05em; line-height:.95}
.cta-arrow{width:64px; height:64px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s, transform .2s}
a.cta-link:hover .cta-arrow{border-color:var(--accent); transform:translate(4px,-4px)}
.cta-contacts{display:flex; gap:32px; flex-wrap:wrap; margin-top:40px; font-family:var(--f-mono); font-size:.8rem; color:var(--dim)}
.cta-contacts b{color:var(--paper); font-weight:400; display:block; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); margin-bottom:6px}
.cta-contacts span{color:var(--paper)}
.cta-contact-link{display:inline-block; border-bottom:1px solid transparent; transition:border-color .2s}
.cta-contact-link:hover{border-bottom-color:var(--accent)}
.cta-contact-link:hover span{color:var(--accent)}
.cta-contacts-more{flex-basis:100%}
.cta-more-links{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:2px}

footer{border-top:1px solid var(--line); padding:26px 0 90px}
.footer-row{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:var(--dim2)}
.footer-row a{color:var(--dim)}
.footer-row a:hover{color:var(--paper)}

/* ── link correlati: "dalle news" / "servizi correlati" ── */
.related-links{margin-top:44px; padding-top:26px; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:.76rem; line-height:2}
.related-links .related-row{color:var(--dim)}
.related-links .related-label{color:var(--dim2); text-transform:uppercase; letter-spacing:.08em; margin-right:10px}
.related-links a{color:var(--paper); border-bottom:1px solid transparent}
.related-links a:hover{border-bottom-color:var(--accent); color:var(--accent)}

/* ── pagine legali (AI policy / privacy): liste, callout, tabella cookie ── */
.policy-meta{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim2); margin-top:18px}
.policy-list{list-style:none; margin:20px 0 32px; padding:0; max-width:72ch}
.policy-list li{position:relative; padding-left:30px; margin-bottom:14px; color:var(--dim); line-height:1.75; font-size:.98rem}
.policy-list li strong{color:var(--paper); font-weight:500}
.policy-list.yes li::before{content:'✓'; position:absolute; left:0; top:1px; color:var(--accent)}
.policy-list.no li::before{content:'✕'; position:absolute; left:0; top:1px; color:var(--dim2)}
.callout{border-left:2px solid var(--accent); padding:16px 26px; margin:32px 0; background:var(--ink2); max-width:66ch; color:var(--dim); font-size:.95rem; line-height:1.75}
.callout strong{color:var(--paper)}
.table-wrap{overflow-x:auto; margin:20px 0 36px}
table.policy-table{width:100%; min-width:540px; border-collapse:collapse; font-family:var(--f-mono); font-size:.76rem}
table.policy-table th,table.policy-table td{border-bottom:1px solid var(--line); padding:12px 16px; text-align:left; vertical-align:top; color:var(--dim)}
table.policy-table th{color:var(--paper); font-weight:400; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem}
.pref-btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:13px 22px; background:none; color:var(--paper); cursor:pointer; transition:border-color .2s}
.pref-btn:hover{border-color:var(--accent)}

/* ── CTA flottante "sei sotto attacco" — sempre presente, come cyberoo.com ── */
.float-cta{position:fixed; right:20px; bottom:20px; z-index:45; display:flex; align-items:center; gap:12px;
  background:#e5484d; color:#fff; padding:14px 20px 14px 16px; border-radius:999px;
  box-shadow:0 10px 30px rgba(229,72,77,.35); transition:transform .2s, box-shadow .2s}
.float-cta:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(229,72,77,.45)}
.float-cta-icon{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:none}
.float-cta-text{font-family:var(--f-mono); line-height:1.35; text-align:left}
.float-cta-text b{display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
.float-cta-text span{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85}
@media(max-width:600px){
  .float-cta{right:12px; bottom:12px; padding:11px 16px 11px 12px}
  .float-cta-icon{width:28px; height:28px}
  .float-cta-text b{font-size:.66rem}
  .float-cta-text span{display:none}
  .banner{bottom:72px}
}

/* ── toggle "lettura bionica" (pagine di produzione, assente nell'anteprima) ── */
.bionic-toggle{position:fixed; bottom:92px; right:20px; z-index:40; display:flex; align-items:center; gap:8px;
  background:var(--ink); border:1px solid var(--line); border-radius:0; padding:12px 18px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); cursor:pointer}
.bionic-toggle:hover{border-color:var(--accent)}
.bionic-toggle.active{background:var(--accent); border-color:var(--accent); color:#fff}
@media(max-width:480px){
  .bionic-toggle .bionic-label{display:none}
  .bionic-toggle{padding:12px; bottom:78px; right:16px}
}