/**
 * Theme Name: GeneratePress Child
 * Template: generatepress
 * AR Comunicazione — Child Theme
 * Font: Space Grotesk + Inter
 * Palette: #0F172A Blue Night + #3B82F6 Electric Blue + #8B5CF6 Violet
 */

/* ── FONT SELF-HOSTED — no Google Fonts external request ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════
   1. GENERATEPRESS FULL WIDTH RESET
═══════════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }

body {
    font-family: 'Inter', sans-serif;
    background: #0F172A;
    color: #F8FAFC;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

body.home .site-main,
body.home .content-area,
body.home .site-content,
body.home .inside-article,
body.home article.page,
body.home .entry-content,
body.home .grid-container,
body.home .container,
body.home .site-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

body.home .content-area { width: 100% !important; }

body.home #arc-home {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: hidden;
}

body.home .arc-hero,
body.home .arc-ticker,
body.home .arc-section,
body.home .arc-stats-section,
body.home .arc-cert-section,
body.home .arc-cta-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   2. CSS CUSTOM PROPERTIES
═══════════════════════════════════════════════════════════════ */
:root {
    --arc-primary:        #0F172A;
    --arc-accent:         #3B82F6;
    --arc-accent-hover:   #60A5FA;
    --arc-action:         #2563EB;
    --arc-violet:         #8B5CF6;
    --arc-gradient:       linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    --arc-gradient-text:  linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);

    --arc-dark:           #020617;
    --arc-dark-2:         #0F172A;
    --arc-surface:        #1E293B;
    --arc-surface-2:      #263347;
    --arc-border:         #334155;
    --arc-border-light:   #E2E8F0;

    --arc-gray:           #64748B;
    --arc-light-gray:     #64748B;
    --arc-white:          #F8FAFC;
    --arc-off-white:      #F1F5F9;
    --arc-light-bg:       #E2E8F0;

    --arc-font-display:   'Space Grotesk', sans-serif;
    --arc-font-body:      'Inter', sans-serif;

    --arc-radius-sm:      4px;
    --arc-radius-md:      8px;
    --arc-radius-lg:      12px;
    --arc-radius-xl:      20px;
    --arc-radius-full:    100px;

    --arc-shadow-blue:    0 8px 40px rgba(59, 130, 246, 0.2);
    --arc-shadow-violet:  0 8px 40px rgba(139, 92, 246, 0.2);
    --arc-shadow-light:   0 4px 24px rgba(0, 0, 0, 0.07);

    --arc-transition:     all 0.2s ease;
    --arc-container:      1200px;
    --arc-gap:            16px;
}

/* ═══════════════════════════════════════════════════════════════
   3. CONTAINER
═══════════════════════════════════════════════════════════════ */
.arc-container {
    max-width: var(--arc-container);
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}

.arc-container--narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   4. SECTIONS
═══════════════════════════════════════════════════════════════ */
.arc-section {
    padding: 88px 0;
    width: 100%;
    box-sizing: border-box;
}

.arc-section--dark    { background: var(--arc-dark); }
.arc-section--surface { background: var(--arc-surface); }

.arc-section--white { background: var(--arc-white); }
.arc-section--white h2,
.arc-section--white h3,
.arc-section--white h4 { color: var(--arc-primary); }
.arc-section--white p  { color: var(--arc-gray); }
.arc-section--white .arc-label { color: var(--arc-action); }

.arc-section--light { background: var(--arc-off-white); }
.arc-section--light h2,
.arc-section--light h3 { color: var(--arc-primary); }

.arc-section--purple {
    background: linear-gradient(160deg, #020617 0%, #0F172A 50%, #1E293B 100%);
    position: relative;
    overflow: hidden;
}
.arc-section--purple::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    top: -150px; right: -150px;
    pointer-events: none;
}

.arc-section__header         { margin-bottom: 48px; }
.arc-section__header--center { text-align: center; }
.arc-section__footer         { text-align: center; margin-top: 48px; }

/* ═══════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--arc-font-display);
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--arc-white);
}

h1 { font-size: clamp(40px, 5.5vw, 70px); font-weight: 700; letter-spacing: -2px; }
h2 { font-size: clamp(28px, 4vw, 42px);   font-weight: 700; letter-spacing: -0.8px; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }

p { font-family: var(--arc-font-body); line-height: 1.7; margin: 0 0 16px; }

.arc-label {
    display: inline-block;
    font-family: var(--arc-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--arc-action); /* default: contesto chiaro (#2563EB su white = 5.17 AA) */
    margin-bottom: 10px;
}

/* Dark sections → label brighter per garantire AA su sfondo scuro */
.arc-section--dark .arc-label,
.arc-section--surface .arc-label,
.arc-cta-banner .arc-label,
.arc-page-hero .arc-label {
    color: var(--arc-accent-hover); /* #60A5FA su #0F172A = 7.02 AAA */
}

.arc-label--lime        { color: var(--arc-accent-hover); }
.arc-label--white-muted { color: rgba(248, 250, 252, 0.65); /* WCAG AA: era 0.45 = ratio 3.86, ora ~5.4 */ }

em.arc-accent {
    font-style: normal;
    background: var(--arc-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.arc-color--white { color: var(--arc-white)   !important; }
.arc-color--dark  { color: var(--arc-primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   6. BUTTONS
═══════════════════════════════════════════════════════════════ */
.arc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--arc-font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--arc-radius-full);
    text-decoration: none;
    transition: var(--arc-transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
}

.arc-btn svg { flex-shrink: 0; }

.arc-btn--lime,
.arc-btn--primary {
    background: var(--arc-gradient);
    color: var(--arc-white);
}
.arc-btn--lime:hover,
.arc-btn--primary:hover {
    opacity: 0.88;
    color: var(--arc-white);
    transform: translateY(-1px);
    box-shadow: var(--arc-shadow-blue);
}

.arc-btn--outline {
    background: rgba(59, 130, 246, 0.08);
    color: var(--arc-white);
    border: 1.5px solid rgba(59, 130, 246, 0.25);
}
.arc-btn--outline:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--arc-white);
    border-color: rgba(59, 130, 246, 0.5);
}

.arc-btn--outline-white {
    background: transparent;
    color: var(--arc-white);
    border: 1.5px solid rgba(248, 250, 252, 0.2);
}
.arc-btn--outline-white:hover {
    background: rgba(248, 250, 252, 0.07);
    color: var(--arc-white);
}

.arc-btn--outline-dark {
    background: transparent;
    color: var(--arc-primary);
    border: 1.5px solid rgba(15, 23, 42, 0.2);
}
.arc-btn--outline-dark:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--arc-action);
    border-color: var(--arc-action);
}

/* ═══════════════════════════════════════════════════════════════
   7. HEADER
═══════════════════════════════════════════════════════════════ */
.site-header {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid var(--arc-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

.main-title a,
.main-title a:hover {
    color: var(--arc-white) !important;
    font-family: var(--arc-font-display) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.main-navigation .main-nav ul li a {
    color: var(--arc-light-gray) !important;
    font-family: var(--arc-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--arc-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. HERO
═══════════════════════════════════════════════════════════════ */
.arc-hero {
    background: linear-gradient(135deg, #020617 0%, #0F172A 55%, #1E293B 100%);
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.arc-hero::before {
    content: '';
    position: absolute;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
    top: -200px; right: -200px;
    pointer-events: none;
}

.arc-hero::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    bottom: -100px; left: 5%;
    pointer-events: none;
}

.arc-hero .arc-container {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 80px;
}

.arc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--arc-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--arc-radius-full);
    border: 1px solid rgba(59, 130, 246, 0.25);
    margin-bottom: 28px;
    letter-spacing: 0.3px;
}

.arc-hero__title {
    color: var(--arc-white);
    margin-bottom: 24px;
    font-size: clamp(42px, 5.5vw, 72px);
    letter-spacing: -2px;
    line-height: 1.0;
}

.arc-hero__sub {
    font-size: 16px;
    color: var(--arc-light-gray);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 500px;
}

.arc-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    align-items: center;
}

.arc-hero__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 480px;
}

.arc-tag {
    background: rgba(59, 130, 246, 0.08);
    color: var(--arc-light-gray);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--arc-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    white-space: nowrap;
}

.arc-hero__canvas {
    position: relative;
    height: 480px;
    border-radius: var(--arc-radius-xl);
    overflow: visible !important;
    border: none;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
}

.arc-hero__canvas canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   9. TICKER
═══════════════════════════════════════════════════════════════ */
.arc-ticker {
    background: var(--arc-gradient);
    padding: 13px 0;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.arc-ticker__track {
    display: inline-flex;
    gap: 48px;
    animation: arc-ticker 60s linear infinite;
}

.arc-ticker__item {
    font-family: var(--arc-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--arc-white);
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.arc-ticker__item::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: rgba(248, 250, 252, 0.5);
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
}

@keyframes arc-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}


/* ═══════════════════════════════════════════════════════════════
   10. STATISTICHE
═══════════════════════════════════════════════════════════════ */
.arc-stats-section {
    padding: 0;
    background: var(--arc-surface) !important;
    border-top: 1px solid var(--arc-border);
    border-bottom: 1px solid var(--arc-border);
}

.arc-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.arc-stat-card {
    padding: 32px 28px;
    text-align: center;
    border-right: 1px solid var(--arc-border);
    transition: var(--arc-transition);
    background: transparent;
}

.arc-stat-card:last-child { border-right: none; }

.arc-stat-card:hover {
    background: rgba(59, 130, 246, 0.05);
}

.arc-stat-card__icon {
    color: var(--arc-white);
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    opacity: 0.5;
}

.arc-stat-card__num {
    font-family: var(--arc-font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    background: var(--arc-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 6px;
}

.arc-stat-card__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-white);
    margin-bottom: 3px;
    font-family: var(--arc-font-display);
}

.arc-stat-card__sub {
    font-size: 11px;
    color: var(--arc-gray);
    letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════════════════
   11. SERVIZI (sezione bianca)
═══════════════════════════════════════════════════════════════ */
.arc-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--arc-border-light);
    border-radius: var(--arc-radius-lg);
    overflow: hidden;
}

.arc-service-card {
    padding: 28px 32px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border-right: 1px solid var(--arc-border-light);
    border-bottom: 1px solid var(--arc-border-light);
    transition: var(--arc-transition);
    background: var(--arc-white);
}

.arc-service-card:hover { background: var(--arc-off-white); }

.arc-service-card__icon {
    width: 44px; height: 44px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--arc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--arc-action);
}

.arc-service-card__body h3 {
    margin: 0 0 5px;
    font-size: 15px;
    color: var(--arc-primary);
}

.arc-service-card__body p {
    font-size: 13px;
    color: var(--arc-gray);
    line-height: 1.55;
    margin: 0;
}

.arc-service-card__arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: var(--arc-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    transition: var(--arc-transition);
    color: var(--arc-white);
    text-decoration: none;
}

.arc-service-card__arrow:hover {
    /* color esplicito: senza, vince a:hover di GeneratePress (color:var(--contrast)) */
    color: var(--arc-white);
    opacity: 0.85;
    transform: scale(1.1);
    box-shadow: var(--arc-shadow-blue);
}

.arc-service-card--active .arc-service-card__icon {
    background: var(--arc-gradient);
    color: var(--arc-white);
}

/* ═══════════════════════════════════════════════════════════════
   12. CERTIFICAZIONI (sezione bianca)
═══════════════════════════════════════════════════════════════ */
.arc-cert-section {
    padding: 40px 0;
}

.arc-cert__header {
    text-align: center;
    margin-bottom: 28px;
}

.arc-cert__titolo {
    font-family: var(--arc-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--arc-gray);
}

.arc-cert__track-wrapper {
    overflow: hidden;
    position: relative;
}

.arc-cert__track-wrapper::before,
.arc-cert__track-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.arc-cert__track-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--arc-white), transparent);
}

.arc-cert__track-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--arc-white), transparent);
}

.arc-cert__track {
    display: inline-flex;
    gap: 32px;
    align-items: center;
    animation: arc-ticker 30s linear infinite;
    white-space: nowrap;
}

.arc-cert__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.arc-cert__item img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.5;
    transition: var(--arc-transition);
}

.arc-cert__item img:hover { filter: grayscale(0); opacity: 1; }

.arc-cert__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--arc-off-white);
    border: 1px solid var(--arc-border-light);
    border-radius: var(--arc-radius-full);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--arc-gray);
    white-space: nowrap;
    transition: var(--arc-transition);
}

.arc-cert__badge:hover {
    color: var(--arc-action);
    border-color: var(--arc-action);
    background: rgba(37, 99, 235, 0.05);
}

.arc-cert__badge svg { color: var(--arc-accent); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   13. PORTFOLIO (sezione dark)
═══════════════════════════════════════════════════════════════ */
.arc-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--arc-gap);
}

.arc-proj-card {
    border-radius: var(--arc-radius-lg);
    padding: 24px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: var(--arc-transition);
    overflow: hidden;
    border: 1px solid rgba(248, 250, 252, 0.05);
}

.arc-proj-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--arc-shadow-blue);
}

.arc-proj-card__cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--arc-radius-full);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.arc-proj-card__title {
    font-family: var(--arc-font-display);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.arc-proj-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.arc-proj-card__tag {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--arc-radius-sm);
}

.arc-proj-card__link { position: absolute; inset: 0; z-index: 3; }

/* ── Variant card con immagine (progressive enhancement) ─────────────── */
.arc-proj-card--image {
    background: #0F172A !important;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.06);
}
.arc-proj-card--image .arc-proj-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
.arc-proj-card--image .arc-proj-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.arc-proj-card--image:hover .arc-proj-card__media img { transform: scale(1.04); }
.arc-proj-card--image .arc-proj-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 60%, rgba(15,23,42,0.5) 100%);
    pointer-events: none;
}
.arc-proj-card--image .arc-proj-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 24px 24px;
}
.arc-proj-card--image .arc-proj-card__cat {
    background: rgba(59,130,246,0.12) !important;
    color: #93C5FD !important;
    border: 1px solid rgba(59,130,246,0.25);
    padding: 4px 11px;
}
.arc-proj-card--image .arc-proj-card__title {
    color: #F8FAFC !important;
}
.arc-proj-card--image .arc-proj-card__tag {
    background: rgba(59,130,246,0.1) !important;
    color: #93C5FD !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. IL NOSTRO APPROCCIO (sezione bianca)
═══════════════════════════════════════════════════════════════ */
.arc-approccio__header {
    margin-bottom: 48px;
    max-width: 640px;
}

.arc-approccio__intro {
    font-size: 16px;
    color: var(--arc-gray) !important;
    line-height: 1.7;
    margin-top: 8px;
}

.arc-approccio__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 48px;
}

.arc-approccio__col--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--arc-radius-lg);
    min-height: 280px;
}

.arc-approccio__box {
    background: var(--arc-off-white);
    border: 1px solid var(--arc-border-light);
    border-radius: var(--arc-radius-lg);
    padding: 28px;
    height: 100%;
    box-sizing: border-box;
}

.arc-approccio__box h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--arc-primary) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--arc-border-light);
}

.arc-approccio__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arc-approccio__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px !important;
    color: #334155 !important;
    font-family: var(--arc-font-body);
    line-height: 1.5;
}

.arc-approccio__list li span:last-child {
    color: #334155 !important;
}

.arc-approccio__list-icon {
    color: var(--arc-action);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.arc-approccio__risultato {
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--arc-radius-lg);
    padding: 32px 40px;
    text-align: center;
}

.arc-approccio__risultato h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--arc-primary) !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.3px;
}

.arc-approccio__risultato p {
    font-size: 15px !important;
    color: var(--arc-gray) !important;
    max-width: 640px;
    margin: 0 auto !important;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   15. NICCHIE (sezione surface)
═══════════════════════════════════════════════════════════════ */
.arc-niches__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--arc-gap);
}

.arc-niche-card {
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--arc-transition);
    background: var(--arc-surface);
}

.arc-niche-card:hover {
    border-color: var(--arc-accent);
    background: var(--arc-surface-2);
    transform: translateY(-2px);
    box-shadow: var(--arc-shadow-blue);
}

.arc-niche-card__icon {
    width: 48px; height: 48px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--arc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--arc-accent);
}

.arc-niche-card h3 { font-size: 15px; margin: 0; color: var(--arc-white); }

.arc-niche-card p {
    font-size: 13px;
    color: var(--arc-light-gray);
    line-height: 1.55;
    margin: 0;
}

.arc-niche-card__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--arc-accent);
    text-decoration: none;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--arc-transition);
}

.arc-niche-card__link:hover { color: var(--arc-accent-hover); gap: 8px; }

/* ═══════════════════════════════════════════════════════════════
   16. TESTIMONIAL (sezione bianca)
═══════════════════════════════════════════════════════════════ */
.arc-testi__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--arc-gap);
}

.arc-testi-card {
    background: var(--arc-off-white);
    border: 1px solid var(--arc-border-light);
    border-radius: var(--arc-radius-lg);
    padding: 28px;
    transition: var(--arc-transition);
}

.arc-testi-card:hover {
    box-shadow: var(--arc-shadow-light);
    transform: translateY(-1px);
}

.arc-testi-card__stars {
    display: flex;
    gap: 3px;
    color: var(--arc-action);
    margin-bottom: 14px;
}

.arc-testi-card__text {
    font-size: 14px;
    color: #334155 !important;
    line-height: 1.75;
    margin: 0 0 20px;
    font-style: normal;
}

.arc-testi-card__author { display: flex; align-items: center; gap: 12px; }

.arc-testi-card__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--arc-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--arc-action);
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid rgba(59, 130, 246, 0.2);
}

.arc-testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.arc-testi-card__author strong {
    display: block;
    font-size: 14px;
    color: var(--arc-primary) !important;
    font-weight: 600;
}

.arc-testi-card__author span {
    font-size: 12px;
    color: var(--arc-gray) !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. FAQ (sezione off-white)
═══════════════════════════════════════════════════════════════ */
.arc-faq { margin: 0; }

.arc-faq__item { border-bottom: 1px solid var(--arc-border-light); }
.arc-faq__item:first-child { border-top: 1px solid var(--arc-border-light); }
.arc-faq__question { margin: 0; }

.arc-faq__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 20px 0;
    font-family: var(--arc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--arc-primary);
    cursor: pointer;
    text-align: left;
    transition: var(--arc-transition);
    gap: 16px;
}

.arc-faq__toggle:hover,
.arc-faq__toggle[aria-expanded="true"] { color: var(--arc-action); }

.arc-faq__icon {
    width: 26px; height: 26px;
    background: var(--arc-light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--arc-gray);
    transition: var(--arc-transition);
}

.arc-faq__toggle[aria-expanded="true"] .arc-faq__icon {
    background: var(--arc-gradient);
    color: var(--arc-white);
}

.arc-faq__icon--x { display: none; }
.arc-faq__toggle[aria-expanded="true"] .arc-faq__icon--plus { display: none; }
.arc-faq__toggle[aria-expanded="true"] .arc-faq__icon--x    { display: flex; }

.arc-faq__answer {
    font-size: 14px;
    color: var(--arc-gray);
    line-height: 1.75;
    padding: 0 40px 20px 0;
    margin: 0;
}

.arc-faq__answer[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   18. CTA BANNER
═══════════════════════════════════════════════════════════════ */
.arc-cta-banner {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--arc-border);
}

.arc-cta-banner::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    bottom: -200px; right: 0;
    pointer-events: none;
}

.arc-cta-banner::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
    top: -100px; left: 10%;
    pointer-events: none;
}

.arc-cta-banner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.arc-cta-banner__left h2 { color: var(--arc-white); margin-bottom: 16px; }

.arc-cta-banner__left p {
    font-size: 15px;
    color: var(--arc-light-gray);
    line-height: 1.75;
    margin-bottom: 32px;
}

.arc-cta-banner__btns { display: flex; gap: 12px; flex-wrap: wrap; }

.arc-cta-banner__stats { display: flex; flex-direction: column; gap: 12px; }

.arc-stat {
    background: rgba(248, 250, 252, 0.03);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--arc-transition);
}

.arc-stat:hover {
    border-color: var(--arc-accent);
    background: rgba(59, 130, 246, 0.04);
}

.arc-stat__num {
    display: block;
    font-family: var(--arc-font-display);
    font-size: 30px;
    font-weight: 700;
    background: var(--arc-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.arc-stat__label { font-size: 13px; color: var(--arc-gray); }
.arc-stat__icon  { color: var(--arc-accent); opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════
   19. FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer,
.site-info {
    background: var(--arc-dark) !important;
    border-top: 1px solid var(--arc-border) !important;
    color: var(--arc-gray) !important;
}

.site-info a { color: var(--arc-light-gray) !important; text-decoration: none !important; }
.site-info a:hover { color: var(--arc-accent) !important; }

/* ═══════════════════════════════════════════════════════════════
   20. UTILITY
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Focus indicators (WCAG 2.1 AA — 2.4.7 Focus Visible)
   Mostra outline solo per navigazione da tastiera (focus-visible),
   non al click del mouse. Niente border-radius nelle regole focus —
   l'outline segue automaticamente il radius dell'elemento.
═══════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--arc-accent-hover, #60A5FA);
    outline-offset: 3px;
}
/* Su sfondi chiari, contrasto del focus ring più scuro per AA */
.arc-section--white :focus-visible,
.arc-section--light :focus-visible,
.arc-section--off-white :focus-visible {
    outline-color: var(--arc-action, #2563EB);
}
/* Form field focus: outline addosso al campo, niente offset */
.arc-co-form input:focus-visible,
.arc-co-form textarea:focus-visible {
    outline: 2px solid var(--arc-action, #2563EB);
    outline-offset: 0;
}
/* Skip link visibile quando ha focus (di default è sr-only) */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    z-index: 100000 !important;
    background: #0F172A !important;
    color: #F8FAFC !important;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #60A5FA;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Screen reader only utility
═══════════════════════════════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   21. RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .arc-hero .arc-container  { grid-template-columns: 1fr; }
    .arc-hero__canvas         { display: none; }
    .arc-portfolio__grid      { grid-template-columns: repeat(2, 1fr); }
    .arc-stats__grid          { grid-template-columns: repeat(2, 1fr); }
    .arc-stat-card:nth-child(2) { border-right: none; }
    .arc-stat-card:nth-child(1),
    .arc-stat-card:nth-child(2) { border-bottom: 1px solid var(--arc-border); }
    .arc-stat-card            { padding: 24px 20px; }
    .arc-stat-card__num       { font-size: 28px; }
    .arc-stat-card__label     { font-size: 13px; }
    .arc-approccio__grid      { grid-template-columns: 1fr 1fr; }
    .arc-approccio__col--img  { display: none; }
}

@media (max-width: 768px) {
    .arc-section              { padding: 60px 0; }
    .arc-container,
    .arc-container--narrow    { padding: 0 20px; }
    .arc-hero .arc-container  { padding-top: 60px; padding-bottom: 60px; }
    .arc-services__grid       { grid-template-columns: 1fr; }
    .arc-portfolio__grid      { grid-template-columns: 1fr; }
    .arc-niches__grid         { grid-template-columns: repeat(2, 1fr); }
    .arc-testi__grid          { grid-template-columns: 1fr; }
    .arc-cta-banner__grid     { grid-template-columns: 1fr; }
    .arc-cta-banner__stats    { display: none; }
    .arc-approccio__grid      { grid-template-columns: 1fr; }
    .arc-approccio__risultato { padding: 24px 20px; }
}

@media (max-width: 480px) {
    h1                        { letter-spacing: -1px; }
    .arc-stats__grid          { grid-template-columns: 1fr 1fr; }
    .arc-stat-card            { padding: 18px 12px; }
    .arc-stat-card__num       { font-size: 24px; letter-spacing: -0.5px; }
    .arc-stat-card__label     { font-size: 12px; }
    .arc-stat-card__sub       { font-size: 10px; }
    .arc-niches__grid         { grid-template-columns: 1fr; }
    .arc-hero__ctas           { flex-direction: column; }
    .arc-btn                  { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   22. FAQ FIX GENERATEPRESS
═══════════════════════════════════════════════════════════════ */
body.home .arc-faq__toggle,
body.home .arc-faq__toggle:focus,
body.home .arc-faq__toggle[aria-expanded="false"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #0F172A !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

body.home .arc-faq__toggle:hover,
body.home .arc-faq__toggle[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #2563EB !important;
    box-shadow: none !important;
    border: none !important;
}

body.home .arc-faq__item {
    background: transparent !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENTI CAROUSEL (CSS animation — same as cert)
═══════════════════════════════════════════════════════════════ */
/* Sezione clienti: griglia statica responsive.
   Niente marquee — i logo restano fermi, layout solido cross-browser. */
.arc-clienti-section {
    padding: 56px 0 64px;
    border-top: 1px solid #E2E8F0;
}

.arc-clienti__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Flex invece di grid: l'ultima riga incompleta resta centrata */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 24px;
}

.arc-clienti__item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 6 colonne con gap 24px: width = (100% - 5*24px) / 6 */
    flex: 0 0 auto;
    width: calc((100% - 5 * 24px) / 6);
    height: 60px;
    margin: 0;
}

.arc-clienti__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.arc-clienti__item img {
    max-height: 44px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.arc-clienti__item:hover img {
    /* grayscale mantenuto on hover — sfumiamo solo opacity e leggero scale */
    opacity: 1;
    transform: scale(1.05);
}

.arc-clienti__nome {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #64748B;
    white-space: nowrap;
}

/* Tablet large — 4 colonne */
@media (max-width: 1024px) {
    .arc-clienti__grid { gap: 28px 24px; }
    .arc-clienti__item { width: calc((100% - 3 * 24px) / 4); }
    .arc-clienti__item img { max-height: 40px; max-width: 120px; }
}

/* Tablet small — 3 colonne */
@media (max-width: 768px) {
    .arc-clienti-section { padding: 44px 0 52px; }
    .arc-clienti__grid { gap: 24px 20px; }
    .arc-clienti__item { width: calc((100% - 2 * 20px) / 3); }
}

/* Mobile — 2 colonne */
@media (max-width: 480px) {
    .arc-clienti-section { padding: 36px 0 44px; }
    .arc-clienti__grid { gap: 24px 16px; }
    .arc-clienti__item { width: calc((100% - 1 * 16px) / 2); height: 52px; }
    .arc-clienti__item img { max-height: 36px; max-width: 110px; }
}

/* Reduced motion: rimuove anche micro-effetto hover scale */
@media (prefers-reduced-motion: reduce) {
    .arc-clienti__item img,
    .arc-clienti__item:hover img {
        transition: none;
        transform: none;
    }
}