/* ==========================================================================
   SAM S.r.l. - PREMIUM MEDIUM-DARK DESIGN SYSTEM (Sarti del Management)
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;850&display=swap');

:root {
    /* Color Palette SAM - Medium/Dark Accogliente */
    --primary-blue: #38bdf8;       /* Azzurro SAM Brillante per contrasto */
    --primary-blue-glow: rgba(56, 189, 248, 0.15);
    
    --primary-brown: #d97706;      /* Marrone/Bronzo SAM */
    --primary-brown-hover: #f59e0b;
    --primary-brown-glow: rgba(217, 119, 6, 0.2);
    
    --text-light-main: #f8fafc;     /* Bianco sporco / Slate-50 */
    --text-light-muted: #cbd5e1;    /* Grigio chiaro / Slate-300 */
    --text-white: #ffffff;
    
    --border-glass: rgba(255, 255, 255, 0.08);
    --bg-glass: rgba(15, 23, 42, 0.35);
    --bg-glass-card: rgba(255, 255, 255, 0.06);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset and Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: #17202b;
    color: var(--text-light-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}



/* Filtro rumore SVG per unificare il gradiente ed eliminare le strisce (Banding) */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.035; /* Molto sottile, crea l'effetto carta premium e fonde i colori */
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@keyframes wave-bg {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-white);
}

p {
    color: var(--text-light-muted);
    font-size: 1rem;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--primary-brown);
}

/* Base Layout Containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Glassmorphism Card Style - Frost Theme */
.sam-card {
    background: var(--bg-glass-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
}

.sam-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-5px);
    box-shadow: 0 15px 45px -5px rgba(0, 0, 0, 0.45);
}

/* Custom Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-brown) 0%, #b45309 100%);
    color: var(--text-white);
    box-shadow: 0 4px 15px var(--primary-brown-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-brown-hover) 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-white);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* Header / Navigation */
.site-header {
    background: rgba(23, 32, 43, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-glass);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--transition-smooth);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 75px;
}

.logo img {
    height: 40px;
    display: block;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    color: var(--text-light-muted);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
}

.main-nav a:hover,
.main-nav li.active a {
    color: var(--primary-blue);
}

/* Hero Section */
.hero-section {
    padding: 8rem 0 6rem 0;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}

.hero-logo-wrapper {
    margin-bottom: 2.2rem;
    display: flex;
    justify-content: flex-start;
}

.hero-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

.hero-title {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--text-dark-main);
}

.hero-title span {
    background: linear-gradient(135deg, var(--primary-brown) 30%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: var(--text-dark-muted);
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
}

.hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-image-wrapper::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background: var(--primary-blue-glow);
    filter: blur(85px);
    border-radius: 50%;
    z-index: -1;
    top: 10%;
}

.hero-vector {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 25px rgba(140, 79, 43, 0.15));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* Sections Global */
.section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}

.section-tag {
    color: var(--primary-brown);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 2.6rem;
    margin-bottom: 1rem;
    color: var(--text-dark-main);
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.member-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, var(--bg-light-wave-1) 100%);
    margin-bottom: 1.5rem;
    border: 3px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-blue);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.1);
}

.member-name {
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
}

.member-role {
    color: var(--primary-brown);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.member-bio {
    font-size: 0.95rem;
    color: var(--text-dark-muted);
}

/* Services / Features Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-brown);
}

.service-card.blue::before {
    background: var(--primary-blue);
}

.service-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(140, 79, 43, 0.05);
    color: var(--primary-brown);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.service-card.blue .service-badge {
    background: rgba(2, 132, 199, 0.08);
    color: var(--primary-blue);
}

.service-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.service-desc {
    margin-bottom: 1.5rem;
}

.service-price {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 850;
    color: var(--text-dark-main);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.service-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-dark-muted);
}

.service-features {
    list-style: none;
    margin-bottom: 2rem;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-dark-muted);
}

.service-features i {
    color: var(--primary-blue);
    font-size: 0.95rem;
}

.service-card.blue .service-features i {
    color: var(--primary-brown);
}

/* Chatbox Section */
.chatbot-section {
    background: rgba(255, 255, 255, 0.35);
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
}

.chatbox-container {
    max-width: 800px;
    margin: 0 auto;
}

.chatbox-widget {
    background: var(--bg-glass-card);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 500px;
    box-shadow: 0 15px 35px -10px rgba(140, 79, 43, 0.1);
}

.chat-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-header-info strong {
    color: #0f172a !important;
}

.chat-header-info span {
    color: #475569 !important;
}

.chat-header i {
    color: #475569 !important;
}

.chat-status-indicator {
    width: 10px;
    height: 10px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(248, 250, 252, 0.5);
}

.chat-bubble {
    max-width: 80%;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-bubble.assistant {
    background: #ffffff !important;
    color: #0f172a !important;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.chat-bubble.user {
    background: var(--primary-brown);
    color: var(--text-white);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chat-bubble.assistant a {
    color: #025a87 !important; /* Darker blue for high accessibility and contrast on white background */
    text-decoration: underline;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.chat-bubble.assistant a:hover {
    color: var(--primary-brown) !important;
}

.chat-bubble .chat-list {
    margin-left: 1.25rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    list-style-type: disc;
}

.chat-bubble .chat-list li {
    margin-bottom: 0.25rem;
}

.chat-input-area {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--border-glass);
}

.chat-input-box {
    flex: 1;
    background: #f1f5f9;
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    color: #0f172a !important;
    font-family: var(--font-body);
    outline: none;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.chat-input-box:focus {
    border-color: var(--primary-blue);
    background: #ffffff !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

.chat-send-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-brown) !important;
    color: var(--text-white) !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.chat-send-button:hover {
    background: #0271a8;
    transform: scale(1.05);
}

/* Typing Indicator */
.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 10px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--text-dark-muted);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Contact Form Section */
.contact-section {
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(140, 79, 43, 0.05) 0%, transparent 60%);
}

.contact-card {
    max-width: 650px;
    margin: 0 auto;
}

.sam-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark-main);
}

.form-control {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    border-radius: 8px;
    padding: 0.85rem 1.2rem;
    color: #0f172a !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--primary-brown) !important;
    background: #ffffff !important;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.15) !important;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.form-checkbox input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 0.85rem;
    color: var(--text-dark-muted);
    line-height: 1.4;
}

.form-status-msg {
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.form-status-msg.success {
    display: flex;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.form-status-msg.error {
    display: flex;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Footer Section */
.site-footer {
    background: #0d121f;
    padding: 4rem 0 2rem 0;
    border-top: 1px solid var(--border-glass);
    font-size: 0.9rem;
    color: #94a3b8;
}

.site-footer h5 {
    color: var(--text-white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-brand img {
    height: 35px;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    color: #94a3b8;
}

.footer-links h5 {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    color: var(--text-white);
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: #94a3b8;
}

.footer-links a:hover {
    color: var(--primary-blue);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 2rem;
    font-size: 0.85rem;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
        padding: 6rem 0 4rem 0;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-logo-wrapper {
        justify-content: center;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Expandable partner card styling - Dark Glass when closed, White when active */
.member-expandable-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25) !important;
    transition: var(--transition-smooth);
}

.member-expandable-card:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-2px);
}

.member-expandable-card .member-name {
    color: #ffffff !important;
}

.member-expandable-card .member-role {
    color: #cbd5e1 !important; /* Silver-grey for high readability on dark card */
    font-weight: 500;
}

.member-expandable-card .member-avatar {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.member-expandable-card .expand-icon-wrapper {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.4s ease, color 0.4s ease;
}

/* Active State (Clicked Card) */
.member-expandable-card.active {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 15px 35px -5px rgba(56, 189, 248, 0.25) !important;
    background: #ffffff !important;
}

.member-expandable-card.active .member-name {
    color: #0f172a !important;
}

.member-expandable-card.active .member-role {
    color: #8c4f2b !important;
    font-weight: 600;
}

.member-expandable-card.active .member-bio-expand-content div {
    color: #334155 !important;
}

.member-expandable-card.active .member-avatar {
    border-color: rgba(2, 132, 199, 0.15) !important;
    color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.04) !important;
}

.member-expandable-card.active .expand-icon-wrapper {
    color: var(--primary-blue) !important;
}

/* Mobile Header & Logo Hide Layout */
@media (max-width: 768px) {
    /* Keep logo in header but scale it down */
    .logo {
        display: block !important;
    }
    
    .logo img {
        height: 25px !important;
        width: auto !important;
    }
    
    /* Shorten spacing and scale down vector to remove empty centimeters under Parla con SAM */
    .hero-section {
        padding-top: 4.5rem !important;
        padding-bottom: 2rem !important;
        gap: 1.5rem !important;
    }
    
    .hero-logo-wrapper {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 1.25rem !important;
    }
    
    .hero-logo-img {
        height: 38px !important; /* Slightly smaller for mobile layout */
    }
    
    .hero-subtitle {
        margin-bottom: 1.5rem !important;
    }
    
    .hero-image-wrapper {
        margin-top: 0.5rem !important;
    }
    
    .hero-vector {
        max-width: 60% !important; /* Scale down vector so it is much more compact */
        margin: 0 auto;
    }
    
    .section {
        padding: 3.5rem 0 !important; /* Make sections more compact on mobile */
    }
    
    /* Hide text links and other menu items except Chatta con noi! */
    .main-nav ul li:not(:last-child) {
        display: none !important;
    }
    
    /* Make header fit and align logo left and button right */
    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 65px !important;
        padding: 0 1rem !important;
    }
    
    .main-nav {
        display: block !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    .main-nav ul {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        padding-left: 0;
        margin: 0;
        list-style: none;
    }
    
    .main-nav ul li {
        display: flex !important;
        align-items: center !important;
    }
    
    .main-nav #openChatBtn {
        padding: 0.45rem 0.9rem !important;
        font-size: 0.825rem !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   METODO SAM - RESPONSIVE TABBED ACCORDION HUB
   ========================================================================== */
.hub-container {
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 993px) {
    .hub-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 1.25rem;
        row-gap: 2.5rem;
    }
    
    .hub-item {
        display: contents; /* Direct children button/panel register as grid items */
    }
    
    .hub-tab-btn {
        grid-row: 1;
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-glass);
        color: var(--text-light-muted);
        padding: 1.1rem 1.5rem;
        border-radius: 50px;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        transition: var(--transition-smooth);
    }
    
    .hub-item:nth-child(1) .hub-tab-btn { grid-column: 1; }
    .hub-item:nth-child(2) .hub-tab-btn { grid-column: 2; }
    .hub-item:nth-child(3) .hub-tab-btn { grid-column: 3; }
    .hub-item:nth-child(4) .hub-tab-btn { grid-column: 4; }
    
    .hub-tab-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-color: rgba(56, 189, 248, 0.35);
        transform: translateY(-2px);
    }
    
    .hub-tab-btn.active {
        background: rgba(56, 189, 248, 0.09) !important;
        border-color: var(--primary-blue) !important;
        color: var(--primary-blue) !important;
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
    }
    
    .accordion-arrow {
        display: none !important; /* Hide chevron on desktop */
    }
    
    .hub-panel {
        grid-row: 2;
        grid-column: 1 / span 4;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-glass);
        border-radius: 16px;
        padding: 3rem;
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
        display: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .hub-item.active .hub-panel {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .hub-container {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    
    .hub-item {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-glass);
        border-radius: 14px;
        overflow: hidden;
        transition: var(--transition-smooth);
    }
    
    .hub-item.active {
        order: -1 !important;
        border-color: var(--primary-blue) !important;
    }
    
    .hub-tab-btn {
        width: 100%;
        background: rgba(255, 255, 255, 0.02);
        border: none;
        color: var(--text-light-muted);
        padding: 1.25rem 1.5rem;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 1.05rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: var(--transition-smooth);
        text-align: left;
    }
    
    .hub-tab-btn i {
        font-size: 1.1rem;
        margin-right: 0.5rem;
    }
    
    .hub-tab-btn.active {
        color: var(--primary-blue) !important;
        background: rgba(56, 189, 248, 0.05);
    }
    
    .accordion-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.4s ease;
        color: var(--primary-blue);
    }
    
    .hub-item.active .accordion-arrow {
        transform: rotate(180deg);
    }
    
    .hub-panel {
        padding: 2rem 1.5rem;
        border-top: 1px solid var(--border-glass);
        background: rgba(15, 23, 42, 0.15);
        display: none;
    }
    
    .hub-item.active .hub-panel {
        display: block;
        animation: slideDownAccordion 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
}

@keyframes slideDownAccordion {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-title {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.panel-subtitle {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
}

.panel-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light-muted);
}

/* Pillar Cards (Vision) */
.vision-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.pillar-card {
    display: flex;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.pillar-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.pillar-icon {
    font-size: 2rem;
    color: var(--primary-blue);
    display: flex;
    align-items: flex-start;
}

.pillar-info h5 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.pillar-info p {
    font-size: 0.95rem;
    color: var(--text-light-muted);
    line-height: 1.5;
}

/* Impact Cards (Aree d'impatto) */
.panel-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.impact-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.impact-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.impact-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 850;
    color: rgba(56, 189, 248, 0.25);
}

.impact-header h4 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: #ffffff;
}

.impact-card p {
    font-size: 0.95rem;
    color: var(--text-light-muted);
    line-height: 1.6;
    flex-grow: 1;
}

.impact-benefits {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.25rem;
}

.impact-benefits h5 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-brown);
    margin-bottom: 0.75rem;
}

.impact-benefits ul {
    list-style: none;
    padding-left: 0;
}

.impact-benefits ul li {
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.impact-benefits ul li::before {
    content: "•";
    color: var(--primary-blue);
    font-weight: bold;
}

.impact-footer-banner {
    display: flex;
    gap: 1.5rem;
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.2);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.banner-icon {
    font-size: 2.2rem;
    color: var(--primary-brown);
    display: flex;
    align-items: center;
}

/* Timeline (Il Percorso) */
.timeline-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    position: relative;
}

.timeline-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.step-num {
    background: var(--primary-blue);
    color: #0d121f;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.step-content h5 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.step-content p {
    font-size: 0.9rem;
    color: var(--text-light-muted);
    line-height: 1.5;
}

/* Target Grid (Per Chi Siamo) */
.target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.target-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.target-icon {
    font-size: 2.2rem;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.target-info h5 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.target-info p {
    font-size: 0.95rem;
    color: var(--text-light-muted);
    line-height: 1.6;
}

/* ==========================================================================
   EXPANDABLE SERVICE CARDS STYLING
   ========================================================================== */
.service-expandable-card {
    cursor: pointer;
    transition: var(--transition-smooth) !important;
}

.service-card-top {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-expand-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.service-expand-indicator i {
    transition: transform 0.4s ease;
}

.service-expand-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.service-expand-body {
    border-top: 1px solid var(--border-glass);
    padding-top: 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light-muted);
}

.service-expand-body p {
    margin-bottom: 1rem;
}

/* Service Card Active State */
.service-expandable-card.active {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 15px 35px -5px rgba(56, 189, 248, 0.25) !important;
}

.service-expandable-card.active .service-card-top {
    height: auto !important; /* Prevents top section stretching and clipping the details area */
}

.service-expandable-card.active .service-expand-indicator i {
    transform: rotate(180deg);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .panel-grid-3col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .timeline-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .target-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hub-content-wrapper {
        padding: 2rem 1.5rem;
    }
    
    .panel-title {
        font-size: 1.7rem;
    }
}

/* Sliding Chat Drawer Styles */
.chat-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.chat-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.chat-drawer {
    position: fixed;
    top: 0;
    right: -460px; /* Hidden by default */
    width: 450px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for modern browsers */
    background: #f8fafc;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.3);
    z-index: 2000;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.chat-drawer.open {
    right: 0;
}

.chat-drawer-header {
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
}

.chat-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.35rem;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-close-btn:hover {
    color: #dc2626;
}

/* Adjust drawer contents to fit vertical space perfectly */
.chat-drawer .chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8fafc !important;
}

.chat-drawer .chat-input-area {
    background: #ffffff;
    border-top: 1px solid var(--border-glass);
    padding: 1.25rem 1.5rem;
}

/* Chat Drawer Mobile Responsive & Keyboard/Input Bar Fix */
@media (max-width: 992px) {
    .chat-drawer {
        width: 100% !important;
        max-width: 100% !important;
        right: -100% !important;
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important; /* Let top and bottom determine height dynamically to follow virtual keyboard */
    }
    
    .chat-drawer.open {
        right: 0 !important;
    }
    
    .chat-drawer-header {
        padding: 0.75rem 1rem !important;
        padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    .chat-drawer-header .logo img {
        height: 30px !important;
    }
    
    .chat-drawer .chat-messages {
        height: 0 !important;
        min-height: 0 !important;
        flex-grow: 1 !important;
        padding: 1rem !important;
    }
    
    .chat-drawer .chat-bubble {
        font-size: 0.88rem !important;
        padding: 0.7rem 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .chat-drawer .chat-input-area {
        padding: 0.75rem 1rem !important;
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background: #ffffff;
        z-index: 2001;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .chat-drawer .chat-input-box {
        padding: 0.6rem 0.85rem !important;
        font-size: 0.9rem !important;
    }
    
    .chat-drawer .chat-send-button {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
}


/* ==========================================================================
   MODERN POLISH LAYER — tech pulito (2026-07-31) — append-only, reversibile
   ========================================================================== */
.hero-section { position: relative; }
/* Full-bleed glow (niente stacco ai bordi del container) */
body::before {
  content:''; position:absolute; top:0; left:0; right:0; height:640px;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 420px at 20% 130px, rgba(56,189,248,0.13), transparent 70%),
    radial-gradient(560px 380px at 86% 190px, rgba(217,119,6,0.08), transparent 70%);
}
.btn-primary { box-shadow: 0 8px 24px -8px rgba(217,119,6,0.6), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-secondary { border: 1px solid rgba(255,255,255,0.12); }
.btn-secondary:hover { border-color: rgba(56,189,248,0.5); color:#fff; }
.sam-card { position: relative; border-radius: 18px; }
.sam-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:18px 18px 0 0; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(90deg, var(--primary-blue), var(--primary-brown));
}
.sam-card:hover::after { opacity:.9; }
.section-header .section-tag {
  display:inline-block; padding:.35rem .9rem; border-radius:50px;
  border:1px solid var(--border-glass); background:rgba(56,189,248,0.07);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.section-header .section-title::after {
  content:''; display:block; width:56px; height:3px; margin:1rem auto 0;
  border-radius:3px; background:linear-gradient(90deg,var(--primary-blue),var(--primary-brown));
}
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--primary-blue); outline-offset:2px;
}
::selection { background: rgba(56,189,248,0.30); color:#fff; }


/* --- POLISH BLOCK 2 (2026-07-31): hero impact + scroll reveal --- */
@media (min-width:993px){ .hero-title{ font-size:4.1rem; } }
@media (prefers-reduced-motion: no-preference){
  .reveal-up{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.25,.8,.25,1), transform .7s cubic-bezier(.25,.8,.25,1); }
  .reveal-up.in{ opacity:1; transform:none; }
}

/* --- HERO WORD PULSE: pulsazione dolce e sequenziale sulle 3 parole chiave --- */
@media (prefers-reduced-motion: no-preference){
  .hero-title .pw{ display:inline-block; animation: samWordPulse 4.5s ease-in-out infinite; will-change: transform; }
  .hero-title .pw2{ animation-delay: 1.5s; }
  .hero-title .pw3{ animation-delay: 3s; }
  @keyframes samWordPulse{
    0%       { transform: scale(1);    text-shadow:none;                          filter:brightness(1); }
    12%      { transform: scale(1.07); text-shadow:0 0 24px rgba(56,189,248,.5);  filter:brightness(1.18); }
    30%,100% { transform: scale(1);    text-shadow:none;                          filter:brightness(1); }
  }
}

/* --- CTA PULSE: bottone "Parla con SAM" invitante --- */
@media (prefers-reduced-motion: no-preference){
  .hero-actions .btn-secondary{ animation: samCtaPulse 2.8s ease-in-out infinite; }
  .hero-actions .btn-secondary:hover{ animation: none; }
  @keyframes samCtaPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(56,189,248,0.0); transform:scale(1); }
    50%    { box-shadow:0 0 0 6px rgba(56,189,248,0.10), 0 0 26px rgba(56,189,248,0.40); transform:scale(1.03); }
  }
}
/* --- Tilt 3D: transizione morbida --- */
.tilt-3d{ transform-style:preserve-3d; will-change:transform; }

/* --- AURORA hero che respira --- */
@media (prefers-reduced-motion: no-preference){
  body::before{ animation: samAurora 16s ease-in-out infinite alternate; }
  @keyframes samAurora{
    0%  { transform:translate3d(0,0,0) scale(1);        opacity:.92; }
    50% { transform:translate3d(-1.5%,1%,0) scale(1.06);opacity:1; }
    100%{ transform:translate3d(1.5%,-1%,0) scale(1.02);opacity:.85; }
  }
}
/* --- SCROLLSPY: voce attiva + underline animata --- */
.main-nav ul li a:not(.btn){ position:relative; }
.main-nav ul li a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--primary-blue),var(--primary-brown));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.main-nav ul li a:not(.btn):hover::after,
.main-nav ul li a.active:not(.btn)::after{ transform:scaleX(1); }
.main-nav ul li a.active:not(.btn){ color:var(--text-white); }
/* --- FAB chat + fumetto invito --- */
#samChatFabWrap{ position:fixed; right:22px; bottom:22px; z-index:1500; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
#samChatFab{ width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,var(--primary-blue),#0284c7); color:#fff; font-size:1.5rem; box-shadow:0 10px 30px -6px rgba(2,132,199,.55); display:flex; align-items:center; justify-content:center; transition:transform .25s ease, box-shadow .25s ease; }
#samChatFab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px -6px rgba(2,132,199,.7); animation:none; }
@media (prefers-reduced-motion: no-preference){ #samChatFab{ animation: samCtaPulse 2.8s ease-in-out infinite; } }
#samChatTeaser{ position:relative; max-width:236px; background:#fff; color:#0f172a; padding:.7rem .9rem; border-radius:14px 14px 4px 14px; font-size:.9rem; line-height:1.35; box-shadow:0 12px 30px -8px rgba(15,23,42,.4); cursor:pointer; opacity:0; transform:translateY(8px) scale(.96); pointer-events:none; transition:opacity .4s ease, transform .4s ease; }
#samChatTeaser.show{ opacity:1; transform:none; pointer-events:auto; }
#samChatTeaser b{ color:var(--primary-blue); }
#samTeaserClose{ position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%; background:#e2e8f0; color:#475569; font-size:.85rem; line-height:1; display:flex; align-items:center; justify-content:center; }
@media (max-width:600px){ #samChatFabWrap{ right:16px; bottom:16px; } #samChatFab{ width:54px; height:54px; font-size:1.3rem; } #samChatTeaser{ max-width:200px; } }

/* --- 4a card: Formazione & Seminari (link esterno) --- */
.service-event-card{ cursor:pointer; text-decoration:none; }
.service-event-card:hover{ transform:translateY(-5px); }
.service-event-cta{ text-decoration:none; }
.service-event-card .live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:6px; vertical-align:middle; }
@media (prefers-reduced-motion: no-preference){
  .service-event-card .live-dot{ animation: liveDotPulse 1.8s infinite; }
  @keyframes liveDotPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }
}

/* --- HERO tech background: griglia sfumata + aurora piu' ricca --- */
body::before{
  background:
    radial-gradient(680px 420px at 20% 130px, rgba(56,189,248,0.19), transparent 70%),
    radial-gradient(560px 380px at 86% 190px, rgba(217,119,6,0.12), transparent 70%),
    radial-gradient(760px 520px at 62% -4%, rgba(99,102,241,0.13), transparent 72%);
}
#techGrid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(circle, rgba(125,195,255,0.55) 1px, transparent 1.6px);
  background-size:26px 26px; opacity:0.12;
  -webkit-mask-image: radial-gradient(150% 95% at 50% -12%, #000 0%, transparent 58%);
  mask-image: radial-gradient(150% 95% at 50% -12%, #000 0%, transparent 58%);
}

/* --- HERO TITLE aktiv-grotesk (carattere + effetto come sdmitalia.it originale) --- */
.hero-title{
  font-family: 'aktiv-grotesk', 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: #97b5ce;
  line-height: 1.04;
}
@media (min-width:993px){ .hero-title{ font-size: 4.6rem; } }

/* --- Sezione Approfondimenti --- */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; align-items:start; }
@media (max-width:992px){ .insight-grid{ grid-template-columns:1fr; } }

/* --- Vision pillars restyle (Atto Sartoriale) --- */
.vision-pillars{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.pillar-card{
  flex-direction: column; gap: 1.05rem; padding: 1.9rem 1.6rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.07); position: relative; overflow: hidden;
}
.pillar-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--pillar-accent, var(--primary-blue)); opacity:.95; }
.pillar-card:hover{ transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--pillar-accent, var(--primary-blue)) 45%, transparent);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.5);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)); }
.pillar-icon{ width:54px; height:54px; border-radius:14px; font-size:1.45rem;
  align-items:center; justify-content:center; color: var(--pillar-accent, var(--primary-blue));
  background: color-mix(in srgb, var(--pillar-accent, var(--primary-blue)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent, var(--primary-blue)) 30%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--pillar-accent, var(--primary-blue)) 65%, transparent); }
.pillar-card:nth-child(1){ --pillar-accent:#38bdf8; }
.pillar-card:nth-child(2){ --pillar-accent:#d97706; }
.pillar-card:nth-child(3){ --pillar-accent:#6366f1; }
.pillar-info h5{ font-size:1.16rem; letter-spacing:-0.01em; margin-bottom:0.55rem; }
.pillar-info p{ font-size:0.92rem; line-height:1.6; }

/* --- VISION | MISSION highlight --- */
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:3rem; }
@media (max-width:768px){ .vm-grid{ grid-template-columns:1fr; } }
.vm-card{ position:relative; overflow:hidden; padding:2.2rem 2rem; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08); transition:var(--transition-smooth); }
.vm-card::before{ content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--vm-accent); }
.vm-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--vm-accent) 45%, transparent);
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.5); }
.vm-vision{ --vm-accent:#38bdf8; }
.vm-mission{ --vm-accent:#d97706; }
.vm-label{ display:inline-block; font-family:var(--font-heading); font-weight:800; font-size:0.78rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--vm-accent); margin-bottom:0.9rem;
  padding:0.3rem 0.85rem; border:1px solid color-mix(in srgb, var(--vm-accent) 38%, transparent);
  border-radius:50px; background:color-mix(in srgb, var(--vm-accent) 10%, transparent); }
.vm-title{ font-family:var(--font-heading); font-size:1.5rem; color:#fff; margin-bottom:0.8rem; letter-spacing:-0.01em; }
.vm-card p{ font-size:1rem; color:var(--text-light-muted); line-height:1.6; }

/* --- tech particle net css --- */
#techGrid{ display:none; }
#techNet{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  -webkit-mask-image: radial-gradient(150% 90% at 50% -10%, #000 0%, transparent 58%);
  mask-image: radial-gradient(150% 90% at 50% -10%, #000 0%, transparent 58%); }

/* --- VISION|MISSION testo ufficiale, pi√π risalto --- */
.vm-card{ text-align:center; padding:2.6rem 2rem; }
.vm-card::before{ width:100%; height:4px; bottom:auto; top:0; left:0; }
.vm-label{ font-size:1rem; letter-spacing:0.18em; padding:0.35rem 1.05rem; margin-bottom:1.15rem; }
.vm-statement{ font-family:var(--font-heading); font-weight:500; font-size:1.55rem; line-height:1.42; color:#eaf1f8; margin:0; }
.vm-statement strong{ color:var(--vm-accent); font-weight:800; }
@media (max-width:768px){ .vm-statement{ font-size:1.3rem; } }

/* --- chat mobile viewport fix (input sempre visibile) --- */
@media (max-width:992px){
  .chat-drawer{ height:100dvh !important; max-height:100dvh !important; top:0 !important; bottom:auto !important; display:flex !important; flex-direction:column !important; }
  .chat-drawer .chat-drawer-header{ flex:0 0 auto !important; }
  .chat-drawer .chat-messages{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; }
  .chat-drawer .chat-input-area{ flex:0 0 auto !important; position:relative !important; bottom:auto !important; }
}

/* --- mobile footer containment --- */
@media (max-width:768px){
  .site-footer{ overflow-x:hidden; }
  .site-footer .container{ box-sizing:border-box; max-width:100%; padding-left:1.25rem; padding-right:1.25rem; }
  .footer-brand img{ max-width:44%; height:auto; }
  .footer-grid{ min-width:0; }
  .footer-grid > *{ min-width:0; }
}

/* --- mobile hero actions fix (bottoni impilati, padding) --- */
@media (max-width:600px){
  #home.hero-section{ padding-left:1.25rem !important; padding-right:1.25rem !important; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:0.85rem; width:100%; }
  .hero-actions .btn{ width:100%; }
}

/* --- hero subtitle color harmonize (era #f8fafc per variabile inesistente) --- */
.hero-subtitle{ color: var(--text-light-muted); font-weight: 400; }

/* --- Servizi di Ingresso: mini-neon + animazioni --- */
.service-card{ --sv-accent:#d97706; transition: transform .3s ease, box-shadow .35s ease, border-color .35s ease; }
.service-card.blue, .service-event-card{ --sv-accent:#38bdf8; }
.service-card::before{ box-shadow:0 0 12px -1px var(--sv-accent); }
@media (prefers-reduced-motion: no-preference){
  .service-card::before{ animation: svBarPulse 3s ease-in-out infinite; }
  @keyframes svBarPulse{ 0%,100%{ box-shadow:0 0 7px -2px var(--sv-accent); } 50%{ box-shadow:0 0 18px 0 var(--sv-accent); } }
}
.service-card:hover{
  border-color: color-mix(in srgb, var(--sv-accent) 55%, transparent);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55), 0 0 30px -8px color-mix(in srgb, var(--sv-accent) 75%, transparent);
}
.service-card:hover::before{ box-shadow:0 0 22px 1px var(--sv-accent); animation:none; }
.service-card:hover .service-badge{ box-shadow:0 0 16px -3px var(--sv-accent); border:1px solid color-mix(in srgb, var(--sv-accent) 40%, transparent); }
.service-card:hover .service-title{ color: color-mix(in srgb, var(--sv-accent) 45%, #ffffff); }
.service-card:hover .service-expand-indicator{ text-shadow:0 0 12px color-mix(in srgb, var(--sv-accent) 70%, transparent); }

/* --- ghost vars fix (residui tema chiaro) --- */
:root{
  --text-dark-main: #f8fafc;   /* titoli su scuro */
  --text-dark-muted: #cbd5e1;  /* testo secondario su scuro */
  --bg-light-wave-1: rgba(56,189,248,0.10);
}
.typing-dot{ background: #94a3b8; }  /* puntini chat su sfondo chiaro */

/* --- rotating calm border (pulsazione rotativa dolce e spaziale) --- */
@property --sam-brd-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@media (prefers-reduced-motion: no-preference){
  .sam-card, .member-expandable-card, .vm-card{ position:relative; }
  .sam-card::after, .member-expandable-card::after, .vm-card::after{
    content:''; position:absolute; inset:0; top:0; left:0; right:0; bottom:0;
    width:auto; height:auto; border-radius:inherit; padding:1.5px; margin:0;
    background: conic-gradient(from var(--sam-brd-angle),
      rgba(56,189,248,0) 0deg, rgba(56,189,248,0) 205deg,
      rgba(56,189,248,0.28) 285deg, rgba(94,234,212,0.55) 330deg,
      rgba(56,189,248,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none; opacity:1; transition:none;
    animation: samBrdSpin 11s linear infinite;
  }
  .sam-card:hover::after, .member-expandable-card:hover::after, .vm-card:hover::after{ opacity:1; }
  @keyframes samBrdSpin{ to{ --sam-brd-angle:360deg; } }
  /* desync per un effetto organico/spaziale */
  .services-grid > *:nth-child(2)::after,.insight-grid > *:nth-child(2)::after,.team-grid > *:nth-child(2)::after{ animation-delay:-3.6s; }
  .services-grid > *:nth-child(3)::after,.insight-grid > *:nth-child(3)::after,.team-grid > *:nth-child(3)::after{ animation-delay:-7.2s; }
  .services-grid > *:nth-child(4)::after{ animation-delay:-9.4s; }
  .vm-mission::after{ animation-delay:-5.5s; }
}

/* --- particelle ovunque (niente sfumatura in alto) --- */
/* techNet everywhere */
#techNet{ -webkit-mask:none !important; mask:none !important; }

/* --- tasto Accedi: visibile anche su mobile (nav-access mobile) --- */
@media (max-width:768px){
  .main-nav ul li.nav-access{ display:flex !important; align-items:center; }
  .main-nav ul li.nav-access .btn{ padding:0.45rem 0.8rem !important; font-size:0.8rem !important; margin-right:0.4rem !important; white-space:nowrap; }
}

/* --- VM enfasi: caselle Vision/Mission piu' prominenti --- */
.vm-grid{ gap:2rem; max-width:1020px; margin:0.5rem auto 3.5rem; }
.vm-card{
  padding:3rem 2.4rem 2.8rem; border-radius:22px;
  border:1px solid color-mix(in srgb, var(--vm-accent) 32%, rgba(255,255,255,0.08));
  background:
    radial-gradient(130% 85% at 50% 0%, color-mix(in srgb, var(--vm-accent) 15%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 22px 55px -22px rgba(0,0,0,.65), 0 0 46px -24px color-mix(in srgb, var(--vm-accent) 85%, transparent);
}
.vm-card::before{ height:5px; }
.vm-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -22px rgba(0,0,0,.7), 0 0 60px -20px color-mix(in srgb, var(--vm-accent) 90%, transparent); }
.vm-icon{
  width:66px; height:66px; margin:0 auto 1.25rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  color:var(--vm-accent);
  background: color-mix(in srgb, var(--vm-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--vm-accent) 38%, transparent);
  box-shadow:0 0 30px -6px color-mix(in srgb, var(--vm-accent) 75%, transparent);
}
.vm-label{ font-size:1.15rem; letter-spacing:0.24em; padding:0.42rem 1.25rem; margin-bottom:1.2rem; }
.vm-statement{ font-size:1.72rem; line-height:1.4; }
@media (max-width:768px){ .vm-statement{ font-size:1.35rem; } .vm-icon{ width:58px; height:58px; font-size:1.5rem; } }

/* --- VM statement specificity fix (batte .vm-card p) --- */
.vm-card .vm-statement{ font-size:1.85rem; line-height:1.38; font-weight:500; }
.vm-card .vm-statement strong{ color:var(--vm-accent); font-weight:800; }
@media (max-width:768px){ .vm-card .vm-statement{ font-size:1.4rem; } }

/* --- scroll movimento potenziato: barra + reveal vario --- */
#scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:3000; pointer-events:none;
  background:linear-gradient(90deg, var(--primary-blue), var(--primary-brown)); box-shadow:0 0 12px rgba(56,189,248,.55); }
@media (prefers-reduced-motion: no-preference){
  .reveal-up{ opacity:0; transform:translateY(38px) scale(.985); }
  .reveal-scale{ opacity:0; transform:scale(.93); }
  .reveal-left, .reveal-right{ opacity:0; transform:translateY(38px); }
  .reveal-up,.reveal-scale,.reveal-left,.reveal-right{ transition:opacity .78s cubic-bezier(.2,.7,.2,1), transform .78s cubic-bezier(.2,.7,.2,1); }
  @media (min-width:993px){
    .reveal-left{ transform:translateX(-48px); }
    .reveal-right{ transform:translateX(48px); }
  }
  .reveal-up.in,.reveal-scale.in,.reveal-left.in,.reveal-right.in{ opacity:1; transform:none; }
}

/* --- larghezza fluida adattiva: usa piu' spazio, si adatta ai monitor --- */
.container{ max-width:1680px; padding-left:clamp(1rem, 3.5vw, 3.5rem); padding-right:clamp(1rem, 3.5vw, 3.5rem); }
.hub-container{ max-width:1440px; }
.services-grid{ max-width:1200px; }
.cases-grid{ max-width:1200px; }
.vm-grid{ max-width:1200px; }
@media (max-width:768px){ .container{ padding-left:1.1rem; padding-right:1.1rem; } }

/* --- scroll spotlight di lettura (guida l'occhio) --- */
@media (prefers-reduced-motion: no-preference){
  .scroll-lit{ filter: brightness(0.7); transition: filter .55s ease, text-shadow .55s ease; }
  .scroll-lit.lit{ filter: brightness(1.12); }
  .section-title.scroll-lit.lit{ text-shadow: 0 0 22px rgba(56,189,248,0.20); }
}

/* --- coerenza griglie larghezza: tutte riempiono il container, niente scostamenti --- */
.services-grid{ max-width:none; margin-left:auto; margin-right:auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cases-grid{ max-width:none; margin-left:auto; margin-right:auto; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vm-grid{ max-width:none; }
.insight-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ==================== DEEP SPACE ELECTRIC — palette moderna ==================== */
:root{
  --primary-blue: #38bdf8;
  --primary-blue-glow: rgba(56,189,248,0.18);
  --primary-brown: #8b5cf6;          /* ex bronzo -> viola/indaco elettrico */
  --primary-brown-hover: #a78bfa;
  --primary-brown-glow: rgba(139,92,246,0.28);
}
/* fondo profondo e STRATIFICATO (basta piatto/opaco) */
body{ background-color:#0a0e18; background-image: linear-gradient(180deg, #0a0e18 0%, #0d1424 48%, #090d16 100%); }
body::before{
  background:
    radial-gradient(760px 520px at 16% 6%,  rgba(56,189,248,0.16), transparent 68%),
    radial-gradient(700px 540px at 86% 12%, rgba(139,92,246,0.20), transparent 70%),
    radial-gradient(1000px 760px at 60% 104%, rgba(99,102,241,0.12), transparent 72%);
}
/* accenti "bronzo" residui -> viola */
.btn-primary{ background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important; box-shadow: 0 8px 24px -8px rgba(139,92,246,0.60), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
.btn-primary:hover{ background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important; box-shadow: 0 12px 32px -6px rgba(139,92,246,0.72) !important; }
.vm-mission{ --vm-accent:#8b5cf6; }
.service-card{ --sv-accent:#8b5cf6; }
.pillar-card:nth-child(2){ --pillar-accent:#8b5cf6; }
/* vetro 2.0: bordo/luce piu' curati */
.sam-card{ border:1px solid rgba(255,255,255,0.09); box-shadow:0 12px 40px -14px rgba(0,0,0,0.55); }
/* particelle: un tocco piu' vive sul fondo profondo (via canvas gia' azzurro) */

/* ==================== POLISH — particelle sobrie + superfici LUCIDE ==================== */
/* la rete di puntini resta un accenno dietro l'hero e poi SVANISCE: niente "tutto puntini" */
#techNet{
  -webkit-mask: linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.38) 44%,transparent 70%) !important;
          mask: linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.38) 44%,transparent 70%) !important;
  opacity:.7;
}
/* luce ambientale "glossy" in cima (html::before e' libero) */
html::before{
  content:""; position:fixed; left:0; top:0; right:0; height:46vh; z-index:-1; pointer-events:none;
  background: radial-gradient(120% 100% at 50% -22%, rgba(130,185,255,.12), transparent 72%);
}
/* SUPERFICI LUCIDE: riflesso vetro su tutte le card (box-shadow additivo, non tocca ::after) */
.sam-card, .service-card, .vm-card, .pillar-card, .member-expandable-card{
  border:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%);
  box-shadow:
    0 22px 60px -22px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 26px 48px -34px rgba(255,255,255,.24) !important;
  transition: transform .3s ease, box-shadow .35s ease, border-color .35s ease;
}
.sam-card:hover, .service-card:hover, .vm-card:hover, .pillar-card:hover{
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45) !important;
  box-shadow:
    0 30px 74px -20px rgba(0,0,0,.72),
    0 0 0 1px rgba(139,92,246,.22),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 26px 48px -34px rgba(255,255,255,.28) !important;
}
/* pulsanti piu' LUCIDI: sheen bianco in alto + profondita' sotto */
.btn-primary{
  background-image: linear-gradient(135deg,#a78bfa 0%,#8b5cf6 44%,#6d28d9 100%) !important;
  box-shadow:
    0 10px 26px -8px rgba(139,92,246,.62),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -10px 18px -10px rgba(76,29,149,.55) !important;
}
.btn-primary:hover{
  background-image: linear-gradient(135deg,#c4b5fd 0%,#a78bfa 44%,#7c3aed 100%) !important;
  box-shadow:
    0 14px 34px -6px rgba(139,92,246,.74),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 18px -10px rgba(76,29,149,.5) !important;
}

/* ==================== HERO PHOTO + SFONDO LUCIDO ==================== */
/* Foto dei Sarti accanto al titolo: SENZA cornice, solo foto pulita */
.hero-photo-frame{
  position:relative; margin:0; padding:0; background:none; border:none; box-shadow:none;
  border-radius:18px; overflow:visible; transform:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-photo-frame:hover{ transform:translateY(-5px); }
.hero-photo{
  display:block; width:100%; height:auto; border-radius:16px;
  box-shadow:0 34px 74px -24px rgba(0,0,0,.72);
}
.hero-photo-frame::after{ content:none; }
@media (max-width:768px){ .hero-photo-frame{ margin-top:2rem; } }

/* SFONDO: da matte a LUCIDO — gradiente ricco (no banding) + specular + vignette */
body{
  background-color:#0a0e18;
  background-image:linear-gradient(178deg,#0b1226 0%,#0e1834 22%,#0c162e 42%,#0b1428 60%,#0a1120 80%,#080c15 100%);
  background-attachment:fixed;
}
body::before{
  background:
    radial-gradient(840px 580px at 14% 3%,  rgba(56,189,248,.24), transparent 64%),
    radial-gradient(780px 620px at 88% 8%,  rgba(139,92,246,.30), transparent 66%),
    radial-gradient(1180px 840px at 60% 112%, rgba(99,102,241,.18), transparent 70%),
    radial-gradient(150% 130% at 50% 46%, transparent 50%, rgba(2,4,10,.42) 100%);
}
/* grana molto piu leggera (toglie l aria "matte") + aiuta a sfumare */
body::after{ opacity:.018 !important; mix-blend-mode:overlay; }
/* riflesso specular glossy in alto */
html::before{
  height:72vh;
  background:
    radial-gradient(120% 92% at 50% -24%, rgba(150,196,255,.16), transparent 66%),
    linear-gradient(102deg, transparent 30%, rgba(255,255,255,.055) 49%, transparent 63%);
}

/* ==================== PROVA TEMA CHIARO — sfondo chiaro + stelline grigio scuro ==================== */
body{
  background-color:#eaeef4 !important;
  background-image:linear-gradient(178deg,#f4f7fc 0%,#e8edf5 42%,#eef2f8 72%,#e3e9f1 100%) !important;
  color:#2a323d !important;
}
body::before{
  background:
    radial-gradient(820px 560px at 14% 3%, rgba(56,189,248,.10), transparent 66%),
    radial-gradient(760px 600px at 88% 8%, rgba(139,92,246,.11), transparent 68%),
    radial-gradient(1180px 840px at 60% 112%, rgba(99,102,241,.06), transparent 70%),
    radial-gradient(150% 130% at 50% 46%, transparent 62%, rgba(120,130,150,.10) 100%) !important;
}
body::after{ opacity:.02 !important; }
html::before{ background: radial-gradient(120% 92% at 50% -22%, rgba(255,255,255,.55), transparent 66%) !important; }

/* header resta SCURO (logo e menu bianchi leggibili) */
.site-header{ background:rgba(18,24,33,.92) !important; border-bottom:1px solid rgba(15,23,42,.10) !important; }

/* testi scuri sulle sezioni chiare */
.section h1,.section h2,.section h3,.section h4,.section p,.section li{ color:#28303b !important; }
.hero-title{ color:#3f4b5a !important; }
.hero-subtitle{ color:#4a5563 !important; }
.section-title{ color:#1c2531 !important; }
.vm-title,.panel-title,.member-name{ color:#1c2531 !important; }
.vm-statement,.panel-text,.member-role{ color:#4a545f !important; }

/* logo esteso bianco nell hero -> scurito con filtro */
.hero-logo-img{ filter:brightness(0) saturate(0); opacity:.82; }

/* card in vetro CHIARO */
.sam-card,.service-card,.vm-card,.pillar-card,.member-expandable-card{
  background:linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.75)) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 18px 42px -20px rgba(30,42,64,.26), inset 0 1px 0 rgba(255,255,255,.9) !important;
  color:#2a323d !important;
}
.sam-card:hover,.service-card:hover,.vm-card:hover,.pillar-card:hover{
  border-color:rgba(139,92,246,.42) !important;
  box-shadow:0 26px 56px -18px rgba(30,42,64,.32), 0 0 0 1px rgba(139,92,246,.16) !important;
}

/* pulsante secondario su chiaro */
.btn-secondary{ color:#1c2531 !important; border:1px solid rgba(15,23,42,.22) !important; background:rgba(255,255,255,.55) !important; }

/* sezione CHI SIAMO: superficie chiara coerente */
#chi-siamo{ background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)) !important; border-top:1px solid rgba(15,23,42,.08) !important; border-bottom:1px solid rgba(15,23,42,.08) !important; }

/* ==================== TILE BRAND (palette marketing SAM) su tema chiaro ==================== */
/* tessere SCURE antracite #252A36 con testo chiaro -> massimo contrasto sullo sfondo chiaro */
.sam-card,.service-card,.vm-card,.pillar-card,.member-expandable-card{
  background:linear-gradient(180deg,#2c3240 0%,#242a36 100%) !important;
  border:1px solid rgba(157,180,203,.20) !important;
  box-shadow:0 22px 50px -20px rgba(20,26,38,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:#e7edf4 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* testi interni chiari (vincono su .section p ecc. per posizione) */
.sam-card p,.service-card p,.vm-card p,.pillar-card p,.member-expandable-card p,
.sam-card li,.service-card li,.vm-card li,.pillar-card li,
.sam-card h1,.sam-card h2,.sam-card h3,.sam-card h4,
.service-card h1,.service-card h2,.service-card h3,.service-card h4,
.vm-card h1,.vm-card h2,.vm-card h3,.vm-card h4,
.pillar-card h1,.pillar-card h2,.pillar-card h3,.pillar-card h4{ color:#e7edf4 !important; }
.sam-card .vm-title,.vm-card .vm-title,.panel-title,.member-name,.service-title,.pillar-title{ color:#ffffff !important; }
.sam-card .vm-statement,.vm-card .vm-statement,.panel-text,.member-role,.service-desc,.pillar-text{ color:#9DB4CB !important; }
/* prezzi/etichette: azzurro-grigio brand */
.service-card .price,.service-card .badge,.service-tag,.card-eyebrow{ color:#9DB4CB !important; }

/* accento tessere -> terracotta brand #954B2E */
.service-card{ --sv-accent:#954B2E !important; }
.vm-card,.vm-vision,.vm-mission{ --vm-accent:#954B2E !important; }
.pillar-card{ --pillar-accent:#954B2E !important; }
.member-avatar,.expand-icon-wrapper{ color:#954B2E !important; }

/* hover tessere: bordo terracotta */
.sam-card:hover,.service-card:hover,.vm-card:hover,.pillar-card:hover,.member-expandable-card:hover{
  border-color:rgba(149,75,46,.55) !important;
  box-shadow:0 30px 64px -18px rgba(20,26,38,.5), 0 0 0 1px rgba(149,75,46,.28) !important;
}

/* ---- accenti tessere -> palette brand (terracotta + azzurro-grigio) ---- */
.service-card::before{ background:#954B2E !important; }
.service-card.blue::before{ background:#9DB4CB !important; }
.service-badge{ color:#cf9078 !important; background:rgba(149,75,46,.14) !important; }
.service-card.blue .service-badge{ color:#9DB4CB !important; background:rgba(157,180,203,.14) !important; }
.service-expand-indicator{ color:#cf9078 !important; }
.service-card.blue .service-expand-indicator{ color:#9DB4CB !important; }
.service-features i{ color:#cf9078 !important; }
.service-card.blue .service-features i{ color:#9DB4CB !important; }
.service-card{ --sv-accent:#954B2E !important; }
.service-card.blue{ --sv-accent:#9DB4CB !important; }
/* prezzo ben leggibile su tile scura */
.service-price{ color:#ffffff !important; }
.service-price span{ color:#9DB4CB !important; }

/* ==================== DIREZIONE A — CHIARO EDITORIALE (visione approvata) ==================== */
/* accento globale: da viola -> terracotta brand */
:root{ --primary-brown:#954b2e !important; --primary-brown-hover:#a85a39 !important; --primary-brown-glow:rgba(149,75,46,.28) !important; }

/* fondo CARTA calda editoriale (meno azzurro, piu sabbia) */
body{
  background-color:#f2f0ec !important;
  background-image:linear-gradient(178deg,#f6f4f0 0%,#efece7 46%,#f3f1ec 72%,#eae6df 100%) !important;
  color:#2f3742 !important;
}

/* TESSERE CHIARE: antracite come inchiostro, non come campitura piena */
.sam-card,.service-card,.vm-card,.pillar-card,.member-expandable-card{
  background:#ffffff !important;
  border:1px solid rgba(37,42,54,.10) !important;
  box-shadow:0 18px 42px -22px rgba(37,42,54,.22), inset 0 1px 0 rgba(255,255,255,.9) !important;
  color:#39424e !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.sam-card:hover,.service-card:hover,.vm-card:hover,.pillar-card:hover,.member-expandable-card:hover{
  border-color:rgba(149,75,46,.45) !important;
  box-shadow:0 28px 58px -20px rgba(37,42,54,.28), 0 0 0 1px rgba(149,75,46,.18) !important;
}
.sam-card p,.service-card p,.vm-card p,.pillar-card p,.member-expandable-card p,
.sam-card li,.service-card li,.vm-card li,.pillar-card li,
.sam-card h1,.sam-card h2,.sam-card h3,.sam-card h4,
.service-card h1,.service-card h2,.service-card h3,.service-card h4,
.vm-card h1,.vm-card h2,.vm-card h3,.vm-card h4,
.pillar-card h1,.pillar-card h2,.pillar-card h3,.pillar-card h4{ color:#39424e !important; }
.sam-card .vm-title,.vm-card .vm-title,.panel-title,.member-name,.service-title,.pillar-title{ color:#252a36 !important; }
.sam-card .vm-statement,.vm-card .vm-statement,.panel-text,.member-role,.service-desc,.pillar-text{ color:#5b646f !important; }
.service-price{ color:#252a36 !important; }
.service-price span{ color:#7c8590 !important; }
.service-features li{ color:#5b646f !important; }

/* accento UNICO terracotta (niente azzurro come barra) */
.service-card::before,.service-card.blue::before{ background:#954b2e !important; }
.service-badge,.service-card.blue .service-badge{ color:#954b2e !important; background:rgba(149,75,46,.10) !important; }
.service-expand-indicator,.service-card.blue .service-expand-indicator{ color:#954b2e !important; }
.service-features i,.service-card.blue .service-features i{ color:#954b2e !important; }
.service-card,.service-card.blue{ --sv-accent:#954b2e !important; }
.vm-card,.vm-vision,.vm-mission{ --vm-accent:#954b2e !important; }
.pillar-card{ --pillar-accent:#954b2e !important; }
.member-avatar,.expand-icon-wrapper{ color:#954b2e !important; }

/* PULSANTI -> terracotta */
.btn-primary{
  background:#954b2e !important;
  background-image:linear-gradient(135deg,#a85c3a 0%,#954b2e 56%,#7d3f26 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px -8px rgba(149,75,46,.5), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.btn-primary:hover{
  background-image:linear-gradient(135deg,#b96943 0%,#a45532 56%,#8a4629 100%) !important;
  box-shadow:0 14px 30px -6px rgba(149,75,46,.6) !important;
}
#samChatFab,.sam-chat-fab,.chat-fab{ background:#954b2e !important; }

/* eyebrow / tag / titoli */
.section-tag{ color:#954b2e !important; background:rgba(149,75,46,.09) !important; border-color:rgba(149,75,46,.2) !important; }
.section-title{ color:#252a36 !important; }
.hero-title{ color:#3a4654 !important; }

/* ---- FIX schede Sarti (Chi Siamo) su tessere chiare: testo scuro + piu grande ---- */
.member-expandable-card .member-name{ color:#252a36 !important; font-size:1.4rem !important; font-weight:800 !important; }
.member-expandable-card .member-role{ color:#954b2e !important; font-size:0.98rem !important; font-weight:600 !important; }
.member-expandable-card .member-avatar{ color:#954b2e !important; background:rgba(149,75,46,.10) !important; border-color:rgba(149,75,46,.25) !important; }
.member-expandable-card .expand-icon-wrapper{ color:#954b2e !important; }
.member-expandable-card .member-bio-expand-content div,
.member-expandable-card .member-bio-expand-content p,
.member-expandable-card .member-bio-expand-content{ color:#4a545f !important; font-size:0.98rem !important; line-height:1.6 !important; }

/* ==================== COERENZA — Metodo / Aree d impatto / Vision su tema CHIARO ==================== */
/* superfici bianche su carta */
.hub-panel,.impact-card,.target-card,.timeline-step,.goal-banner{
  background:#ffffff !important;
  border:1px solid rgba(37,42,54,.10) !important;
  box-shadow:0 16px 38px -24px rgba(37,42,54,.20) !important;
}
.hub-item.active .hub-panel{ background:#ffffff !important; }

/* titoli -> antracite */
.panel-title,.impact-header h4,.impact-header h3,.step-content h5,.target-info h5,.pillar-info h5,.goal-banner h3,.goal-banner h4{ color:#252a36 !important; }
/* testi -> grigio leggibile */
.panel-text,.impact-card p,.impact-benefits li,.step-content p,.target-info p,.pillar-info p,.goal-banner p{ color:#5b646f !important; }
.panel-subtitle{ color:#954b2e !important; }

/* accenti numeri/icone -> terracotta */
.impact-number{ color:rgba(149,75,46,.32) !important; }
.target-icon,.pillar-icon,.impact-header i,.impact-icon,.vm-icon,.hub-item i{ color:#954b2e !important; }
.step-num{ background:#954b2e !important; color:#ffffff !important; }
.accordion-arrow,.hub-tab-btn i{ color:inherit !important; }

/* pulsanti-tab del Metodo -> pill chiaro leggibile, attivo terracotta */
.hub-tab-btn{
  background:#ffffff !important;
  border:1px solid rgba(37,42,54,.14) !important;
  color:#3a434f !important;
}
.hub-tab-btn:hover{ background:#f6f2ee !important; color:#252a36 !important; border-color:rgba(149,75,46,.35) !important; }
.hub-tab-btn.active{ background:#954b2e !important; border-color:#954b2e !important; color:#ffffff !important; }

/* banner finale impatto -> terracotta (basta bronzo) */
.impact-footer-banner{ background:rgba(149,75,46,.08) !important; border:1px solid rgba(149,75,46,.22) !important; }
.impact-footer-banner,.impact-footer-banner *{ color:#8a4527 !important; }

/* Vision/Mission: etichetta, icona e statement leggibili */
.vm-card{ background:#ffffff !important; border:1px solid rgba(37,42,54,.10) !important; }
.vm-label{ color:#954b2e !important; background:rgba(149,75,46,.10) !important; border-color:rgba(149,75,46,.22) !important; }
.vm-icon{ color:#954b2e !important; }
.vm-statement{ color:#39424e !important; }
.vm-statement strong{ color:#954b2e !important; }
/* tab attivo Metodo -> terracotta (specificita piu alta) */
.hub-item .hub-tab-btn.active,.hub-container .hub-tab-btn.active{ background:#954b2e !important; border-color:#954b2e !important; color:#ffffff !important; }

/* ==================== RIFINITURE — pulsante secondario + tab attivo ==================== */
/* 1) glow del pulsante secondario / chat FAB: da blu a terracotta */
@keyframes samCtaPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(149,75,46,0.0); transform:scale(1); }
  50%    { box-shadow:0 0 0 6px rgba(149,75,46,0.10), 0 0 26px rgba(149,75,46,0.38); transform:scale(1.03); }
}
.hero-actions .btn-secondary:hover,.btn-secondary:hover{ border-color:#954b2e !important; color:#954b2e !important; background:#ffffff !important; }

/* 2) tab attivo Metodo -> terracotta (dentro il media desktop, vince sulla regola concorrente) */
@media (min-width:993px){
  .hub-item .hub-tab-btn.active,.hub-item.active .hub-tab-btn,.hub-tab-btn.active{ background:#954b2e !important; border-color:#954b2e !important; color:#ffffff !important; }
  .hub-item .hub-tab-btn.active i,.hub-item.active .hub-tab-btn i,.hub-tab-btn.active i{ color:#ffffff !important; }
}
.hub-item .hub-tab-btn.active,.hub-item.active .hub-tab-btn,.hub-tab-btn.active{ background:#954b2e !important; border-color:#954b2e !important; color:#ffffff !important; }
.hub-item .hub-tab-btn.active i,.hub-tab-btn.active i{ color:#ffffff !important; }

/* ==================== MOBILE — menu hamburger ==================== */
.nav-burger{ display:none; }
@media (max-width:768px){
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:11px; margin-left:auto;
    background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:10px; cursor:pointer;
  }
  .nav-burger span{ display:block; height:2px; width:100%; background:#e7edf4; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .site-header.nav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  .site-header.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* nav: ul diventa dropdown fisso; header resta logo + burger */
  .main-nav{ position:static !important; width:auto !important; }
  .main-nav ul{ position:fixed !important; top:65px; left:0; right:0;
    flex-direction:column !important; align-items:stretch !important; gap:0 !important;
    background:#ffffff; border-top:1px solid rgba(37,42,54,.10);
    box-shadow:0 24px 44px -20px rgba(37,42,54,.4);
    padding:6px 0 14px !important; margin:0;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .32s ease, opacity .25s ease; z-index:120; }
  .site-header.nav-open .main-nav ul{ max-height:82vh; opacity:1; pointer-events:auto; }
  .site-header.nav-open .main-nav ul li{ display:flex !important; width:100%; }
  .site-header.nav-open .main-nav ul li a{ width:100%; padding:15px 22px !important; color:#252a36 !important; font-size:1.06rem !important; }
  .site-header.nav-open .main-nav ul li a:not(.btn){ border-bottom:1px solid rgba(37,42,54,.07); }
  .site-header.nav-open .main-nav ul li a:not(.btn):hover{ color:#954b2e !important; background:rgba(149,75,46,.05); }
  .site-header.nav-open .main-nav ul li.nav-access,.site-header.nav-open .main-nav ul li:last-child{ padding:8px 16px 0; }
  .site-header.nav-open .main-nav ul li .btn{ width:100%; justify-content:center; margin:8px 0 0 !important; }
  .site-header.nav-open .main-nav ul li #openChatBtn{ width:100%; justify-content:center; }
}

/* ==================== SFONDO — Nebbia azzurra (opzione C) ==================== */
body{
  background-color:#e9edf3 !important;
  background-image:linear-gradient(178deg,#eef2f8 0%,#e6ecf3 44%,#eaeef5 72%,#e1e7f0 100%) !important;
  color:#2b323d !important;
}
body::before{
  background:
    radial-gradient(820px 560px at 14% 3%,  rgba(157,180,203,.22), transparent 66%),
    radial-gradient(760px 600px at 88% 8%,  rgba(157,180,203,.15), transparent 68%),
    radial-gradient(1180px 840px at 60% 112%, rgba(120,145,180,.13), transparent 70%),
    radial-gradient(150% 130% at 50% 46%, transparent 62%, rgba(60,80,110,.08) 100%) !important;
}
html::before{ background:radial-gradient(120% 92% at 50% -22%, rgba(255,255,255,.55), transparent 66%) !important; }
/* sezione Chi Siamo: leggera superficie piu chiara sul fondo freddo */
#chi-siamo{ background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3)) !important; }

/* ==================== OSSERVATORIO (news) — Direzione A ==================== */
#osservatorio .section-header p{ max-width:62ch; margin-left:auto; margin-right:auto; }
.pillola{ position:relative; max-width:840px; margin:0 auto 2.6rem; padding:1.6rem 1.8rem 1.7rem;
  background:linear-gradient(180deg,#ffffff,#fdfaf7); border:1px solid rgba(149,75,46,.22);
  border-left:4px solid #954b2e; border-radius:16px; box-shadow:0 20px 46px -24px rgba(37,42,54,.24); }
.pillola-eyebrow{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#954b2e; font-weight:700; }
.pillola-testo{ margin:.6rem 0 .55rem; font-size:1.16rem; line-height:1.5; color:#252a36; font-weight:500; }
.pillola-firma{ font-size:.8rem; color:#7c8590; }

.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.news-card{ position:relative; display:flex; flex-direction:column; background:#ffffff;
  border:1px solid rgba(37,42,54,.10); border-radius:14px; padding:1.3rem 1.4rem 1.2rem; overflow:hidden;
  box-shadow:0 16px 38px -24px rgba(37,42,54,.22); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.news-card:hover{ transform:translateY(-4px); border-color:rgba(149,75,46,.42); box-shadow:0 26px 54px -22px rgba(37,42,54,.30); }
.news-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#954b2e; opacity:.9; }
.news-card-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.6rem; }
.news-card-left{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.news-cat{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.64rem; letter-spacing:.05em; font-weight:700; color:#954b2e; background:rgba(149,75,46,.10); padding:.24rem .6rem; border-radius:999px; white-space:nowrap; }
.news-badge{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#fff; background:#954b2e; padding:.2rem .5rem; border-radius:999px; }
.news-date{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.72rem; color:#7c8590; white-space:nowrap; }
.news-card-title{ font-size:1.06rem; line-height:1.3; color:#252a36; margin:0 0 .5rem; font-weight:750; letter-spacing:-.01em; }
.news-card-sum{ font-size:.9rem; line-height:1.5; color:#5b646f; margin:0 0 .95rem; flex:1; }
.news-card-src{ font-size:.78rem; color:#954b2e; font-weight:600; text-decoration:none; margin-top:auto; }
.news-card-src:hover{ text-decoration:underline; }
.news-empty{ color:#7c8590; text-align:center; grid-column:1 / -1; padding:1.5rem 0; }
@media (max-width:768px){ .pillola{ margin-bottom:2rem; } .news-grid{ gap:1.1rem; } }

/* Osservatorio: griglia centrata a 3 colonne (6 news = 3+3) */
#osservatorio .news-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1140px; margin-left:auto; margin-right:auto; }
@media (max-width:1000px){ #osservatorio .news-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; } }
@media (max-width:640px){ #osservatorio .news-grid{ grid-template-columns:1fr; max-width:440px; } }

/* ==================== OSSERVATORIO v2 (advisory + pillola in evidenza) ==================== */
#osservatorio .section-header p{ max-width:64ch; margin-left:auto; margin-right:auto; }

/* card "cosa vediamo sbagliare" */
.oss-tips{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; max-width:1160px; margin:0 auto 2.6rem; }
.oss-tip{ background:#fff; border:1px solid rgba(37,42,54,.10); border-left:3px solid #954b2e; border-radius:12px; padding:1.15rem 1.25rem; box-shadow:0 14px 34px -26px rgba(37,42,54,.22); }
.oss-tip h3{ font-size:.98rem; color:#252a36; margin:0 0 .45rem; font-weight:750; letter-spacing:-.01em; line-height:1.25; }
.oss-tip p{ font-size:.85rem; color:#5b646f; line-height:1.5; margin:0; }
@media (max-width:960px){ .oss-tips{ grid-template-columns:repeat(2,1fr); max-width:660px; } }
@media (max-width:560px){ .oss-tips{ grid-template-columns:1fr; max-width:440px; } }

/* 2 colonne: pillola scura + news */
.oss-main{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:1.7rem; max-width:1160px; margin:0 auto; align-items:start; }
@media (max-width:900px){ .oss-main{ grid-template-columns:1fr; max-width:640px; } }

/* PILLOLA in evidenza — card ANTRACITE (colore primario brand) */
.pillola{ position:relative; overflow:hidden; background:linear-gradient(165deg,#2b3140 0%,#20262f 100%); color:#e7edf4;
  border:1px solid rgba(157,180,203,.18); border-radius:18px; padding:1.9rem 1.8rem;
  box-shadow:0 28px 62px -26px rgba(20,26,38,.55); }
.pillola::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:#954b2e; }
.pillola-eyebrow{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#cf9078; font-weight:700; }
.pillola-testo{ margin:.75rem 0 0; font-size:1.08rem; line-height:1.62; color:#eef2f6; }
.pillola-empty{ color:#9db4cb; font-style:italic; }

/* colonna news */
.oss-news-title{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#5b646f; margin:.2rem 0 1rem; }
.news-list{ display:grid; gap:.9rem; }
.news-item{ position:relative; background:#fff; border:1px solid rgba(37,42,54,.10); border-radius:12px; padding:1.05rem 1.25rem;
  box-shadow:0 12px 30px -24px rgba(37,42,54,.2); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.news-item:hover{ transform:translateY(-2px); border-color:rgba(149,75,46,.4); box-shadow:0 20px 46px -22px rgba(37,42,54,.28); }
.ni-meta{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.66rem; letter-spacing:.05em; color:#954b2e; font-weight:700; text-transform:uppercase; margin-bottom:.38rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ni-badge{ font-size:.56rem; color:#fff; background:#954b2e; padding:.16rem .5rem; border-radius:999px; letter-spacing:.06em; }
.ni-title{ font-size:1rem; line-height:1.32; color:#252a36; font-weight:750; margin:0 0 .38rem; letter-spacing:-.01em; }
.ni-sum{ font-size:.86rem; color:#5b646f; line-height:1.5; margin:0 0 .6rem; }
.ni-src{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.74rem; color:#954b2e; font-weight:600; text-decoration:none; }
.ni-src:hover{ text-decoration:underline; }
.oss-note{ font-size:.76rem; color:#7c8590; margin-top:1rem; line-height:1.5; }
.news-empty{ color:#7c8590; padding:1rem 0; }

/* ==================== OVERHAUL VISIVO (ambient + palette + elasticita + fix pillola) ==================== */

/* --- (5) ELASTICITA: container piu largo e fluido, da mobile a 4K --- */
.container{ max-width:min(92vw, 2160px) !important; padding-left:clamp(1rem, 3vw, 3.5rem) !important; padding-right:clamp(1rem, 3vw, 3.5rem) !important; }
.oss-tips{ max-width:min(92vw, 1920px) !important; }
.oss-main{ max-width:min(92vw, 1920px) !important; }
/* su schermi larghi la colonna news diventa a 2 colonne (usa lo spazio) */
@media (min-width:1500px){ .news-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1900px){ .oss-main{ grid-template-columns:0.85fr 1.15fr; gap:2.2rem; } }

/* --- (4) PALETTE: sfondo un filo piu profondo (meno slavato) --- */
body{ background-color:#dbe1ea !important;
  background-image:linear-gradient(178deg,#e3e9f2 0%,#d8dfe9 46%,#dee4ee 72%,#d2dae5 100%) !important; }
body::before{ background:radial-gradient(150% 130% at 50% 42%, transparent 55%, rgba(28,38,58,.10) 100%) !important; }
body::after{ opacity:.015 !important; }

/* --- (3) AMBIENT: blob sfocati che derivano lentamente (niente stelline) --- */
#techNet{ display:none !important; }
#techGrid{ display:none !important; }
html::before{ display:none !important; }
#samAmbient{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
#samAmbient .blob{ position:absolute; border-radius:50%; filter:blur(72px); will-change:transform; animation:samDrift 32s ease-in-out infinite; }
#samAmbient .b1{ width:50vw; height:50vw; top:-14vw; left:-12vw;  background:radial-gradient(circle, rgba(157,180,203,.60), transparent 66%); }
#samAmbient .b2{ width:44vw; height:44vw; bottom:-18vw; right:-10vw; background:radial-gradient(circle, rgba(149,75,46,.26), transparent 64%); animation-duration:40s; animation-delay:-12s; }
#samAmbient .b3{ width:38vw; height:38vw; top:30%; left:52%; background:radial-gradient(circle, rgba(37,42,54,.16), transparent 68%); animation-duration:46s; animation-delay:-20s; }
@keyframes samDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(5vw,4vh) scale(1.12); } 66%{ transform:translate(-4vw,-3vh) scale(.94); } }
@media (prefers-reduced-motion: reduce){ #samAmbient .blob{ animation:none; } }

/* --- (1) FIX contrasto PILLOLA: card scura + testo chiaro, senza ambiguita --- */
.pillola{ background:linear-gradient(165deg,#2b3140 0%,#20262f 100%) !important; color:#eef2f6 !important; }
.pillola-testo{ color:#f2f6fa !important; font-weight:500 !important; }
.pillola-eyebrow{ color:#df9c7e !important; }
.pillola-empty{ color:#9db4cb !important; font-style:italic; }

/* fix contrasto pillola: batte .section p con specificita id */
#osservatorio .pillola-testo{ color:#f2f6fa !important; font-weight:500 !important; }
#osservatorio .pillola-eyebrow{ color:#df9c7e !important; }
#osservatorio .pillola-empty{ color:#9db4cb !important; }

/* ==================== REVEAL a scorrimento (fade-up) sulle parti nuove ==================== */
.sam-rv{ opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.sam-rv.sam-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .sam-rv{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ==================== RITOCCHI: osservatorio full-width + texture sfondo + mobile ==================== */

/* --- (1) Osservatorio: pillola a tutta larghezza, news 3 colonne SOTTO (meno articoli) --- */
#osservatorio .oss-main{ display:block !important; max-width:min(92vw, 1900px); margin:0 auto; }
#osservatorio .pillola{ margin:0 auto 2.2rem !important; max-width:none !important; }
#osservatorio .oss-news-title{ text-align:center; }
#osservatorio .news-list{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:1.3rem; }
@media (max-width:1000px){ #osservatorio .news-list{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:640px){ #osservatorio .news-list{ grid-template-columns:1fr !important; } }
#osservatorio .oss-note{ text-align:center; max-width:72ch; margin-left:auto; margin-right:auto; }

/* --- (3) TEXTURE sfondo: griglia di puntini finissima + tono un filo piu ricco --- */
body{ background-color:#dde3ec !important;
  background-image:linear-gradient(178deg,#e5eaf2 0%,#dae1eb 46%,#e0e6ef 72%,#d4dbe6 100%) !important; }
body::before{
  background:
    radial-gradient(rgba(37,42,54,.06) 1px, transparent 1.6px) 0 0 / 26px 26px,
    radial-gradient(150% 125% at 50% 40%, transparent 52%, rgba(24,34,54,.12) 100%) !important;
}
body::after{ opacity:.02 !important; }

/* --- (2) MOBILE: testi piu piccoli + reveal un filo piu marcato --- */
@media (max-width:768px){
  .hero-title{ font-size:2.15rem !important; line-height:1.06 !important; }
  .hero-subtitle{ font-size:1rem !important; line-height:1.5 !important; }
  .section-title{ font-size:1.5rem !important; }
  .section-header p{ font-size:.94rem !important; }
  .section-tag{ font-size:.7rem !important; }
  .pillola{ padding:1.4rem 1.3rem !important; }
  .pillola-testo{ font-size:.98rem !important; line-height:1.55 !important; }
  .oss-tip h3{ font-size:.94rem !important; }
  .oss-tip p{ font-size:.83rem !important; }
  .ni-title{ font-size:.96rem !important; }
  .ni-sum{ font-size:.85rem !important; }
  .service-title{ font-size:1.35rem !important; }
  .vm-statement{ font-size:1.2rem !important; }
  .member-name{ font-size:1.15rem !important; }
  .btn{ font-size:.9rem !important; }
  .sam-rv{ transform:translateY(18px); }
}

/* ==================== DIREZIONE B — ANTRACITE NOTTURNO (dark premium) ==================== */

/* --- fondo antracite profondo + texture chiara --- */
body{ background-color:#1b2029 !important;
  background-image:linear-gradient(178deg,#1e242e 0%,#191e27 46%,#20262f 72%,#161b23 100%) !important;
  color:#c8d2dd !important; }
body::before{
  background:
    radial-gradient(rgba(157,180,203,.05) 1px, transparent 1.6px) 0 0 / 26px 26px,
    radial-gradient(150% 125% at 50% 40%, transparent 48%, rgba(0,0,0,.38) 100%) !important; }
body::after{ opacity:.02 !important; }

/* --- ambient: glow su fondo scuro --- */
#samAmbient .b1{ background:radial-gradient(circle, rgba(157,180,203,.22), transparent 66%) !important; }
#samAmbient .b2{ background:radial-gradient(circle, rgba(194,106,68,.20), transparent 64%) !important; }
#samAmbient .b3{ background:radial-gradient(circle, rgba(120,145,180,.14), transparent 68%) !important; }

/* --- testo generale chiaro --- */
.section p, .section li, .section h1, .section h2, .section h3, .section h4,
.section-header p, .hero-subtitle{ color:#b9c4d1 !important; }
.section-title, .hero-title, .vm-title, .panel-title, .pillar-title{ color:#eef2f6 !important; }
.hero-title{ color:#e6edf5 !important; }
.section-tag{ color:#cf9078 !important; background:rgba(149,75,46,.16) !important; border-color:rgba(149,75,46,.3) !important; }

/* --- header / nav --- */
.site-header{ background:rgba(15,19,26,.88) !important; border-bottom:1px solid rgba(157,180,203,.12) !important; }
.main-nav a{ color:#aeb9c6 !important; }
.main-nav a:hover, .main-nav a.active{ color:#c26a44 !important; }

/* --- CARD: pannelli antracite chiaro, testo chiaro --- */
.sam-card, .service-card, .vm-card, .pillar-card, .member-expandable-card,
.oss-tip, .news-item, .hub-panel, .impact-card, .target-card, .timeline-step, .goal-banner{
  background:linear-gradient(180deg,#272d38,#222833) !important;
  border:1px solid rgba(157,180,203,.16) !important;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03) !important;
  color:#cbd5e0 !important; }
.sam-card:hover, .service-card:hover, .vm-card:hover, .pillar-card:hover, .oss-tip:hover, .news-item:hover, .member-expandable-card:hover{
  border-color:rgba(194,106,68,.5) !important;
  box-shadow:0 30px 66px -22px rgba(0,0,0,.72), 0 0 0 1px rgba(194,106,68,.22) !important; }

/* --- testi dentro le card --- */
.oss-tip h3, .ni-title, .service-title, .impact-header h4, .step-content h5, .target-info h5, .pillar-info h5{ color:#f1f4f8 !important; }
.oss-tip p, .ni-sum, .service-desc, .impact-card p, .step-content p, .target-info p, .pillar-info p, .panel-text{ color:#a6b2c0 !important; }
.vm-statement{ color:#c8d2dd !important; } .vm-statement strong{ color:#c26a44 !important; }
.ni-meta, .news-item .ni-src{ color:#cf9078 !important; }
.service-price{ color:#ffffff !important; } .service-price span{ color:#9db4cb !important; }
.service-badge{ color:#cf9078 !important; background:rgba(149,75,46,.16) !important; }
.service-expand-indicator{ color:#cf9078 !important; }

/* --- Chi Siamo (member cards) --- */
.member-expandable-card .member-name{ color:#f1f4f8 !important; }
.member-expandable-card .member-role{ color:#cf9078 !important; }
.member-expandable-card .member-avatar{ color:#c26a44 !important; background:rgba(194,106,68,.14) !important; border-color:rgba(194,106,68,.32) !important; }
#chi-siamo{ background:linear-gradient(180deg, rgba(157,180,203,.05), rgba(157,180,203,.02)) !important; border-top:1px solid rgba(157,180,203,.10) !important; border-bottom:1px solid rgba(157,180,203,.10) !important; }

/* --- Osservatorio: pillola gia scura, coerenza + titoli --- */
#osservatorio .pillola-eyebrow{ color:#cf9078 !important; }
.oss-news-title{ color:#8fa0b2 !important; }
.oss-note{ color:#7e8ea0 !important; }

/* --- pulsanti --- */
.btn-primary{ background:linear-gradient(135deg,#b0623e,#954b2e) !important; color:#fff !important; box-shadow:0 10px 28px -8px rgba(194,106,68,.55), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.btn-primary:hover{ background:linear-gradient(135deg,#c26a44,#a4552f) !important; box-shadow:0 14px 34px -6px rgba(194,106,68,.66) !important; }
.btn-secondary{ color:#dfe6ef !important; border:1px solid rgba(157,180,203,.28) !important; background:rgba(255,255,255,.04) !important; }
.btn-secondary:hover{ border-color:#c26a44 !important; color:#c26a44 !important; background:rgba(194,106,68,.08) !important; }
#samChatFab,.chat-fab{ background:#954b2e !important; }

/* --- Metodo hub --- */
.hub-tab-btn{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(157,180,203,.18) !important; color:#aeb9c6 !important; }
.hub-tab-btn:hover{ background:rgba(255,255,255,.08) !important; color:#eef2f6 !important; border-color:rgba(194,106,68,.4) !important; }
.hub-item .hub-tab-btn.active, .hub-container .hub-tab-btn.active, .hub-tab-btn.active{ background:#954b2e !important; border-color:#954b2e !important; color:#fff !important; }

/* --- accenti numeri/icone --- */
.impact-number{ color:rgba(194,106,68,.42) !important; }
.target-icon, .pillar-icon, .impact-header i, .impact-icon, .vm-icon, .hub-item i{ color:#c26a44 !important; }
.step-num{ background:#954b2e !important; color:#fff !important; }
.impact-footer-banner{ background:rgba(194,106,68,.1) !important; border:1px solid rgba(194,106,68,.28) !important; }
.impact-footer-banner, .impact-footer-banner *{ color:#e0b09c !important; }

/* --- form contatti su scuro --- */
.contact-section input, .contact-section textarea, .contact-section select,
#contactForm input, #contactForm textarea{ background:rgba(255,255,255,.05) !important; color:#e7edf4 !important; border:1px solid rgba(157,180,203,.2) !important; }
.contact-section input::placeholder, .contact-section textarea::placeholder{ color:#8091a2 !important; }

/* Direzione B: fix luminosita titoli (batte .section h1-h4) */
#home .hero-title{ color:#e8eff7 !important; }
.section-header .section-title{ color:#eff3f8 !important; }
.vm-card .vm-title, .hub-panel .panel-title, .pillar-card .pillar-title, .member-expandable-card .member-name{ color:#f1f4f8 !important; }

/* ==================== DIREZIONE B — LEGGIBILITA, CONTRASTO, DENSITA ==================== */

/* corpo testo: piu chiaro e piu grande (min ~16px) */
.section p, .section li{ color:#c6d0da !important; font-size:1.02rem !important; line-height:1.65 !important; }
.section-header p{ color:#bac6d3 !important; font-size:1.06rem !important; line-height:1.6 !important; }
.hero-subtitle{ color:#c6d0da !important; font-size:1.12rem !important; }

/* card: corpo piu leggibile */
.oss-tip p{ color:#bdc9d6 !important; font-size:.95rem !important; line-height:1.6 !important; }
.oss-tip h3{ font-size:1.06rem !important; line-height:1.3 !important; }
.ni-sum, .service-desc, .impact-card p, .step-content p, .target-info p, .pillar-info p, .panel-text{ color:#bdc9d6 !important; font-size:.96rem !important; line-height:1.6 !important; }
.ni-title, .service-title{ font-size:1.14rem !important; line-height:1.35 !important; }
.ni-meta{ font-size:.75rem !important; color:#d7a288 !important; }
.oss-news-title{ font-size:.84rem !important; color:#a6b4c3 !important; }
.oss-note{ color:#9dabba !important; font-size:.84rem !important; }
.pillola-testo{ font-size:1.14rem !important; line-height:1.66 !important; color:#f4f7fb !important; }
.pillola-eyebrow{ font-size:.78rem !important; color:#d99a7f !important; }
.member-role{ font-size:1rem !important; }
.vm-statement{ font-size:1.35rem !important; line-height:1.5 !important; }

/* piu respiro / meno denso */
.oss-tip{ padding:1.45rem 1.55rem !important; }
.news-item{ padding:1.3rem 1.45rem !important; }
#osservatorio .news-list{ gap:1.5rem !important; }
.oss-tips{ gap:1.4rem !important; }
.section{ padding-top:5.5rem !important; padding-bottom:5.5rem !important; }

/* etichette non troppo minuscole */
.service-badge{ font-size:.73rem !important; }
.section-tag{ font-size:.75rem !important; letter-spacing:.14em !important; }

/* MOBILE: titoli contenuti, corpo NON minuscolo */
@media (max-width:768px){
  .section p, .section li, .ni-sum, .service-desc, .oss-tip p{ font-size:.95rem !important; line-height:1.55 !important; }
  .ni-title, .service-title{ font-size:1.06rem !important; }
  .pillola-testo{ font-size:1.02rem !important; }
  .section-header p{ font-size:.98rem !important; }
  .section-title{ font-size:1.55rem !important; }
  .hero-title{ font-size:2.2rem !important; }
  .hero-subtitle{ font-size:1rem !important; }
  .section{ padding-top:3.6rem !important; padding-bottom:3.6rem !important; }
}

/* ==================== FIX B — accordion · vm · nav · contrasto ==================== */

/* #2 accordion Chi Siamo: le schede NON si stirano a vicenda (solo la cliccata cresce) */
.team-grid{ align-items:start !important; }

/* #4 testo Visione/Mission leggibile su scuro (batte la regola chiara a specificita 2) */
.vm-card .vm-statement, .vm-statement{ color:#dbe4ee !important; }
.vm-card .vm-statement strong, .vm-statement strong{ color:#dda88a !important; }
.vm-vision .vm-statement, .vm-mission .vm-statement{ color:#dbe4ee !important; }

/* #1 Vision/Mission: alternativa piu leggera — statement editoriali, non scatoloni */
.vm-card{ background:transparent !important; border:none !important; box-shadow:none !important;
  padding:1.4rem 1.6rem 1.5rem !important; border-radius:0 !important;
  border-top:2px solid rgba(194,106,68,.55) !important; text-align:left !important; }
.vm-label{ color:#d99a7f !important; background:transparent !important; border:none !important;
  padding:0 !important; font-size:.8rem !important; letter-spacing:.2em !important; margin-bottom:.7rem !important; }
.vm-statement{ font-size:1.28rem !important; line-height:1.5 !important; font-weight:500 !important; }
.vm-icon{ width:42px !important; height:42px !important; font-size:1.05rem !important; margin-bottom:.8rem !important;
  background:rgba(194,106,68,.14) !important; color:#c26a44 !important; border:1px solid rgba(194,106,68,.28) !important; }
.vm-grid{ gap:2.6rem !important; max-width:1000px; }

/* #5 menu in alto piu grande (DESKTOP) */
.main-nav a{ font-size:1.02rem !important; }
@media (min-width:993px){
  .main-nav ul{ gap:1.55rem !important; }
  .main-nav a{ font-size:1.05rem !important; }
  .main-nav .btn{ font-size:.92rem !important; }
}

/* #3 Osservatorio meno denso: un filo piu di aria */
#osservatorio .news-list{ gap:1.6rem !important; }
.oss-tips{ gap:1.5rem !important; }
#osservatorio .pillola{ padding:2rem 2rem !important; }

/* ==================== VITA — luci · neon · effetti (Direzione B dark) ==================== */

/* --- titolo hero con alone; accento neon ANIMATO sotto i titoli sezione --- */
.hero-title{ text-shadow:0 0 34px rgba(157,180,203,.20), 0 0 12px rgba(157,180,203,.12) !important; }
.section-title{ position:relative; }
.section-title::after{ content:""; display:block; width:66px; height:3px; margin:14px auto 0;
  background:linear-gradient(90deg,#954b2e,#c26a44,#9db4cb,#c26a44,#954b2e); background-size:220% 100%;
  border-radius:3px; box-shadow:0 0 16px rgba(194,106,68,.6); animation:neonSlide 5s linear infinite; }
.section-header{ text-align:center; }
@keyframes neonSlide{ to{ background-position:220% 0; } }

/* --- eyebrow / tag / label con glow --- */
.section-tag, .pillola-eyebrow, .vm-label, .ni-meta, .oss-news-title{ text-shadow:0 0 14px rgba(207,144,120,.4); }

/* --- CARD: si illuminano all'hover (bordo + alone terracotta) --- */
.sam-card, .service-card, .vm-card, .pillar-card, .member-expandable-card, .oss-tip, .news-item, .hub-panel, .impact-card, .target-card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease !important; }
.oss-tip:hover, .news-item:hover, .service-card:hover, .sam-card:hover, .pillar-card:hover, .member-expandable-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(194,106,68,.6) !important;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.72), 0 0 0 1px rgba(194,106,68,.35), 0 0 36px -6px rgba(194,106,68,.45) !important; }
.news-item::before, .service-card::before{ box-shadow:0 0 14px rgba(194,106,68,.65) !important; }

/* --- PILLOLA: riflesso che scorre + linea top neon animata --- */
.pillola{ position:relative; overflow:hidden;
  box-shadow:0 28px 62px -26px rgba(0,0,0,.6), 0 0 44px -14px rgba(157,180,203,.16) !important; }
.pillola::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px !important; z-index:2;
  background:linear-gradient(90deg,#954b2e,#c26a44,#9db4cb,#c26a44,#954b2e) !important; background-size:220% 100%;
  box-shadow:0 0 18px rgba(194,106,68,.65); animation:neonSlide 6s linear infinite; }
.pillola::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, transparent 34%, rgba(157,180,203,.07) 50%, transparent 66%);
  transform:translateX(-120%); animation:sheen 8s ease-in-out infinite; }
@keyframes sheen{ 0%,55%{ transform:translateX(-120%); } 82%,100%{ transform:translateX(120%); } }

/* --- BOTTONI: glow (hero CTA + FAB pulsano) --- */
.btn-primary{ box-shadow:0 10px 28px -8px rgba(194,106,68,.55), 0 0 20px -6px rgba(194,106,68,.45), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.hero-actions .btn-primary, #samChatFab, .chat-fab{ animation:neonPulse 3.2s ease-in-out infinite; }
@keyframes neonPulse{ 0%,100%{ box-shadow:0 10px 26px -8px rgba(194,106,68,.5), 0 0 18px -6px rgba(194,106,68,.4), inset 0 1px 0 rgba(255,255,255,.2); } 50%{ box-shadow:0 14px 34px -6px rgba(194,106,68,.72), 0 0 36px -2px rgba(194,106,68,.7), inset 0 1px 0 rgba(255,255,255,.25); } }
.btn-secondary:hover{ box-shadow:0 0 24px -6px rgba(194,106,68,.55) !important; }

/* --- nav hover/active glow --- */
.main-nav a:hover, .main-nav a.active{ text-shadow:0 0 16px rgba(194,106,68,.6) !important; }

/* --- icone/numeri: glow terracotta --- */
.vm-icon, .target-icon, .pillar-icon, .member-avatar, .step-num{ box-shadow:0 0 22px -4px rgba(194,106,68,.45) !important; }
.vm-icon i, .target-icon i, .pillar-icon i, .impact-header i, .hub-item i{ filter:drop-shadow(0 0 9px rgba(194,106,68,.55)); }

/* --- ambient piu vivo --- */
#samAmbient .b1{ background:radial-gradient(circle, rgba(157,180,203,.30), transparent 64%) !important; }
#samAmbient .b2{ background:radial-gradient(circle, rgba(194,106,68,.28), transparent 62%) !important; }
#samAmbient .b3{ background:radial-gradient(circle, rgba(120,150,190,.20), transparent 66%) !important; }

/* --- rispetto reduce-motion --- */
@media (prefers-reduced-motion:reduce){
  .section-title::after, .pillola::before, .pillola::after, .hero-actions .btn-primary, #samChatFab{ animation:none !important; }
}


/* ============================================================================
   MODERN 2026 — allineamento al mockup approvato (dark · gradiente firma · glass)
   Layer finale: ridefinisce i token core e uniforma i componenti esistenti.
   NON tocca markup/funzioni (accesso, Osservatorio, chatbox restano invariati).
   ============================================================================ */

:root{
  /* palette mockup approvato */
  --primary-blue:#8fc0e6;            /* azzurro vivo */
  --primary-blue-glow:rgba(143,192,230,.18);
  --primary-brown:#e28150;           /* terracotta viva (era ambra spento) */
  --primary-brown-hover:#f0925f;
  --primary-brown-glow:rgba(226,129,80,.24);
  --primary-brown-deep:#c2603a;

  --text-light-main:#f2f5f9;
  --text-light-muted:#c2ccd8;
  --text-white:#ffffff;

  --border-glass:rgba(157,180,203,.14);   /* bordo freddo, non bianco piatto */
  --bg-glass:rgba(20,26,36,.55);
  --bg-glass-card:rgba(255,255,255,.045);

  --sam-grad:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150);
  --sam-grad-warm:linear-gradient(100deg,#e28150,#c2603a);
  --bg-0:#0f131a; --bg-1:#141a24;
}

/* ---- fondo: near-black con vita cromatica (freddo in alto-sx, caldo in basso-dx) ---- */
html, body{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(143,192,230,.10), transparent 60%),
    radial-gradient(1000px 720px at 100% 108%, rgba(226,129,80,.10), transparent 60%),
    var(--bg-0) !important;
  color:var(--text-light-muted);
}

/* ---- HERO: logo compatto + titolo gradiente firma ---- */
.hero-logo-img{ height:clamp(46px,6vw,72px) !important; width:auto !important; }
.hero-title{
  font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.03 !important;
  font-size:clamp(2.4rem,5.6vw,4.4rem) !important;
  background:var(--sam-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(143,180,220,.14));
  text-shadow:none !important; text-wrap:balance;
}
.hero-subtitle{ color:var(--text-light-muted) !important; font-size:clamp(1.02rem,1.5vw,1.24rem) !important; }
.hero-photo-frame{ border-radius:20px !important; overflow:hidden; position:relative;
  box-shadow:0 50px 110px -45px rgba(0,0,0,.85), 0 0 0 1px var(--border-glass) !important; }
.hero-photo-frame::after{ content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  padding:1px; background:var(--sam-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; }

/* ---- NAV: barra glass ---- */
.site-header{ background:rgba(15,19,26,.72) !important; backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--border-glass) !important; }
.main-nav a{ color:var(--text-light-muted); }
.main-nav a:hover, .main-nav a.active{ color:#fff; }

/* ---- BOTTONI: primario terracotta pieno (testo bianco, leggibile), secondario ghost ---- */
.btn-primary{
  background:var(--sam-grad-warm) !important; color:#fff !important; border:none !important;
  font-weight:650 !important; letter-spacing:.01em;
  box-shadow:0 12px 30px -10px rgba(226,129,80,.6), 0 0 22px -8px rgba(226,129,80,.5), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-primary:hover{ background:linear-gradient(100deg,#f0925f,#cf6a41) !important; color:#fff !important;
  transform:translateY(-2px); }
.btn-secondary{
  background:rgba(255,255,255,.02) !important; border:1px solid var(--border-glass) !important;
  color:#e7edf4 !important; font-weight:600 !important;
}
.btn-secondary:hover{ border-color:var(--primary-blue) !important; color:#fff !important;
  background:rgba(143,192,230,.08) !important; box-shadow:0 0 22px -8px var(--primary-blue-glow) !important; }

/* ---- ETICHETTE / TAG di sezione: terracotta mono ---- */
.section-tag{ color:var(--primary-brown) !important; letter-spacing:.2em !important; text-transform:uppercase;
  font-weight:700 !important; font-size:.78rem !important; }
.section-title{ color:var(--text-light-main) !important; letter-spacing:-.02em !important; }

/* ---- SUPERFICI CARD: glass coerente ---- */
.member-expandable-card, .member-card, .pillar-card, .impact-card, .target-card,
.service-card, .service-expandable-card, .hub-panel, .oss-tip, .news-item, .location-card,
.vm-card{
  background:var(--bg-glass-card) !important;
  border:1px solid var(--border-glass) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:18px !important;
}
/* filo gradiente in cima alle schede-chiave */
.pillar-card, .impact-card, .target-card, .service-card, .service-expandable-card{ position:relative; overflow:hidden; }
.pillar-card::after, .impact-card::after, .target-card::after,
.service-card::after, .service-expandable-card::after{
  content:""; position:absolute; left:0; top:0; right:0; height:2px; background:var(--sam-grad); opacity:.9;
}

/* ---- ICONE: quadrato gradiente-tinta (uniforme, vivo) ---- */
.vm-icon, .pillar-icon, .target-icon, .impact-header .impact-number, .hub-item i.hub-ic{
  background:linear-gradient(135deg,rgba(143,192,230,.22),rgba(226,129,80,.22)) !important;
  border:1px solid var(--border-glass) !important; border-radius:12px !important; color:#fff !important;
}
.vm-icon i, .pillar-icon i, .target-icon i{ color:#fff !important;
  filter:drop-shadow(0 0 8px rgba(226,129,80,.5)); }

/* ---- AMBIENT: tre luci = azzurro · viola · terracotta ---- */
#samAmbient .b1{ background:radial-gradient(circle, rgba(143,192,230,.32), transparent 64%) !important; }
#samAmbient .b2{ background:radial-gradient(circle, rgba(226,129,80,.28), transparent 62%) !important; }
#samAmbient .b3{ background:radial-gradient(circle, rgba(183,155,214,.24), transparent 66%) !important; }

/* ---- OSSERVATORIO: pillola glass + feed arioso ---- */
.pillola{ background:var(--bg-glass) !important; border:1px solid var(--border-glass) !important; }
.oss-news-title, .news-item h4{ color:var(--text-light-main) !important; }

/* ---- CHAT drawer: header/accenti coerenti ---- */
.chat-send-button{ background:var(--sam-grad-warm) !important; color:#fff !important; }
.chat-status-indicator{ box-shadow:0 0 10px rgba(143,192,230,.8) !important; }

/* ---- FOOTER: filetto gradiente superiore ---- */
.site-footer{ position:relative; }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--sam-grad); opacity:.5; }

/* ---- scrollbar/progress in tinta ---- */
#scrollProgress{ background:var(--sam-grad) !important; }

/* ---- reduce-motion: già gestito sopra; qui nulla di nuovo ---- */

/* --- MODERN 2026: forza token vivi (batte il precedente :root !important) --- */
:root{
  --primary-brown:#e28150 !important; --primary-brown-hover:#f0925f !important;
  --primary-brown-glow:rgba(226,129,80,.24) !important; --primary-brown-deep:#c2603a !important;
  --primary-blue:#8fc0e6 !important; --primary-blue-glow:rgba(143,192,230,.18) !important;
}


/* ============================================================================
   MODERN 2026 · FIX & FX  (leggibilita 4K · spazi · effetti affascinanti)
   ============================================================================ */

/* ---------- FIX 1: pannello Metodo ATTIVO non piu bianco (era illeggibile) ---------- */
.hub-item.active .hub-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  border:1px solid var(--border-glass) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.hub-panel .panel-title, .hub-item.active .hub-panel .panel-title{ color:#f2f5f9 !important; }
.hub-panel .panel-text, .hub-item.active .hub-panel .panel-text, .panel-text{ color:#c6d0da !important; }
.hub-panel .pillar-title, .hub-panel .impact-title, .hub-panel .target-title{ color:#f2f5f9 !important; }
.hub-panel .pillar-text, .hub-panel .target-info p, .hub-panel .impact-benefits li{ color:#c6d0da !important; }

/* ---------- FIX 2: bio del team leggibili (grigio-scuro -> chiaro) ---------- */
.member-expandable-card .member-bio-expand-content,
.member-expandable-card .member-bio-expand-content p,
.member-expandable-card .member-bio-expand-content div{
  color:#c6d0da !important;
}

/* ---------- FIX 3: dimensione testi su monitor grandi (scala i rem) ---------- */
@media (min-width:1700px){ html{ font-size:17.5px; } }
@media (min-width:2100px){ html{ font-size:19px;   } }
@media (min-width:2800px){ html{ font-size:21px;   } }
/* corpo minimo garantito */
.hero-subtitle{ font-size:clamp(1.08rem,1.25vw,1.4rem) !important; line-height:1.6 !important; }
.section-title{ font-size:clamp(1.9rem,3vw,3.1rem) !important; }
.vm-statement{ font-size:clamp(1.2rem,1.5vw,1.6rem) !important; }
.panel-text, .pillar-text, .target-info p, .member-role{ font-size:clamp(.98rem,1.05vw,1.12rem) !important; }
.news-item h4, .oss-news-title{ font-size:clamp(1.02rem,1.15vw,1.22rem) !important; }

/* ---------- SPAZI: piu respiro e ritmo ---------- */
.section{ padding-block:clamp(3.6rem,6.5vh,7rem) !important; }
.section-header{ margin-bottom:clamp(2.2rem,3.5vw,3.4rem) !important; }
.team-grid{ gap:clamp(1.6rem,2.4vw,2.6rem) !important; }
.vm-grid{ gap:clamp(2rem,3vw,3rem) !important; }
.target-grid, .pillars-grid, .impact-grid{ gap:clamp(1.4rem,2vw,2.2rem) !important; }
.hub-panel{ padding:clamp(1.8rem,2.6vw,2.8rem) !important; }
.member-expandable-card, .service-card, .pillar-card, .impact-card, .target-card{ padding:clamp(1.5rem,2vw,2rem) !important; }
.hero-content{ gap:clamp(1.2rem,2vw,2rem) !important; }

/* ============================================================================
   EFFETTI AFFASCINANTI
   ============================================================================ */

/* FX1 — hero-title: gradiente firma che scorre lentamente (shimmer) */
.hero-title{
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150,#8fc0e6) !important;
  background-size:220% 100% !important; -webkit-background-clip:text !important; background-clip:text !important;
  animation:heroShimmer 9s ease-in-out infinite;
}
@keyframes heroShimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* FX2 — spotlight che segue il cursore sulle card (span iniettato via JS) */
.fx-spot{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .35s ease; z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(143,192,230,.16), rgba(226,129,80,.08) 40%, transparent 62%); }
.fx-host:hover .fx-spot{ opacity:1; }
.fx-host{ position:relative; }
.fx-host > *:not(.fx-spot){ position:relative; z-index:1; }

/* FX3 — sheen sui bottoni primari all'hover */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg);
  transition:none; }
.btn-primary:hover::after{ left:140%; transition:left .7s ease; }
.btn-primary > *{ position:relative; z-index:1; }

/* FX4 — link nav: sottolineatura gradiente che cresce */
.main-nav ul li > a:not(.btn){ position:relative; }
.main-nav ul li > a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--sam-grad); border-radius:2px; transition:right .3s ease; }
.main-nav ul li > a:not(.btn):hover::after, .main-nav ul li > a.active:not(.btn)::after{ right:0; }

/* FX5 — pillola: anello gradiente rotante (conic) dietro il bordo */
#osservatorio .pillola{ position:relative; }
#osservatorio .pillola::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from 0deg, #8fc0e6, #b79bd6, #e28150, #8fc0e6); filter:blur(9px); opacity:.35;
  animation:spinRing 12s linear infinite; }
@keyframes spinRing{ to{ transform:rotate(360deg); } }

/* FX6 — card key: alone gradiente in hover piu marcato */
.pillar-card:hover, .impact-card:hover, .target-card:hover, .service-card:hover,
.member-expandable-card:hover, .vm-card:hover, .oss-tip:hover, .news-item:hover{
  box-shadow:0 34px 80px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(226,129,80,.35),
             0 0 46px -8px rgba(143,192,230,.35) !important;
}

@media (prefers-reduced-motion:reduce){
  .hero-title{ animation:none !important; }
  #osservatorio .pillola::after{ animation:none !important; }
}

/* --- MODERN 2026 · FIX2: logo hero bianco (annulla filtro tema chiaro) + titolo a colore unico --- */
.hero-logo-img{ filter:none !important; -webkit-filter:none !important; opacity:1 !important; }
.hero-title{
  background:none !important; background-image:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#f2f5f9 !important; color:#f2f5f9 !important;
  animation:none !important; filter:none !important;
  text-shadow:0 2px 34px rgba(143,180,220,.16) !important;
}


/* ============================================================================
   MODERN 2026 · FORM FIX + COLOR BOOST
   ============================================================================ */

/* ---------- FORM: campi puliti e coerenti ---------- */
.contact-card{ max-width:760px !important; border:1px solid var(--border-glass) !important;
  border-radius:22px !important; overflow:visible !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; }
/* rimuove l'anello/gradient border "rotto" (cyan) sul container del form */
.contact-card::after{ display:none !important; }
/* filo gradiente pulito in cima */
.contact-card{ position:relative; }
.contact-card::before{ content:"" !important; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--sam-grad); border-radius:22px 22px 0 0; opacity:.9; }

.form-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:1.4rem !important; }
@media (max-width:820px){ .form-row{ grid-template-columns:1fr !important; } }
.form-group{ display:flex !important; flex-direction:column; gap:.5rem; min-width:0; }
.form-group label{ font-weight:600; color:#dbe4ee; font-size:.92rem; letter-spacing:.01em; }

.contact-section input, .contact-section textarea, .contact-section select,
#contactForm input:not([type=checkbox]), #contactForm textarea, .form-control{
  width:100% !important; box-sizing:border-box !important;
  background:rgba(255,255,255,.045) !important; color:#eef3f9 !important;
  border:1px solid rgba(157,180,203,.24) !important; border-radius:12px !important;
  padding:.9rem 1.1rem !important; font-size:1rem !important; line-height:1.4 !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
#contactForm textarea, .contact-section textarea{ min-height:130px !important; resize:vertical !important; }
.contact-section input::placeholder, .contact-section textarea::placeholder, .form-control::placeholder{
  color:#8091a2 !important; opacity:1; }
.contact-section input:focus, .contact-section textarea:focus, .form-control:focus{
  border-color:var(--primary-blue) !important; background:rgba(143,192,230,.06) !important;
  box-shadow:0 0 0 3px rgba(143,192,230,.16), 0 0 24px -8px rgba(143,192,230,.5) !important; outline:none !important; }

/* checkbox GDPR + submit */
.form-checkbox{ display:flex !important; align-items:flex-start; gap:.7rem; margin-top:.4rem; }
.form-checkbox input{ margin-top:.2rem; accent-color:#e28150; width:18px; height:18px; flex:none; }
.form-checkbox label{ color:#aab6c4; font-size:.9rem; line-height:1.5; }
#contactForm button[type=submit], .sam-form button[type=submit], .contact-card .btn-primary{
  background:var(--sam-grad-warm) !important; color:#fff !important; border:none !important;
  border-radius:12px !important; padding:.95rem 2.2rem !important; font-weight:650 !important;
  box-shadow:0 14px 34px -12px rgba(226,129,80,.6), 0 0 22px -8px rgba(226,129,80,.5) !important; }

/* ============================================================================
   COLOR BOOST — piu vicino ai colori del mockup (senza toccare il titolo bianco)
   ============================================================================ */

/* tag di sezione in gradiente firma (era terracotta piatto) */
.section-tag{
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  border:1px solid var(--border-glass) !important;
}

/* ambient piu presente (luci di colore) */
#samAmbient{ opacity:1 !important; }
#samAmbient .blob{ filter:blur(60px) !important; }
#samAmbient .b1{ background:radial-gradient(circle, rgba(143,192,230,.40), transparent 62%) !important; }
#samAmbient .b2{ background:radial-gradient(circle, rgba(226,129,80,.34), transparent 60%) !important; }
#samAmbient .b3{ background:radial-gradient(circle, rgba(183,155,214,.30), transparent 64%) !important; }

/* glow di colore dietro l'hero */
.hero-section{ position:relative; }
.hero-section::before{ content:""; position:absolute; z-index:0; left:-6%; top:-8%; width:52%; height:70%;
  background:radial-gradient(circle at 30% 30%, rgba(143,192,230,.18), transparent 60%);
  filter:blur(30px); pointer-events:none; }
.hero-section > *{ position:relative; z-index:1; }

/* Vision = azzurro, Mission = terracotta (accenti distinti e vivi) */
.vm-vision .vm-icon{ background:linear-gradient(135deg, rgba(143,192,230,.34), rgba(143,192,230,.12)) !important;
  border-color:rgba(143,192,230,.4) !important; }
.vm-vision .vm-icon i{ color:#bfe0f5 !important; filter:drop-shadow(0 0 8px rgba(143,192,230,.6)); }
.vm-mission .vm-icon{ background:linear-gradient(135deg, rgba(226,129,80,.34), rgba(226,129,80,.12)) !important;
  border-color:rgba(226,129,80,.4) !important; }
.vm-mission .vm-icon i{ color:#f2a883 !important; filter:drop-shadow(0 0 8px rgba(226,129,80,.6)); }
.vm-vision{ --vm-accent:#8fc0e6 !important; }
.vm-mission{ --vm-accent:#e28150 !important; }

/* parole chiave in grassetto dentro gli statement = colore accento (vivo) */
.vm-vision .vm-statement strong{ color:#bfe0f5 !important; }
.vm-mission .vm-statement strong{ color:#f2a883 !important; }


/* ============================================================================
   MODERN 2026 · FONT & TITLE  (come il mockup: system-ui bold + keyword gradiente)
   ============================================================================ */

:root{
  --sam-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sam-mono: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* tutto il testo sul font di sistema del mockup (niente piu Typekit) */
body, p, li, a, span, div, input, textarea, select, button, .btn,
.hero-subtitle, .vm-statement, .panel-text, .member-role, .member-bio-expand-content,
.news-item, .oss-tip, .pillar-text, .target-info, .form-control, .chat-bubble{
  font-family: var(--sam-sans) !important;
}
h1, h2, h3, h4, h5,
.hero-title, .section-title, .panel-title, .pillar-title, .impact-title,
.target-title, .member-name, .vm-label, .service-title{
  font-family: var(--sam-sans) !important;
  letter-spacing: -.02em;
}

/* titoli: peso e crenatura del mockup */
.hero-title{ font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.02 !important; }
.section-title{ font-weight: 800 !important; letter-spacing: -.025em !important; }

/* eyebrow/tag in monospace come il mockup (kick/ey) */
.section-tag{ font-family: var(--sam-mono) !important; font-weight: 600 !important;
  letter-spacing: .2em !important; text-transform: uppercase; }

/* ---- TITOLO HERO: bianco, con la sola keyword "era dell'AI" a gradiente ---- */
.hero-title{ color:#f2f5f9 !important; -webkit-text-fill-color:#f2f5f9 !important;
  background:none !important; background-image:none !important; }
.hero-title .g{
  background: linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 800 !important;
}

/* --- FORM FIX2: la checkbox non deve stirarsi a tutta larghezza --- */
.contact-section input[type=checkbox], .contact-section input[type=radio],
#contactForm input[type=checkbox], .form-checkbox input{
  width:18px !important; height:18px !important; min-width:18px !important; max-width:18px !important;
  flex:0 0 auto !important; padding:0 !important; border-radius:5px !important;
  background:rgba(255,255,255,.06) !important; accent-color:#e28150; box-shadow:none !important;
}
.form-checkbox{ display:flex !important; align-items:flex-start !important; gap:.7rem !important; margin-top:.6rem; }
.form-checkbox label{ flex:1 1 auto !important; width:auto !important; text-align:left !important; }

/* --- FIX contrasto: badge/toggle servizi dal terracotta spento al terracotta vivo (AA) --- */
.service-badge, .service-expand-indicator, .service-expand-indicator span, .service-expand-indicator i{
  color:#e28150 !important;
}
.service-badge{ border-color:rgba(226,129,80,.4) !important; background:rgba(226,129,80,.10) !important; }

/* --- MOBILE: elimina overflow orizzontale (chat drawer off-canvas) + leggibilita --- */
html, body{ overflow-x:hidden !important; max-width:100% !important; }
@media (max-width:600px){
  .hero-subtitle{ font-size:16px !important; line-height:1.55 !important; }
  .section p, .panel-text, .member-role, .oss-tip p, .news-item p{ font-size:15.5px !important; }
  .hero-title{ font-size:clamp(2rem,9vw,2.6rem) !important; }
  .section-title{ font-size:clamp(1.6rem,7vw,2.1rem) !important; }
  .section{ padding-block:3rem !important; }
  /* glow hero non deve sbordare */
  .hero-section::before{ left:0 !important; width:70% !important; }
}

/* --- MOBILE: menu a tendina dark glass (era bianco, residuo tema chiaro) --- */
@media (max-width:992px){
  .main-nav ul{
    background:rgba(13,17,24,.98) !important;
    border-top:1px solid var(--border-glass) !important;
    box-shadow:0 26px 54px -18px rgba(0,0,0,.75) !important;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .site-header.nav-open .main-nav ul li a{ color:#e7edf4 !important; }
  .site-header.nav-open .main-nav ul li a:not(.btn){ border-bottom:1px solid rgba(255,255,255,.07) !important; }
  .site-header.nav-open .main-nav ul li a:not(.btn):hover{ color:#e28150 !important; background:rgba(226,129,80,.08) !important; }
}

/* --- BANDA NUMERI (colore a meta pagina, stile mockup) --- */
.sam-stats-section{ padding:2.5rem 0 !important; }
.sam-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
  border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); padding:2.4rem 0; }
.sam-stat .n{ font-family:var(--sam-sans); font-weight:800; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.9rem,3.2vw,2.8rem); color:#f2f5f9; margin-bottom:.45rem; }
.sam-stat .n em{ font-style:normal; background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.sam-stat .l{ color:#aab6c4; font-size:.95rem; line-height:1.45; max-width:22ch; }
@media (max-width:760px){ .sam-stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.1rem; } }

/* --- COLORE EVOCATIVO: solo sui dati-valore (numeri Metodo + prezzi) --- */
/* numeri 01/02/03: grandi cifre a gradiente (passi di trasformazione) */
.impact-number{
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150) !important;
  background-color:transparent !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  width:auto !important; height:auto !important; padding:0 !important;
  font-weight:800 !important; font-size:clamp(2rem,3vw,2.9rem) !important; line-height:1 !important;
}
/* prezzi servizi: importo a gradiente, '+ IVA' resta muted */
.service-price{
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-weight:800;
}
.service-price span{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#aab6c4 !important; color:#aab6c4 !important; font-weight:500 !important;
}
/* alone caldo/freddo dietro la banda numeri (profondita evocativa) */
.sam-stats-section{ position:relative; }
.sam-stats-section::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(560px 180px at 18% 50%, rgba(143,192,230,.10), transparent 70%),
            radial-gradient(560px 180px at 82% 50%, rgba(226,129,80,.10), transparent 70%); }
.sam-stats-section .container{ position:relative; z-index:1; }

/* --- FIX: numeri 01/02/03 a gradiente pieno (batte la regola box a pari specificita) --- */
.impact-header .impact-number{
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150) !important;
  background-color:transparent !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  width:auto !important; height:auto !important; min-width:0 !important; padding:0 !important;
  font-weight:800 !important; font-size:clamp(2rem,3vw,2.9rem) !important; line-height:1 !important;
}

/* --- VM crawl: la card non taglia il testo ingrandito --- */
.vm-card, .vm-grid, .vm-vision, .vm-mission{ overflow:visible !important; }
.vm-vision .vm-statement, .vm-mission .vm-statement{ transform-origin:center center; }

/* --- FIX: header sticky di nuovo funzionante. overflow-x:clip taglia lo sbordo
       SENZA creare un contenitore di scroll (che rompeva position:sticky) --- */
html, body{ overflow-x: clip !important; overflow-y: visible !important; }
.site-header{ position: sticky !important; top: 0 !important; z-index: 1000 !important; }

/* --- VISION/MISSION: animazione CSS legata allo scroll (crawl Star Wars) --- */
@keyframes vmCrawl{
  0%   { opacity:.45; transform:perspective(760px) translateY(46px) rotateX(24deg) scale(.76); }
  44%  { opacity:1;   transform:perspective(760px) translateY(0)    rotateX(0deg)  scale(1.06); }
  56%  { opacity:1;   transform:perspective(760px) translateY(0)    rotateX(0deg)  scale(1.08); }
  100% { opacity:.4;  transform:perspective(760px) translateY(-46px) rotateX(-26deg) scale(1.34); }
}
@supports (animation-timeline: view()){
  .vm-vision .vm-statement, .vm-mission .vm-statement{
    transform-origin:center center; backface-visibility:hidden; will-change:transform,opacity;
    animation:vmCrawl linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
}
@media (prefers-reduced-motion:reduce){
  .vm-vision .vm-statement, .vm-mission .vm-statement{ animation:none !important; transform:none !important; opacity:1 !important; }
}

/* --- VM: disattiva il vecchio effetto scroll (statement normali in pagina) --- */
.vm-vision .vm-statement, .vm-mission .vm-statement{ animation:none !important; transform:none !important; opacity:1 !important; }
.vm-card{ cursor:pointer; }

/* --- VM STAGE: overlay a tutto schermo con crawl Star Wars --- */
.vm-stage{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:6vw;
  background:radial-gradient(circle at 50% 38%, rgba(15,19,26,.9), rgba(6,8,12,.985));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; transition:opacity .45s ease; }
.vm-stage.open{ display:flex; opacity:1; }
.vm-stage-inner{ max-width:1200px; width:100%; text-align:center; perspective:900px; }
.vm-stage-label{ font-family:var(--sam-mono); text-transform:uppercase; letter-spacing:.32em; font-weight:700;
  font-size:clamp(.85rem,2.2vw,1.15rem); margin-bottom:1.6rem;
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vm-stage-text{ font-family:var(--sam-sans); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:#f2f5f9;
  font-size:clamp(2rem,6.4vw,5rem); text-wrap:balance; transform-origin:center center; }
.vm-stage-text strong{ background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vm-stage-text.play{ animation:vmStageCrawl 8.6s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes vmStageCrawl{
  0%   { opacity:0; transform:translateY(40px) rotateX(-6deg) scale(.92); }
  10%  { opacity:1; transform:translateY(0) rotateX(0deg) scale(1); }
  16%  { opacity:1; transform:translateY(0) rotateX(0deg) scale(1.12); }
  50%  { opacity:1; transform:translateY(0) rotateX(0deg) scale(1.12); }
  100% { opacity:0; transform:translateY(-64vh) rotateX(64deg) scale(.5); }
}
.vm-stage-close{ position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:12px; line-height:1;
  background:rgba(255,255,255,.08); border:1px solid var(--border-glass); color:#e7edf4; font-size:1.6rem; cursor:pointer; z-index:2; }
.vm-stage-close:hover{ background:rgba(226,129,80,.2); border-color:rgba(226,129,80,.5); }
@media (prefers-reduced-motion:reduce){ .vm-stage-text.play{ animation:none !important; } }

/* --- VM Stage: durata crawl ridotta di 1,5s (8,6s -> 7,1s) --- */
.vm-stage-text.play{ animation-duration:7.1s !important; }

/* --- POPUP PROSSIMI EVENTI --- */
.event-pop{position:fixed;left:22px;bottom:22px;z-index:1500;width:342px;max-width:calc(100vw - 32px);
  background:linear-gradient(180deg,rgba(23,30,41,.98),rgba(15,19,26,.98));border:1px solid var(--border-glass);
  border-radius:16px;padding:18px 18px 16px;box-shadow:0 30px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(226,129,80,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(16px) scale(.98);
  pointer-events:none;transition:opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1);overflow:hidden;}
.event-pop.show{opacity:1;transform:none;pointer-events:auto;}
.event-pop::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:var(--sam-grad);}
.event-pop-x{position:absolute;top:8px;right:10px;background:transparent;border:none;color:#9fb0c0;font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 7px;border-radius:8px;}
.event-pop-x:hover{color:#fff;background:rgba(255,255,255,.08);}
.event-pop-tag{font-family:var(--sam-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:700;margin-bottom:8px;
  background:var(--sam-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.event-pop-title{font-family:var(--sam-sans);font-weight:800;font-size:1.16rem;color:#f2f5f9;line-height:1.2;margin-bottom:6px;}
.event-pop-text{color:#c2ccd8;font-size:.92rem;line-height:1.45;margin-bottom:14px;}
.event-pop-cta{display:inline-block;background:var(--sam-grad-warm);color:#fff;font-weight:650;font-size:.9rem;padding:9px 16px;border-radius:10px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(226,129,80,.6);transition:transform .2s ease,filter .2s ease;}
.event-pop-cta:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff;}
@media (max-width:600px){ .event-pop{left:12px;right:12px;width:auto;bottom:90px;} }

/* --- sottotitolo hero: parte centrale evidenziata (colori Modern + grassetto leggero) --- */
.hero-subtitle .hero-hi{ background:var(--sam-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-weight:600; }

/* --- VM Stage: crawl piu rapido (uscita svelta) — sovrascrive durata e keyframes --- */
.vm-stage-text.play{ animation-duration:5s !important; }
@keyframes vmStageCrawl{
  0%   { opacity:0; transform:translateY(34px) rotateX(-6deg) scale(.92); }
  9%   { opacity:1; transform:translateY(0) rotateX(0deg) scale(1); }
  15%  { opacity:1; transform:translateY(0) rotateX(0deg) scale(1.12); }
  36%  { opacity:1; transform:translateY(0) rotateX(0deg) scale(1.12); }
  100% { opacity:0; transform:translateY(-70vh) rotateX(70deg) scale(.42); }
}


/* ============================================================================
   TEMA CHIARO — variante pubblica (toggle). Attivo con <html data-theme="light">.
   Palette coerente col brand, tutto ≥ AA. Gradienti in tonalità profonde per il
   contrasto su fondo chiaro. Footer resta scuro (àncora). Chat resta chiara.
   ============================================================================ */

html[data-theme="light"]{
  --primary-brown:#a24e2c !important; --primary-brown-hover:#b3592f !important;
  --primary-brown-glow:rgba(162,78,44,.18) !important; --primary-brown-deep:#8a4227 !important;
  --primary-blue:#3f6ea3 !important; --primary-blue-glow:rgba(63,110,163,.16) !important;
  --text-light-main:#20262f !important; --text-light-muted:#4a545f !important;
  --border-glass:rgba(37,42,54,.12) !important; --bg-glass:rgba(255,255,255,.72) !important;
  --bg-glass-card:#ffffff !important;
  --sam-grad:linear-gradient(100deg,#3f6ea3,#8a5aa0,#a24e2c) !important;
  --sam-grad-warm:linear-gradient(100deg,#b3592f,#8a4227) !important;
}

/* ---- fondo chiaro + colore base ---- */
html[data-theme="light"], html[data-theme="light"] body{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(63,110,163,.06), transparent 60%),
    radial-gradient(1000px 720px at 100% 108%, rgba(162,78,44,.06), transparent 60%),
    #f4f6f9 !important;
  color:#4a545f !important;
}

/* ---- testi scuri (titoli e corpo) ---- */
html[data-theme="light"] .section-title,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .news-item h4, html[data-theme="light"] .oss-news-title,
html[data-theme="light"] .pillar-title, html[data-theme="light"] .impact-title,
html[data-theme="light"] .target-title, html[data-theme="light"] .member-name,
html[data-theme="light"] .service-title, html[data-theme="light"] h2, html[data-theme="light"] h3{
  color:#20262f !important; -webkit-text-fill-color:#20262f !important; text-shadow:none !important;
}
html[data-theme="light"] .hero-title{ color:#20262f !important; -webkit-text-fill-color:#20262f !important; text-shadow:none !important; }
html[data-theme="light"] .hero-subtitle,
html[data-theme="light"] .vm-card .vm-statement, html[data-theme="light"] .vm-statement,
html[data-theme="light"] .member-bio-expand-content,
html[data-theme="light"] .member-bio-expand-content p, html[data-theme="light"] .member-bio-expand-content div,
html[data-theme="light"] .news-item p, html[data-theme="light"] .oss-tip p,
html[data-theme="light"] .panel-text, html[data-theme="light"] .pillar-text,
html[data-theme="light"] .target-info p, html[data-theme="light"] .member-role,
html[data-theme="light"] .section p, html[data-theme="light"] .sam-stat .l,
html[data-theme="light"] p{ color:#4a545f !important; -webkit-text-fill-color:#4a545f !important; }
html[data-theme="light"] .sam-stat .n{ color:#20262f !important; }

/* ---- testi a GRADIENTE: tonalità profonde per contrasto su chiaro ---- */
html[data-theme="light"] .hero-title .g,
html[data-theme="light"] .hero-subtitle .hero-hi,
html[data-theme="light"] .section-tag,
html[data-theme="light"] .sam-stat .n em,
html[data-theme="light"] .impact-header .impact-number,
html[data-theme="light"] .service-price,
html[data-theme="light"] .event-pop-tag{
  background:linear-gradient(100deg,#3f6ea3,#8a5aa0,#a24e2c) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
html[data-theme="light"] .service-price span{ -webkit-text-fill-color:#5b646f !important; color:#5b646f !important; }
html[data-theme="light"] .vm-vision .vm-statement strong{ color:#2f5f86 !important; }
html[data-theme="light"] .vm-mission .vm-statement strong{ color:#a24e2c !important; }

/* ---- logo: in chiaro va scurito (i PNG sono bianchi) ---- */
html[data-theme="light"] .site-header .logo img,
html[data-theme="light"] .hero-logo-img{ filter:brightness(0) saturate(0) opacity(.86) !important; }

/* ---- NAV chiara ---- */
html[data-theme="light"] .site-header{ background:rgba(244,246,249,.82) !important;
  border-bottom:1px solid rgba(37,42,54,.10) !important; }
html[data-theme="light"] .main-nav a{ color:#3a4450 !important; }
html[data-theme="light"] .main-nav a:hover, html[data-theme="light"] .main-nav a.active{ color:#111820 !important; text-shadow:none !important; }
@media (max-width:992px){
  html[data-theme="light"] .main-nav ul{ background:rgba(255,255,255,.99) !important; border-top:1px solid rgba(37,42,54,.1) !important; }
  html[data-theme="light"] .site-header.nav-open .main-nav ul li a{ color:#20262f !important; }
  html[data-theme="light"] .site-header.nav-open .main-nav ul li a:not(.btn){ border-bottom:1px solid rgba(37,42,54,.07) !important; }
}
html[data-theme="light"] .nav-burger span{ background:#252a36 !important; }

/* ---- SUPERFICI card = bianche ---- */
html[data-theme="light"] .sam-card, html[data-theme="light"] .vm-card,
html[data-theme="light"] .pillar-card, html[data-theme="light"] .impact-card, html[data-theme="light"] .target-card,
html[data-theme="light"] .service-card, html[data-theme="light"] .service-expandable-card,
html[data-theme="light"] .member-expandable-card, html[data-theme="light"] .member-card,
html[data-theme="light"] .hub-panel, html[data-theme="light"] .oss-tip, html[data-theme="light"] .news-item,
html[data-theme="light"] .location-card, html[data-theme="light"] .contact-card{
  background:#ffffff !important; border:1px solid rgba(37,42,54,.10) !important;
  box-shadow:0 14px 34px -22px rgba(37,42,54,.28) !important;
}
html[data-theme="light"] .hub-item.active .hub-panel{ background:#ffffff !important; }
html[data-theme="light"] .pillola{ background:#ffffff !important; border:1px solid rgba(37,42,54,.10) !important; }

/* ---- sfondi delle sezioni (inline) neutralizzati in chiaro ---- */
html[data-theme="light"] #chi-siamo, html[data-theme="light"] #metodo-hub,
html[data-theme="light"] #servizi, html[data-theme="light"] #approfondimenti,
html[data-theme="light"] #osservatorio, html[data-theme="light"] #contattaci{
  background:transparent !important; border-top:1px solid rgba(37,42,54,.06) !important; border-bottom:1px solid rgba(37,42,54,.06) !important;
}
html[data-theme="light"] .sam-stats{ border-color:rgba(37,42,54,.12) !important; }

/* ---- ICONE quadrate: tinta chiara ---- */
html[data-theme="light"] .vm-icon, html[data-theme="light"] .pillar-icon,
html[data-theme="light"] .target-icon{
  background:linear-gradient(135deg,rgba(63,110,163,.14),rgba(162,78,44,.14)) !important;
  border:1px solid rgba(37,42,54,.12) !important; }
html[data-theme="light"] .vm-icon i, html[data-theme="light"] .pillar-icon i, html[data-theme="light"] .target-icon i{ color:#3f6ea3 !important; filter:none !important; }

/* ---- BOTTONI ---- */
html[data-theme="light"] .btn-secondary{ background:#fff !important; border:1px solid rgba(37,42,54,.18) !important; color:#2a3441 !important; }
html[data-theme="light"] .btn-secondary:hover{ border-color:#3f6ea3 !important; color:#1b2530 !important; background:rgba(63,110,163,.06) !important; }
/* btn-primary (terracotta, testo bianco) va bene anche su chiaro */

/* ---- FORM chiaro ---- */
html[data-theme="light"] .form-group label{ color:#2a3441 !important; -webkit-text-fill-color:#2a3441 !important; }
html[data-theme="light"] .contact-section input, html[data-theme="light"] .contact-section textarea,
html[data-theme="light"] #contactForm input:not([type=checkbox]), html[data-theme="light"] #contactForm textarea,
html[data-theme="light"] .form-control{
  background:#fff !important; color:#20262f !important; border:1px solid rgba(37,42,54,.18) !important; }
html[data-theme="light"] .contact-section input::placeholder, html[data-theme="light"] .contact-section textarea::placeholder,
html[data-theme="light"] .form-control::placeholder{ color:#8a94a0 !important; }
html[data-theme="light"] .form-checkbox label{ color:#5b646f !important; }

/* ---- OSSERVATORIO / badge ---- */
html[data-theme="light"] .service-badge{ color:#a24e2c !important; border-color:rgba(162,78,44,.35) !important; background:rgba(162,78,44,.08) !important; }
html[data-theme="light"] .service-expand-indicator, html[data-theme="light"] .service-expand-indicator span, html[data-theme="light"] .service-expand-indicator i{ color:#a24e2c !important; }

/* ---- ambient soft (meno invadente su chiaro) ---- */
html[data-theme="light"] #samAmbient{ opacity:.45 !important; }
html[data-theme="light"] #techGrid{ opacity:.5 !important; }

/* ---- EVENT POPUP chiaro ---- */
html[data-theme="light"] .event-pop{ background:linear-gradient(180deg,#ffffff,#f4f6f9) !important; border:1px solid rgba(37,42,54,.12) !important;
  box-shadow:0 30px 70px -24px rgba(37,42,54,.35),0 0 0 1px rgba(162,78,44,.12) !important; }
html[data-theme="light"] .event-pop-title{ color:#20262f !important; }
html[data-theme="light"] .event-pop-text{ color:#4a545f !important; }
html[data-theme="light"] .event-pop-x{ color:#5b646f !important; }

/* ============================================================================
   PULSANTE TOGGLE tema
   ============================================================================ */
#themeToggle{ width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border-glass); color:#e7edf4; cursor:pointer;
  font-size:1.05rem; transition:background .2s, color .2s, border-color .2s; margin-left:.4rem; flex:none; }
#themeToggle:hover{ border-color:var(--primary-brown); color:#fff; background:rgba(226,129,80,.12); }
html[data-theme="light"] #themeToggle{ background:#fff; border-color:rgba(37,42,54,.15); color:#2a3441; }
html[data-theme="light"] #themeToggle:hover{ border-color:#a24e2c; color:#a24e2c; background:rgba(162,78,44,.06); }
/* icona: sole nel tema scuro (offre il chiaro), luna nel tema chiaro */
#themeToggle .fa-sun{ display:inline-block; } #themeToggle .fa-moon{ display:none; }
html[data-theme="light"] #themeToggle .fa-sun{ display:none; } html[data-theme="light"] #themeToggle .fa-moon{ display:inline-block; }

/* --- TEMA CHIARO · FIX hero-title + footer --- */
html[data-theme="light"] #home .hero-title,
html[data-theme="light"] .hero-content .hero-title{ color:#20262f !important; -webkit-text-fill-color:#20262f !important; text-shadow:none !important; }
/* footer resta scuro: testo/link tornano chiari (annulla l'override generico p) */
html[data-theme="light"] .site-footer p, html[data-theme="light"] .site-footer li,
html[data-theme="light"] .site-footer h5, html[data-theme="light"] .footer-brand p{
  color:#c3d0dc !important; -webkit-text-fill-color:#c3d0dc !important; }
html[data-theme="light"] .site-footer a{ color:#9db4cb !important; -webkit-text-fill-color:#9db4cb !important; }

/* --- VM STAGE v2: comparsa MAGICA dolce (materializza + scorre lento dal basso in alto) --- */
.vm-stage{ transition:opacity .9s ease !important;
  background:radial-gradient(circle at 50% 42%, rgba(14,18,26,.92), rgba(6,8,12,.97)) !important;
  -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important; }
.vm-stage-inner{ max-width:1000px !important; text-align:center; perspective:none !important; }
.vm-block{ margin:0 auto clamp(2rem,4.2vh,3.4rem); }
.vm-block:last-child{ margin-bottom:0; }
.vm-stage-label{ margin-bottom:1rem !important; }
.vm-stage-text{ font-size:clamp(1.35rem,3.8vw,2.7rem) !important; line-height:1.3 !important; transform:none !important; }
.vm-stage-text.play{ animation:none !important; }
.vm-stage-inner.play{ animation:vmDrift 13s linear both, vmMagicFade 13s ease both; will-change:transform,opacity,filter; }
@keyframes vmDrift{ from{ transform:translateY(70px); } to{ transform:translateY(-200px); } }
@keyframes vmMagicFade{
  0%   { opacity:0; filter:blur(16px); }
  16%  { opacity:1; filter:blur(0); }
  80%  { opacity:1; filter:blur(0); }
  100% { opacity:0; filter:blur(7px); }
}
@media (prefers-reduced-motion:reduce){ .vm-stage-inner.play{ animation:none !important; opacity:1 !important; } }

/* --- PAROLE VISION/MISSION in alto a destra (pulsano dolcemente, hover -> materializzazione) --- */
#vmWords{ position:fixed; top:90px; right:22px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:5px; pointer-events:none; }
#vmWords .vm-word{ pointer-events:auto; background:none; border:none; cursor:pointer; padding:2px 3px; line-height:1.1;
  font-family:var(--sam-mono); text-transform:uppercase; letter-spacing:.28em; font-size:.82rem; font-weight:700;
  background:linear-gradient(100deg,#8fc0e6,#b79bd6,#e28150); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:.6; transition:opacity .4s ease, transform .35s ease, filter .35s ease;
  animation:vmWordPulse 3.6s ease-in-out infinite; }
#vmWords .vm-word:nth-child(2){ animation-delay:1.8s; }
#vmWords .vm-word:hover{ opacity:1; transform:translateX(-3px) scale(1.07); filter:drop-shadow(0 0 12px rgba(226,129,80,.55)); }
@keyframes vmWordPulse{ 0%,100%{ opacity:.48; } 50%{ opacity:.9; } }
html[data-theme="light"] #vmWords .vm-word{ background:linear-gradient(100deg,#3f6ea3,#8a5aa0,#a24e2c) !important;
  -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
html[data-theme="light"] #vmWords .vm-word:hover{ filter:drop-shadow(0 0 10px rgba(162,78,44,.5)); }
@media (max-width:600px){ #vmWords{ top:72px; right:12px; } #vmWords .vm-word{ font-size:.72rem; letter-spacing:.2em; } }
@media (prefers-reduced-motion:reduce){ #vmWords .vm-word{ animation:none !important; opacity:.75; } }

/* --- VM STAGE v3: comparsa MOLTO piu dolce (un'unica animazione fluida) --- */
.vm-stage{ transition:opacity 1.15s ease !important; }
.vm-stage-inner.play{ animation:vmMagic 15s cubic-bezier(.33,.66,.4,1) both !important; }
@keyframes vmMagic{
  0%   { opacity:0; filter:blur(8px);  transform:translateY(40px) scale(.992); }
  26%  { opacity:1; filter:blur(0);    transform:translateY(14px) scale(1); }
  80%  { opacity:1; filter:blur(0);    transform:translateY(-120px) scale(1); }
  100% { opacity:0; filter:blur(5px);  transform:translateY(-172px) scale(1.004); }
}
@media (prefers-reduced-motion:reduce){ .vm-stage-inner.play{ animation:none !important; opacity:1 !important; } }

/* --- AURORA VIVA: drift piu organico + 4o colore (viola) --- */
@keyframes samDrift{
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(6vw,4vh) scale(1.12); }
  50%  { transform:translate(-4vw,7vh) scale(1.06); }
  75%  { transform:translate(5vw,-5vh) scale(1.14); }
  100% { transform:translate(0,0) scale(1); }
}
#samAmbient .b4{ width:42vw; height:42vw; top:6%; left:24%;
  background:radial-gradient(circle, rgba(183,155,214,.26), transparent 64%);
  filter:blur(64px) !important; animation:samDrift 54s ease-in-out infinite; animation-delay:-34s; }
html[data-theme="light"] #samAmbient .b4{ background:radial-gradient(circle, rgba(138,90,160,.12), transparent 64%) !important; }
@media (prefers-reduced-motion: reduce){ #samAmbient .b4{ animation:none !important; } }

/* --- ANTEPRIMA hero full-bleed con foto team (attiva solo con ?herobg=1) --- */
html.herobg #home.hero-section{ position:relative; }
html.herobg #home.hero-section::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(100deg, rgba(15,19,26,.95) 0%, rgba(15,19,26,.82) 40%, rgba(15,19,26,.46) 72%, rgba(15,19,26,.28) 100%),
    linear-gradient(180deg, rgba(15,19,26,.10), rgba(15,19,26,.55)),
    url('/user/pages/01.home/team-sam.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
html.herobg #home > *{ position:relative; z-index:2; }
html.herobg #home .hero-image-wrapper{ display:none !important; }
html.herobg #home .hero-content{ max-width:64ch; }
@media (max-width:760px){
  html.herobg #home.hero-section::before{
    background-image:
      linear-gradient(180deg, rgba(15,19,26,.88), rgba(15,19,26,.93)),
      url('/user/pages/01.home/team-sam.jpg');
    background-size:cover; background-position:center;
  }
}

/* --- herobg: velo piu leggero (foto piu visibile) --- */
html.herobg #home.hero-section::before{
  background-image:
    linear-gradient(100deg, rgba(15,19,26,.80) 0%, rgba(15,19,26,.55) 42%, rgba(15,19,26,.22) 75%, rgba(15,19,26,.08) 100%),
    linear-gradient(180deg, rgba(15,19,26,.05), rgba(15,19,26,.34)),
    url('/user/pages/01.home/team-sam.jpg') !important;
  background-size:cover !important; background-position:center !important;
}

/* --- herobg FIX: la foto usa lo stesso ::before del glow (blur 30px) -> annullo il blur --- */
html.herobg #home.hero-section::before{ filter:none !important; -webkit-filter:none !important; }

/* --- herobg COMPOSIZIONE: volti in alto liberi, testo in basso su velo scuro --- */
html.herobg #home.hero-section{
  display:flex !important; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height:88vh; padding-bottom:clamp(2.2rem,5vh,4rem);
}
html.herobg #home.hero-section::before{
  background-image:
    linear-gradient(180deg, rgba(15,19,26,.08) 0%, rgba(15,19,26,.24) 42%, rgba(15,19,26,.68) 73%, rgba(15,19,26,.93) 100%),
    url('/user/pages/01.home/team-sam.jpg') !important;
  background-size:cover !important; background-position:center 25% !important; filter:none !important;
}
html.herobg #home .hero-content{ max-width:60ch; }
html.herobg #home .hero-logo-wrapper{ display:none; }   /* logo ridondante: libera i volti in alto */
@media (max-width:760px){
  html.herobg #home.hero-section{ min-height:92vh; }
  html.herobg #home.hero-section::before{
    background-position:center 22% !important;
    background-image:
      linear-gradient(180deg, rgba(15,19,26,.16) 0%, rgba(15,19,26,.44) 46%, rgba(15,19,26,.84) 78%, rgba(15,19,26,.95) 100%),
      url('/user/pages/01.home/team-sam.jpg') !important;
  }
}

/* --- herobg: nascondi davvero il logo hero (libera spazio ai volti) --- */
html.herobg #home .hero-logo-wrapper{ display:none !important; }

/* --- herobg v2: testo CENTRATO in basso (sotto tutti e 3 i volti) + volti piu in alto --- */
html.herobg #home.hero-section{ align-items:center !important; text-align:center; }
html.herobg #home .hero-content{ text-align:center !important; max-width:74ch; margin-left:auto; margin-right:auto; }
html.herobg #home .hero-subtitle{ margin-left:auto; margin-right:auto; }
html.herobg #home .hero-actions{ justify-content:center !important; }
html.herobg #home .hero-title{ font-size:clamp(1.8rem,3.9vw,3.2rem) !important; }
html.herobg #home.hero-section::before{ background-position:center 15% !important; }
@media (max-width:760px){
  html.herobg #home.hero-section::before{ background-position:center 12% !important; }
  html.herobg #home .hero-title{ font-size:clamp(1.55rem,6.5vw,2.2rem) !important; }
}

/* --- herobg v3: FOTO in alto a tutta larghezza (3 volti liberi) + TESTO sotto su scuro --- */
html.herobg #home.hero-section{ display:block !important; min-height:0 !important;
  padding-top:58vh !important; padding-bottom:clamp(2rem,5vh,4rem); text-align:center; }
html.herobg #home.hero-section::before{
  top:0 !important; bottom:auto !important; height:58vh !important;
  left:50% !important; transform:translateX(-50%) !important; width:100vw !important;
  background-image:
    linear-gradient(180deg, rgba(15,19,26,0) 48%, rgba(15,19,26,.55) 82%, #0f131a 100%),
    url('/user/pages/01.home/team-sam.jpg') !important;
  background-size:cover !important; background-position:center 22% !important; filter:none !important;
}
html.herobg #home .hero-content{ text-align:center !important; max-width:74ch; margin:0 auto; }
@media (max-width:760px){
  html.herobg #home.hero-section{ padding-top:44vh !important; }
  html.herobg #home.hero-section::before{ height:44vh !important; background-position:center 20% !important; }
}

/* --- herobg: titolo fluido (4K->mobile), larghezza limitata = sempre >=2 righe, bilanciato --- */
html.herobg #home .hero-title{
  font-size:clamp(1.9rem, 3.4vw, 4.4rem) !important;
  line-height:1.1 !important; letter-spacing:-0.02em !important;
  max-width:min(92vw, 26ch); margin-left:auto; margin-right:auto;
  text-wrap:balance;
}

/* --- herobg titolo: larghezza robusta (26ch desktop scala col font, 92vw mobile) --- */
html.herobg #home .hero-title{ max-width:26ch !important; }
@media (max-width:640px){ html.herobg #home .hero-title{ max-width:92vw !important; } }

/* --- herobg titolo: davvero fluido (grande su desktop/4K, scala fino a mobile) --- */
html.herobg #home .hero-title{ font-size:clamp(2rem, 4.6vw, 6.2rem) !important; }

/* --- herobg titolo: fluido REALE con la larghezza del monitor (tetto alto, no plateau) --- */
html.herobg #home .hero-title{ font-size:clamp(2rem, 4.6vw, 14rem) !important; }