/*
Theme Name: Gennaro Ciaravolo
Theme URI: https://gennarociaravolo.it
Author: Gennaro Ciaravolo
Author URI: https://gennarociaravolo.it
Description: Tema professionale per consulente SEO, Google Ads e Fractional CMO — Gennaro Ciaravolo.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: gc-theme
Tags: one-column, custom-colors, custom-menu, featured-images, blog
*/

/* ===========================================================
   LOCAL FONTS (@font-face)
   =========================================================== */

/* Bitter */
@font-face {
   font-family: 'Bitter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/bitter-regular.woff2') format('woff2');
}

@font-face {
   font-family: 'Bitter';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/bitter-italic.woff2') format('woff2');
}

@font-face {
   font-family: 'Bitter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('fonts/bitter-700.woff2') format('woff2');
}

/* DM Sans */
@font-face {
   font-family: 'DM Sans';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url('fonts/dm-sans-300.woff2') format('woff2');
}

@font-face {
   font-family: 'DM Sans';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/dm-sans-regular.woff2') format('woff2');
}

@font-face {
   font-family: 'DM Sans';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('fonts/dm-sans-500.woff2') format('woff2');
}

@font-face {
   font-family: 'DM Sans';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('fonts/dm-sans-600.woff2') format('woff2');
}

/* Syne */
@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('fonts/syne-regular.woff2') format('woff2');
}

@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('fonts/syne-500.woff2') format('woff2');
}

@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('fonts/syne-600.woff2') format('woff2');
}

@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('fonts/syne-700.woff2') format('woff2');
}

@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url('fonts/syne-800.woff2') format('woff2');
}

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root {
   --bg: #f8f4ee;
   --bg2: #f0e9de;
   --panel: #e6ddd0;
   --ink: #1c1712;
   --ink2: #3b3024;
   --muted: #403529;
   --ghost: #554637;
   --accent: #c06030;
   --accent-dim: #a04a20;
   --accent-pale: rgba(192, 96, 48, 0.08);
   --border: rgba(28, 23, 18, 0.1);
   --border2: rgba(28, 23, 18, 0.18);
   --serif: 'Bitter', Georgia, serif;
   --sans: 'Syne', sans-serif;
   --body: 'DM Sans', sans-serif;
   --max: 1140px;
   --g: clamp(20px, 4vw, 60px);
   --r: 4px;
}

/* ===========================================================
   RESET / BASE
   =========================================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   background: var(--bg);
   color: var(--ink);
   font-family: var(--body);
   font-size: clamp(15px, 1.05vw, 17px);
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

/* Grain texture overlay */
body::after {
   content: '';
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.025'/%3E%3C/svg%3E");
   pointer-events: none;
   z-index: 9999;
   mix-blend-mode: multiply;
}

h1,
h2,
h3 {
   font-family: var(--serif);
   line-height: 1.15;
   font-weight: 700;
   color: var(--ink);
}

h1 {
   font-size: clamp(2.4rem, 5vw, 4rem);
}

h2 {
   font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

h3 {
   font-size: 1.05rem;
   font-family: var(--sans);
   font-weight: 600;
}

p {
   max-width: 60ch;
   color: var(--muted);
}

em {
   font-style: italic;
   color: var(--accent);
}

strong {
   font-weight: 600;
   color: var(--ink);
}

a {
   color: var(--accent);
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

ul,
ol {
   margin: 0 0 16px 20px;
   color: var(--muted);
}

li {
   margin-bottom: 6px;
}

img {
   max-width: 100%;
   height: auto;
}

.screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   word-wrap: normal !important;
}

/* ===========================================================
   UTILITY CLASSES
   =========================================================== */
.label {
   font-family: var(--sans);
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--accent);
}

.wrap {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 var(--g);
}

section {
   padding: clamp(72px, 9vw, 130px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.full-rule {
   border: none;
   border-top: 1px solid var(--border);
   margin: 0;
}

/* ===========================================================
   NAVIGATION
   =========================================================== */
#site-nav {
   position: sticky;
   top: 0;
   z-index: 200;
   background: rgba(248, 244, 238, 0.93);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
}

#site-nav .wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 14px;
   padding-bottom: 14px;
}

.nav-logo {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
}

/* WP menu ul */
#site-nav .nav-links,
#site-nav ul.nav-links {
   display: flex;
   gap: 24px;
   list-style: none;
   margin: 0;
   padding: 0;
}

#site-nav .nav-links li {
   margin: 0;
}

#site-nav .nav-links a {
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--muted);
   text-decoration: none;
   letter-spacing: 0.02em;
   transition: color .2s;
   font-family: var(--sans);
}

#site-nav .nav-links a:hover,
#site-nav .nav-links a.active,
#site-nav .nav-links .current-menu-item>a,
#site-nav .nav-links .current-page-ancestor>a {
   color: var(--ink);
}

.nav-cta,
#site-nav .nav-links .nav-cta>a,
#site-nav .nav-links li.menu-item-cta>a {
   font-size: 0.75rem !important;
   font-weight: 700 !important;
   letter-spacing: 0.06em !important;
   background: var(--accent);
   color: #fff !important;
   padding: 9px 20px;
   border-radius: var(--r);
   text-decoration: none;
   font-family: var(--sans);
   transition: background .2s;
}

.nav-cta:hover,
#site-nav .nav-links .nav-cta>a:hover,
#site-nav .nav-links li.menu-item-cta>a:hover {
   background: var(--accent-dim);
}

/* Mobile hamburger */
.nav-hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 4px;
}

.nav-hamburger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--ink);
   transition: all .3s;
}

.nav-hamburger.active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.active span:nth-child(2) {
   opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* ===========================================================
   DROPDOWN NAVIGATION
   =========================================================== */
#site-nav .nav-links li.menu-item-has-children {
   position: relative;
}

.nav-arrow {
   font-size: 0.6rem;
   margin-left: 4px;
   display: inline-block;
   transition: transform .2s;
   vertical-align: middle;
}

li.menu-item-has-children.dropdown-open>a .nav-arrow,
li.menu-item-has-children:focus-within>a .nav-arrow {
   transform: rotate(180deg);
}

.nav-dropdown {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   min-width: 220px;
   background: rgba(248, 244, 238, 0.98);
   backdrop-filter: blur(16px);
   border: 1px solid var(--border);
   border-radius: var(--r);
   box-shadow: 0 8px 32px rgba(28, 23, 18, 0.12);
   list-style: none;
   padding: 8px 0;
   z-index: 300;
   margin: 0;
}

li.menu-item-has-children.dropdown-open>.nav-dropdown,
li.menu-item-has-children:focus-within>.nav-dropdown {
   display: block;
}

.nav-dropdown li {
   margin: 0;
}

.nav-dropdown a {
   display: block;
   padding: 10px 20px;
   font-size: 0.78rem;
   font-weight: 500;
   color: var(--muted);
   text-decoration: none;
   font-family: var(--sans);
   transition: color .18s, background .18s;
   white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown .current-menu-item>a {
   color: var(--ink);
   background: var(--bg2);
}

.nav-dropdown .current-menu-item>a {
   color: var(--accent);
}

/* Mobile: dropdown diventa lista verticale inline */
@media (max-width: 900px) {
   .nav-dropdown {
      position: static;
      box-shadow: none;
      border: none;
      border-left: 2px solid var(--accent);
      border-radius: 0;
      background: transparent;
      backdrop-filter: none;
      padding: 4px 0 8px 12px;
      margin-top: 4px;
   }

   .nav-dropdown a {
      padding: 8px 0;
      font-size: 0.85rem;
   }

   li.menu-item-has-children.dropdown-open>.nav-dropdown {
      display: block;
   }
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--sans);
   font-size: 0.88rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-decoration: none;
   padding: 14px 28px;
   border-radius: var(--r);
   cursor: pointer;
   border: none;
   transition: all .22s;
}

.btn:hover {
   text-decoration: none;
}

.btn-accent {
   background: var(--accent);
   color: #fff;
}

.btn-accent:hover {
   background: var(--accent-dim);
   transform: translateY(-1px);
   box-shadow: 0 8px 24px rgba(192, 96, 48, 0.2);
   color: #fff;
}

.btn-outline {
   background: transparent;
   color: var(--ink);
   border: 1px solid var(--border2);
}

.btn-outline:hover {
   border-color: var(--ink);
   background: rgba(28, 23, 18, 0.04);
   color: var(--ink);
}

.btn-arrow::after {
   content: '→';
}

.btn-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--sans);
   font-size: 0.88rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-decoration: none;
   padding: 14px 28px;
   border-radius: var(--r);
   background: var(--accent);
   color: #fff;
   transition: all .22s;
}

.btn-cta::after {
   content: '→';
}

.btn-cta:hover {
   background: var(--accent-dim);
   transform: translateY(-1px);
   text-decoration: none;
   color: #fff;
}

/* ===========================================================
   REVEAL ANIMATIONS
   =========================================================== */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .65s ease, transform .65s ease;
}

.reveal.show {
   opacity: 1;
   transform: none;
}

.reveal-delay-1 {
   transition-delay: .1s;
}

.reveal-delay-2 {
   transition-delay: .2s;
}

.reveal-delay-3 {
   transition-delay: .3s;
}

/* ===========================================================
   HERO (HOMEPAGE)
   =========================================================== */
#hero {
   padding: clamp(90px, 12vw, 160px) var(--g) clamp(64px, 8vw, 110px);
   overflow: hidden;
}

.hero-bg-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
   background-size: 72px 72px;
   mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 30%, transparent 100%);
}

.hero-glow {
   position: absolute;
   top: -120px;
   right: -100px;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.06) 0%, transparent 65%);
   pointer-events: none;
}

.hero-inner {
   position: relative;
   z-index: 1;
}

.hero-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 32px;
}

.hero-eyebrow-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   display: block;
   animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .35
   }
}

#hero h1,
#page-hero h1 {
   margin-bottom: 32px;
   max-width: 15ch;
   color: var(--ink);
}

#hero h1 em,
#page-hero h1 em {
   font-style: italic;
}

.hero-sub {
   font-size: clamp(1rem, 1.3vw, 1.15rem);
   color: var(--muted);
   max-width: 54ch;
   margin-top: 32px;
   margin-bottom: 44px;
   line-height: 1.8;
   font-family: var(--body);
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   margin-bottom: 24px;
}

.hero-micro {
   font-size: 0.76rem;
   color: var(--ghost);
   max-width: 32ch;
   line-height: 1.5;
   margin-bottom: 72px;
}

.hero-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.hero-stat {
   background: var(--bg2);
   padding: 28px 24px;
   position: relative;
   overflow: hidden;
}

.hero-stat::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0.4;
}

.hero-stat-val {
   font-family: var(--serif);
   font-size: clamp(1.8rem, 3vw, 2.6rem);
   font-weight: 700;
   line-height: 1;
   color: var(--ink);
   margin-bottom: 6px;
   display: block;
}

.hero-stat-val em {
   color: var(--accent);
   font-style: normal;
}

.hero-stat p {
   font-size: 0.78rem;
   color: var(--ghost);
   max-width: none;
   margin-top: 4px;
}

/* ===========================================================
   SETTORI / CLIENTI
   =========================================================== */
#clienti {
   padding: clamp(48px, 6vw, 80px) var(--g);
   max-width: 100%;
   background: var(--bg2);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

#clienti .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.clienti-header {
   display: flex;
   align-items: baseline;
   gap: 24px;
   margin-bottom: 32px;
   flex-wrap: wrap;
}

.clienti-header .label {
   flex-shrink: 0;
}

.clienti-header p {
   font-size: 0.84rem;
   color: var(--ghost);
   max-width: none;
   margin: 0;
}

.settori-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.settore-badge {
   font-family: var(--sans);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 7px 14px;
   border-radius: 2px;
   border: 1px solid var(--border2);
   color: var(--muted);
   background: var(--bg);
   transition: all .2s;
}

.settore-badge:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.settore-badge.featured {
   background: var(--accent-pale);
   border-color: rgba(192, 96, 48, 0.3);
   color: var(--ink2);
}

.clienti-note {
   margin-top: 24px;
   font-size: 0.76rem;
   color: var(--ghost);
   font-style: italic;
}

/* ===========================================================
   CERTIFICAZIONI
   =========================================================== */
#certificazioni {
   padding: clamp(48px, 6vw, 72px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.cert-header {
   display: flex;
   align-items: baseline;
   gap: 24px;
   margin-bottom: 32px;
   flex-wrap: wrap;
}

.cert-grid {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

.cert-badge {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 14px 20px;
   transition: border-color .2s;
}

.cert-badge:hover {
   border-color: var(--border2);
}

.cert-badge-icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
}

.cert-badge-text strong {
   display: block;
   font-family: var(--sans);
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.2;
}

.cert-badge-text span {
   font-size: 0.7rem;
   color: var(--ghost);
}

/* ===========================================================
   PROBLEMA SECTION
   =========================================================== */
#problema {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   background: var(--bg2);
}

#problema .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.problema-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 7vw, 100px);
   align-items: center;
}

.problema-text .label {
   margin-bottom: 20px;
   display: block;
}

.problema-text h2 {
   margin-bottom: 28px;
}

.problema-text p {
   color: var(--muted);
}

.problema-text p+p {
   margin-top: 18px;
}

.problema-pull {
   font-family: var(--serif);
   font-size: clamp(1.1rem, 1.8vw, 1.5rem);
   font-style: italic;
   color: var(--ink2);
   border-left: 2px solid var(--accent);
   padding: 4px 0 4px 24px;
   margin: 32px 0;
   max-width: 44ch;
   line-height: 1.5;
}

.problema-close {
   margin-top: 18px;
   color: var(--ink);
   font-weight: 500;
   font-size: 0.95rem;
}

.svg-card {
   background: var(--bg);
   border: 1px solid var(--border2);
   border-radius: 8px;
   padding: 28px;
   position: relative;
   overflow: hidden;
}

.svg-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), rgba(192, 96, 48, 0.2), transparent);
}

/* ===========================================================
   FINANCE
   =========================================================== */
#finance {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

#finance .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.finance-layout {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: clamp(40px, 7vw, 100px);
   align-items: start;
}

.finance-text .label {
   margin-bottom: 20px;
   display: block;
}

.finance-text h2 {
   margin-bottom: 24px;
}

.finance-text>p {
   color: var(--muted);
   margin-bottom: 36px;
}

.finance-items {
   display: flex;
   flex-direction: column;
   gap: 0;
   border-top: 1px solid var(--border);
}

.finance-item {
   padding: 18px 0;
   border-bottom: 1px solid var(--border);
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.finance-item-arrow {
   color: var(--accent);
   font-size: 0.95rem;
   flex-shrink: 0;
   margin-top: 2px;
}

.finance-item p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: none;
}

.finance-item strong {
   color: var(--ink);
   font-weight: 600;
}

/* ===========================================================
   APPROCCIO
   =========================================================== */
.approccio-header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 5vw, 80px);
   align-items: end;
   margin-bottom: 56px;
}

.approccio-header .label {
   display: block;
   margin-bottom: 16px;
}

.approccio-header p {
   color: var(--muted);
   font-size: 0.93rem;
}

.approccio-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.approccio-cell {
   background: var(--bg2);
   padding: 36px 32px;
   position: relative;
   transition: background .2s;
}

.approccio-cell:hover {
   background: var(--panel);
}

.approccio-num {
   font-family: var(--serif);
   font-size: 3rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.1);
   line-height: 1;
   position: absolute;
   top: 20px;
   right: 24px;
}

.approccio-cell h3 {
   margin-bottom: 12px;
   font-size: 0.95rem;
}

.approccio-cell p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

/* ===========================================================
   MINICASO
   =========================================================== */
#minicaso {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   background: var(--ink);
}

#minicaso .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.minicaso-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 90px);
   align-items: center;
}

.mc-label {
   display: block;
   margin-bottom: 20px;
   color: rgba(192, 96, 48, 0.8);
}

#minicaso h2 {
   color: #f8f4ee;
   margin-bottom: 24px;
}

#minicaso .mc-text p {
   color: rgba(248, 244, 238, 0.55);
   font-size: 0.93rem;
   line-height: 1.8;
}

#minicaso .mc-text p+p {
   margin-top: 16px;
}

.mc-note {
   margin-top: 20px;
   font-size: 0.75rem;
   color: rgba(248, 244, 238, 0.25);
   font-style: italic;
}

.mc-table {
   display: flex;
   flex-direction: column;
   gap: 1px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 6px;
   overflow: hidden;
}

.mc-row {
   background: rgba(17, 28, 40, 0.8);
   padding: 16px 22px;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
}

.mc-row.highlight {
   background: rgba(192, 96, 48, 0.1);
   border-left: 2px solid var(--accent);
}

.mc-row-label {
   font-size: 0.78rem;
   color: rgba(248, 244, 238, 0.35);
   font-family: var(--sans);
}

.mc-row-val {
   font-family: var(--serif);
   font-size: 1.55rem;
   color: #f8f4ee;
}

.mc-row-val.good {
   color: var(--accent);
}

.mc-row-val.bad {
   color: #e07070;
}

/* ===========================================================
   SERVIZI (HOMEPAGE SECTION)
   =========================================================== */
#servizi .label {
   display: block;
   margin-bottom: 20px;
}

.servizi-group {
   margin-top: 48px;
}

.servizi-group-label {
   display: block;
   font-family: var(--sans);
   font-size: 0.67rem;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--ghost);
   border-bottom: 1px solid var(--border);
   padding-bottom: 14px;
   margin-bottom: 1px;
}

.servizi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-top: none;
   overflow: hidden;
}

.servizi-grid:first-of-type {
   border-top: 1px solid var(--border);
   border-radius: var(--r) var(--r) 0 0;
}

.servizi-grid.servizi-grid-2col {
   grid-template-columns: repeat(2, 1fr);
   border-radius: 0 0 var(--r) var(--r);
   border-top: none;
}

.servizio-card {
   background: var(--bg2);
   padding: 40px 32px;
   transition: background .25s;
   position: relative;
   overflow: hidden;
}

.servizio-card:hover {
   background: var(--panel);
}

.servizio-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity .25s;
}

.servizio-card:hover::after {
   opacity: 1;
}

.servizio-icon-wrap {
   margin-bottom: 28px;
}

.servizio-card h3 {
   margin-bottom: 14px;
}

.servizio-card p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.servizio-tag {
   display: inline-block;
   margin-top: 24px;
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.3);
   padding: 4px 10px;
   border-radius: 2px;
   font-family: var(--sans);
}

.servizio-card--featured {
   background: rgba(192, 96, 48, 0.04);
}

.servizio-card--featured::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, var(--accent), transparent 60%);
   opacity: 0.5;
}

.service-note {
   font-size: 0.82rem;
   color: var(--ghost);
   margin-top: 12px;
   max-width: none;
}

/* ===========================================================
   PROCESSO
   =========================================================== */
#processo {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   background: var(--bg2);
}

#processo .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.processo-header {
   display: flex;
   justify-content: space-between;
   align-items: end;
   margin-bottom: 60px;
   flex-wrap: wrap;
   gap: 24px;
}

.processo-header .label {
   display: block;
   margin-bottom: 16px;
}

.processo-steps-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.processo-step {
   background: var(--bg);
   padding: 36px 28px;
   position: relative;
}

.pstep-num {
   font-family: var(--serif);
   font-size: 2.5rem;
   color: rgba(192, 96, 48, 0.12);
   line-height: 1;
   margin-bottom: 20px;
   display: block;
}

.pstep-label {
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 12px;
   display: block;
}

.processo-step h3 {
   font-size: 0.92rem;
   margin-bottom: 12px;
}

.processo-step p {
   font-size: 0.84rem;
   color: var(--muted);
   max-width: none;
}

/* ===========================================================
   FIT SECTION
   =========================================================== */
.fit-header {
   margin-bottom: 48px;
}

.fit-header .label {
   display: block;
   margin-bottom: 16px;
}

.fit-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.fit-col {
   padding: 44px 40px;
}

.fit-col-yes {
   background: var(--bg2);
}

.fit-col-no {
   background: var(--panel);
}

.fit-col-head {
   font-family: var(--sans);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 28px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--border);
   display: block;
}

.fit-col-yes .fit-col-head {
   color: var(--accent);
}

.fit-col-no .fit-col-head {
   color: var(--ghost);
}

.fit-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin: 0;
   padding: 0;
}

.fit-list li {
   font-size: 0.9rem;
   color: var(--muted);
   padding-left: 22px;
   position: relative;
   line-height: 1.6;
}

.fit-list li::before {
   position: absolute;
   left: 0;
   font-weight: 700;
   font-size: 0.85rem;
}

.fit-col-yes .fit-list li::before {
   content: '✓';
   color: var(--accent);
}

.fit-col-no .fit-list li::before {
   content: '✕';
   color: var(--ghost);
}

/* ===========================================================
   CHI SONO PREVIEW (HOMEPAGE)
   =========================================================== */
#chisono-preview {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   background: var(--bg2);
   border-top: 1px solid var(--border);
}

#chisono-preview .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.chisono-layout {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   gap: clamp(40px, 7vw, 100px);
   align-items: start;
}

.portrait-card {
   background: var(--panel);
   border: 1px solid var(--border2);
   border-radius: 6px;
   aspect-ratio: 3/4;
   display: flex;
   align-items: flex-end;
   padding: 24px;
   position: relative;
   overflow: hidden;
   margin-bottom: 20px;
}

.portrait-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 40%, rgba(28, 23, 18, 0.55));
}

.portrait-name {
   position: relative;
   z-index: 1;
}

.portrait-name strong {
   display: block;
   font-family: var(--sans);
   font-size: 0.95rem;
   font-weight: 700;
   color: #fff;
}

.portrait-name span {
   font-size: 0.75rem;
   color: #fff;
   font-family: var(--sans);
}

.chisono-stat-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.chisono-stat {
   background: var(--bg);
   padding: 18px 20px;
}

.chisono-stat strong {
   font-family: var(--serif);
   font-size: 1.5rem;
   display: block;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 4px;
}

.chisono-stat span {
   font-size: 0.75rem;
   color: var(--ghost);
}

.chisono-right .label {
   display: block;
   margin-bottom: 20px;
}

.chisono-right h2 {
   margin-bottom: 28px;
   margin-top: 16px;
}

.chisono-right p {
   color: var(--muted);
}

.chisono-right p+p {
   margin-top: 18px;
}

/* ===========================================================
   CASI STUDIO (HOMEPAGE PREVIEW)
   =========================================================== */
#casistudio .label {
   display: block;
   margin-bottom: 20px;
}

.casi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 48px;
}

.caso-card {
   background: var(--bg2);
   padding: 36px 30px;
   transition: background .2s;
   position: relative;
}

.caso-card:hover {
   background: var(--panel);
}

.caso-sector {
   font-size: 0.67rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ghost);
   margin-bottom: 18px;
   display: block;
   font-family: var(--sans);
}

.caso-card h3 {
   font-size: 0.95rem;
   margin-bottom: 14px;
}

.caso-card>p {
   font-size: 0.84rem;
   color: var(--muted);
   max-width: none;
   margin-bottom: 24px;
}

.caso-kpi {
   border-top: 1px solid var(--border);
   padding-top: 20px;
}

.caso-kpi-val {
   font-family: var(--serif);
   font-size: 2rem;
   color: var(--accent);
   line-height: 1;
   display: block;
}

.caso-kpi-label {
   font-size: 0.75rem;
   color: var(--ghost);
   margin-top: 4px;
}

/* ===========================================================
   FAQ
   =========================================================== */
#faq {
   max-width: 100%;
   padding: clamp(72px, 9vw, 130px) var(--g);
   background: var(--bg2);
}

#faq .wrap {
   max-width: var(--max);
   margin: 0 auto;
}

.faq-layout {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: clamp(40px, 7vw, 100px);
   align-items: start;
}

.faq-intro .label {
   display: block;
   margin-bottom: 16px;
}

.faq-intro h2 {
   margin-bottom: 20px;
   margin-top: 16px;
}

.faq-intro p {
   color: var(--muted);
   font-size: 0.9rem;
}

.faq-item {
   border-top: 1px solid var(--border);
}

.faq-item:last-child {
   border-bottom: 1px solid var(--border);
}

.faq-q {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   padding: 20px 0;
   cursor: pointer;
   font-family: var(--sans);
   font-size: 0.92rem;
   font-weight: 600;
   color: var(--ink);
   user-select: none;
}

.faq-icon {
   width: 18px;
   height: 18px;
   position: relative;
   flex-shrink: 0;
   margin-top: 2px;
}

.faq-icon::before,
.faq-icon::after {
   content: '';
   position: absolute;
   background: var(--accent);
   transition: transform .25s, opacity .25s;
}

.faq-icon::before {
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   transform: translateY(-50%);
}

.faq-icon::after {
   left: 50%;
   top: 0;
   bottom: 0;
   width: 1px;
   transform: translateX(-50%);
}

.faq-item.open .faq-icon::after {
   opacity: 0;
}

.faq-a {
   display: none;
   padding-bottom: 22px;
   font-size: 0.875rem;
   color: var(--muted);
   line-height: 1.75;
}

.faq-item.open .faq-a {
   display: block;
}

/* ===========================================================
   BLOG PREVIEW
   =========================================================== */
#blog .label {
   display: block;
   margin-bottom: 20px;
}

.articoli-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 48px;
}

.art-card {
   background: var(--bg2);
   padding: 32px 28px;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   transition: background .2s;
}

.art-card:hover {
   background: var(--panel);
   text-decoration: none;
}

.art-date {
   font-size: 0.72rem;
   color: var(--ghost);
   letter-spacing: 0.06em;
   margin-bottom: 14px;
   display: block;
   font-family: var(--sans);
}

.art-card h3 {
   font-size: 0.93rem;
   line-height: 1.45;
   margin-bottom: 12px;
   flex: 1;
}

.art-card p {
   font-size: 0.83rem;
   color: var(--muted);
   max-width: none;
   margin-bottom: 20px;
}

.art-tag {
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   align-self: flex-start;
   font-family: var(--sans);
}

/* ===========================================================
   CTA FINALE
   =========================================================== */
#cta-finale {
   max-width: 100%;
   padding: clamp(80px, 11vw, 160px) var(--g);
   position: relative;
   overflow: hidden;
   background: var(--ink);
}

.cta-glow1 {
   position: absolute;
   top: -200px;
   left: -150px;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.12) 0%, transparent 65%);
}

.cta-glow2 {
   position: absolute;
   bottom: -150px;
   right: -100px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.07) 0%, transparent 65%);
}

.cta-grid-bg {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 80%);
}

#cta-finale .wrap {
   position: relative;
   z-index: 1;
   text-align: center;
}

#cta-finale .label {
   display: block;
   margin-bottom: 20px;
   color: rgba(192, 96, 48, 0.8);
}

#cta-finale h2 {
   max-width: 20ch;
   margin: 0 auto 24px;
   color: #f8f4ee;
}

#cta-finale .cta-lead {
   color: rgba(248, 244, 238, 0.5);
   max-width: 52ch;
   margin: 0 auto 44px;
}

#cta-finale .cta-micro {
   margin-top: 20px;
   font-size: 0.76rem;
   color: rgba(248, 244, 238, 0.3);
   margin: 0 auto;
}

.cta-micro {
   margin-top: 20px;
   font-size: 0.76rem;
   color: rgba(248, 244, 238, 0.3);
   margin: 0 auto;
}

/* ===========================================================
   CTA BANNER (inner pages)
   =========================================================== */
.cta-banner {
   background: var(--ink);
   padding: clamp(64px, 8vw, 110px) var(--g);
   position: relative;
   overflow: hidden;
}

.cta-banner-glow {
   position: absolute;
   top: -150px;
   right: -100px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.15) 0%, transparent 65%);
   pointer-events: none;
}

.cta-banner .wrap {
   position: relative;
   z-index: 1;
   text-align: center;
}

.cta-banner .label {
   display: block;
   margin-bottom: 16px;
   color: rgba(192, 96, 48, 0.8);
}

.cta-banner h2 {
   color: #f8f4ee;
   max-width: 22ch;
   margin: 0 auto 20px;
}

.cta-banner p {
   color: rgba(248, 244, 238, 0.5);
   max-width: 50ch;
   margin: 0 auto 36px;
}

/* CTA panel variant */
.cta-banner.cta-panel {
   background: var(--panel);
   border-top: 1px solid var(--border);
}

.cta-banner.cta-panel h2 {
   color: var(--ink);
}

.cta-banner.cta-panel p {
   color: var(--muted);
}

/* ===========================================================
   FOOTER
   =========================================================== */
#site-footer {
   padding: 40px var(--g);
   border-top: 1px solid var(--border);
   background: var(--bg);
}

#site-footer .wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
}

.footer-brand {
   font-family: var(--sans);
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--ink);
}

.footer-brand em {
   font-style: normal;
   color: var(--accent);
}

#site-footer p {
   font-size: 0.76rem;
   color: var(--ghost);
   max-width: none;
}

#site-footer a {
   color: var(--ghost);
   text-decoration: none;
}

#site-footer a:hover {
   color: var(--muted);
}

.footer-links {
   display: flex;
   gap: 0;
   flex-wrap: wrap;
   align-items: center;
}

.footer-links p {
   margin: 0;
   display: flex;
   align-items: center;
}

.footer-links a {
   font-size: 0.75rem;
}

.footer-nav-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.footer-nav-list li {
   margin: 0;
   display: flex;
   align-items: center;
}

.footer-nav-list li::before {
   content: '·';
   margin: 0 10px;
   color: var(--ghost);
   font-size: 0.9rem;
}

/* ===========================================================
   PAGE HERO (inner pages)
   =========================================================== */
.page-hero {
   padding: clamp(80px, 11vw, 140px) var(--g) clamp(56px, 7vw, 90px);
   position: relative;
   overflow: hidden;
}

.page-hero-bg {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
   background-size: 72px 72px;
   mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, black 30%, transparent 100%);
   pointer-events: none;
}

.page-hero-glow {
   position: absolute;
   top: -80px;
   right: -80px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.06) 0%, transparent 65%);
   pointer-events: none;
}

.page-hero-inner {
   position: relative;
   z-index: 1;
}

.page-eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px;
}

.eyebrow-line {
   display: block;
   width: 32px;
   height: 1px;
   background: var(--accent);
}

.page-hero h1 {
   margin-bottom: 28px;
   max-width: 18ch;
}

.page-hero-lead {
   font-size: clamp(0.95rem, 1.2vw, 1.08rem);
   color: var(--muted);
   max-width: 56ch;
   line-height: 1.8;
}

/* Breadcrumb */
.breadcrumb {
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
   margin-bottom: 20px;
}

.breadcrumb a {
   color: var(--ghost);
   text-decoration: none;
}

.breadcrumb a:hover {
   color: var(--accent);
}

.breadcrumb span {
   margin: 0 8px;
   opacity: 0.5;
}

/* ===========================================================
   CHI SONO PAGE
   =========================================================== */
.chisono-intro-grid {
   display: grid;
   grid-template-columns: 1fr 1.6fr;
   gap: clamp(40px, 7vw, 100px);
   align-items: start;
}

.portrait-wrap {
   position: sticky;
   top: 100px;
}

.portrait-card-page {
   background: var(--panel);
   border: 1px solid var(--border2);
   border-radius: 8px;
   aspect-ratio: 3/4;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   padding: 28px;
}

.portrait-card-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(160deg, var(--bg2) 0%, var(--panel) 100%);
}

.portrait-slash {
   position: absolute;
   top: 32px;
   left: 32px;
   z-index: 1;
}

.portrait-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}

.portrait-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 16px;
}

.pstat {
   background: var(--bg);
   padding: 18px;
}

.pstat-val {
   font-family: var(--serif);
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--ink);
   display: block;
   line-height: 1;
   margin-bottom: 4px;
}

.pstat-val em {
   color: var(--accent);
   font-style: normal;
}

.pstat p {
   font-size: 0.72rem;
   color: var(--ghost);
   max-width: none;
}

.bio-blocks {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.bio-block {
   padding: clamp(32px, 4vw, 52px) 0;
   border-bottom: 1px solid var(--border);
}

.bio-block:first-child {
   padding-top: 0;
}

.bio-block:last-child {
   border-bottom: none;
}

.bio-block .label {
   display: block;
   margin-bottom: 16px;
}

.bio-block h2 {
   margin-bottom: 20px;
}

.bio-block p {
   color: var(--muted);
   margin-bottom: 16px;
}

.bio-block p:last-of-type {
   margin-bottom: 0;
}

.valori-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 32px;
}

.valore-cell {
   background: var(--bg2);
   padding: 28px 24px;
}

.valore-cell h3 {
   font-size: 0.92rem;
   margin-bottom: 10px;
}

.valore-cell p {
   font-size: 0.85rem;
   color: var(--muted);
   max-width: none;
}

.pull-quote {
   font-family: var(--serif);
   font-size: clamp(1.1rem, 1.8vw, 1.4rem);
   font-style: italic;
   color: var(--ink2);
   border-left: 2px solid var(--accent);
   padding: 4px 0 4px 24px;
   margin: 28px 0;
   max-width: 48ch;
   line-height: 1.5;
}

/* ===========================================================
   SERVIZI PAGE (large list)
   =========================================================== */
.servizi-list {
   display: flex;
   flex-direction: column;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 64px;
}

.servizio-row {
   background: var(--bg2);
   display: grid;
   grid-template-columns: 1fr 1.8fr auto;
   gap: clamp(24px, 4vw, 64px);
   align-items: center;
   padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 52px);
   position: relative;
   transition: background .2s;
   text-decoration: none;
   color: inherit;
}

.servizio-row:hover {
   background: var(--panel);
   text-decoration: none;
}

.servizio-row::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--accent);
   opacity: 0;
   transition: opacity .2s;
}

.servizio-row:hover::before {
   opacity: 1;
}

.sr-number {
   font-family: var(--serif);
   font-size: 3.5rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.1);
   line-height: 1;
   flex-shrink: 0;
}

.sr-content .label {
   display: block;
   margin-bottom: 10px;
}

.sr-content h2 {
   font-size: clamp(1.3rem, 2vw, 1.8rem);
   margin-bottom: 12px;
}

.sr-content p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: 52ch;
}

.sr-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
}

.sr-tag {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   font-family: var(--sans);
}

.sr-arrow {
   font-size: 1.4rem;
   color: var(--ghost);
   transition: color .2s, transform .2s;
   flex-shrink: 0;
}

.servizio-row:hover .sr-arrow {
   color: var(--accent);
   transform: translateX(4px);
}

.logica-section {
   padding: clamp(72px, 9vw, 120px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.logica-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.logica-header {
   margin-bottom: 56px;
}

.logica-header .label {
   display: block;
   margin-bottom: 16px;
}

.logica-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.logica-cell {
   background: var(--bg);
   padding: 36px 28px;
}

.logica-cell-num {
   font-family: var(--serif);
   font-size: 2rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.15);
   margin-bottom: 16px;
   display: block;
}

.logica-cell h3 {
   font-size: 0.95rem;
   margin-bottom: 10px;
}

.logica-cell p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

/* ===========================================================
   SERVICE DETAIL PAGES (SEO, Google Ads, etc.)
   =========================================================== */
.cosa-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.cosa-section .label {
   display: block;
   margin-bottom: 20px;
}

.cosa-section h2 {
   margin-bottom: 40px;
}

.cosa-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   border-top: 1px solid var(--border);
}

.cosa-item {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 24px;
   padding: clamp(24px, 3vw, 36px) 0;
   border-bottom: 1px solid var(--border);
   align-items: start;
}

.cosa-num {
   font-family: var(--serif);
   font-size: 1.8rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.2);
   line-height: 1.1;
   flex-shrink: 0;
   min-width: 36px;
}

.cosa-content h3 {
   margin-bottom: 10px;
   font-size: 0.95rem;
}

.cosa-content p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: none;
}

.diff-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.diff-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.diff-inner .label {
   display: block;
   margin-bottom: 16px;
   color: rgba(192, 96, 48, 0.8);
}

.diff-inner h2 {
   color: var(--ink);
   margin-bottom: 36px;
   max-width: 28ch;
}

.diff-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.diff-cell {
   background: var(--bg);
   padding: 32px 28px;
}

.diff-cell h3 {
   font-size: 0.92rem;
   color: var(--ink);
   margin-bottom: 10px;
}

.diff-cell p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

/* light variant for seo page */
.diff-section-light {
   background: transparent;
}

.diff-section-light .diff-cell {
   background: var(--bg2);
}

.diff-section-light .diff-cell h3 {
   color: var(--ink);
}

.diff-section-light .diff-cell p {
   color: var(--muted);
}

.caso-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.caso-card-inner {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: clamp(36px, 5vw, 56px);
   position: relative;
   overflow: hidden;
}

.caso-card-inner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
}

.caso-card-inner .label {
   display: block;
   margin-bottom: 16px;
}

.caso-card-inner h2 {
   margin-bottom: 20px;
   font-size: clamp(1.3rem, 2vw, 1.8rem);
}

.caso-card-inner p {
   color: var(--muted);
   margin-bottom: 24px;
}

.caso-kpi-row {
   display: flex;
   gap: 48px;
   flex-wrap: wrap;
   padding-top: 28px;
   border-top: 1px solid var(--border);
}

.caso-kpi {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.caso-kpi-val-lg {
   font-family: var(--serif);
   font-size: 2rem;
   font-weight: 700;
   color: var(--accent);
   line-height: 1;
}

.caso-kpi-label-sm {
   font-size: 0.75rem;
   color: var(--ghost);
}

/* ===========================================================
   NUMERI / TABLE SECTION (Google Ads page)
   =========================================================== */
.numeri-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.numeri-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.numeri-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 90px);
   align-items: center;
}

.numeri-text .label {
   display: block;
   margin-bottom: 16px;
}

.numeri-text h2 {
   margin-bottom: 20px;
}

.numeri-text p {
   color: var(--muted);
   margin-bottom: 16px;
}

.numeri-table {
   display: flex;
   flex-direction: column;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.nt-row {
   background: var(--panel);
   padding: 16px 22px;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
}

.nt-row.ok {
   background: rgba(192, 96, 48, 0.07);
   border-left: 2px solid var(--accent);
}

.nt-label {
   font-size: 0.78rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.nt-val {
   font-family: var(--serif);
   font-size: 1.45rem;
   font-weight: 700;
   color: var(--ink);
}

.nt-val.good {
   color: var(--accent);
}

.nt-val.bad {
   color: #b85a20;
}

/* ===========================================================
   AI / USE CASES
   =========================================================== */
.use-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.use-section .label {
   display: block;
   margin-bottom: 20px;
}

.use-section h2 {
   margin-bottom: 40px;
}

.use-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.use-cell {
   background: var(--bg2);
   padding: 40px 36px;
   position: relative;
   overflow: hidden;
}

.use-cell::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
}

.use-cell:hover::before {
   opacity: 1;
}

.use-cell-num {
   font-family: var(--serif);
   font-size: 2.8rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.1);
   line-height: 1;
   margin-bottom: 20px;
   display: block;
}

.use-cell h3 {
   margin-bottom: 12px;
   font-size: 0.95rem;
}

.use-cell p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: none;
}

.outcome-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.outcome-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.outcome-inner .label {
   display: block;
   margin-bottom: 16px;
}

.outcome-inner h2 {
   margin-bottom: 36px;
}

.outcome-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   border-top: 1px solid var(--border);
}

.outcome-item {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   padding: 20px 0;
   border-bottom: 1px solid var(--border);
}

.outcome-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   flex-shrink: 0;
   margin-top: 8px;
}

.outcome-item p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: none;
   margin: 0;
}

.outcome-item strong {
   color: var(--ink);
}

/* ===========================================================
   FORMAZIONE PAGE
   =========================================================== */
.format-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.format-section .label {
   display: block;
   margin-bottom: 20px;
}

.format-section h2 {
   margin-bottom: 48px;
}

.format-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.format-card {
   background: var(--bg2);
   padding: 40px 32px;
   position: relative;
}

.format-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
}

.format-tag {
   font-size: 0.63rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   display: inline-block;
   margin-bottom: 20px;
   font-family: var(--sans);
}

.format-card h3 {
   font-size: 1.05rem;
   margin-bottom: 14px;
   font-family: var(--serif);
}

.format-card p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.temi-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.temi-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.temi-inner .label {
   display: block;
   margin-bottom: 16px;
}

.temi-inner h2 {
   margin-bottom: 40px;
}

.temi-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.tema-cell {
   background: var(--bg);
   padding: 32px 28px;
}

.tema-cell h3 {
   margin-bottom: 10px;
   font-size: 0.95rem;
}

.tema-cell p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.tema-highlight {
   background: rgba(192, 96, 48, 0.06) !important;
   border-left: 2px solid var(--accent);
}

.pull-section {
   padding: clamp(48px, 6vw, 60px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

/* ===========================================================
   FRACTIONAL CMO PAGE
   =========================================================== */
.perchi-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   margin: 0 auto;
   background: var(--bg2);
}

.perchi-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.perchi-section .label {
   display: block;
   margin-bottom: 20px;
}

.perchi-section h2 {
   margin-bottom: 36px;
}

.perchi-section>p {
   margin-bottom: 48px;
}

.perchi-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.perchi-cell {
   background: var(--bg);
   padding: 32px 28px;
}

/*
.perchi-cell::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0.5;
}
*/

.perchi-cell h3 {
   margin-bottom: 10px;
   font-size: 0.92rem;
   color: var(--ink);
}

.perchi-cell p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.perchi-icon {
   margin-bottom: 20px;
}

.vs-section {
   padding: clamp(64px, 8vw, 80px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.vs-section .label {
   display: block;
   margin-bottom: 16px;
}

.vs-section h2 {
   margin-bottom: 40px;
}

.vs-table {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.vs-col-head {
   background: var(--ink);
   padding: 20px 24px;
}

.vs-col-head:first-child {
   background: var(--panel);
}

.vs-col-head:last-child {
   background: rgba(192, 96, 48, 0.12);
}

.vs-col-head span {
   font-family: var(--sans);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.vs-col-head:first-child span {
   color: var(--muted);
}

.vs-col-head:nth-child(2) span {
   color: rgba(248, 244, 238, 0.5);
}

.vs-col-head:last-child span {
   color: var(--accent);
}

.vs-cell {
   padding: 14px 24px;
   font-size: 0.85rem;
}

.vs-cell:nth-child(3n+1) {
   background: var(--bg2);
   color: var(--muted);
}

.vs-cell:nth-child(3n+2) {
   background: rgba(28, 23, 18, 0.85);
   color: rgba(248, 244, 238, 0.4);
}

.vs-cell:nth-child(3n+3) {
   background: var(--accent-pale);
   color: var(--ink2);
   font-weight: 500;
}

/* ===========================================================
   CONTATTI PAGE
   =========================================================== */
.contact-layout {
   display: grid;
   grid-template-columns: 1fr 1.6fr;
   gap: clamp(48px, 7vw, 110px);
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
   align-items: start;
}

.contact-sidebar {
   position: sticky;
   top: 100px;
}

.sidebar-block {
   margin-bottom: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid var(--border);
}

.sidebar-block:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.sidebar-block .label {
   display: block;
   margin-bottom: 14px;
}

.sidebar-block h3 {
   margin-bottom: 10px;
   font-size: 1rem;
}

.sidebar-block p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.process-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin-top: 16px;
}

.process-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid var(--border);
}

.process-item:last-child {
   border-bottom: none;
}

.process-num {
   font-family: var(--serif);
   font-size: 1.2rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.3);
   line-height: 1.2;
   flex-shrink: 0;
   min-width: 20px;
}

.process-item p {
   font-size: 0.84rem;
   color: var(--muted);
   max-width: none;
   margin: 0;
}

.process-item strong {
   color: var(--ink);
}

.sidebar-note {
   background: rgba(192, 96, 48, 0.06);
   border: 1px solid rgba(192, 96, 48, 0.15);
   border-radius: var(--r);
   padding: 20px;
}

.sidebar-note p {
   font-size: 0.84rem;
   color: var(--ink2);
   max-width: none;
   line-height: 1.65;
}

.contact-form-wrap {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: clamp(36px, 5vw, 56px);
   position: relative;
   overflow: hidden;
}

.contact-form-wrap::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), rgba(192, 96, 48, 0.3), transparent);
}

.form-header {
   margin-bottom: 36px;
}

.form-header .label {
   display: block;
   margin-bottom: 12px;
}

.form-header h2 {
   font-size: clamp(1.3rem, 2vw, 1.7rem);
   margin-bottom: 10px;
}

.form-header p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

/* Contact Form 7 wrapper */
.wpcf7 {
   margin-top: 0;
}

.wpcf7-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.field-group {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.field label {
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--ink2);
   font-family: var(--sans);
   text-transform: uppercase;
}

.field input,
.field select,
.field textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
   padding: 12px 16px;
   border: 1px solid var(--border2);
   border-radius: var(--r);
   background: var(--bg);
   color: var(--ink);
   font-size: 0.9rem;
   font-family: var(--body);
   outline: none;
   transition: border-color .2s, box-shadow .2s;
   width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(192, 96, 48, 0.08);
}

.field textarea,
.wpcf7 textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.6;
}

.checkbox-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 4px;
}

.checkbox-item {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: var(--accent);
   cursor: pointer;
   flex-shrink: 0;
}

.checkbox-item span {
   font-size: 0.875rem;
   color: var(--muted);
}

.form-divider {
   border: none;
   border-top: 1px solid var(--border);
   margin: 28px 0;
}

.form-submit-wrap {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.form-submit-note {
   font-size: 0.75rem;
   color: var(--ghost);
   line-height: 1.5;
}

.form-privacy {
   font-size: 0.72rem;
   color: var(--ghost);
   margin-top: 8px;
   line-height: 1.5;
}

.form-privacy a {
   color: var(--ghost);
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* CF7 submit button */
.wpcf7-submit {
   display: inline-flex !important;
   align-items: center;
   gap: 10px;
   font-family: var(--sans);
   font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   padding: 16px 32px;
   border-radius: var(--r);
   cursor: pointer;
   background: var(--accent);
   color: #fff;
   border: none;
   transition: all .22s;
   width: 100%;
   justify-content: center;
}

.wpcf7-submit:hover {
   background: var(--accent-dim);
   transform: translateY(-1px);
}

/* ===========================================================
   BLOG PAGE
   =========================================================== */
.filters-bar {
   padding: 0 var(--g);
   max-width: var(--max);
   margin: 0 auto;
   padding-top: clamp(32px, 4vw, 52px);
   padding-bottom: clamp(32px, 4vw, 52px);
}

.filters {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   align-items: center;
}

.filter-label {
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ghost);
   font-family: var(--sans);
   margin-right: 8px;
}

.filter-btn {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   padding: 6px 14px;
   border-radius: var(--r);
   cursor: pointer;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--muted);
   font-family: var(--sans);
   transition: all .18s;
}

.filter-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.filter-btn.on,
.filter-btn[aria-pressed="true"] {
   background: var(--ink);
   color: var(--bg);
   border-color: var(--ink);
}

.featured-section {
   padding: 0 var(--g) clamp(40px, 5vw, 64px);
   max-width: var(--max);
   margin: 0 auto;
}

.featured-card {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: clamp(40px, 5vw, 64px);
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 5vw, 72px);
   align-items: start;
}

.featured-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), rgba(192, 96, 48, 0.2), transparent);
}

.featured-badge {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #fff;
   background: var(--accent);
   padding: 4px 10px;
   border-radius: 2px;
   display: inline-block;
   margin-bottom: 16px;
   font-family: var(--sans);
}

.featured-card h2 {
   font-size: clamp(1.4rem, 2.2vw, 2rem);
   margin-bottom: 16px;
   line-height: 1.2;
}

.featured-card .art-meta {
   display: flex;
   gap: 16px;
   align-items: center;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.featured-card p.lead {
   font-size: 0.95rem;
   color: var(--muted);
   line-height: 1.75;
   max-width: none;
}

.featured-right {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.featured-right p {
   font-size: 0.9rem;
   color: var(--muted);
   max-width: none;
}

.featured-kpi-row {
   display: flex;
   gap: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--border);
}

.featured-kpi-val {
   font-family: var(--serif);
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--accent);
   display: block;
   line-height: 1;
}

.featured-kpi-label {
   font-size: 0.72rem;
   color: var(--ghost);
}

.art-read-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 0.82rem;
   font-weight: 700;
   font-family: var(--sans);
   color: var(--accent);
   text-decoration: none;
   letter-spacing: 0.04em;
   transition: gap .2s;
}

.art-read-link:hover {
   gap: 14px;
   text-decoration: none;
}

.art-read-link::after {
   content: '→';
}

.art-date {
   font-size: 0.72rem;
   color: var(--ghost);
   letter-spacing: 0.06em;
   font-family: var(--sans);
}

.art-tag {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   font-family: var(--sans);
}

.articles-section {
   padding: 0 var(--g) clamp(64px, 8vw, 100px);
   max-width: var(--max);
   margin: 0 auto;
}

.articles-section .label {
   display: block;
   margin-bottom: 20px;
}

.articles-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.art-card-full {
   background: var(--bg2);
   padding: 32px 28px;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   transition: background .2s;
   position: relative;
}

.art-card-full:hover {
   background: var(--panel);
   text-decoration: none;
}

.art-card-full::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity .2s;
}

.art-card-full:hover::after {
   opacity: 1;
}

.art-card-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
}

.art-card-full h3 {
   font-size: 0.97rem;
   line-height: 1.4;
   margin-bottom: 12px;
   color: var(--ink);
   flex: 1;
}

.art-card-full p {
   font-size: 0.84rem;
   color: var(--muted);
   max-width: none;
   margin-bottom: 20px;
   line-height: 1.65;
}

.art-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
}

.newsletter-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
}

.newsletter-inner {
   max-width: var(--max);
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 90px);
   align-items: center;
}

.newsletter-text .label {
   display: block;
   margin-bottom: 16px;
}

.newsletter-text h2 {
   margin-bottom: 16px;
}

.newsletter-text p {
   color: var(--muted);
}

.newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.form-row {
   display: flex;
   gap: 10px;
}

.form-input {
   flex: 1;
   padding: 12px 16px;
   border: 1px solid var(--border2);
   border-radius: var(--r);
   background: var(--bg);
   color: var(--ink);
   font-size: 0.88rem;
   font-family: var(--body);
   outline: none;
   transition: border-color .2s;
}

.form-input:focus {
   border-color: var(--accent);
}

.form-input::placeholder {
   color: var(--ghost);
}

.form-note {
   font-size: 0.72rem;
   color: var(--ghost);
}

/* ===========================================================
   SINGLE BLOG POST
   =========================================================== */
.post-layout {
   max-width: 780px;
   margin: 0 auto;
   padding: clamp(56px, 7vw, 90px) var(--g);
}

.post-header {
   margin-bottom: 48px;
}

.post-breadcrumb {
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
   margin-bottom: 20px;
}

.post-breadcrumb a {
   color: var(--ghost);
   text-decoration: none;
}

.post-breadcrumb a:hover {
   color: var(--accent);
}

.post-breadcrumb span {
   margin: 0 8px;
   opacity: 0.5;
}

.post-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 28px;
}

.post-tag {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #fff;
   background: var(--accent);
   padding: 4px 10px;
   border-radius: 2px;
   font-family: var(--sans);
}

.post-date {
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.post-read-time {
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.post-header h1 {
   margin-bottom: 24px;
   font-size: clamp(1.9rem, 3.5vw, 3rem);
}

.post-header .lead {
   font-size: clamp(1rem, 1.3vw, 1.15rem);
   color: var(--muted);
   line-height: 1.75;
   max-width: 62ch;
   font-family: var(--body);
}

.post-content {
   font-size: clamp(0.95rem, 1.1vw, 1.06rem);
   line-height: 1.85;
}

.post-content p {
   color: var(--muted);
   margin-bottom: 24px;
   max-width: 68ch;
}

.post-content h2 {
   color: var(--ink);
   margin-top: 52px;
   margin-bottom: 16px;
   font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.post-content h3 {
   color: var(--ink2);
   margin-top: 36px;
   margin-bottom: 12px;
   font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

.post-content ul,
.post-content ol {
   margin: 0 0 24px 24px;
   color: var(--muted);
}

.post-content li {
   margin-bottom: 8px;
   font-size: inherit;
}

.post-content blockquote {
   border-left: 2px solid var(--accent);
   padding: 4px 0 4px 24px;
   margin: 36px 0;
   font-family: var(--serif);
   font-style: italic;
   font-size: clamp(1.05rem, 1.5vw, 1.25rem);
   color: var(--ink2);
   max-width: 52ch;
   line-height: 1.55;
}

.callout {
   background: var(--bg2);
   border: 1px solid var(--border2);
   border-left: 3px solid var(--accent);
   border-radius: var(--r);
   padding: 24px 28px;
   margin: 36px 0;
}

.callout .callout-label {
   font-family: var(--sans);
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--accent);
   display: block;
   margin-bottom: 8px;
}

.callout p {
   font-size: 0.9rem;
   color: var(--ink2);
   max-width: none;
   margin-bottom: 0;
}

.data-table,
.post-content .wp-block-table table,
.post-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 36px 0;
   font-size: 0.875rem;
   border: none !important;
}

.data-table thead th,
.post-content .wp-block-table thead th,
.post-content .wp-block-table th,
.post-content table thead th,
.post-content table th {
   font-family: var(--sans);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ghost);
   padding: 10px 16px;
   border: none !important;
   border-bottom: 1px solid var(--border2) !important;
   text-align: left;
}

.data-table tbody td,
.post-content .wp-block-table tbody td,
.post-content .wp-block-table td,
.post-content table tbody td,
.post-content table td {
   padding: 12px 16px;
   border: none !important;
   border-bottom: 1px solid var(--border) !important;
   color: var(--muted);
}

.data-table tbody tr:hover td,
.post-content .wp-block-table tbody tr:hover td,
.post-content .wp-block-table tr:hover td,
.post-content table tbody tr:hover td,
.post-content table tr:hover td {
   background: var(--bg2);
}

.data-table .good,
.post-content .wp-block-table .good,
.post-content table .good {
   color: var(--accent);
   font-weight: 600;
}

.data-table .bad,
.post-content .wp-block-table .bad,
.post-content table .bad {
   color: #b85a20;
   font-weight: 600;
}

.post-author {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 28px;
   margin-top: 56px;
}

.post-author .label {
   display: block;
   margin-bottom: 12px;
}

.post-author h3 {
   font-size: 0.95rem;
   margin-bottom: 8px;
}

.post-author p {
   font-size: 0.85rem;
   color: var(--muted);
   max-width: none;
}

.post-author a {
   font-size: 0.82rem;
}

.post-share {
   margin-top: 40px;
   padding-top: 28px;
   border-top: 1px solid var(--border);
}

.post-share>.label {
   display: block;
   margin-bottom: 14px;
}

.share-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.share-btn {
   font-family: var(--sans);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   padding: 7px 14px;
   border: 1px solid var(--border2);
   border-radius: var(--r);
   color: var(--muted);
   text-decoration: none;
   transition: all .2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.share-btn:hover {
   text-decoration: none;
}

.share-btn--x:hover {
   border-color: #1a1a2e;
   color: #1a1a2e;
}

.share-btn--li:hover {
   border-color: #0a66c2;
   color: #0a66c2;
}

.share-btn--wa:hover {
   border-color: #25d366;
   color: #25d366;
}

.share-btn--fb:hover {
   border-color: #1877f2;
   color: #1877f2;
}

.share-btn--tg:hover {
   border-color: #2aabee;
   color: #2aabee;
}

.share-btn--mail:hover {
   border-color: var(--accent);
   color: var(--accent);
}

/* TOC inline (shortcode [gc_toc]) */
.toc-block {
   background: var(--bg2);
   border: 1px solid var(--border2);
   border-left: 3px solid var(--accent);
   border-radius: var(--r);
   padding: 24px 28px;
   margin: 36px 0;
}

.toc-block>.label {
   display: block;
   margin-bottom: 14px;
}

.toc-list-inline {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.toc-list-inline a {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-size: 0.84rem;
   color: var(--muted);
   text-decoration: none;
   padding: 9px 0;
   border-bottom: 1px solid var(--border);
   font-family: var(--sans);
   transition: color .2s;
}

.toc-list-inline a:last-child {
   border-bottom: none;
}

.toc-list-inline a::before {
   content: '→';
   color: var(--accent);
   font-size: 0.75rem;
   flex-shrink: 0;
}

.toc-list-inline a:hover {
   color: var(--accent);
   text-decoration: none;
}

.toc-list-inline a.active {
   color: var(--accent);
   font-weight: 600;
}

/* Sidebar stili mantenuti per retrocompatibilità con altri template */
.post-sidebar {
   position: sticky;
   top: 96px;
   align-self: start;
}

.sidebar-block-post {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 24px;
   margin-bottom: 20px;
}

.sidebar-block-post .label {
   display: block;
   margin-bottom: 12px;
}

.sidebar-block-post h3 {
   font-size: 0.9rem;
   margin-bottom: 8px;
}

.sidebar-block-post p {
   font-size: 0.82rem;
   color: var(--muted);
   max-width: none;
   margin-bottom: 16px;
}

.sidebar-related {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 0;
   padding: 0;
}

.sidebar-related a {
   display: block;
   font-size: 0.82rem;
   color: var(--muted);
   text-decoration: none;
   padding: 10px 0;
   border-bottom: 1px solid var(--border);
   line-height: 1.45;
   font-family: var(--serif);
   transition: color .2s;
}

.sidebar-related a:hover {
   color: var(--accent);
   text-decoration: none;
}

/* Newsletter inline nel post */
.post-newsletter {
   border-top: 1px solid var(--border);
}

.post-newsletter .newsletter-inner {
   max-width: 780px;
}

.related-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.related-section .label {
   display: block;
   margin-bottom: 20px;
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 32px;
}

.rel-card {
   background: var(--bg2);
   padding: 28px;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   transition: background .2s;
}

.rel-card:hover {
   background: var(--panel);
   text-decoration: none;
}

.rel-date {
   font-size: 0.7rem;
   color: var(--ghost);
   margin-bottom: 10px;
   display: block;
   font-family: var(--sans);
}

.rel-card h3 {
   font-size: 0.92rem;
   margin-bottom: 10px;
   line-height: 1.4;
}

.rel-tag {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   align-self: flex-start;
   font-family: var(--sans);
   margin-top: auto;
}

/* ===========================================================
   ARCHIVE PAGE
   =========================================================== */
.archive-hero {
   padding: clamp(72px, 9vw, 120px) var(--g) clamp(48px, 6vw, 72px);
   position: relative;
   overflow: hidden;
}

.archive-hero-bg {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
   background-size: 72px 72px;
   mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, black 30%, transparent 100%);
   pointer-events: none;
}

.archive-hero-inner {
   position: relative;
   z-index: 1;
}

.archive-breadcrumb {
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
   margin-bottom: 20px;
}

.archive-breadcrumb a {
   color: var(--ghost);
   text-decoration: none;
}

.archive-breadcrumb a:hover {
   color: var(--accent);
}

.archive-breadcrumb span {
   margin: 0 8px;
   opacity: 0.5;
}

.archive-eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px;
}

.archive-hero h1 {
   margin-bottom: 16px;
}

.archive-hero p {
   font-size: clamp(0.95rem, 1.2vw, 1.05rem);
   color: var(--muted);
   max-width: 56ch;
   line-height: 1.8;
}

.archive-count {
   margin-top: 16px;
   font-size: 0.75rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.cat-nav {
   padding: 0 var(--g);
   max-width: var(--max);
   margin: 0 auto;
   padding-top: clamp(28px, 3vw, 40px);
   padding-bottom: clamp(28px, 3vw, 40px);
}

.cat-nav-inner {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   align-items: center;
}

.cat-all {
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ghost);
   font-family: var(--sans);
   margin-right: 8px;
}

.cat-btn {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   padding: 6px 14px;
   border-radius: var(--r);
   cursor: pointer;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--muted);
   font-family: var(--sans);
   text-decoration: none;
   transition: all .18s;
}

.cat-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
   text-decoration: none;
}

.cat-btn.active,
.cat-btn[aria-current="page"] {
   background: var(--ink);
   color: var(--bg);
   border-color: var(--ink);
}

.posts-section {
   padding: 0 var(--g) clamp(64px, 8vw, 100px);
   max-width: var(--max);
   margin: 0 auto;
}

.posts-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.post-card {
   background: var(--bg2);
   padding: 32px 28px;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   transition: background .2s;
   position: relative;
}

.post-card:hover {
   background: var(--panel);
   text-decoration: none;
}

.post-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity .2s;
}

.post-card:hover::after {
   opacity: 1;
}

.post-card-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
}

.post-date {
   font-size: 0.72rem;
   color: var(--ghost);
   letter-spacing: 0.06em;
   font-family: var(--sans);
}

.post-tag-arch {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   font-family: var(--sans);
}

.post-card h3 {
   font-size: 0.97rem;
   line-height: 1.4;
   margin-bottom: 12px;
   color: var(--ink);
   flex: 1;
}

.post-card p {
   font-size: 0.84rem;
   color: var(--muted);
   max-width: none;
   margin-bottom: 20px;
   line-height: 1.65;
}

.post-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
}

.post-read {
   font-size: 0.72rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.post-read-link {
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--accent);
   font-family: var(--sans);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap .2s;
}

.post-read-link::after {
   content: '→';
}

.post-read-link:hover {
   gap: 10px;
   text-decoration: none;
}

.pagination {
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   padding: clamp(48px, 5vw, 72px) var(--g) 0;
}

.page-btn {
   font-family: var(--sans);
   font-size: 0.8rem;
   font-weight: 700;
   padding: 9px 16px;
   border: 1px solid var(--border);
   border-radius: var(--r);
   color: var(--muted);
   text-decoration: none;
   transition: all .2s;
}

.page-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
   text-decoration: none;
}

.page-btn.active {
   background: var(--ink);
   color: var(--bg);
   border-color: var(--ink);
}

.page-btn.disabled {
   opacity: 0.35;
   pointer-events: none;
}

.archive-layout {
   display: grid;
   grid-template-columns: 1fr 260px;
   gap: clamp(48px, 6vw, 80px);
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 var(--g) clamp(64px, 8vw, 100px);
}

.archive-sidebar {
   position: sticky;
   top: 96px;
   align-self: start;
}

.sbar-block {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 24px;
   margin-bottom: 20px;
}

.sbar-block .label {
   display: block;
   margin-bottom: 14px;
}

.sbar-cat-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 0;
   padding: 0;
}

.sbar-cat-list a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.85rem;
   color: var(--muted);
   text-decoration: none;
   padding: 9px 0;
   border-bottom: 1px solid var(--border);
   font-family: var(--sans);
   transition: color .2s;
}

.sbar-cat-list a:last-child {
   border-bottom: none;
}

.sbar-cat-list a:hover {
   color: var(--accent);
   text-decoration: none;
}

.sbar-cat-list a.active {
   color: var(--accent);
   font-weight: 600;
}

.sbar-cat-count {
   font-size: 0.72rem;
   color: var(--ghost);
}

.sbar-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.sbar-tag {
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   border: 1px solid var(--border);
   padding: 4px 10px;
   border-radius: 2px;
   text-decoration: none;
   font-family: var(--sans);
   transition: all .18s;
}

.sbar-tag:hover {
   border-color: var(--accent);
   color: var(--accent);
   text-decoration: none;
}

/* ===========================================================
   SEARCH PAGE
   =========================================================== */
.search-header {
   padding: clamp(64px, 8vw, 100px) var(--g) clamp(32px, 4vw, 48px);
   max-width: var(--max);
   margin: 0 auto;
}

.search-header .label {
   display: block;
   margin-bottom: 16px;
}

.search-header h1 {
   margin-bottom: 8px;
}

.search-count {
   font-size: 0.82rem;
   color: var(--ghost);
   font-family: var(--sans);
   margin-bottom: 32px;
}

.search-count strong {
   color: var(--muted);
}

.search-bar {
   display: flex;
   gap: 0;
   max-width: 600px;
}

.search-input {
   flex: 1;
   padding: 14px 20px;
   border: 1px solid var(--border2);
   border-right: none;
   border-radius: var(--r) 0 0 var(--r);
   background: var(--bg2);
   color: var(--ink);
   font-size: 0.95rem;
   font-family: var(--body);
   outline: none;
   transition: border-color .2s;
}

.search-input:focus {
   border-color: var(--accent);
}

.search-submit {
   padding: 14px 24px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 0 var(--r) var(--r) 0;
   cursor: pointer;
   font-family: var(--sans);
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   transition: background .2s;
}

.search-submit:hover {
   background: var(--accent-dim);
}

.search-layout {
   display: grid;
   grid-template-columns: 1fr 260px;
   gap: clamp(48px, 6vw, 80px);
   max-width: var(--max);
   margin: 0 auto;
   padding: clamp(48px, 6vw, 72px) var(--g) clamp(64px, 8vw, 100px);
}

.results-list {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.result-item {
   padding: clamp(24px, 3vw, 36px) 0;
   border-bottom: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.result-item:first-child {
   padding-top: 0;
}

.result-type {
   font-family: var(--sans);
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   align-self: flex-start;
}

.result-item h3 {
   font-size: 1rem;
   margin: 0;
}

.result-item h3 a {
   color: var(--ink);
   text-decoration: none;
   transition: color .2s;
}

.result-item h3 a:hover {
   color: var(--accent);
}

.result-item p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
   line-height: 1.65;
}

.result-item p mark {
   background: rgba(192, 96, 48, 0.12);
   color: var(--ink2);
   border-radius: 2px;
   padding: 0 2px;
}

.result-meta {
   display: flex;
   gap: 16px;
   align-items: center;
   flex-wrap: wrap;
}

.result-url,
.result-date {
   font-size: 0.72rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.no-results {
   padding: clamp(48px, 6vw, 72px) 0;
   text-align: center;
}

.no-results h2 {
   margin-bottom: 12px;
   font-size: 1.4rem;
}

.no-results p {
   margin: 0 auto;
   text-align: center;
}

.search-sidebar {
   align-self: start;
   position: sticky;
   top: 96px;
}

.sbar-suggest {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 0;
   padding: 0;
}

.sbar-suggest a {
   display: block;
   font-size: 0.85rem;
   color: var(--muted);
   text-decoration: none;
   padding: 9px 0;
   border-bottom: 1px solid var(--border);
   font-family: var(--sans);
   transition: color .2s;
}

.sbar-suggest a:last-child {
   border-bottom: none;
}

.sbar-suggest a:hover {
   color: var(--accent);
   text-decoration: none;
}

.sbar-suggest a::before {
   content: '↗ ';
   font-size: 0.8rem;
   color: var(--accent);
}

/* ===========================================================
   CASI STUDIO PAGE
   =========================================================== */
.hero-stats-strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-top: 48px;
   max-width: 640px;
}

.hss-item {
   background: var(--bg2);
   padding: 22px 24px;
   position: relative;
}

.hss-item::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0.4;
}

.hss-val {
   font-family: var(--serif);
   font-size: clamp(1.6rem, 2.4vw, 2rem);
   font-weight: 700;
   color: var(--accent);
   line-height: 1;
   display: block;
   margin-bottom: 4px;
}

.hss-desc {
   font-size: 0.72rem;
   color: var(--ghost);
}

.filter-bar {
   padding: 0 var(--g);
   max-width: var(--max);
   margin: 0 auto;
   margin-bottom: 52px;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.filter-btn-solid {
   font-family: var(--sans);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 7px 16px;
   border-radius: 2px;
   border: 1px solid var(--border2);
   color: var(--muted);
   background: var(--bg);
   cursor: pointer;
   transition: all .2s;
}

.filter-btn-solid:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.filter-btn-solid.active {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
}

.casi-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.casi-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 48px;
   flex-wrap: wrap;
}

.casi-count {
   font-family: var(--sans);
   font-size: 0.72rem;
   color: var(--ghost);
}

.casi-grid-2col {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.caso-card-cs {
   background: var(--bg);
   display: flex;
   flex-direction: column;
   position: relative;
   text-decoration: none;
   color: inherit;
   transition: background .2s;
   overflow: hidden;
}

.caso-card-cs:hover {
   background: var(--bg2);
   text-decoration: none;
}

.caso-card-cs::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity .2s;
}

.caso-card-cs:hover::before {
   opacity: 1;
}

.caso-card-body {
   padding: clamp(28px, 4vw, 44px);
   flex: 1;
   display: flex;
   flex-direction: column;
}

.caso-card-tags {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 18px;
}

.caso-tag {
   font-size: 0.6rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 9px;
   border-radius: 2px;
   font-family: var(--sans);
}

.caso-tag-settore {
   color: var(--muted);
   border-color: var(--border2);
}

.caso-card-cs h3 {
   font-family: var(--serif);
   font-size: clamp(1.05rem, 1.6vw, 1.3rem);
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 12px;
   line-height: 1.25;
}

.caso-card-cs p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
   flex: 1;
}

.caso-card-kpis {
   display: flex;
   gap: 32px;
   padding: 24px clamp(28px, 4vw, 44px);
   border-top: 1px solid var(--border);
   flex-wrap: wrap;
}

.caso-kpi-mini {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.caso-kpi-val-mini {
   font-family: var(--serif);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--accent);
   line-height: 1;
}

.caso-kpi-label-mini {
   font-size: 0.68rem;
   color: var(--ghost);
}

.caso-card-footer-cs {
   padding: 18px clamp(28px, 4vw, 44px);
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.caso-arrow {
   font-size: 1rem;
   color: var(--ghost);
   transition: color .2s, transform .2s;
}

.caso-card-cs:hover .caso-arrow {
   color: var(--accent);
   transform: translateX(4px);
}

.caso-card-cs.featured {
   grid-column: span 2;
}

.caso-card-cs.featured .caso-card-body {
   flex-direction: row;
   gap: clamp(28px, 5vw, 64px);
   align-items: start;
}

.caso-card-cs.featured .caso-card-body-text {
   flex: 1;
}

.caso-card-cs.featured .caso-card-kpis-side {
   display: flex;
   flex-direction: column;
   gap: 28px;
   flex-shrink: 0;
   padding-top: 4px;
}

.approccio-strip {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--ink);
}

.approccio-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.approccio-inner .label {
   display: block;
   margin-bottom: 16px;
   color: rgba(192, 96, 48, 0.8);
}

.approccio-inner h2 {
   color: #f8f4ee;
   margin-bottom: 36px;
   max-width: 28ch;
}

.approccio-grid-dark {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--r);
   overflow: hidden;
}

.approccio-cell-dark {
   background: rgba(28, 23, 18, 0.7);
   padding: 32px 28px;
}

.approccio-cell-num {
   font-family: var(--serif);
   font-size: 1.8rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.2);
   line-height: 1;
   margin-bottom: 14px;
   display: block;
}

.approccio-cell-dark h3 {
   font-size: 0.92rem;
   color: #f8f4ee;
   margin-bottom: 10px;
}

.approccio-cell-dark p {
   font-size: 0.875rem;
   color: rgba(248, 244, 238, 0.5);
   max-width: none;
}

/* ===========================================================
   CASO STUDIO SINGOLO
   =========================================================== */
.kpi-strip {
   background: var(--ink);
   padding: clamp(40px, 5vw, 64px) var(--g);
}

.kpi-strip-inner {
   max-width: var(--max);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--r);
   overflow: hidden;
}

.kpi-item {
   background: rgba(28, 23, 18, 0.7);
   padding: clamp(24px, 3vw, 36px) 28px;
   position: relative;
}

.kpi-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0.5;
}

.kpi-val {
   font-family: var(--serif);
   font-size: clamp(2rem, 3.5vw, 2.8rem);
   font-weight: 700;
   color: var(--accent);
   line-height: 1;
   display: block;
   margin-bottom: 8px;
}

.kpi-label {
   font-size: 0.72rem;
   color: rgba(248, 244, 238, 0.5);
   line-height: 1.4;
   display: block;
}

.case-layout {
   display: grid;
   grid-template-columns: 1fr 280px;
   gap: clamp(40px, 6vw, 80px);
   align-items: start;
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.case-body {
   min-width: 0;
}

.case-section {
   margin-bottom: clamp(48px, 6vw, 72px);
}

.case-section:last-child {
   margin-bottom: 0;
}

.case-section .label {
   display: block;
   margin-bottom: 14px;
}

.case-section h2 {
   margin-bottom: 20px;
}

.case-section p {
   color: var(--muted);
   max-width: none;
}

.case-section p+p {
   margin-top: 16px;
}

.steps-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   border-top: 1px solid var(--border);
   margin-top: 32px;
}

.step-item {
   display: grid;
   grid-template-columns: 36px 1fr;
   gap: 20px;
   padding: clamp(20px, 2.5vw, 28px) 0;
   border-bottom: 1px solid var(--border);
   align-items: start;
}

.step-num {
   font-family: var(--serif);
   font-size: 1.5rem;
   font-weight: 700;
   color: rgba(192, 96, 48, 0.2);
   line-height: 1.1;
}

.step-content h3 {
   margin-bottom: 8px;
   font-size: 0.92rem;
}

.step-content p {
   font-size: 0.875rem;
   color: var(--muted);
   max-width: none;
}

.non-funzionato {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: clamp(28px, 4vw, 40px);
   margin-top: 32px;
   position: relative;
   overflow: hidden;
}

.non-funzionato::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, rgba(28, 23, 18, 0.3), transparent);
}

.non-funzionato .label {
   color: var(--muted);
   margin-bottom: 12px;
   display: block;
}

.non-funzionato h3 {
   font-family: var(--serif);
   font-size: 1rem;
   margin-bottom: 12px;
}

.non-funzionato p {
   font-size: 0.875rem;
   max-width: none;
}

.case-sidebar {
   position: sticky;
   top: 100px;
}

.sidebar-card {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 28px;
   margin-bottom: 16px;
   position: relative;
   overflow: hidden;
}

.sidebar-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
}

.sidebar-card .label {
   display: block;
   margin-bottom: 14px;
}

.sidebar-detail {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.sidebar-detail-item {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.sidebar-detail-item strong {
   font-size: 0.8rem;
   color: var(--ink);
   font-weight: 600;
}

.sidebar-detail-item span {
   font-size: 0.75rem;
   color: var(--ghost);
}

.sidebar-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 8px;
}

.sidebar-tag-sm {
   font-size: 0.58rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--accent);
   border: 1px solid rgba(192, 96, 48, 0.25);
   padding: 3px 8px;
   border-radius: 2px;
   font-family: var(--sans);
}

.sidebar-cta-card {
   background: var(--accent);
   border-radius: var(--r);
   padding: 24px;
   text-align: center;
}

.sidebar-cta-card .label {
   color: rgba(255, 255, 255, 0.6);
   display: block;
   margin-bottom: 10px;
}

.sidebar-cta-card p {
   font-size: 0.82rem;
   color: rgba(255, 255, 255, 0.75);
   max-width: none;
   margin-bottom: 20px;
   line-height: 1.5;
}

.sidebar-cta-card .btn {
   background: #fff;
   color: var(--accent);
   font-size: 0.78rem;
   padding: 11px 20px;
   width: 100%;
   justify-content: center;
}

.sidebar-cta-card .btn:hover {
   background: rgba(255, 255, 255, 0.9);
}

.risultati-section {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: 100%;
   background: var(--bg2);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

.risultati-inner {
   max-width: var(--max);
   margin: 0 auto;
}

.risultati-inner .label {
   display: block;
   margin-bottom: 16px;
}

.risultati-inner h2 {
   margin-bottom: 40px;
   max-width: 28ch;
}

.risultati-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-bottom: 40px;
}

.risultato-cell {
   background: var(--bg);
   padding: 32px 28px;
   position: relative;
}

.risultato-cell::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0.35;
}

.risultato-val {
   font-family: var(--serif);
   font-size: clamp(2rem, 3.5vw, 2.8rem);
   font-weight: 700;
   color: var(--accent);
   line-height: 1;
   display: block;
   margin-bottom: 8px;
}

.risultato-title {
   font-family: var(--sans);
   font-size: 0.82rem;
   font-weight: 600;
   color: var(--ink);
   display: block;
   margin-bottom: 6px;
}

.risultato-desc {
   font-size: 0.8rem;
   color: var(--muted);
   max-width: none;
}

.risultati-note {
   background: var(--panel);
   border: 1px solid var(--border2);
   border-radius: var(--r);
   padding: 24px 28px;
   display: flex;
   gap: 16px;
   align-items: start;
   max-width: 640px;
}

.risultati-note p {
   font-size: 0.8rem;
   color: var(--muted);
   max-width: none;
   font-style: italic;
}

.altri-casi {
   padding: clamp(64px, 8vw, 100px) var(--g);
   max-width: var(--max);
   margin: 0 auto;
}

.altri-casi .label {
   display: block;
   margin-bottom: 16px;
}

.altri-casi h2 {
   margin-bottom: 40px;
}

.altri-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
}

.altro-card {
   background: var(--bg2);
   padding: 32px 28px;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: background .2s;
   position: relative;
}

.altro-card:hover {
   background: var(--panel);
   text-decoration: none;
}

.altro-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--accent);
   opacity: 0;
   transition: opacity .2s;
}

.altro-card:hover::before {
   opacity: 1;
}

.altro-card h3 {
   font-family: var(--serif);
   font-size: 1rem;
   color: var(--ink);
}

.altro-card-kpi {
   font-family: var(--serif);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--accent);
}

.altro-card p {
   font-size: 0.8rem;
   color: var(--muted);
   max-width: none;
   flex: 1;
}

.altro-arrow {
   font-size: 0.9rem;
   color: var(--ghost);
   margin-top: auto;
   transition: color .2s, transform .2s;
}

.altro-card:hover .altro-arrow {
   color: var(--accent);
   transform: translateX(3px);
}

/* ===========================================================
   PRIVACY PAGE
   =========================================================== */
.legal-layout {
   display: grid;
   grid-template-columns: 1fr 240px;
   gap: clamp(48px, 6vw, 80px);
   max-width: var(--max);
   margin: 0 auto;
   padding: clamp(64px, 8vw, 100px) var(--g) clamp(80px, 10vw, 130px);
}

.legal-header {
   margin-bottom: 48px;
}

.legal-header .label {
   display: block;
   margin-bottom: 16px;
}

.legal-header h1 {
   margin-bottom: 12px;
}

.legal-header .meta {
   font-size: 0.78rem;
   color: var(--ghost);
   font-family: var(--sans);
}

.legal-content p {
   max-width: 72ch;
   color: var(--muted);
   margin-bottom: 16px;
}

.legal-content h2 {
   font-size: clamp(1.2rem, 1.8vw, 1.5rem);
   margin-top: 48px;
   margin-bottom: 14px;
}

.legal-content h2:first-of-type {
   margin-top: 0;
}

.legal-content h3 {
   font-size: 1rem;
   font-family: var(--sans);
   font-weight: 700;
   margin-top: 28px;
   margin-bottom: 10px;
}

.legal-content ul,
.legal-content ol {
   margin: 0 0 16px 20px;
   color: var(--muted);
}

.legal-content li {
   margin-bottom: 6px;
}

.legal-sidebar {
   align-self: start;
   position: sticky;
   top: 96px;
}

.sbar-toc {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 24px;
}

.sbar-toc .label {
   display: block;
   margin-bottom: 14px;
}

.toc-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 0;
   padding: 0;
}

.toc-list a {
   display: block;
   font-size: 0.82rem;
   color: var(--muted);
   text-decoration: none;
   padding: 8px 0;
   border-bottom: 1px solid var(--border);
   font-family: var(--sans);
   transition: color .2s;
   line-height: 1.4;
}

.toc-list a:last-child {
   border-bottom: none;
}

.toc-list a:hover {
   color: var(--accent);
   text-decoration: none;
}

/* ===========================================================
   404 PAGE
   =========================================================== */
.error-main {
   flex: 1;
   display: flex;
   align-items: center;
   padding: clamp(72px, 10vw, 130px) var(--g);
   position: relative;
   overflow: hidden;
   min-height: 72vh;
}

.error-bg-404 {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-family: var(--serif);
   font-size: clamp(220px, 30vw, 420px);
   font-weight: 700;
   line-height: 1;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(192, 96, 48, 0.1);
   letter-spacing: -0.04em;
   white-space: nowrap;
   user-select: none;
   pointer-events: none;
   z-index: 0;
}

.error-bg-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
   background-size: 72px 72px;
   mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 75%);
   pointer-events: none;
   z-index: 0;
}

.error-glow {
   position: absolute;
   top: -60px;
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 96, 48, 0.05) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
}

.error-slash {
   position: absolute;
   bottom: clamp(32px, 5vw, 64px);
   right: clamp(32px, 5vw, 64px);
   opacity: 0.08;
   pointer-events: none;
   z-index: 0;
}

.error-inner {
   position: relative;
   z-index: 1;
   max-width: var(--max);
   margin: 0 auto;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(48px, 7vw, 100px);
   align-items: center;
}

.error-text .label {
   display: block;
   margin-bottom: 24px;
}

.error-text h1 {
   font-size: clamp(1.8rem, 3.5vw, 3rem);
   margin-bottom: 20px;
}

.error-text p {
   margin-bottom: 32px;
}

.error-actions {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
}

.error-links {
   margin-top: 40px;
   border-top: 1px solid var(--border);
   padding-top: 32px;
}

.error-links .label {
   display: block;
   margin-bottom: 16px;
}

.error-links ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0;
   padding: 0;
}

.error-links a {
   font-size: 0.9rem;
   color: var(--muted);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--sans);
   transition: color .2s;
}

.error-links a::before {
   content: '→';
   color: var(--accent);
   font-size: 0.85rem;
}

.error-links a:hover {
   color: var(--accent);
}

.error-svg-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
}

body.error404 {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* ===========================================================
   WORDPRESS ALIGNMENT CLASSES
   =========================================================== */
.alignleft {
   float: left;
   margin: 0 1.5em 1em 0;
}

.alignright {
   float: right;
   margin: 0 0 1em 1.5em;
}

.aligncenter {
   display: block;
   margin: 0 auto;
}

.wp-caption {
   max-width: 100%;
}

.wp-caption-text {
   font-size: 0.82rem;
   color: var(--ghost);
   text-align: center;
   margin-top: 8px;
}

/* ===========================================================
   LINK IN BIO PAGE
   =========================================================== */

/* ── Wrapper pagina ─────────────────────────────────────────────── */
.lib-page {
   max-width: 560px;
   margin: 0 auto;
   padding: clamp(40px, 6vw, 72px) var(--g) clamp(60px, 8vw, 96px);
   display: flex;
   flex-direction: column;
   gap: clamp(40px, 5vw, 60px);
}

/* ── Profilo ────────────────────────────────────────────────────── */
.lib-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   text-align: center;
}

.lib-avatar-wrap {
   position: relative;
   width: 96px;
   height: 96px;
   flex-shrink: 0;
}

.lib-avatar {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   object-fit: cover;
   object-position: top center;
   border: 3px solid var(--bg2);
   box-shadow: 0 4px 24px rgba(28, 23, 18, 0.12);
   display: block;
   transition: transform .3s ease;
}

.lib-avatar:hover {
   transform: scale(1.04);
}

.lib-avatar-ring {
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid var(--accent);
   opacity: 0.35;
   pointer-events: none;
   animation: lib-ring-pulse 3s ease-in-out infinite;
}

@keyframes lib-ring-pulse {

   0%,
   100% {
      opacity: 0.35;
      transform: scale(1);
   }

   50% {
      opacity: 0.7;
      transform: scale(1.04);
   }
}

.lib-name {
   font-family: var(--serif);
   font-size: clamp(1.4rem, 3vw, 1.9rem);
   font-weight: 700;
   color: var(--ink);
   line-height: 1.2;
   margin: 0;
}

.lib-bio {
   font-family: var(--body);
   font-size: 0.9rem;
   color: var(--muted);
   max-width: 36ch;
   line-height: 1.6;
   margin: 0;
}

/* ── Sezioni ────────────────────────────────────────────────────── */
.lib-sections {
   display: flex;
   flex-direction: column;
   gap: clamp(32px, 4vw, 48px);
}

.lib-section {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

/* ── Intestazione sezione ────────────────────────────────────────── */
.lib-section-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 4px;
}

.lib-section-icon {
   font-size: 0.6rem;
   color: var(--accent);
   flex-shrink: 0;
   opacity: 0.7;
}

.lib-section-title {
   /* eredita .label dal design system: uppercase, syne, accent */
   white-space: nowrap;
   flex-shrink: 0;
}

.lib-section-rule {
   display: block;
   flex: 1;
   height: 1px;
   background: var(--border);
}

/* ── Lista link ─────────────────────────────────────────────────── */
.lib-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.lib-link-item {
   margin: 0;
}

/* ── Pulsante ───────────────────────────────────────────────────── */
.lib-btn {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 14px 18px;
   background: var(--bg2);
   border: 1px solid var(--border2);
   border-radius: 8px;
   text-decoration: none;
   color: var(--ink);
   font-family: var(--body);
   font-size: 0.9rem;
   font-weight: 500;
   line-height: 1.3;
   transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
   position: relative;
   overflow: hidden;
}

/* Shimmer di fondo al hover */
.lib-btn::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent 0%, var(--accent-pale) 50%, transparent 100%);
   transform: translateX(-100%);
   transition: transform .4s ease;
   pointer-events: none;
}

.lib-btn:hover {
   background: var(--panel);
   border-color: rgba(192, 96, 48, 0.3);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(28, 23, 18, 0.08);
   text-decoration: none;
   color: var(--ink);
}

.lib-btn:hover::before {
   transform: translateX(100%);
}

/* Thumbnail / icona a sinistra */
.lib-btn-thumb {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 6px;
   background: var(--bg);
   border: 1px solid var(--border);
   flex-shrink: 0;
   color: var(--muted);
   overflow: hidden;
   transition: background .22s;
}

.lib-btn:hover .lib-btn-thumb {
   background: var(--bg2);
   color: var(--accent);
}

.lib-btn-thumb img {
   width: 18px;
   height: 18px;
   object-fit: contain;
}

.lib-btn-thumb svg {
   width: 18px;
   height: 18px;
}

.lib-btn-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
   opacity: 0.5;
}

/* Testo al centro */
.lib-btn-text {
   flex: 1;
   color: var(--ink);
   font-weight: 500;
}

/* Freccia a destra */
.lib-btn-arrow {
   font-size: 0.85rem;
   color: var(--accent);
   opacity: 0;
   transform: translateX(-4px);
   transition: opacity .22s, transform .22s;
   flex-shrink: 0;
}

.lib-btn:hover .lib-btn-arrow {
   opacity: 1;
   transform: translateX(0);
}

/* ── Sezione Social: layout 2 colonne per link brevi ────────────── */
#lib-section-social .lib-links {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

/* ── Responsive Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
   .lib-page {
      padding-top: clamp(28px, 5vw, 48px);
   }

   .lib-btn {
      padding: 12px 14px;
      gap: 12px;
   }

   .lib-btn-thumb {
      width: 28px;
      height: 28px;
   }

   .lib-name {
      font-size: 1.3rem;
   }

   /* Collassa il grid 2 colonne a 1 su schermi piccoli */
   #lib-section-social .lib-links {
      grid-template-columns: 1fr;
   }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 900px) {

   #site-nav .nav-links,
   #site-nav ul.nav-links {
      display: none;
   }

   .nav-hamburger {
      display: flex;
   }

   #site-nav .nav-links.mobile-open,
   #site-nav ul.nav-links.mobile-open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(248, 244, 238, 0.98);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      padding: 20px var(--g);
      gap: 16px;
      z-index: 199;
   }

   /* Homepage grids */
   .problema-layout,
   .finance-layout,
   .minicaso-layout,
   .chisono-layout,
   .faq-layout,
   .approccio-header {
      grid-template-columns: 1fr;
   }

   .processo-steps-grid {
      grid-template-columns: 1fr 1fr;
   }

   .servizi-grid,
   .servizi-grid.servizi-grid-2col,
   .casi-grid,
   .articoli-grid {
      grid-template-columns: 1fr;
   }

   .fit-grid {
      grid-template-columns: 1fr;
   }

   .hero-stats {
      grid-template-columns: 1fr;
   }

   .approccio-grid {
      grid-template-columns: 1fr;
   }

   /* Inner pages */
   .chisono-intro-grid {
      grid-template-columns: 1fr;
   }

   .portrait-wrap {
      position: static;
   }

   .valori-grid {
      grid-template-columns: 1fr;
   }

   .servizio-row {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .sr-arrow {
      display: none;
   }

   .logica-grid {
      grid-template-columns: 1fr;
   }

   .diff-grid {
      grid-template-columns: 1fr;
   }

   .numeri-layout {
      grid-template-columns: 1fr;
   }

   .cosa-item {
      grid-template-columns: 1fr;
   }

   .use-grid {
      grid-template-columns: 1fr;
   }

   .format-grid {
      grid-template-columns: 1fr;
   }

   .temi-grid {
      grid-template-columns: 1fr;
   }

   .perchi-grid {
      grid-template-columns: 1fr;
   }

   .vs-table {
      grid-template-columns: 1fr;
   }

   .contact-layout {
      grid-template-columns: 1fr;
   }

   .contact-sidebar {
      position: static;
   }

   .field-row {
      grid-template-columns: 1fr;
   }

   .featured-card {
      grid-template-columns: 1fr;
   }

   .articles-grid,
   .posts-grid,
   .related-grid,
   .altri-grid {
      grid-template-columns: 1fr;
   }

   .newsletter-inner {
      grid-template-columns: 1fr;
   }

   .form-row {
      flex-direction: column;
   }

   .post-layout {
      padding-left: var(--g);
      padding-right: var(--g);
   }

   .share-btns {
      gap: 6px;
   }

   .archive-layout {
      grid-template-columns: 1fr;
   }

   .archive-sidebar {
      display: none;
   }

   .search-layout {
      grid-template-columns: 1fr;
   }

   .search-sidebar {
      display: none;
   }

   .casi-grid-2col,
   .casi-grid-2col .caso-card-cs.featured {
      grid-column: span 1;
      grid-template-columns: 1fr;
   }

   .caso-card-cs.featured .caso-card-body {
      flex-direction: column;
   }

   .approccio-grid-dark {
      grid-template-columns: 1fr;
   }

   .kpi-strip-inner {
      grid-template-columns: repeat(2, 1fr);
   }

   .risultati-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .case-layout {
      grid-template-columns: 1fr;
   }

   .case-sidebar {
      position: static;
   }

   .legal-layout {
      grid-template-columns: 1fr;
   }

   .legal-sidebar {
      display: none;
   }

   .error-inner {
      grid-template-columns: 1fr;
   }

   .error-svg-wrap {
      display: none;
   }

   .error-bg-404 {
      font-size: clamp(140px, 40vw, 220px);
   }

   .hero-stats-strip {
      grid-template-columns: repeat(3, 1fr);
   }

   .portrait-stats {
      grid-template-columns: 1fr 1fr;
   }

   #site-footer .wrap {
      flex-direction: column;
      text-align: center;
      justify-content: center;
   }

   .footer-links {
      justify-content: center;
   }
}

@media (max-width: 600px) {
   .processo-steps-grid {
      grid-template-columns: 1fr;
   }

   .chisono-stat-row {
      grid-template-columns: 1fr;
   }

   .portrait-stats {
      grid-template-columns: 1fr;
   }

   .caso-kpi-row {
      gap: 28px;
   }

   .kpi-strip-inner {
      grid-template-columns: 1fr;
   }

   .risultati-grid {
      grid-template-columns: 1fr;
   }

   .step-item {
      grid-template-columns: 1fr;
   }

   .hero-stats-strip {
      grid-template-columns: 1fr;
   }
}

/* ===========================================================
   HOMEPAGE MOBILE OVERFLOW FIX
   =========================================================== */
/* 1. Blocca lo scroll orizzontale sul nascere */
html,
body {
   overflow-x: hidden;
   position: relative;
   /* Importante per contenere eventuali elementi globali */
}

/* 2. Risolve il problema della griglia che si ripete */
#hero {
   position: relative;
   /* Questo confina la .hero-bg-grid dentro la sezione hero */
   overflow: hidden;
   /* E taglia i bagliori che escono a destra/sinistra */
}

/* 3. Protegge le altre sezioni che hanno elementi decorativi "sporgenti" */
#problema,
#finance,
#approccio,
#minicaso,
#servizi,
#processo,
#fit,
#chisono-preview,
#blog,
#faq,
#cta-finale {
   overflow: hidden;
}

/* 4. Opzionale: assicura che gli SVG non superino mai la larghezza dello schermo */
svg {
   max-width: 100% !important;
}