/* =====================================================
   KONSENTO - Landing Page Styles
   Modern, Minimal & Professional
   ===================================================== */

/* =====================================================
   1. CSS VARIABLES
   ===================================================== */
:root {
    /* Nuova palette colori - Arancio */
    --primary: #00ad4a;
    --primary-light: #2ec96b;
    --primary-dark: #00933f;
    --primary-bg: rgba(0, 173, 74, 0.1);

    /* Colori neutri */
    --gray-50: #F2F2F2;
    --gray-100: #E8E8E8;
    --gray-200: #D1D1D1;
    --gray-300: #B0B0B0;
    --gray-400: #888888;
    --gray-500: #6D6D6D;
    --gray-600: #5D5D5D;
    --gray-700: #4F4F4F;
    --gray-800: #262626;
    --gray-900: #010101;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
}

/* =====================================================
   2. BASE STYLES
   ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gray-800);
    line-height: 1.6;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
}

p {
    color: var(--gray-600);
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: color 0.2s ease;
}

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

/* =====================================================
   3. NAVIGATION
   ===================================================== */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.landing-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo img {
    height: 40px;
    transition: filter 0.3s ease;
}

.nav-logo svg {
    height: 40px;
}
@media (max-width: 480px) {
  .nav-logo svg {
    height: 30px;
}
}

.nav-logo svg .cls-consentio-1,
.nav-logo svg .cls-consentio-2 {
    transition: fill 0.3s ease;
}

/* Logo su sfondo scuro (non scrolled): testo e cerchio bianchi */
.landing-nav:not(.scrolled) .nav-logo svg .cls-consentio-1,
.landing-nav:not(.scrolled) .nav-logo svg .cls-consentio-2,
.landing-nav:not(.scrolled) .nav-logo svg text.cls-consentio-2 {
    fill: #ffffff !important;
}

/* Logo scrolled: testo e cerchio neri */
.landing-nav.scrolled .nav-logo svg .cls-consentio-1,
.landing-nav.scrolled .nav-logo svg .cls-consentio-2,
.landing-nav.scrolled .nav-logo svg text.cls-consentio-2 {
    fill: #010101 !important;
}

/* Le barre arancio rimangono sempre arancio */
.nav-logo svg .cls-consentio-3 {
    fill: #00ad4a;
}

.nav-links {
    display: none;
    gap: 2rem;
}

@media (min-width: 1400px) {
    .nav-links {
        display: flex;
    }
}

.nav-links a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
}

.landing-nav.scrolled .nav-links a {
    color: var(--gray-600);
}

.nav-links a:hover {
    color: #fff;
}

.landing-nav.scrolled .nav-links a:hover {
    color: var(--primary);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-actions {
    display: flex;
    gap: 0.75rem;
}

.nav-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.nav-actions .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.landing-nav.scrolled .nav-actions .btn-outline-light {
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.landing-nav.scrolled .nav-actions .btn-outline-light:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

/* Landing Language Switcher */
.landing-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.landing-lang-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.landing-lang-flag:hover {
    opacity: 1;
    transform: scale(1.1);
}

.landing-lang-flag.active {
    opacity: 1;
    border-color: var(--primary);
}

.landing-lang-flag img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.landing-nav.scrolled .mobile-menu-toggle span {
    background: var(--gray-800);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 360px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.mobile-menu-header .nav-logo svg .cls-mob-1,
.mobile-menu-header .nav-logo svg .cls-mob-2 {
    fill: #010101;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.2s ease;
}

.mobile-menu-close:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

.mobile-menu-links a {
    display: block;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.mobile-menu-links a:hover {
    background: var(--gray-50);
    color: var(--primary);
    border-left-color: var(--primary);
}

.mobile-menu-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.mobile-lang-flag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: all 0.2s ease;
    border: 1px solid var(--gray-200);
}

.mobile-lang-flag:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

.mobile-lang-flag.active {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary-dark);
    font-weight: 600;
}

.mobile-lang-flag img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--gray-200);
}

.mobile-menu-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.mobile-menu-actions .btn-outline-light {
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.mobile-menu-actions .btn-outline-light:hover {
    background: var(--gray-100);
}

/* Responsive: show hamburger under 1400px, hide desktop elements */
/* ---- Dropdown lingue per la barra mobile (bandierine), nascosto su desktop
   dove c'è lo switcher a bandiere in fila. ---- */
.nav-lang-dd{ display:block; position:relative; }

.nav-lang-btn{
    display:inline-flex; align-items:center; gap:7px;
    font-family:inherit; font-size:13px; font-weight:600; color:#fff;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
    border-radius:100px; padding:5px 9px 5px 6px; cursor:pointer; line-height:1;
    transition:background .25s ease,border-color .25s ease;
}
.nav-lang-btn:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.42); }
.nav-lang-btn .nlflag{ width:20px; height:20px; border-radius:50%; object-fit:cover;
    box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.nav-lang-btn .nlcode{ letter-spacing:.02em; }
.nav-lang-btn .nlcaret{ font-size:18px; opacity:.85; transition:transform .3s var(--cx-ease); }
.nav-lang-dd.open .nlcaret{ transform:rotate(180deg); }

/* barra chiara (scrolled): pill scuro su sfondo bianco */
.landing-nav.scrolled .nav-lang-btn{ color:var(--gray-900); background:rgba(0,0,0,.04); border-color:var(--gray-300); }
.landing-nav.scrolled .nav-lang-btn:hover{ background:rgba(0,0,0,.07); }
.landing-nav.scrolled .nav-lang-btn .nlflag{ box-shadow:0 0 0 1px var(--gray-300); }

/* popover */
.nav-lang-pop{
    position:absolute; top:calc(100% + 12px); right:0; min-width:184px;
    background:#fff; border:1px solid var(--gray-200); border-radius:14px;
    box-shadow:0 24px 60px -22px rgba(16,16,14,.45); padding:6px;
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
    transform-origin:top right; transition:opacity .22s var(--cx-ease),transform .22s var(--cx-ease),visibility .22s;
    z-index:1200;
}
.nav-lang-dd.open .nav-lang-pop{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.nav-lang-pop::before{ content:""; position:absolute; top:-6px; right:20px; width:12px; height:12px;
    background:#fff; border-left:1px solid var(--gray-200); border-top:1px solid var(--gray-200);
    transform:rotate(45deg); }
.nav-lang-row{
    display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
    text-decoration:none; color:var(--gray-600); font-size:14px; font-weight:500; position:relative;
    transition:background .18s ease,color .18s ease;
}
.nav-lang-row:hover{ background:var(--gray-50); color:var(--cx-ink); }
.nav-lang-row img{ width:22px; height:22px; border-radius:50%; object-fit:cover;
    box-shadow:0 0 0 1px var(--gray-200); flex-shrink:0; }
.nav-lang-row .nlname{ flex:1; }
.nav-lang-row .nltick{ font-size:18px; color:var(--primary); opacity:0; transition:opacity .18s; }
.nav-lang-row.active{ color:var(--cx-ink); font-weight:650; background:rgba(0, 173, 74,.06); }
.nav-lang-row.active .nltick{ opacity:1; }

@media (max-width: 1399.98px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .nav-actions {
        display: flex;
    }

    .nav-btn-cta {
        display: none !important;
    }

    .nav-btn-accedi {
        display: inline-flex !important;
    }

    .landing-lang-switcher {
        display: none;
    }

    .nav-lang-dd {
        display: block;
    }
}

/* =====================================================
   4. BUTTONS
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-light {
    background-color: transparent;
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.btn-outline-light:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.btn .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* =====================================================
   5. HERO SECTION
   ===================================================== */
.hero-section {
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
    min-height: 100vh;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image:radial-gradient(circle at 80% 90%, rgba(0, 173, 74, 1) 0%, transparent 60%);
}

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

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0, 173, 74, 0.2);
    border: 1px solid rgba(0, 173, 74, 0.3);
    border-radius: var(--radius-full, 9999px);
    color: var(--primary-light);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Slogan with Animation */
.hero-slogan {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-light);
    margin-bottom: 1.5rem;
    font-style: italic;
    position: relative;
    display: inline-block;
    padding: 0 25px;
}

.slogan-text {
    display: inline-block;
    background: linear-gradient(90deg, var(--primary), #fff, var(--primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slogan-text.shimmer-active {
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

.hero-slogan .quote-mark {
    position: absolute;
    font-size: 2.5rem;
    color: var(--primary);
    font-style: normal;
    line-height: 1;
}

.hero-slogan .quote-open {
    left: 0;
    top: -5px;
}

.hero-slogan .quote-close {
    right: 0;
    bottom: -10px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color:#ffffff;
    margin-bottom: 2rem;
    max-width: 540px;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.hero-cta .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.hero-cta .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-trial-note {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    margin-top: -1.5rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 0.875rem;
    color: #ffffff;
}

/* Browser Preview with Cookie Banner */
.hero-image {
    padding-left: 2rem;
}

.browser-preview {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.browser-header {
    padding: 0.75rem 1rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.browser-dots {
    display: flex;
    gap: 0.5rem;
}

.browser-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.browser-dots span:nth-child(1) { background: #ef4444; }
.browser-dots span:nth-child(2) { background: #f59e0b; }
.browser-dots span:nth-child(3) { background: #10b981; }

.browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--gray-600);
}

.browser-url .material-symbols-outlined {
    font-size: 14px;
    color: var(--success);
}

.browser-content {
    position: relative;
    min-height: 380px;
    background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
    padding: 1rem;
}

/* Fake Website Elements */
.fake-nav {
    height: 40px;
    background: #fff;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.fake-hero {
    text-align: center;
    padding: 1.5rem 0;
}

.fake-title {
    width: 60%;
    height: 24px;
    background: var(--gray-300);
    border-radius: var(--radius-sm);
    margin: 0 auto 0.75rem;
}

.fake-text {
    width: 80%;
    height: 12px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    margin: 0 auto 1rem;
}

.fake-btn {
    width: 100px;
    height: 32px;
    background: var(--primary);
    border-radius: var(--radius-md);
    margin: 0 auto;
}

.fake-cards {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.fake-card {
    flex: 1;
    height: 80px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Cookie Banner Preview */
.cookie-banner-preview {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1rem 1.25rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 3px solid var(--primary);
    animation: slideUp 0.5s ease 0.5s both;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cookie-icon .material-symbols-outlined {
    font-size: 22px;
    color: var(--primary);
}

.cookie-content {
    flex: 1;
    min-width: 0;
}

.cookie-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.125rem;
}

.cookie-text {
    font-size: 0.6875rem;
    color: var(--gray-500);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cookie-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-btn.reject {
    background: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
}

.cookie-btn.settings {
    background: var(--gray-100);
    color: var(--gray-700);
}

.cookie-btn.accept {
    background: var(--primary);
    color: #fff;
}

.powered-by {
    font-size: 0.5625rem;
    color: var(--gray-400);
    position: absolute;
    bottom: 0.375rem;
    right: 0.75rem;
}

.powered-by strong {
    color: var(--primary);
}

/* Cookie Banner Preview V2 - Realistic */
.cookie-banner-preview-v2 {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 320px;
    background: #fff;
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: slideInLeft 0.5s ease 1.2s both;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.cookie-banner-preview-v2 .cookie-banner-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.625rem;
}

.cookie-banner-preview-v2 .cookie-banner-text {
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--gray-600);
    margin: 0 0 0.75rem;
}

.cookie-banner-preview-v2 .cookie-banner-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cookie-banner-preview-v2 .cookie-banner-links a {
    font-size: 0.6875rem;
    color: var(--primary);
    text-decoration: underline;
}

.cookie-banner-preview-v2 .cookie-banner-links .separator {
    color: var(--gray-300);
    font-size: 0.6875rem;
}

.cookie-banner-preview-v2 .cookie-banner-buttons {
    display: flex;
    gap: 0.5rem;
}

.cookie-banner-preview-v2 .cookie-btn-v2 {
    flex: 1;
    padding: 0.5rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cookie-banner-preview-v2 .cookie-btn-v2.accept {
    background: var(--primary);
    color: #fff;
}

.cookie-banner-preview-v2 .cookie-btn-v2.reject {
    background: var(--gray-700);
    color: #fff;
}

.cookie-banner-preview-v2 .cookie-btn-v2.settings {
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

/* =====================================================
   6. SECTION STYLES
   ===================================================== */
section {
    padding: 6rem 0;
}

.section-header {
    margin-bottom: 4rem;
}

.section-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: var(--primary-bg);
    border-radius: var(--radius-full, 9999px);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--gray-900);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--gray-500);
    margin: 0 auto;
}

/* =====================================================
   7. FEATURES SECTION
   ===================================================== */
.features-section {
    background-color: var(--gray-50);
}

.feature-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    height: 100%;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.feature-icon .material-symbols-outlined {
    font-size: 28px;
    color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin: 0;
}

/* =====================================================
   8. HOW IT WORKS SECTION
   ===================================================== */
.how-section {
    background: #fff;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
}

.step-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.step-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step-content p {
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin: 0;
}

.step-integrations {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.integration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4f46e5;
}

/* Code Preview */
.code-preview {
    background: var(--gray-900);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.code-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--gray-800);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-dot.red { background: #ef4444; }
.code-dot.yellow { background: #f59e0b; }
.code-dot.green { background: #10b981; }

.code-tabs {
    display: flex;
    margin-left: auto;
    gap: 0.25rem;
}

.code-tab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--gray-400);
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.code-tab:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--gray-200);
}

.code-tab.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary);
    color: #fff;
}

.code-title {
    margin-left: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-400);
}

.code-body {
    padding: 1.5rem;
    overflow-x: auto;
}

.code-body pre {
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
}

.code-body code {
    color: #e2e8f0;
}

.code-comment { color: #64748b; }
.code-tag { color: #f472b6; }
.code-attr { color: #a5b4fc; }
.code-string { color: #86efac; }

/* =====================================================
   9. AGENCIES SECTION
   ===================================================== */
.agencies-section {
    background: var(--gray-50);
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--gray-600);
}

.benefits-list .material-symbols-outlined {
    color: var(--success);
    font-size: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

.agency-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--radius-2xl);
    text-align: center;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}

.agency-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.agency-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--primary);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

.agency-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.agency-card p {
    font-size: 1rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

/* =====================================================
   9B. TERMS & CONDITIONS SECTION
   ===================================================== */
.terms-section {
    background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
    position: relative;
    overflow: hidden;
}

.terms-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.terms-preview-card {
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
}

.terms-preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.terms-preview-header .material-symbols-outlined {
    font-size: 2rem;
    color: #8bc34a;
    background: rgba(139, 195, 74, 0.1);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
}

.terms-preview-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--gray-900);
}

.terms-preview-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.preview-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.preview-step:hover {
    background: var(--gray-100);
    transform: translateX(4px);
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    color: var(--gray-500);
    flex-shrink: 0;
}

.step-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.step-icon.completed {
    background: #8bc34a;
    color: #fff;
}

.step-icon.active {
    background: var(--primary);
    color: #fff;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(105, 195, 199, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(105, 195, 199, 0); }
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    font-weight: 600;
}

.step-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-800);
}

.terms-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.preview-languages {
    display: flex;
    gap: 0.5rem;
}

.preview-languages .fi {
    font-size: 1.25rem;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.preview-note {
    font-size: 0.8125rem;
    color: var(--gray-500);
    font-style: italic;
}

@media (max-width: 991.98px) {
    .terms-preview-card {
        margin-top: 2rem;
    }
}

/* =====================================================
   10. GOOGLE CONSENT MODE SECTION
   ===================================================== */
.consent-mode-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.consent-mode-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.03) 0%, rgba(52, 168, 83, 0.03) 50%, rgba(251, 188, 4, 0.03) 100%);
    pointer-events: none;
}

.consent-mode-stats {
    background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(66, 133, 244, 0.1) 100%);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--primary);
}

.stat-highlight {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stat-desc {
    font-size: 0.9375rem;
    color: var(--gray-600);
    flex: 1;
    min-width: 200px;
}

.consent-mode-card {
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
}

.consent-mode-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.consent-mode-header .google-badge {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.consent-mode-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--gray-900);
}

.consent-mode-mapping {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mapping-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.mapping-item:hover {
    background: var(--gray-100);
    transform: translateX(4px);
}

.mapping-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    min-width: 140px;
}

.mapping-category .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
}

.mapping-arrow {
    color: var(--gray-400);
    font-size: 1.25rem;
}

.mapping-google {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.75rem;
    background: var(--gray-900);
    color: #86efac;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    flex: 1;
}

.consent-mode-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.consent-mode-footer p {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
    text-align: center;
}

/* Google Colors for badges */
.google-colors {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.google-colors span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.google-colors .g-blue { background: #4285F4; }
.google-colors .g-red { background: #EA4335; }
.google-colors .g-yellow { background: #FBBC04; }
.google-colors .g-green { background: #34A853; }

@media (max-width: 767.98px) {
    .mapping-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .mapping-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .mapping-google {
        width: 100%;
        text-align: center;
    }

    .stat-value {
        font-size: 2rem;
    }

    .stat-highlight {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   11. TESTIMONIALS SECTION
   ===================================================== */
.testimonials-section {
    background: var(--gray-50);
}

.testimonial-card {
    background: var(--gray-50);
    padding: 2rem;
    border-radius: var(--radius-xl);
    height: 100%;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.testimonial-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.testimonial-stars .material-symbols-outlined {
    font-size: 20px;
    color: #f59e0b;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.testimonial-text {
    font-size: 1rem;
    color: var(--gray-600);
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: #fff;
    border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    overflow: hidden;
}
.author-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 200px;
}
.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    font-size: 0.9375rem;
    color: var(--gray-900);
}

.author-info span {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* =====================================================
   11. CONTACT SECTION
   ===================================================== */
.contact-section {
    position: relative;
      background: #0a0a0a;

    padding: 6rem 0;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:radial-gradient(circle at 80% 90%, rgba(0, 173, 74, 1) 0%, transparent 60%);
    pointer-events: none;
}

.contact-section > .container {
    position: relative;
    z-index: 1;
}

.contact-card {
    background: #fff;
    padding: 3rem;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
}

.contact-section .section-badge {
    background: var(--primary-bg);
}

.contact-section .section-title {
    color: var(--gray-900);
}

.contact-section .section-subtitle {
    color: var(--gray-500);
}

.contact-form {
    margin-top: 2rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--gray-900);
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-control::placeholder {
    color: var(--gray-400);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.form-check-label a {
    color: var(--primary);
    text-decoration: underline;
}

/* Contact Success */
.contact-success {
    text-align: center;
    padding: 3rem 2rem;
}

.contact-success .material-symbols-outlined {
    font-size: 64px;
    color: var(--success);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 64;
    margin-bottom: 1rem;
}

.contact-success h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.contact-success p {
    color: var(--gray-500);
}

/* =====================================================
   12. FOOTER
   ===================================================== */
.landing-footer {
    background: var(--gray-900);
    color: var(--gray-400);
    padding: 4rem 0 2rem;
}

.footer-logo {
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}

.footer-desc {
    font-size: 0.9375rem;
    color: var(--gray-200);
    max-width: 300px;
}

.footer-social {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background 0.2s ease, color 0.2s ease;
}

.footer-social-link:hover {
    background: #fff;
    color: var(--primary, #1877f2);
}

.landing-footer h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    font-size: 0.9375rem;
    color: var(--gray-200);
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 3rem 0 1.5rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-size: 0.875rem;
    color: var(--gray-200);
    margin: 0;
}

.footer-credits a {
    color: var(--primary-light);
}

.footer-credits a:hover {
    color: #fff;
}

/* Made in Italy Badge */
.made-in-italy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-400);
}

.made-in-italy .italy-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    background: linear-gradient(to right, #009246 33.33%, #fff 33.33%, #fff 66.66%, #ce2b37 66.66%);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.made-in-italy .heart {
    color: #ce2b37;
    font-size: 1rem;
}

/* =====================================================
   13. RESPONSIVE STYLES
   ===================================================== */
@media (max-width: 991.98px) {
    .hero-section {
        padding-top: 6rem;
    }

    .hero-section .row {
        min-height: auto;
        padding: 4rem 0;
    }

    .hero-stats {
        gap: 2rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    section {
        padding: 4rem 0;
    }
}

@media (max-width: 767.98px) {
    .landing-nav {
        padding: 0.75rem 0;
        background-color: #0a0a0a;
        backdrop-filter: blur(10px);
    }

    .landing-footer {
        background: #0a0a0a;
    }

    .landing-nav .nav-logo img {
        max-width: 170px;
        filter: brightness(0) invert(1);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-slogan {
        font-size: 1.125rem;
        margin-bottom: 1rem;
        padding: 0 18px;
    }

    .hero-slogan .quote-mark {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-stats {
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .stat-item {
        min-width: 0;
        flex: 1;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .steps-list {
        gap: 1.5rem;
    }

    .step-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-card {
        padding: 2rem 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   14. ANIMATIONS (GSAP controlled)
   ===================================================== */

/* Initial states for GSAP animations */
.gsap-hero-element {
    opacity: 0;
    transform: translateY(30px);
}

.gsap-fade-up {
    opacity: 0;
    transform: translateY(40px);
}

.gsap-fade-left {
    opacity: 0;
    transform: translateX(-40px);
}

.gsap-fade-right {
    opacity: 0;
    transform: translateX(40px);
}

.gsap-scale-in {
    opacity: 0;
    transform: scale(0.8);
}

/* Section reveal animations */
.section-header.gsap-reveal,
.feature-card.gsap-reveal,
.step-item.gsap-reveal,
.testimonial-card.gsap-reveal,
.consent-mode-card.gsap-reveal,
.agency-card.gsap-reveal {
    opacity: 0;
    transform: translateY(50px);
}

/* Stagger children helper */
.gsap-stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

/* =====================================================
   15. UTILITIES
   ===================================================== */
.text-center { text-align: center; }
.d-none { display: none !important; }
.d-flex { display: flex; }
.d-md-flex { display: none; }
.d-lg-block { display: none; }

@media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
}

/* =====================================================
   16. CONSENT MODE INFO MODAL
   ===================================================== */
.consent-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.consent-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.consent-modal {
    background: #fff;
    border-radius: var(--radius-2xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.consent-modal-overlay.active .consent-modal {
    transform: translateY(0) scale(1);
}

.consent-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--gray-100);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.2s ease;
    z-index: 10;
}

.consent-modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.consent-modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 2.5rem 2rem 2rem;
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}

.consent-modal-icon {
    font-size: 48px;
    opacity: 0.9;
    margin-bottom: 1rem;
    display: block;
}

.consent-modal-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #ffffff;
}

.consent-modal-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    color: #ffffff;
}

.consent-modal-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.consent-info-section {
    margin-bottom: 2rem;
}

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

.consent-info-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.consent-info-section h3 .material-symbols-outlined {
    color: var(--primary);
    font-size: 24px;
}

.consent-info-section p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.consent-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.consent-param {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.consent-param.new-param {
    background: linear-gradient(135deg, rgba(105, 195, 199, 0.1), rgba(79, 168, 172, 0.1));
    border-color: var(--primary-light);
}

.param-name {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    background: var(--gray-200);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    width: fit-content;
}

.consent-param.new-param .param-name {
    background: var(--primary);
    color: #fff;
}

.param-desc {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.consent-highlight-box {
    display: flex;
    gap: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary);
}

.highlight-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--primary-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-icon .material-symbols-outlined {
    color: var(--primary);
    font-size: 28px;
}

.highlight-content strong {
    display: block;
    font-size: 1rem;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.highlight-content p {
    font-size: 0.875rem;
    margin: 0;
}

.consent-modes-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.mode-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.mode-card.advanced {
    background: linear-gradient(135deg, rgba(105, 195, 199, 0.1), rgba(79, 168, 172, 0.05));
    border-color: var(--primary);
}

.mode-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-recommended {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.mode-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mode-card li {
    font-size: 0.875rem;
    color: var(--gray-600);
    padding-left: 1.25rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.mode-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--gray-400);
    border-radius: 50%;
}

.mode-card.advanced li::before {
    background: var(--primary);
}

.consent-benefits-modal {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.consent-benefits-modal li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-700);
}

.consent-benefits-modal .material-symbols-outlined {
    color: var(--success);
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.consent-modal-footer {
    padding: 1.5rem 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    text-align: center;
    flex-shrink: 0;
}

.consent-modal-footer .btn {
    min-width: 250px;
}

/* Modal responsive styles */
@media (max-width: 767.98px) {
    .consent-modal {
        max-height: 95vh;
        border-radius: var(--radius-xl);
    }

    .consent-modal-header {
        padding: 2rem 1.5rem 1.5rem;
    }

    .consent-modal-header h2 {
        font-size: 1.5rem;
    }

    .consent-modal-body {
        padding: 1.5rem;
    }

    .consent-params-grid {
        grid-template-columns: 1fr;
    }

    .consent-modes-comparison {
        grid-template-columns: 1fr;
    }

    .consent-benefits-modal {
        grid-template-columns: 1fr;
    }

    .consent-modal-footer {
        padding: 1rem 1.5rem;
    }

    .consent-modal-footer .btn {
        width: 100%;
        min-width: unset;
    }
}

/* Body scroll lock when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Info Request Modal */
.info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.info-modal {
    background: #fff;
    border-radius: var(--radius-2xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.info-modal-overlay.active .info-modal {
    transform: translateY(0) scale(1);
}

.info-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.2s ease;
    z-index: 10;
}

.info-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.info-modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 2rem;
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}

.info-modal-icon {
    font-size: 40px;
    opacity: 0.9;
    margin-bottom: 0.75rem;
    display: block;
}

.info-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
        color: #fff;

}

.info-modal-subtitle {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
        color: #fff;

}

.info-modal-body {
    padding: 1.5rem 2rem 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.info-modal-body .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.info-modal-body .form-control {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}

.info-modal-body .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.info-modal-body .form-check-label {
    font-size: 0.8rem;
    color: var(--gray-600);
}

@media (max-width: 576px) {
    .info-modal-body {
        padding: 1.25rem;
    }

    .info-modal-header {
        padding: 1.5rem 1.25rem;
    }
}

/* =====================================================
   17. CLIENTS/PARTNERS SECTION
   ===================================================== */
.clients-section {
    background: #fff;
    padding: 5rem 0;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.client-logo {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    transition: all 0.3s ease;
}

.client-logo:hover {
    background: #fff;
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.client-logo img {
    max-width: 100%;
    max-height: 60px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.client-placeholder {
    color: var(--gray-400);
    font-size: 0.75rem;
    text-align: center;
}

.clients-note {
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin-top: 2rem;
}

.clients-note a {
    color: var(--primary);
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* =====================================================
   18. CERTIFICATIONS SECTION
   ===================================================== */
.certifications-section {
    background: var(--gray-50);
    padding: 6rem 0;
}

.certifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.certifications-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.certifications-list li:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.certifications-list .material-symbols-outlined {
    color: var(--success);
    font-size: 28px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;
    flex-shrink: 0;
}

.certifications-list li div {
    display: flex;
    flex-direction: column;
}

.certifications-list li strong {
    font-size: 1rem;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.certifications-list li span {
    font-size: 0.875rem;
    color: var(--gray-500);
}

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

.cert-badge {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cert-badge:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.cert-badge .material-symbols-outlined {
    font-size: 48px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.cert-badge .badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    line-height: 1.3;
}

.cert-badge.gdpr-badge {
    border-color: #3b82f6;
}

.cert-badge.gdpr-badge .material-symbols-outlined {
    color: #3b82f6;
}

.cert-badge.google-badge {
    border-color: #10b981;
}

.cert-badge.google-badge .material-symbols-outlined {
    color: #10b981;
}

.cert-badge.garante-badge {
    border-color: #f59e0b;
}

.cert-badge.garante-badge .material-symbols-outlined {
    color: #f59e0b;
}

.cert-badge.eprivacy-badge {
    border-color: #8b5cf6;
}

.cert-badge.eprivacy-badge .material-symbols-outlined {
    color: #8b5cf6;
}

@media (max-width: 767.98px) {
    .certifications-badges {
        padding: 1rem;
        gap: 1rem;
    }

    .cert-badge {
        padding: 1.5rem 1rem;
    }

    .cert-badge .material-symbols-outlined {
        font-size: 36px;
    }
}

/* =====================================================
   19. FREE CHECK CTA SECTION
   ===================================================== */
.free-check-section {
    background: linear-gradient(135deg, var(--gray-900) 0%, #1a1a2e 100%);
    padding: 5rem 0;
}

.free-check-card {
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: 3rem;
    box-shadow: var(--shadow-2xl);
    position: relative;
    overflow: hidden;
}

.free-check-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.free-check-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.free-check-text {
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.free-check-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.free-check-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-700);
}

.free-check-benefits .material-symbols-outlined {
    color: var(--success);
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.free-check-btn {
    white-space: nowrap;
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.free-check-note {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .free-check-card {
        padding: 2rem;
        text-align: center;
    }

    .free-check-benefits {
        justify-content: center;
    }

    .free-check-title {
        font-size: 1.5rem;
    }
}

/* =====================================================
   19b. GDPR SCANNER (within free-check section)
   ===================================================== */

/* Scanner Form */
.scanner-form-wrapper {
    max-width: 650px;
    margin: 0 auto;
}

.scanner-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 0.375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.scanner-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 173, 74, 0.1);
}

.scanner-input-icon {
    font-size: 22px;
    color: var(--gray-400);
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.scanner-url-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--gray-900);
    background: transparent;
    padding: 0.75rem 0.5rem;
    min-width: 0;
}

.scanner-url-input::placeholder {
    color: var(--gray-400);
}

.scanner-submit-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.scanner-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    text-align: center;
}

/* Scanner CAPTCHA */
.scanner-captcha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.captcha-icon {
    font-size: 1.25rem;
    color: var(--gray-400);
}

.captcha-question {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
    letter-spacing: 0.02em;
}

.captcha-input {
    width: 70px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    background: #fff;
    color: var(--gray-900);
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
}

.captcha-input::-webkit-outer-spin-button,
.captcha-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.captcha-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 173, 74, 0.15);
}

/* Scanner Loading */
.scanner-loading-content {
    padding: 2rem 0;
}

.scanner-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: scanner-spin 0.8s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes scanner-spin {
    to { transform: rotate(360deg); }
}

.scanner-loading-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.scanner-loading-url {
    font-size: 0.875rem;
    color: var(--gray-500);
    word-break: break-all;
    margin-bottom: 2rem;
}

.scanner-progress-steps {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-400);
    transition: color 0.4s ease;
}

.progress-step .material-symbols-outlined {
    font-size: 24px;
    transition: color 0.4s ease, transform 0.4s ease;
}

.progress-step.active {
    color: var(--primary);
}

.progress-step.active .material-symbols-outlined {
    transform: scale(1.15);
}

/* Scanner Verdict */
.scanner-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    border-radius: 100px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    animation: verdictPulse 0.6s ease-out;
}

.verdict-pass {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.verdict-fail {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.verdict-icon {
    font-size: 2.5rem;
}

.scanner-verdict-desc {
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

@keyframes verdictPulse {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Scanner CTA Alert */
.scanner-cta-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: left;
    margin-top: 1.5rem;
}

.scanner-cta-alert .alert-icon {
    font-size: 1.375rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.scanner-cta-alert.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.scanner-cta-alert.alert-warning .alert-icon {
    color: #f59e0b;
}

.scanner-cta-alert.alert-fail {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
}

.scanner-cta-alert.alert-fail .alert-icon {
    color: #ef4444;
}

/* Scanner Results */
.scanner-results-header {
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

.score-circle {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 1.5rem;
}

.score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-circle .score-bg {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 12;
}

.score-circle .score-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0, 173, 74, 0.25));
}

.score-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}

.score-value #score-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
}

.score-value .score-max {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-400);
    margin-top: -2px;
}

.score-grade {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.grade-a { color: #10b981; }
.grade-b { color: #22c55e; }
.grade-c { color: #f59e0b; }
.grade-d { color: #f97316; }
.grade-f { color: #ef4444; }

/* Checks Grid */
.scanner-checks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.scanner-check-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--gray-200);
    transition: box-shadow 0.2s ease;
}

.scanner-check-card:hover {
    box-shadow: var(--shadow-md);
}

.check-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.check-status-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 22;
}

.check-pass .check-status-icon {
    color: #10b981;
}

.check-fail .check-status-icon {
    color: #ef4444;
}

.check-card-info {
    flex: 1;
    min-width: 0;
}

.check-card-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.25rem;
}

.check-card-info p {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}

.check-score {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    white-space: nowrap;
}

.check-pass .check-score {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.check-fail .check-score {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Check Details (expandable) */
.check-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.check-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-details li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
    padding: 0.25rem 0;
}

.check-details li strong {
    color: var(--gray-800);
}

.check-detail-meta {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Category Badges */
.badge-cat {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    text-transform: capitalize;
}

.badge-marketing {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.badge-analitici {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.badge-funzionali {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.badge-necessari {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.badge-altri {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

/* Scanner CTA */
.scanner-cta-text {
    font-size: 1rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

/* Scanner Responsive */
@media (max-width: 767.98px) {
    .scanner-input-group {
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .scanner-input-icon {
        display: none;
    }

    .scanner-url-input {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    .scanner-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
    }

    .scanner-checks-grid {
        grid-template-columns: 1fr;
    }

    .scanner-progress-steps {
        gap: 1rem;
    }

    .scanner-verdict {
        font-size: 1.25rem;
        padding: 1rem 2rem;
    }

    .verdict-icon {
        font-size: 1.75rem;
    }

    .scanner-cta .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .scanner-cta .ms-2 {
        margin-left: 0 !important;
    }
}


/* =====================================================
   20. NEWS HOME SECTION
   ===================================================== */
.news-home-section {
    padding: 5rem 0;
    background: var(--gray-50);
}

.news-home-grid {
    margin-top: 2rem;
}

.news-home-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-home-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    transform: translateY(-4px);
}

.news-home-image {
    display: block;
    height: 180px;
    overflow: hidden;
    background: var(--gray-200);
}

.news-home-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-home-card:hover .news-home-image img {
    transform: scale(1.05);
}

.news-home-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
}

.news-home-placeholder .material-symbols-outlined {
    font-size: 40px;
    color: var(--gray-400);
}

.news-home-content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-home-date {
    font-size: 0.8125rem;
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.news-home-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.news-home-title a {
    color: inherit;
    text-decoration: none;
}

.news-home-title a:hover {
    color: var(--primary);
}

.news-home-excerpt {
    font-size: 0.875rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

@media (max-width: 767.98px) {
    .news-home-section {
        padding: 3rem 0;
    }

    .news-home-image {
        height: 160px;
    }
}

/* =====================================================
   21. CONSULENZA NORMATIVA SECTION
   ===================================================== */
.consulenza-section {
    background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.consulenza-section::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 173, 74, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.consolve-partner-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    width: fit-content;
}

.consolve-partner-badge .partner-label {
    font-size: 0.8125rem;
    color: var(--gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consolve-partner-badge .consolve-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .consolve-partner-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .consolve-partner-badge .consolve-logo {
        height: 32px;
    }
}

.consulenza-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full, 9999px);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s ease;
}

.service-tag:hover {
    background: var(--primary-bg);
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

.service-tag .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
}

.consulenza-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.consulenza-card {
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.consulenza-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.consulenza-card-main {
    border-left: 4px solid var(--primary);
}

.consulenza-card-secondary {
    border-left: 4px solid #10b981;
}

.consulenza-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.consulenza-card-main .consulenza-card-icon {
    background: var(--primary-bg);
}

.consulenza-card-secondary .consulenza-card-icon {
    background: rgba(16, 185, 129, 0.1);
}

.consulenza-card-icon .material-symbols-outlined {
    font-size: 28px;
}

.consulenza-card-main .consulenza-card-icon .material-symbols-outlined {
    color: var(--primary);
}

.consulenza-card-secondary .consulenza-card-icon .material-symbols-outlined {
    color: #10b981;
}

.consulenza-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--gray-900);
}

.consulenza-card p {
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 991.98px) {
    .consulenza-section {
        padding: 4rem 0;
    }

    .consulenza-cards-wrapper {
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .service-tag {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }

    .service-tag .material-symbols-outlined {
        font-size: 16px;
    }
}

/* =====================================================
   22. CONSULENZA MODAL
   ===================================================== */
.consulenza-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.consulenza-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.consulenza-modal {
    background: #fff;
    border-radius: var(--radius-2xl);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.consulenza-modal-overlay.active .consulenza-modal {
    transform: translateY(0) scale(1);
}

.consulenza-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.2s ease;
    z-index: 10;
}

.consulenza-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.consulenza-modal-header {
    background: linear-gradient(135deg, var(--gray-900) 0%, #1a1a2e 100%);
    padding: 2rem;
    color: #fff;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.consulenza-modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 173, 74, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

.consulenza-modal-icon {
    font-size: 48px;
    opacity: 0.9;
    margin-bottom: 0.75rem;
    display: block;
    position: relative;
    z-index: 1;
}

.consulenza-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    position: relative;
    z-index: 1;
}

.consulenza-modal-subtitle {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
    position: relative;
    z-index: 1;
}

.consulenza-modal-body {
    padding: 1.5rem 2rem 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.consulenza-modal-body .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.consulenza-modal-body .form-control {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}

.consulenza-modal-body .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.services-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.services-checkboxes .form-check {
    margin: 0;
}

.services-checkboxes .form-check-label {
    font-size: 0.8125rem;
    color: var(--gray-700);
}

.services-checkboxes .form-check-input:checked + .form-check-label {
    color: var(--primary-dark);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .consulenza-modal-body {
        padding: 1.25rem;
    }

    .consulenza-modal-header {
        padding: 1.5rem 1.25rem;
    }

    .services-checkboxes {
        grid-template-columns: 1fr;
    }
}

/* Accessibility: skip-to-content link */
.skip-link {
    position: fixed;
    top: -60px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    background: #010101;
    color: #fff;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    font-weight: 600;
    transition: top .15s ease-in-out;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #00ad4a;
    outline-offset: 2px;
}

#main-content:focus {
    outline: none;
}

/* =====================================================================
   REDESIGN 2026 — White-label · Layout chooser · Dashboard (prefisso cx-)
   Sezioni autonome, classi namespaced, nessun selettore globale.
===================================================================== */
:root{
    --cx-ease:cubic-bezier(.16,1,.3,1);
    --cx-ink:#0a0a0a; --cx-ink2:#1a1a19;
    --cx-shadow-soft:0 1px 2px rgba(16,16,14,.04), 0 10px 24px -10px rgba(16,16,14,.12);
    --cx-shadow-float:0 2px 4px rgba(16,16,14,.05), 0 18px 40px -14px rgba(16,16,14,.18), 0 50px 90px -40px rgba(16,16,14,.22);
}

/* reveal on scroll (indipendente da GSAP, con fallback anti-invisibilità) */
.cx-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--cx-ease),transform .9s var(--cx-ease)}
.cx-reveal.in, .cx-reveal-all .cx-reveal{opacity:1;transform:none}
.cx-reveal.cx-d1{transition-delay:.08s}
.cx-reveal.cx-d2{transition-delay:.16s}
.cx-reveal.cx-d3{transition-delay:.24s}
.cx-reveal.cx-d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){.cx-reveal{transition:none;opacity:1;transform:none}}

/* section helpers */
.cx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
    background:rgba(0, 173, 74,.08);border:1px solid rgba(0, 173, 74,.16);padding:7px 14px;border-radius:100px}
.cx-eyebrow .cx-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(0, 173, 74,.18)}
.cx-h2{font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:22px 0 0;color:var(--cx-ink)}
.cx-sub{font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--gray-600);max-width:640px;margin:18px 0 0;font-weight:400}
.cx-center{text-align:center}
.cx-center .cx-sub{margin-left:auto;margin-right:auto}

/* ---------- HERO product visual (col destra) ---------- */
.cx-hv{position:relative;perspective:1600px}
.cx-hv-window{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--cx-shadow-float);overflow:hidden;border:1px solid rgba(255,255,255,.12);
    transform:rotateY(-13deg) rotateX(5deg);transition:transform 1s var(--cx-ease)}
.cx-hv:hover .cx-hv-window{transform:rotateY(-7deg) rotateX(3deg)}
.cx-hv-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f5f5f4;border-bottom:1px solid var(--gray-200)}
.cx-dots{display:flex;gap:6px}.cx-dots span{width:11px;height:11px;border-radius:50%}
.cx-hv-bar .cx-dots span:nth-child(1){background:#ff5f57}.cx-hv-bar .cx-dots span:nth-child(2){background:#febc2e}.cx-hv-bar .cx-dots span:nth-child(3){background:#28c840}
.cx-url{flex:1;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--gray-500)}
.cx-url .material-symbols-outlined{font-size:14px;color:var(--success)}
.cx-hv-body{display:grid;grid-template-columns:64px 1fr;min-height:330px;background:linear-gradient(180deg,#fafafa,#fff)}
.cx-hv-side{background:var(--cx-ink2);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.cx-hv-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary-light),var(--primary));display:grid;place-items:center;color:#fff}
.cx-hv-logo .material-symbols-outlined{font-size:20px}
.cx-hv-side i{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.1);display:block}
.cx-hv-side i.on{background:rgba(0, 173, 74,.9)}
.cx-hv-main{padding:18px}
.cx-hv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cx-hv-h b{font-size:14px;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-hv-h .cx-pill{font-size:10px;font-weight:600;color:var(--primary);background:rgba(0, 173, 74,.1);padding:3px 9px;border-radius:100px}
.cx-hv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.cx-kpi{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:11px 12px}
.cx-kpi .v{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--cx-ink)}
.cx-kpi .v small{color:var(--success);font-size:10px;font-weight:700;margin-left:4px}
.cx-kpi .k{font-size:10px;color:var(--gray-500);margin-top:1px}
.cx-hv-rows{display:flex;flex-direction:column;gap:7px}
.cx-hv-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gray-200);border-radius:11px;padding:9px 11px}
.cx-hv-row .cx-fav{width:22px;height:22px;border-radius:6px;background:var(--gray-100);display:grid;place-items:center;color:var(--gray-500)}
.cx-hv-row .cx-fav .material-symbols-outlined{font-size:14px}
.cx-hv-row .cx-dn{flex:1;font-size:12px;font-weight:600;color:var(--gray-700)}
.cx-hv-row .cx-cc{font-size:11px;color:var(--gray-500)}
.cx-st{font-size:10px;font-weight:700;padding:3px 8px;border-radius:100px}
.cx-st-ok{color:#0c8a4f;background:rgba(16,185,129,.13)}
.cx-st-warn{color:#a25c00;background:rgba(245,158,11,.15)}
.cx-hv-float{position:absolute;left:-30px;bottom:-26px;width:262px;background:#fff;border-radius:16px;box-shadow:var(--cx-shadow-float);border:1px solid var(--gray-200);padding:15px 16px;animation:cxFloaty 6s ease-in-out infinite}
.cx-hv-float .ft{font-size:13px;font-weight:700;margin-bottom:5px;color:var(--cx-ink)}
.cx-hv-float .fp{font-size:11px;line-height:1.5;color:var(--gray-500);margin:0 0 11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-hv-float .fb{display:flex;gap:7px}
.cx-hv-float .fb span{flex:1;text-align:center;font-size:11px;font-weight:600;padding:8px;border-radius:9px}
.cx-hv-float .fb .acc{background:var(--primary);color:#fff}
.cx-hv-float .fb .rej{background:var(--gray-100);color:var(--gray-700)}
.cx-hv-chip{position:absolute;right:-14px;top:30px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--gray-200);border-radius:13px;padding:10px 13px;box-shadow:var(--cx-shadow-soft);display:flex;align-items:center;gap:9px;animation:cxFloaty 7s ease-in-out infinite reverse}
.cx-hv-chip .ic{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#1a1a19,#3d3d38);display:grid;place-items:center;color:#fff}
.cx-hv-chip .ic .material-symbols-outlined{font-size:17px}
.cx-hv-chip .t1{font-size:12px;font-weight:700;line-height:1.1;color:var(--cx-ink)}
.cx-hv-chip .t2{font-size:10px;color:var(--gray-500)}
@keyframes cxFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- WHITE-LABEL ---------- */
.cx-wl{padding:clamp(72px,9vw,120px) 0;background:radial-gradient(120% 80% at 80% 0%, #faf6f3 0%, #fff 55%);position:relative;overflow:hidden}
.cx-wl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.cx-wl-switch{display:inline-flex;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:100px;padding:5px;flex-wrap:wrap}
.cx-wl-switch button{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--gray-600);padding:9px 18px;border-radius:100px;cursor:pointer;transition:.3s var(--cx-ease);display:flex;align-items:center;gap:8px}
.cx-wl-switch button .sw{width:11px;height:11px;border-radius:50%;background:currentColor;opacity:.85}
.cx-wl-switch button.on{background:#fff;color:var(--cx-ink);box-shadow:var(--cx-shadow-soft)}
.cx-wl-stage{position:relative;border-radius:var(--radius-2xl);padding:clamp(20px,4vw,46px);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.4));border:1px solid var(--gray-200);box-shadow:0 40px 90px -50px rgba(16,16,14,.4);overflow:hidden}
.cx-wl-stage::before{content:"";position:absolute;inset:0;z-index:0;opacity:.6;transition:background .6s ease;background:radial-gradient(60% 60% at 18% 0%,var(--cx-brand-soft,rgba(0, 173, 74,.14)),transparent 60%)}
.cx-wl-stage>*{position:relative;z-index:1}
.cx-wl-cols{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:center}
.cx-bwin{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--cx-shadow-float);overflow:hidden;border:1px solid var(--gray-200)}
.cx-bwin-bar{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#f5f5f4;border-bottom:1px solid var(--gray-200)}
.cx-bwin-bar .cx-dots span{background:var(--gray-300)}
.cx-bwin-url{flex:1;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--gray-200);border-radius:7px;padding:5px 11px;font-size:11.5px;color:var(--gray-500)}
.cx-bwin-url .material-symbols-outlined{font-size:13px;color:var(--success)}
.cx-bwin-body{display:grid;grid-template-columns:150px 1fr;min-height:300px}
.cx-bwin-side{padding:16px 14px;border-right:1px solid var(--gray-100);background:#fcfcfb}
.cx-brand-row{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--gray-100)}
.cx-brandlogo{width:30px;height:30px;border-radius:8px;background:var(--cx-brand,#00ad4a);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;transition:background .5s ease}
.cx-brand-name{font-size:13px;font-weight:750;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-nav-i{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;font-size:12px;color:var(--gray-600);font-weight:500;margin-bottom:2px}
.cx-nav-i .material-symbols-outlined{font-size:16px}
.cx-nav-i.on{background:var(--cx-brand-tint,rgba(0, 173, 74,.1));color:var(--cx-brand,#00ad4a);font-weight:650}
.cx-bwin-main{padding:18px}
.cx-bwin-main h5{margin:0 0 3px;font-size:15px;letter-spacing:-.02em;color:var(--cx-ink)}
.cx-bwin-main .mut{font-size:11.5px;color:var(--gray-500);margin:0 0 15px}
.cx-bk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.cx-bk-kpi{border:1px solid var(--gray-200);border-radius:12px;padding:12px}
.cx-bk-kpi .v{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--cx-brand,#00ad4a);transition:color .5s ease}
.cx-bk-kpi .k{font-size:10px;color:var(--gray-500);margin-top:2px}
.cx-bk-bars{display:flex;align-items:flex-end;gap:7px;height:64px;padding:12px;border:1px solid var(--gray-200);border-radius:12px}
.cx-bk-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--cx-brand,#00ad4a);opacity:.85;transition:background .5s ease}
.cx-bbanner{background:#fff;border-radius:18px;box-shadow:var(--cx-shadow-float);border:1px solid var(--gray-200);overflow:hidden}
.cx-bbanner .hd{height:7px;background:var(--cx-brand,#00ad4a);transition:background .5s ease}
.cx-bbanner .ct{padding:20px}
.cx-bbanner .ti{display:flex;align-items:center;gap:9px;font-weight:750;font-size:15px;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-bbanner .ti .ico{width:30px;height:30px;border-radius:9px;background:var(--cx-brand-tint,rgba(0, 173, 74,.12));color:var(--cx-brand,#00ad4a);display:grid;place-items:center;transition:.5s ease}
.cx-bbanner .ti .ico .material-symbols-outlined{font-size:18px}
.cx-bbanner p{font-size:12.5px;line-height:1.55;color:var(--gray-600);margin:12px 0 16px}
.cx-bbanner .bts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cx-bbanner .bts span{text-align:center;font-size:12.5px;font-weight:650;padding:11px;border-radius:11px}
.cx-bbanner .bts .pri{background:var(--cx-brand,#00ad4a);color:#fff;transition:background .5s ease}
.cx-bbanner .bts .sec{background:var(--gray-100);color:var(--gray-700)}
.cx-bbanner .lk{display:flex;gap:14px;margin-top:12px;font-size:11px;color:var(--gray-400)}
.cx-wl-feats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.cx-wl-feat{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:18px 16px;transition:.4s var(--cx-ease)}
.cx-wl-feat:hover{transform:translateY(-4px);box-shadow:var(--cx-shadow-soft);border-color:var(--gray-300)}
.cx-wl-feat .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#1d1d1b,#3a3a35);color:#fff;display:grid;place-items:center;margin-bottom:12px}
.cx-wl-feat .ic .material-symbols-outlined{font-size:21px}
.cx-wl-feat b{display:block;font-size:14px;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-wl-feat span{display:block;font-size:12px;color:var(--gray-500);margin-top:4px;line-height:1.45}
.cx-wl-feats{grid-template-columns:repeat(4,1fr)}
/* white-label: frame sito-cliente + banner brandizzato + confronto footer */
.cx-wl .cx-ck{--cx-pri:var(--cx-brand,#00ad4a)}
.cx-wl-frame{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--cx-shadow-float)}
.cx-wl-canvas{min-height:320px}
.cx-wl-banner{right:16px;bottom:16px;width:300px}
.ck-brandfoot{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;color:var(--gray-700)}
.cx-wl-blogo{width:22px;height:22px;border-radius:6px;background:var(--cx-brand,#00ad4a);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex-shrink:0;transition:background .5s ease}
.cx-wl-compare{display:flex;flex-direction:column;justify-content:center;gap:11px}
.cx-wl-cmplbl{font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.cx-wl-cc{border:1px solid var(--gray-200);border-radius:14px;padding:14px 16px;background:#fff}
.cx-wl-cc .tag{display:block;font-size:11px;font-weight:600;color:var(--gray-400);margin-bottom:8px}
.cx-wl-cc .foot{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--gray-700)}
.cx-wl-cc.off{background:var(--gray-50)}
.cx-wl-cc.off .foot{color:var(--gray-400)}
.cx-wl-cc.off .foot .material-symbols-outlined{font-size:16px;color:var(--gray-300)}
.cx-wl-cc.on{border-color:var(--cx-brand,#00ad4a);box-shadow:0 0 0 3px var(--cx-brand-soft,rgba(0, 173, 74,.14))}
.cx-wl-arrow{align-self:center;color:var(--gray-300);font-size:20px}

/* ---------- LAYOUT CHOOSER (dark) ---------- */
.cx-lab{padding:clamp(72px,9vw,120px) 0;background:var(--cx-ink);color:#fff}
.cx-lab .cx-h2{color:#fff}
.cx-lab .cx-sub{color:rgba(255,255,255,.6)}
.cx-lab .cx-eyebrow{color:#2ec96b;background:rgba(0, 173, 74,.14);border-color:rgba(0, 173, 74,.3)}
.cx-lab .cx-eyebrow .cx-dot{background:#2ec96b}
.cx-lab-grid{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin-top:56px}
.cx-lab-opts{display:flex;flex-direction:column;gap:12px}
.cx-lab-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px 16px;cursor:pointer;color:#fff;font-family:inherit;transition:.35s var(--cx-ease)}
.cx-lab-opt:hover{background:rgba(255,255,255,.07)}
.cx-lab-opt.on{background:rgba(0, 173, 74,.14);border-color:rgba(0, 173, 74,.5)}
.cx-lab-opt .ic{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex-shrink:0;transition:.35s}
.cx-lab-opt.on .ic{background:var(--primary)}
.cx-lab-opt .ic .material-symbols-outlined{font-size:23px}
.cx-lab-opt .tx b{display:block;font-size:15px;letter-spacing:-.01em}
.cx-lab-opt .tx span{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.cx-lab-opt .chk{margin-left:auto;color:var(--primary);opacity:0;transition:.3s}
.cx-lab-opt.on .chk{opacity:1}
.cx-lab-stage{position:relative;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--cx-shadow-float);min-height:430px;background:linear-gradient(180deg,#fbfbfa,#f0f0ee)}
.cx-site-top{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#fff;border-bottom:1px solid var(--gray-200)}
.cx-site-top .cx-dots span{background:var(--gray-300)}
.cx-site-top .u{flex:1;display:flex;align-items:center;gap:7px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:7px;padding:5px 11px;font-size:11.5px;color:var(--gray-500);max-width:260px}
.cx-site-top .u .material-symbols-outlined{font-size:13px;color:var(--success)}
.cx-site-canvas{position:relative;padding:26px 30px 30px;min-height:380px}
.cx-fk-nav{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.cx-fk-logo{width:74px;height:13px;border-radius:5px;background:var(--gray-300)}
.cx-fk-nav .sp{flex:1}
.cx-fk-nav i{width:44px;height:9px;border-radius:5px;background:var(--gray-200)}
.cx-fk-hero{max-width:62%}
.cx-fk-hero .t1{height:24px;width:88%;border-radius:7px;background:var(--gray-300);margin-bottom:11px}
.cx-fk-hero .t2{height:24px;width:60%;border-radius:7px;background:var(--gray-300);margin-bottom:18px}
.cx-fk-hero .l{height:9px;border-radius:5px;background:var(--gray-200);margin-bottom:8px}
.cx-fk-hero .l.w1{width:80%}.cx-fk-hero .l.w2{width:66%}
.cx-fk-hero .b{margin-top:16px;width:120px;height:34px;border-radius:9px;background:var(--gray-300)}
.cx-fk-cards{position:absolute;right:30px;top:84px;display:flex;flex-direction:column;gap:12px}
.cx-fk-card{width:150px;height:54px;border-radius:13px;background:#fff;border:1px solid var(--gray-200);box-shadow:var(--cx-shadow-soft)}
/* Componente banner fedele al widget reale (bar/box/mini = stesso markup; modern = tab+chip+gemelli) */
.cx-ck{position:absolute;background:#fff;box-shadow:0 -2px 30px -8px rgba(16,16,14,.22),0 18px 50px -20px rgba(16,16,14,.4);border:1px solid var(--gray-200);transition:all .55s var(--cx-ease)}
.cx-ck .ck-mod{display:none}
.cx-ck.modern .ck-std{display:none}
.cx-ck.modern .ck-mod{display:block}
/* contenuto standard: titolo + descrizione + link doc + bottoni (Rifiuta·Accetta·Personalizza) */
.cx-ck .ck-std{padding:18px 22px}
.cx-ck .ck-title{font-size:15px;font-weight:700;margin:0 0 7px;color:var(--cx-ink);letter-spacing:-.01em}
.cx-ck .ck-desc{font-size:12px;line-height:1.5;color:var(--gray-600);margin:0 0 11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-ck .ck-links{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:14px}
.cx-ck .ck-links a{color:var(--cx-pri,#00ad4a);text-decoration:none;font-weight:500}
.cx-ck .ck-links i{color:var(--gray-300);font-style:normal}
.cx-ck .ck-buttons{display:flex;flex-wrap:wrap;gap:9px}
.cx-ck .ck-b{font-size:12px;font-weight:600;padding:9px 16px;border-radius:9px;white-space:nowrap;text-align:center}
.cx-ck .ck-b.sec{background:#6c757d;color:#fff}
.cx-ck .ck-b.pri{background:var(--cx-pri,#00ad4a);color:#fff}
.cx-ck .ck-b.out{background:transparent;border:1.5px solid var(--gray-300);color:var(--gray-700)}
/* bar: barra full-width in basso, contenuto centrato (max 800px nel reale) */
.cx-ck.bar{left:0;right:0;bottom:0;border-radius:0;border-left:0;border-right:0;border-bottom:0}
.cx-ck.bar .ck-std{max-width:620px;margin:0 auto;padding:18px 24px}
/* box: card 500px in basso a destra */
.cx-ck.box{right:22px;bottom:22px;left:auto;width:450px;border-radius:14px}
/* mini: card 350px compatta */
.cx-ck.mini{right:22px;bottom:22px;left:auto;width:300px;border-radius:13px}
.cx-ck.mini .ck-std{padding:14px 16px}
.cx-ck.mini .ck-title{font-size:13.5px;margin-bottom:5px}
.cx-ck.mini .ck-desc{font-size:11px;margin-bottom:10px}
.cx-ck.mini .ck-links{margin-bottom:11px}
.cx-ck.mini .ck-b{padding:8px 13px;font-size:11.5px}
/* modern: bordo-top colorato 8px + tab + chip categorie + bottoni gemelli + powered-by */
.cx-ck.modern{right:22px;bottom:22px;left:auto;width:332px;border-radius:14px;padding:0;overflow:hidden;border-top:8px solid var(--cx-pri,#00ad4a)}
.cx-ck .ck-tabs{display:flex;gap:20px;padding:13px 18px 0;border-bottom:1px solid var(--gray-100)}
.cx-ck .ck-tabs span{font-size:12px;font-weight:600;color:var(--gray-400);padding-bottom:10px}
.cx-ck .ck-tabs span.on{color:var(--cx-pri,#00ad4a);border-bottom:2px solid var(--cx-pri,#00ad4a)}
.cx-ck .ck-mbody{padding:14px 18px}
.cx-ck .ck-mdesc{font-size:11.5px;line-height:1.5;color:var(--gray-600);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-ck .ck-chipslabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400);margin-bottom:8px}
.cx-ck .ck-chips{display:flex;flex-wrap:wrap;gap:7px}
.cx-ck .ck-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--gray-700);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:100px;padding:5px 11px}
.cx-ck .ck-chip .material-symbols-outlined{font-size:13px;color:var(--cx-pri,#00ad4a)}
.cx-ck .ck-mfooter{padding:12px 18px 15px;border-top:1px solid var(--gray-100)}
.cx-ck .ck-twins{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.cx-ck .ck-twins span{font-size:12px;font-weight:600;padding:10px;border-radius:9px;text-align:center}
.cx-ck .ck-twins .sec{background:#6c757d;color:#fff}
.cx-ck .ck-twins .pri{background:var(--cx-pri,#00ad4a);color:#fff}
.cx-ck .ck-powered{font-size:10.5px;color:var(--gray-400);text-align:right}
.cx-ck .ck-powered b{color:var(--gray-500);font-weight:600}
/* white-label: forma angoli per-brand (soft · squadrato · pill) — morphing fluido al cambio brand */
.cx-wl-banner .ck-twins span,.cx-wl-banner .ck-chip,.cx-wl-banner .cx-wl-blogo{transition:border-radius .5s var(--cx-ease),background .5s ease}
.cx-wl-banner.cx-wl-soft{border-radius:16px}
.cx-wl-banner.cx-wl-soft .ck-twins span{border-radius:10px}
.cx-wl-banner.cx-wl-soft .cx-wl-blogo{border-radius:7px}
.cx-wl-banner.cx-wl-squared{border-radius:0}
.cx-wl-banner.cx-wl-squared .ck-twins span{border-radius:0}
.cx-wl-banner.cx-wl-squared .ck-chip{border-radius:0}
.cx-wl-banner.cx-wl-squared .cx-wl-blogo{border-radius:0}
.cx-wl-banner.cx-wl-pill{border-radius:22px}
.cx-wl-banner.cx-wl-pill .ck-twins span{border-radius:100px}
.cx-wl-banner.cx-wl-pill .cx-wl-blogo{border-radius:50%}
.cx-lab-palette{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.cx-lab-palette .lbl{font-size:13px;color:rgba(255,255,255,.55);font-weight:500}
.cx-sw-row{display:flex;gap:9px}
.cx-sw{width:30px;height:30px;border-radius:9px;cursor:pointer;border:2px solid transparent;transition:.25s;position:relative}
.cx-sw.on{border-color:#fff;transform:scale(1.08)}
.cx-sw.on::after{content:"check";font-family:'Material Symbols Outlined';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ---------- DASHBOARD ---------- */
.cx-dash{padding:clamp(72px,9vw,120px) 0;background:#fff}
.cx-dash-card{margin-top:54px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-2xl);box-shadow:0 40px 90px -55px rgba(16,16,14,.5);overflow:hidden}
.cx-dash-top{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--gray-100);background:#fcfcfb}
.cx-dash-top .cx-dots span:nth-child(1){background:#ff5f57}.cx-dash-top .cx-dots span:nth-child(2){background:#febc2e}.cx-dash-top .cx-dots span:nth-child(3){background:#28c840}
.cx-dash-top b{font-size:13.5px;margin-left:6px;color:var(--cx-ink)}
.cx-dash-top .who{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gray-500)}
.cx-dash-top .who .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.cx-dash-in{display:grid;grid-template-columns:1.3fr 1fr}
.cx-dash-l{padding:24px;border-right:1px solid var(--gray-100)}
.cx-dash-r{padding:24px}
.cx-dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.cx-dk{border:1px solid var(--gray-200);border-radius:14px;padding:15px}
.cx-dk .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:9px}
.cx-dk .ic .material-symbols-outlined{font-size:18px}
.cx-dk.a .ic{background:rgba(16,185,129,.12);color:#0c8a4f}
.cx-dk.b .ic{background:rgba(0, 173, 74,.12);color:var(--primary)}
.cx-dk.c .ic{background:rgba(245,158,11,.14);color:#a25c00}
.cx-dk .v{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--cx-ink)}
.cx-dk .k{font-size:11.5px;color:var(--gray-500);margin-top:1px}
.cx-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cx-sec-h b{font-size:14px;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-sec-h .more{font-size:12px;color:var(--primary);font-weight:600}
.cx-tbl{display:flex;flex-direction:column;gap:8px}
.cx-tr{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--gray-200);border-radius:12px;transition:.25s}
.cx-tr:hover{border-color:var(--gray-300);box-shadow:var(--cx-shadow-soft)}
.cx-tr .cx-fav{width:30px;height:30px;border-radius:8px;background:var(--gray-100);display:grid;place-items:center;color:var(--gray-500)}
.cx-tr .cx-fav .material-symbols-outlined{font-size:17px}
.cx-tr .nm{flex:1;min-width:0}
.cx-tr .nm b{font-size:13px;font-weight:650;display:block;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-tr .nm span{font-size:11px;color:var(--gray-400)}
.cx-tr .cc{text-align:right}
.cx-tr .cc b{font-size:13px;font-weight:700;display:block;color:var(--cx-ink)}
.cx-tr .cc span{font-size:10.5px;color:var(--gray-400)}
.cx-dash-chart{border:1px solid var(--gray-200);border-radius:16px;padding:18px;margin-bottom:18px}
.cx-dash-chart .ch-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.cx-dash-chart .ch-h .v{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--cx-ink)}
.cx-dash-chart .ch-h .v small{font-size:12px;color:var(--success);font-weight:700;margin-left:6px}
.cx-dash-chart .ch-h .lbl{font-size:11.5px;color:var(--gray-500)}
.cx-bars{display:flex;align-items:flex-end;gap:8px;height:90px}
.cx-bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--primary-light),var(--primary));opacity:.9}
.cx-bars i:last-child{opacity:1;box-shadow:0 0 0 3px rgba(0, 173, 74,.15)}
.cx-mini-list{display:flex;flex-direction:column;gap:10px}
.cx-ml{display:flex;align-items:center;gap:11px}
.cx-ml .ic{width:30px;height:30px;border-radius:8px;background:rgba(245,158,11,.13);color:#a25c00;display:grid;place-items:center}
.cx-ml .ic .material-symbols-outlined{font-size:16px}
.cx-ml .tx{flex:1}.cx-ml .tx b{font-size:12.5px;display:block;font-weight:650;color:var(--cx-ink)}
.cx-ml .tx span{font-size:11px;color:var(--gray-400)}
.cx-ml .dd{font-size:11px;font-weight:700;color:#a25c00}

@media(max-width:991px){
    .cx-wl-cols,.cx-lab-grid,.cx-dash-in{grid-template-columns:1fr}
    .cx-wl-feats{grid-template-columns:repeat(2,1fr)}
    .cx-dash-l{border-right:0;border-bottom:1px solid var(--gray-100)}
    .cx-lab-stage{min-height:360px}
    .cx-split{grid-template-columns:1fr;gap:34px}
    .cx-split.rev .cx-split-text{order:0}
}

/* ---------- Split sections (Termini, Consent Mode, Agenzie) in stile cx- ---------- */
.cx-split-sec{padding:clamp(72px,9vw,110px) 0;background:#fff}
.cx-split-sec.alt{background:var(--gray-50)}
.cx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center}
.cx-split.rev .cx-split-text{order:2}
.cx-split-p{font-size:15.5px;line-height:1.6;color:var(--gray-600);margin:18px 0 0}
.cx-checklist{list-style:none;padding:0;margin:26px 0 28px;display:flex;flex-direction:column;gap:14px}
.cx-checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--gray-600)}
.cx-checklist li .material-symbols-outlined{color:var(--success);font-size:22px;flex-shrink:0;margin-top:1px}
.cx-checklist li b{color:var(--cx-ink);font-weight:650}
.cx-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:13px;border:0;cursor:pointer;background:linear-gradient(180deg,var(--primary-light),var(--primary));color:#fff;text-decoration:none;box-shadow:0 8px 22px -8px rgba(0, 173, 74,.5);transition:transform .25s var(--cx-ease),box-shadow .25s var(--cx-ease)}
.cx-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0, 173, 74,.6);color:#fff}
.cx-btn .material-symbols-outlined{font-size:20px}
.cx-vcard{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-2xl);box-shadow:var(--cx-shadow-float);padding:26px}
.cx-split-sec.alt .cx-vcard{box-shadow:0 30px 70px -45px rgba(16,16,14,.45)}
.cx-vcard-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)}
.cx-vcard-h .ic{width:42px;height:42px;border-radius:12px;background:rgba(0, 173, 74,.1);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
.cx-vcard-h .ic .material-symbols-outlined{font-size:23px}
.cx-vcard-h h3{font-size:16.5px;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-vcard-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-100)}
.cx-vcard-foot p{margin:0;font-size:12.5px;line-height:1.5;color:var(--gray-500);font-style:italic}
.cx-steps{display:flex;flex-direction:column;gap:10px}
.cx-step{display:flex;align-items:center;gap:13px;padding:11px 13px;border:1px solid var(--gray-200);border-radius:13px;background:#fff}
.cx-step.active{border-color:rgba(0, 173, 74,.4);background:rgba(0, 173, 74,.04)}
.cx-step .si{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--gray-100);color:var(--gray-400);flex-shrink:0}
.cx-step .si .material-symbols-outlined{font-size:17px}
.cx-step.done .si{background:rgba(16,185,129,.14);color:#0c8a4f}
.cx-step.active .si{background:var(--primary);color:#fff}
.cx-step .st{display:flex;flex-direction:column}
.cx-step .sl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400)}
.cx-step .sn{font-size:13.5px;font-weight:600;color:var(--cx-ink)}
.cx-steps-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-100);flex-wrap:wrap}
.cx-langpills{display:flex;gap:6px}
.cx-langpills span{font-size:10.5px;font-weight:700;color:var(--gray-600);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:7px;padding:3px 7px}
.cx-steps-foot .note{font-size:11.5px;color:var(--gray-500)}
.cx-stat-hl{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 20px;border-radius:16px;background:rgba(0, 173, 74,.06);border:1px solid rgba(0, 173, 74,.14);border-left:4px solid var(--primary)}
.cx-stat-hl .v{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--primary);line-height:1;flex-shrink:0}
.cx-stat-hl .d{font-size:13.5px;line-height:1.4;color:var(--gray-600)}
.cx-map{display:flex;flex-direction:column;gap:10px}
.cx-map-row{display:flex;align-items:center;gap:10px}
.cx-map-row .cat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--cx-ink);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:9px;padding:9px 11px;white-space:nowrap}
.cx-map-row .cat .material-symbols-outlined{font-size:16px;color:var(--primary)}
.cx-map-row .arr{font-size:17px;color:var(--gray-300);flex-shrink:0}
.cx-map-row code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#0c8a4f;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.18);border-radius:9px;padding:9px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-cta-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-2xl);box-shadow:var(--cx-shadow-float);padding:40px 32px;text-align:center}
.cx-cta-card .ic{width:60px;height:60px;border-radius:18px;margin:0 auto 18px;background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0, 173, 74,.55)}
.cx-cta-card .ic .material-symbols-outlined{font-size:30px}
.cx-cta-card h3{font-size:21px;font-weight:750;letter-spacing:-.02em;margin:0 0 10px;color:var(--cx-ink)}
.cx-cta-card p{font-size:14.5px;line-height:1.6;color:var(--gray-600);margin:0 auto 22px;max-width:380px}

/* ---------- How it works (Tre passaggi) in stile cx- ---------- */
.cx-steps-sec{padding:clamp(72px,9vw,110px) 0;background:#fff}
.cx-how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,60px);align-items:center;margin-top:54px}
.cx-how-steps{position:relative;display:flex;flex-direction:column;gap:10px}
.cx-how-steps::before{content:"";position:absolute;left:21px;top:34px;bottom:34px;width:2px;background:linear-gradient(180deg,rgba(0, 173, 74,.5),rgba(0, 173, 74,.08))}
.cx-how-step{display:flex;gap:18px;padding:6px 0;position:relative}
.cx-how-step .num{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--primary-light),var(--primary));box-shadow:0 8px 20px -8px rgba(0, 173, 74,.5)}
.cx-how-step .tx{padding-top:6px}
.cx-how-step .tx h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 5px;color:var(--cx-ink)}
.cx-how-step .tx p{font-size:14.5px;line-height:1.55;color:var(--gray-600);margin:0}
.cx-how-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.cx-how-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--gray-700);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:100px;padding:7px 13px}
.cx-how-badge .material-symbols-outlined{font-size:16px;color:var(--primary)}
.cx-codecard{background:#15140f;border:1px solid #2a2824;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.cx-codecard-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#1d1b16;border-bottom:1px solid #2a2824}
.cx-codecard-bar .d{width:11px;height:11px;border-radius:50%}
.cx-codecard-bar .d.r{background:#ff5f57}.cx-codecard-bar .d.y{background:#febc2e}.cx-codecard-bar .d.g{background:#28c840}
.cx-codecard-bar .lbl{margin-left:auto;font-size:11px;font-weight:600;color:#8a8780;background:rgba(255,255,255,.06);padding:3px 10px;border-radius:6px}
.cx-codecard pre{margin:0;padding:22px;overflow-x:auto}
.cx-codecard code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:#e8e6e0;white-space:pre}
.cx-codecard .cm{color:#6b6860}
.cx-codecard .tg{color:#2ec96b}
.cx-codecard .at{color:#e0b341}
.cx-codecard .st{color:#7fcc8f}
@media(max-width:991px){.cx-how-grid{grid-template-columns:1fr}}

/* ---------- Scanner GDPR: armonizzazione grafica (solo CSS; markup/JS/ID intatti) ---------- */
.free-check-section{background:#0a0a0a;position:relative;overflow:hidden;isolation:isolate}
.free-check-section::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 85% 92%,rgba(0, 173, 74,.42),transparent 60%),radial-gradient(50% 50% at 6% 2%,rgba(240,106,53,.14),transparent 60%),linear-gradient(160deg,#0a0a0a 0%,#161310 60%,#1c1612 100%)}
.free-check-section::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;-webkit-mask:radial-gradient(72% 72% at 50% 38%,#000,transparent);mask:radial-gradient(72% 72% at 50% 38%,#000,transparent)}
.free-check-card{border-radius:28px;border:1px solid rgba(255,255,255,.08);box-shadow:0 50px 100px -45px rgba(0,0,0,.75);max-width:780px;margin-left:auto;margin-right:auto}
.free-check-title{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;font-weight:800}
.free-check-card .section-badge{margin-bottom:14px}

/* ---------- Armonizzazione header condivisi alla scala cx- (homepage + sotto-pagine) ---------- */
.section-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;font-weight:650;letter-spacing:.12em;border:1px solid rgba(0, 173, 74,.16);background:rgba(0, 173, 74,.08)}
.section-title{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.07;color:var(--gray-900)}
.faq-section-title{font-size:clamp(1.85rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.section-subtitle{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.55;color:var(--gray-600)}

/* ---------- Sotto-pagine: hero unificato al gradiente CHIARO Apple (override su inline via body) ---------- */
body .pricing-hero, body .partner-hero, body .contact-hero, body .faq-hero,
body .normativa-hero, body .news-hero, body .tc-hero, body .verify-hero{
    background:
        radial-gradient(38vw 38vw at 12% 8%, rgba(255,178,150,.5), transparent 62%),
        radial-gradient(40vw 40vw at 88% 4%, rgba(255,194,168,.45), transparent 64%),
        radial-gradient(120vmax 80vmax at 50% -10%, #fff, var(--ap-bg));
    color:var(--ap-ink);
    position:relative;overflow:hidden;
}
/* testi hero sottopagine: scuri sul nuovo chiaro */
body .pricing-hero h1, body .partner-hero h1, body .contact-hero h1, body .faq-hero h1,
body .normativa-hero h1, body .news-hero h1, body .tc-hero h1, body .verify-hero h1{
    color:var(--ap-ink);
}
body .pricing-hero p, body .partner-hero p, body .contact-hero p, body .faq-hero p,
body .normativa-hero p, body .news-hero p, body .tc-hero p, body .verify-hero p{
    color:var(--ap-ink2);
}
/* neutralizza il vecchio glow su ::before (lascia trasparire il nuovo gradiente) */
body .partner-hero::before, body .normativa-hero::before, body .news-hero::before,
body .tc-hero::before, body .verify-hero::before{background-image:none}
body .pricing-hero h1, body .partner-hero h1, body .contact-hero h1, body .faq-hero h1,
body .normativa-hero h1, body .news-hero h1, body .tc-hero h1, body .verify-hero h1{
    font-size:clamp(2.2rem,5vw,3.6rem);font-weight:850;letter-spacing:-.035em;line-height:1.05
}

/* ============================================================
   FIX RESPONSIVE MOBILE — sezioni cx- e nav (smartphone <576px)
   Le sezioni cx- avevano un solo breakpoint @991px: sotto restavano
   con dimensioni desktop fisse. Questo blocco le adatta agli smartphone.
   ============================================================ */

/* Nav: logo SVG ridotto anche tra 481-767px (sotto 480 resta 30px) */
@media (max-width:767.98px) and (min-width:481px){
    .nav-logo svg{height:32px}
}
/* Nav mobile: Accedi + select lingue sempre visibili nella barra. Stringiamo
   gli spazi e il logo perché logo + select + Accedi + hamburger ci stiano. */
@media (max-width:767.98px){
    .nav-right{gap:.5rem}
    .nav-actions{gap:.4rem}
    .nav-btn-accedi{padding:6px 12px;font-size:13px}
    .nav-lang-btn{font-size:12px;padding:5px 8px 5px 5px}
}
@media (max-width:400px){
    .nav-logo svg{height:26px}
    .nav-right{gap:.4rem}
    .nav-btn-accedi{padding:5px 9px}
    .nav-lang-btn .nlcode{display:none}
}

/* FIX: .cx-split (Termini, Consent Mode, Per Agenzie) NON collassava su
   tablet/mobile. La regola di collasso era nel @media(991) PRIMA della
   definizione base a 2 colonne, quindi la base vinceva sempre. Qui la
   riapplichiamo DOPO la base, così le due colonne si impilano davvero. */
@media (max-width:991.98px){
    .cx-split{grid-template-columns:1fr;gap:34px}
    .cx-split.rev .cx-split-text{order:0}

    /* HERO: mostriamo il mockup dashboard (.hero-image) anche su mobile/tablet,
       prima nascosto. Lo appiattiamo (niente tilt 3D), lo centriamo e lo
       stacchiamo dal testo. I float decorativi negativi vengono gestiti sotto. */
    .hero-image{padding-left:0;margin:2.5rem auto 0;max-width:460px}
    .cx-hv{perspective:none}
    .cx-hv-window{transform:none}
    .cx-hv:hover .cx-hv-window{transform:none}
}

@media (max-width:575.98px){
    /* --- Padding verticale sezioni ridotto su mobile --- */
    .cx-wl,.cx-lab,.cx-dash{padding:48px 0}
    .cx-split-sec,.cx-steps-sec{padding:48px 0}

    /* --- White-label --- */
    .cx-wl-top{margin-bottom:28px}
    .cx-wl-switch{display:flex;width:100%}
    .cx-wl-switch button{flex:1;justify-content:center;padding:9px 8px;font-size:13px}
    .cx-wl-stage{padding:14px}
    .cx-wl-feats{grid-template-columns:1fr}

    /* Preview banner (White-label + Layout chooser): su desktop il banner è
       in position:absolute sopra lo scheletro di un finto sito. Su mobile lo
       scheletro è più alto dello spazio utile -> il banner veniva tagliato e
       spuntavano blocchi grigi a caso. Soluzione: niente scheletro, banner in
       flusso normale dentro la finestra-browser, che cresce per contenerlo. */
    .cx-site-canvas{padding:14px;min-height:0}
    .cx-site-canvas .cx-fk-nav,
    .cx-site-canvas .cx-fk-hero,
    .cx-fk-cards{display:none}
    .cx-ck{position:static;left:auto;right:auto;bottom:auto;margin:0}
    .cx-ck.bar,.cx-ck.box,.cx-ck.mini,.cx-ck.modern{width:auto}
    .cx-ck.bar{border-radius:14px}
    .cx-lab-stage{min-height:0}

    /* --- Dashboard preview: KPI a 1 colonna invece di 3 schiacciate --- */
    .cx-dash-kpis{grid-template-columns:1fr}

    /* --- Consent Mode: mappatura categoria -> codice leggibile (no ellipsis) --- */
    .cx-map-row{flex-wrap:wrap}
    .cx-map-row .arr{display:none}
    .cx-map-row code{flex-basis:100%;white-space:normal;overflow:visible;text-overflow:clip}

    /* --- Stat highlight: numero sopra, testo sotto --- */
    .cx-stat-hl{flex-direction:column;align-items:flex-start;gap:8px}

    /* --- Card con padding desktop troppo generoso --- */
    .cx-cta-card{padding:28px 20px}
    .cx-vcard{padding:20px}

    /* --- Hero: i 3 valori tutti su UNA riga (prima andavano 2+1) --- */
    .hero-stats{flex-wrap:nowrap;gap:.6rem}
    .stat-item{min-width:0;flex:1}
    .stat-number{font-size:1.4rem}
    .stat-label{font-size:.72rem;line-height:1.2}

    /* HERO mockup */
    .hero-image{margin-top:2rem;max-width:100%}
    /* Banner cookie: lo mostriamo IN FLUSSO come card pulita SUBITO SOTTO la
       finestra dashboard, stessa larghezza e allineata (niente sovrapposizione,
       che usciva dalla finestra). Si capisce comunque che è un cookie banner. */
    .cx-hv-float{position:static;left:auto;right:auto;bottom:auto;width:auto;
        margin:14px 0 0;animation:none}
    .cx-hv-chip{display:none}
    /* compattiamo l'interno della finestra per stare bene anche a 360px */
    .cx-hv-body{grid-template-columns:46px 1fr;min-height:0}
    .cx-hv-main{padding:14px}
    .cx-hv-kpis{gap:7px}
    .cx-kpi{padding:9px 8px}
    .cx-kpi .v{font-size:15px}
    .cx-hv-row{padding:8px 9px;gap:8px}
    .cx-hv-row .cx-dn{font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    /* --- Titoli sezione: floor piu basso su schermi stretti --- */
    .section-title{font-size:clamp(1.6rem,7vw,2rem)}
}

/* =====================================================================
   APPLE THEME — restyle premium chiaro (hero + linguaggio globale)
   Aggiunto in coda: vince per ordine di cascata. Backup: _backup-apple-20260628/
   Per tornare ai bottoni arancio: cambia --ap-cta in var(--primary).
   ===================================================================== */
:root{
  --ap-ink:#1d1d1f;
  --ap-ink2:#6e6e73;
  --ap-line:rgba(0,0,0,.08);
  --ap-bg:#fbfbfd;
  --ap-cta:#1d1d1f;          /* CTA principale: nero Apple (accento arancio resta su badge/gradienti/icone) */
  --ap-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- BASE ---------- */
body{ background:var(--ap-bg); }
h1,h2,h3,h4,h5,h6{ letter-spacing:-.025em; }

/* ---------- BOTTONI (pill premium) ---------- */
.btn{ border-radius:999px; font-weight:600; transition:transform .35s var(--ap-ease), box-shadow .35s var(--ap-ease), background .25s, color .25s, border-color .25s; }
.btn-lg{ padding:.85rem 1.6rem; font-size:1rem; }
.btn-primary{ background:var(--ap-cta); border-color:var(--ap-cta); color:#fff; box-shadow:0 8px 22px -8px rgba(0,0,0,.45); }
.btn-primary:hover{ background:#000; border-color:#000; color:#fff; transform:translateY(-2px) scale(1.02); box-shadow:0 14px 30px -10px rgba(0,0,0,.5); }
.btn-primary .material-symbols-outlined{ transition:transform .35s var(--ap-ease); }
.btn-primary:hover .material-symbols-outlined{ transform:translateX(3px); }
.btn-outline-light,.btn-outline-primary,.btn-secondary{ background:rgba(255,255,255,.6); border:1px solid var(--ap-line); color:var(--ap-ink); backdrop-filter:blur(8px); }
.btn-outline-light:hover,.btn-outline-primary:hover,.btn-secondary:hover{ background:#fff; border-color:rgba(0,0,0,.16); color:var(--ap-ink); transform:translateY(-2px); }

/* ---------- BADGE / TITOLI SEZIONE ---------- */
.section-badge{
  background:rgba(255,255,255,.7); color:var(--ap-ink);
  border:1px solid var(--ap-line); text-transform:none; letter-spacing:.01em;
  font-weight:600; padding:7px 14px 7px 12px; backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 1px 2px rgba(0,0,0,.04); display:inline-flex; align-items:center; gap:8px;
}
.section-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(0, 173, 74,.16); }
.section-title{ letter-spacing:-.035em; font-weight:700; }
.text-gradient{ background:linear-gradient(110deg,var(--primary) 10%,var(--primary-light) 55%,#FF9D52 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- CARD (vetro morbido + lift) ---------- */
.feature-card,.testimonial-card,.agency-card,.consent-mode-card,
.cx-wl-feat,.cx-dash-card,.news-card,.certification-card,.cert-card,.pricing-card{
  border-radius:20px !important;
  border:1px solid var(--ap-line) !important;
  box-shadow:0 10px 30px -18px rgba(20,20,40,.22) !important;
  transition:transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease), border-color .4s !important;
}
.feature-card:hover,.testimonial-card:hover,.agency-card:hover,
.cx-wl-feat:hover,.news-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 26px 60px -26px rgba(20,20,40,.32) !important;
  border-color:rgba(0,0,0,.04) !important;
}
.features-section{ background:linear-gradient(180deg,#fff,#f6f6f9) !important; }

/* =====================================================================
   HERO — da scuro a chiaro premium (markup invariato)
   ===================================================================== */
.hero-section{
  background:radial-gradient(120vmax 80vmax at 50% -10%, #fff, var(--ap-bg)) !important;
  color:var(--ap-ink);
}
/* aurora soffusa (riusa .hero-bg) */
.hero-bg{
  background-image:
    radial-gradient(38vw 38vw at 12% 8%, rgba(0,173,74,.30), transparent 62%),
    radial-gradient(40vw 40vw at 88% 4%, rgba(46,201,107,.26), transparent 64%),
    radial-gradient(34vw 34vw at 70% 96%, rgba(0,173,74,.14), transparent 66%) !important;
  filter:saturate(1.02);
  animation:apAura 24s var(--ap-ease) infinite alternate;
}
@keyframes apAura{ 0%{ transform:translate3d(0,0,0) scale(1) } 100%{ transform:translate3d(2%,1.5%,0) scale(1.08) } }
/* griglia a puntini, mascherata */
.hero-section::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(110vmax 80vmax at 50% 8%, #000 28%, transparent 74%);
          mask-image:radial-gradient(110vmax 80vmax at 50% 8%, #000 28%, transparent 74%);
}

.hero-badge{
  background:rgba(255,255,255,.7) !important; border:1px solid var(--ap-line) !important;
  color:var(--ap-ink) !important; font-weight:600; backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 1px 2px rgba(0,0,0,.04); display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 12px;
}
.hero-badge::before{ content:""; width:7px;height:7px;border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(0, 173, 74,.16); }

.hero-title{ color:var(--ap-ink) !important; letter-spacing:-.035em; font-weight:700; }

.hero-slogan{ color:var(--ap-ink2) !important; font-style:normal; font-weight:600; }
.hero-slogan .quote-mark{ color:var(--primary); opacity:.5; }
.slogan-text{ background:linear-gradient(90deg,var(--primary),#2ec96b,var(--primary)) !important; background-size:200% auto !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }

.hero-subtitle{ color:var(--ap-ink2) !important; }
.hero-trial-note{ color:var(--ap-ink2) !important; }
.hero-trial-note .material-symbols-outlined{ color:var(--primary); }

/* CTA: principale nero pill, secondaria ghost */
.hero-cta .btn-outline-light{ background:rgba(255,255,255,.6) !important; border:1px solid var(--ap-line) !important; color:var(--ap-ink) !important; backdrop-filter:blur(8px); }
.hero-cta .btn-outline-light:hover{ background:#fff !important; border-color:rgba(0,0,0,.16) !important; color:var(--ap-ink) !important; }

.hero-stats{ border-top:1px solid var(--ap-line); padding-top:24px; }
.stat-number{ color:var(--ap-ink) !important; letter-spacing:-.02em; }
.stat-label{ color:var(--ap-ink2) !important; }

/* mockup: ombra Apple morbida + base per tilt JS */
.hero-image{ perspective:1400px; }
.cx-hv-window{ box-shadow:0 50px 90px -40px rgba(20,20,40,.4), 0 18px 40px -24px rgba(20,20,40,.26) !important; }
.cx-hv{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .hero-bg{ animation:none !important; }
}

/* --- CTA visibili nelle sezioni scure (free-check): pill nero sparirebbe --- */
.free-check-section .btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; box-shadow:0 8px 22px -8px rgba(0, 173, 74,.5) !important; }
.free-check-section .btn-primary:hover{ background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; transform:translateY(-2px) scale(1.02); }
.free-check-section .btn-outline-light{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.22) !important; color:#fff !important; }
.free-check-section .btn-outline-light:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }

/* --- NAV su hero CHIARO: da non-scrollato i bianchi diventano scuri (leggibili) --- */
.landing-nav:not(.scrolled) .nav-logo svg .cls-consentio-1,
.landing-nav:not(.scrolled) .nav-logo svg .cls-consentio-2,
.landing-nav:not(.scrolled) .nav-logo svg text.cls-consentio-2{ fill:#1d1d1f !important; }
.landing-nav:not(.scrolled) .nav-links a{ color:var(--gray-700); }
.landing-nav:not(.scrolled) .nav-links a:hover{ color:var(--primary); }
.landing-nav:not(.scrolled) .nav-actions .btn-outline-light{ background:rgba(255,255,255,.6); border-color:var(--ap-line); color:var(--ap-ink); }
.landing-nav:not(.scrolled) .nav-actions .btn-outline-light:hover{ background:#fff; border-color:rgba(0,0,0,.16); color:var(--ap-ink); }
.landing-nav:not(.scrolled) .nav-lang-btn{ color:var(--gray-900); background:rgba(0,0,0,.04); border-color:var(--gray-300); }
.landing-nav:not(.scrolled) .nav-lang-btn:hover{ background:rgba(0,0,0,.07); }
.landing-nav:not(.scrolled) .nav-lang-btn .nlflag{ box-shadow:0 0 0 1px var(--gray-300); }
.landing-nav:not(.scrolled) .mobile-menu-toggle span{ background:var(--gray-800); }

/* --- NAV MOBILE su hero CHIARO: niente barra nera fissa (era retaggio tema scuro) --- */
@media (max-width: 767.98px) {
    .landing-nav:not(.scrolled){ background-color:transparent; backdrop-filter:none; }
    .landing-nav:not(.scrolled) .nav-logo img{ filter:none; }   /* se mai si usasse un <img>, niente invert su chiaro */
}

/* --- CTA custom allineate al nuovo pill (scanner + sezioni cx-) --- */
.scanner-submit-btn{ border-radius:999px !important; }
.cx-btn{ border-radius:999px !important; background:var(--ap-cta) !important; color:#fff !important; box-shadow:0 8px 22px -8px rgba(0,0,0,.45) !important; }
.cx-btn:hover{ background:#000 !important; color:#fff !important; box-shadow:0 14px 30px -10px rgba(0,0,0,.5) !important; transform:translateY(-2px); }

/* =====================================================================
   NUOVO HERO — demo prodotto interattiva (toggle = icona logo)
   Sostituisce la dashboard mockup; rinfresca lo sfondo (no griglia/aurora).
   ===================================================================== */
.hero-bg{
  background-image:
    radial-gradient(46vw 44vw at 88% 82%, rgba(0,173,74,.20), transparent 60%),
    radial-gradient(40vw 38vw at 6% 2%, rgba(0,173,74,.08), transparent 62%) !important;
  animation:none !important;
  filter:none !important;
}
.hero-section::after{ display:none !important; }

.hero-image{ perspective:1500px; }
.hero-demo{ position:relative; max-width:400px; margin-left:auto; transform-style:preserve-3d; will-change:transform; }
@media (max-width:991px){ .hero-demo{ margin:2.5rem auto 0; } }

.kx-banner{
  background:#fff; border:1px solid #e6efe9; border-radius:18px;
  box-shadow:0 40px 80px -34px rgba(16,60,35,.35), 0 14px 30px -20px rgba(16,60,35,.20);
  padding:22px 22px 20px; animation:kFloat 4s ease-in-out infinite alternate;
}
@keyframes kFloat{ from{transform:translateY(0)} to{transform:translateY(-9px)} }
.kx-banner-head{ display:flex; align-items:center; gap:11px; }
.kx-banner-ic{ width:36px; height:36px; border-radius:10px; background:#e6f6ec; display:flex; align-items:center; justify-content:center; color:var(--primary); }
.kx-banner-ic .material-symbols-outlined{ font-size:20px; }
.kx-banner-head b{ font-size:15px; color:#14231b; font-weight:600; }
.kx-banner-text{ font-size:13px; line-height:1.5; color:#6a7a70; margin:12px 0 15px; }
.kx-cats{ display:flex; flex-direction:column; gap:11px; }
.kx-cat{ display:flex; align-items:center; justify-content:space-between; }
.kx-cat-l{ font-size:13.5px; color:#2c3a32; display:inline-flex; align-items:center; gap:7px; }
.kx-cat-l .material-symbols-outlined{ font-size:15px; color:#9db3a6; }

.kx-tog{ position:relative; width:48px; height:27px; border-radius:14px; background:#d9e9df; flex:0 0 auto; transition:background .35s ease; }
.kx-tog i{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; border:4px solid #a9bcb0; box-sizing:border-box; transition:left .35s ease, border-color .35s ease; }
.kx-tog.kx-on{ background:var(--primary); }
.kx-tog.kx-on i{ left:24px; border-color:#fff; }
.kx-tog.kx-anim{ animation:kTrk 3.6s ease-in-out infinite alternate; }
.kx-tog.kx-anim i{ animation:kKnb 3.6s ease-in-out infinite alternate; }
.kx-tog.kx-anim-b, .kx-tog.kx-anim-b i{ animation-delay:-1.8s; }
@keyframes kTrk{ from{background:#d9e9df} to{background:var(--primary)} }
@keyframes kKnb{ from{left:3px; border-color:#a9bcb0} to{left:24px; border-color:#fff} }

.kx-banner-btns{ display:flex; gap:10px; margin-top:18px; }
.kx-btn{ flex:1; text-align:center; font-size:13.5px; padding:10px 0; border-radius:11px; font-weight:500; }
.kx-btn-ghost{ color:#54655b; border:1px solid #dce7e0; background:#fff; }
.kx-btn-acc{ color:#fff; background:var(--primary); }

.kx-chip{
  position:absolute; right:-8px; bottom:-16px;
  background:#14231b; color:#fff; font-size:12px; padding:9px 13px; border-radius:11px;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 12px 26px rgba(16,60,35,.28);
}
.kx-chip .material-symbols-outlined{ font-size:16px; color:#3fd77e; }

@media (prefers-reduced-motion:reduce){
  .kx-banner{ animation:none !important; }
  .kx-tog.kx-anim, .kx-tog.kx-anim i{ animation:none !important; }
}

/* =====================================================================
   HERO v2 — "sito reale + banner in contesto" (centrato + browser mockup)
   Sovrascrive il layout split precedente.
   ===================================================================== */
.hero-section{ min-height:auto !important; }
.hero-wrap{ max-width:980px; margin:0 auto; padding:130px 0 92px; text-align:center; perspective:1700px; }
.hero-head{ max-width:680px; margin:0 auto; }
.hero-head .hero-badge{ margin-bottom:18px; }
.hero-title{ text-align:center; font-size:clamp(2rem,4.4vw,3.4rem) !important; margin-bottom:14px !important; }
.hero-head .hero-slogan{ display:inline-block; margin:0 auto; padding:0 22px; }
.hero-cta{ display:flex; gap:12px; justify-content:center; margin-top:22px; }
.hero-trial-note{ display:flex; justify-content:center; align-items:center; gap:6px; text-align:center; margin-top:14px; }
.hero-stats{ display:flex; justify-content:center; gap:46px; margin:42px auto 0; max-width:660px; border-top:1px solid var(--ap-line); padding-top:24px; }

.hero-demo{ max-width:730px !important; margin:38px auto 0 !important; transform-style:preserve-3d; will-change:transform; }

.kx-browser{ border-radius:16px; overflow:hidden; border:1px solid #dfe8e2; background:#fff;
  box-shadow:0 46px 92px -40px rgba(16,60,35,.34), 0 16px 34px -22px rgba(16,60,35,.20); }
.kx-browser-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:#f4f7f5; border-bottom:1px solid #e8efe9; }
.kx-tl{ display:flex; gap:6px; }
.kx-tl i{ width:11px; height:11px; border-radius:50%; display:block; }
.kx-tl i:nth-child(1){ background:#ff5f57 } .kx-tl i:nth-child(2){ background:#febc2e } .kx-tl i:nth-child(3){ background:#28c840 }
.kx-url{ flex:1; max-width:250px; margin:0 auto; display:flex; align-items:center; gap:6px; justify-content:center;
  background:#fff; border:1px solid #e6ede9; border-radius:8px; padding:5px 10px; font-size:12px; color:#8a978f; }
.kx-url .material-symbols-outlined{ font-size:13px; }

.kx-site{ position:relative; padding:20px 22px 0; text-align:left; }
.kx-site-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.kx-site-brand{ display:flex; align-items:center; gap:9px; }
.kx-sq{ width:24px; height:24px; border-radius:7px; background:#e7ebe9; }
.kx-site-menu{ display:flex; gap:16px; }
.kx-bar{ display:inline-block; height:9px; border-radius:5px; background:#eef1ef; width:46px; }
.kx-site-brand .kx-bar{ background:#e7ebe9; }
.kx-w70{ width:74px } .kx-w88{ width:88% } .kx-w66{ width:66% } .kx-w100{ width:100% } .kx-w92{ width:92% } .kx-w74{ width:74% }
.kx-site-hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:center; }
.kx-site-copy .kx-bar{ display:block; margin-bottom:9px; background:#f0f2f1; }
.kx-site-copy .kx-h{ height:20px; border-radius:6px; background:#e9edeb; margin-bottom:11px; }
.kx-site-btn{ display:inline-block; width:104px; height:32px; border-radius:9px; background:#dfe6e2; margin-top:8px; }
.kx-site-img{ height:150px; border-radius:14px; background:linear-gradient(135deg,#eef2f0,#e4ebe7); }

.kx-cookiebar{ margin:22px -22px 0; background:#fff; border-top:1px solid #ebf1ee;
  box-shadow:0 -16px 34px -20px rgba(16,60,35,.24); padding:16px 22px 18px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; text-align:left;
  animation:kUp .7s .5s ease both; }
@keyframes kUp{ from{ transform:translateY(16px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.kx-cb-main{ flex:1; min-width:240px; }
.kx-cb-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.kx-cb-head b{ font-size:14px; color:#14231b; font-weight:500; }
.kx-cb-text{ font-size:12.5px; line-height:1.5; color:#6a7a70; margin:0; }
.kx-cb-cats{ display:flex; gap:20px; margin-top:11px; flex-wrap:wrap; }
.kx-cb-cat{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#2c3a32; }
.kx-cb-cat .material-symbols-outlined{ font-size:15px; color:#9db3a6; }
.kx-cb-btns{ display:flex; gap:10px; align-items:center; }
.kx-cb-btns .kx-btn{ flex:0 0 auto; white-space:nowrap; padding:10px 18px; }

@media (max-width:640px){
  .hero-wrap{ padding:118px 0 72px; }
  .kx-site-hero{ grid-template-columns:1fr; }
  .kx-site-img{ display:none; }
  .kx-cb-btns{ width:100%; }
  .kx-cb-btns .kx-btn{ flex:1; }
  .hero-stats{ gap:22px; }
}
@media (prefers-reduced-motion:reduce){ .kx-cookiebar{ animation:none !important; } }