:root {
    --bg-color: #ffffff;
    --bg-secondary: #f5f5f7;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --accent-color: #dc2626;
    --accent-hover: #b91c1c;
    --border-color: #d2d2d7;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --nav-height: 60px;
    /* Increased height for larger logo */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--accent-color);
    color: white;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: var(--text-primary);
}

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

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

/* Layout */
.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

.bg-light {
    background-color: var(--bg-secondary);
}

/* Header / Navbar - Floating Pill */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    height: auto;
    /* Allow height to fit content + padding */
    z-index: 9999;
    transition: all 0.3s ease;
    border-radius: 30px;
    /* Pill shape */
    padding: 10px 30px;
    /* Inner spacing */
}

/* User Provided Liquid Glass Styles - Adapted for Pill */
.glass-nav {
    --bg-color: rgba(255, 255, 255, 0.1);
    /* Very low opacity to allow mix-blend-mode to work */
    --highlight: rgba(255, 255, 255, 0.3);
    --text: #ffffff;
    /* Default to white for difference blend */

    overflow: visible;
    /* Allow dropdown to spill out if needed, but dropdown is fixed */
    background: transparent;
    border-radius: 30px;
    /* Ensure glass layers follow pill shape */
}

.glass-filter,
.glass-overlay,
.glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    /* Match parent */
    pointer-events: none;
}

.glass-filter {
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion) saturate(120%) brightness(1.15);
    opacity: 1;
    /* Always visible for glass effect */
    transition: opacity 0.3s ease;
}

.glass-overlay {
    z-index: 2;
    transition: background 0.3s ease;
}

.glass-specular {
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.glass-content {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    gap: 40px;
    /* Spacing between logo and menu */
}

.logo {
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    mix-blend-mode: difference;
    /* Dynamic contrast */
    color: white;
    /* Needed for difference mode */
}

.logo img {
    height: 40px;
    display: block;
    filter: grayscale(100%) invert(1);
    /* Invert logo to white for blend mode */
}

.nav-menu {
    position: relative;
    /* Changed from absolute to flow naturally */
    left: auto;
    width: auto;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    height: 100%;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    pointer-events: auto;
    padding: 0;
}

.nav-links a {
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    mix-blend-mode: difference;
    /* Dynamic contrast - inverts color based on background */
}

.nav-links a:hover {
    opacity: 0.7;
}

/* Dropdown Menu - Detached Pill */
.dropdown-item {
    position: relative;
    /* Dropdown relative to item */
}

.dropdown-menu {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 0;
    overflow: hidden;
    min-width: 300px;
    border-radius: 30px;
    background: transparent;
    padding: 0;

    visibility: visible;
    transition: height 0.5s;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 9990;
}

/* Dropdown Glass - Independent Implementation (Snipzy-based) */
.dropdown-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion-dropdown) saturate(120%) brightness(1.15);
}

.dropdown-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 2;
}

.dropdown-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.dropdown-menu .glass-content {
    position: relative;
    z-index: 4;
    padding: 30px;
}

.dropdown-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
    /* ALIGNMENT FIX: Ensures columns start at the top */
    opacity: 1;
    /* Visible immediately */
    padding: 0;
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid items */
.category-card:nth-child(1) {
    transition-delay: 0.1s;
}

.category-card:nth-child(2) {
    transition-delay: 0.2s;
}

.category-card:nth-child(3) {
    transition-delay: 0.3s;
}

.category-card:nth-child(4) {
    transition-delay: 0.4s;
}

.dropdown-col h4 {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0;
    font-weight: 600;
    mix-blend-mode: difference;
    /* Dynamic contrast */
}

.dropdown-col ul {
    list-style: none;
}

.dropdown-col ul li {
    margin-bottom: 8px;
}

.dropdown-col ul li a {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    mix-blend-mode: difference;
    /* Dynamic contrast */
    transition: color 0.2s ease;
}

.dropdown-col ul li a:hover {
    color: #cccccc;
}

/* Subcategory arrow indicator */
.subcategory-arrow {
    font-size: 12px;
    margin-left: 6px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

/* Rotate arrow on hover */
.has-subcategories:hover .subcategory-arrow {
    transform: rotate(180deg);
}

/* Nested subcategories in dropdown */
.dropdown-subcol {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        margin-top 0.3s ease;
}

/* Show subcategories on parent hover */
.dropdown-col ul li:hover .dropdown-subcol {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
}

.dropdown-subcol li {
    margin-bottom: 8px;
}

.dropdown-subcol li a {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    mix-blend-mode: difference;
    transition: color 0.2s ease;
}

.dropdown-subcol li a:hover {
    color: #ffffff;
}

/* Horizontal dropdown layout for Arredamenti */
.dropdown-content-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.dropdown-col-horizontal {
    text-align: center;
    width: 100%;
}

.dropdown-col-horizontal h4 {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    mix-blend-mode: difference;
}

.horizontal-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.horizontal-list li {
    margin: 0;
}

.horizontal-list li a {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    mix-blend-mode: difference;
    transition: color 0.2s ease;
}

.horizontal-list li a:hover {
    color: #cccccc;
}

.mobile-toggle {
    display: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

/* Hero Section - Full Bleed */
.hero {
    text-align: center;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1920&q=80') no-repeat center center;
    background-size: cover;
}

/* Dark fade at bottom of hero */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(to bottom, transparent, #000000e6);
    z-index: 2;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(60, 0, 0, 0.7));
    mix-blend-mode: multiply;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    /* Offset for header */
}

.hero-title {
    font-size: 64px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
    color: #fff;
}

.hero-subtitle {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 980px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    color: #fff;
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);
}

.btn-link {
    color: #fff;
    font-size: 19px;
}

.btn-link:hover {
    text-decoration: underline;
    color: #fff !important;
    /* Force white on hover */
    opacity: 0.9;
}

/* Category Grid */
.section-header {
    font-size: 42px;
    margin-bottom: 80px;
    text-align: center;
    font-weight: 700;
    color: white;
}

.section-header::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent-color);
    margin: 20px auto 0;
    border-radius: 2px;
}

/* Category Grid - 2x2 Glass Squares */
.category-stripes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    position: relative;
}

/* Background image for entire section - visible through glass */
#categorie {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(5, 5, 5, 0.85) 100%),
        url('https://images.unsplash.com/photo-1522338242992-e1a54906a8da?w=1920&sat=-100');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Dark fade at top of categories (from hero) */
#categorie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    z-index: 0;
    pointer-events: none;
}

/* Dark fade at bottom of categories (to chi siamo) */
#categorie::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
    z-index: 0;
    pointer-events: none;
}

/* Glass Square */
.category-stripe {
    position: relative;
    aspect-ratio: 1;
    border-radius: 30px;
    overflow: hidden;
    /* Allow backdrop-filter to work */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Background - normal size, no zoom */
.category-stripe::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-stripe:hover::before {
    filter: blur(10px) saturate(120%) brightness(1.15);
}

/* Individual B&W backgrounds */
.category-stripe:nth-child(1)::before {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.5) 0%, rgba(5, 5, 5, 0.7) 100%),
        url('https://images.unsplash.com/photo-1556912173-46c336c7fd55?w=800&sat=-100');
    border: 2px solid rgba(220, 38, 38, 0.3);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

.category-stripe:nth-child(1):hover::before {
    border-color: var(--accent-color);
}

.category-stripe:nth-child(2)::before {
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.5) 0%, rgba(8, 8, 8, 0.7) 100%),
        url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=800&sat=-100');
    border: 2px solid rgba(220, 38, 38, 0.3);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

.category-stripe:nth-child(2):hover::before {
    border-color: var(--accent-color);
}

.category-stripe:nth-child(3)::before {
    background: linear-gradient(135deg, rgba(12, 12, 12, 0.5) 0%, rgba(6, 6, 6, 0.7) 100%),
        url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=800&sat=-100');
    border: 2px solid rgba(220, 38, 38, 0.3);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

.category-stripe:nth-child(3):hover::before {
    border-color: var(--accent-color);
}

.category-stripe:nth-child(4)::before {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.5) 0%, rgba(10, 10, 10, 0.7) 100%),
        url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=800&sat=-100');
    border: 2px solid rgba(220, 38, 38, 0.3);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

.category-stripe:nth-child(4):hover::before {
    border-color: var(--accent-color);
}

.category-stripe:hover {
    transform: translateY(-10px);
}

/* Glass Box Container - Above ::before background */
.glass-box {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Above ::before background */
}

.category-stripe:hover .glass-box {
    opacity: 1;
}

/* Glass Layers - Clean without SVG distortion */
.glass-box .glass-filter,
.glass-box .glass-overlay,
.glass-box .glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
}

.glass-box .glass-filter {
    z-index: 1;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show glass overlay on hover */
.category-stripe:hover .glass-box .glass-filter {
    opacity: 1;
}

.glass-box .glass-overlay {
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    mix-blend-mode: overlay;
    border-radius: 30px;
}

.glass-box .glass-specular {
    z-index: 3;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    border: 1px solid rgba(220, 38, 38, 0.15);
}

/* Content Layout - Centered Vertical */
.category-stripe .glass-content {
    position: relative;
    z-index: 10;
    /* Above glass-box */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}

.category-stripe .category-icon {
    font-size: 60px;
    color: var(--accent-color);
    opacity: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.4));
}

.category-stripe h3 {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Glass Button - Compact */
.btn-glass {
    padding: 14px 32px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.category-stripe:hover .btn-glass {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(220, 38, 38, 0.4);
}

.btn-glass i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-glass:hover i {
    transform: translateX(4px);
}

/* Responsive - Stack on mobile */
@media (max-width: 768px) {
    .category-stripes {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Unified Dark Section for Chi Siamo & Contact */
#chisiamo-section {
    position: relative;
    background: linear-gradient(to bottom, #0a0a0a, #1a0505);
    overflow: hidden;
    min-height: auto;
    padding-bottom: 100px;
}

/* Dark fade at top (from categories) */
#chisiamo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    z-index: 0;
    pointer-events: none;
}

#chisiamo-section .section-header {
    color: white;
    position: relative;
    z-index: 10;
}

/* Particles.js container */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Contact Section within dark background */
.contact-section {
    position: relative;
    z-index: 10;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Contact Wrapper - Wider container for 2 columns */
.contact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-main-title {
    color: white;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
}

.contact-main-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    text-align: center;
    margin-bottom: 50px;
}

/* 2-Column Grid with Glass Container */
/* 2-Column Grid with Glass Container */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
    /* Ensure equal height */

    /* Glass container box */
    background: transparent !important;
    /* Force transparent */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 50px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.footer-links {
    display: flex;
    flex-direction: column;
    /* Restore vertical layout */
    gap: 12px;
    color: #ffffff;
}

.footer-links h5 {
    color: #999999;
}

/* Contact Info Column (Right) */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    /* Fill the grid cell height */
    justify-content: space-between;
    /* Distribute items evenly */
}

.contact-info-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.contact-info-item i {
    font-size: 28px;
    color: var(--accent-color);
    min-width: 40px;
    margin-top: 5px;
}

.contact-info-text h4 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    /* Much lighter for better contrast */
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer p {
    margin-top: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    /* Lighter text */
}

.contact-info-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Responsive - Stack on mobile */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 30px;
    }

    .contact-main-title {
        font-size: 32px;
    }

    .contact-info-column {
        gap: 25px;
    }
}

/* Chi Siamo Card - Same style as categories */
.chisiamo-container {
    display: flex;
    justify-content: center;
    padding: 80px 20px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.chisiamo-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-height: 400px;
    border-radius: 30px;
    overflow: hidden;
    /* Allow glass effects */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Background image for Chi Siamo */
.chisiamo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.6) 0%, rgba(10, 10, 10, 0.8) 100%),
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&sat=-100');
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    filter: blur(0px) saturate(100%) brightness(1);
    transition: filter 0.8s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
    will-change: filter;
    border: 2px solid rgba(220, 38, 38, 0.3);
}

.chisiamo-card:hover::before {
    border-color: var(--accent-color);
}

.chisiamo-card:hover::before {
    filter: blur(10px) saturate(120%) brightness(1.15);
}

.chisiamo-card:hover {
    transform: translateY(-10px);
}

/* Glass box for Chi Siamo - matches categories */
.chisiamo-card .glass-box {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.chisiamo-card:hover .glass-box {
    opacity: 1;
}

.chisiamo-card .glass-filter,
.chisiamo-card .glass-overlay,
.chisiamo-card .glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
}

.chisiamo-card .glass-filter {
    z-index: 1;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    filter: url(#glass-distortion-dropdown);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 30px;
}

.chisiamo-card .glass-overlay {
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    mix-blend-mode: overlay;
    border-radius: 30px;

}

.chisiamo-card .glass-specular {
    z-index: 3;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5),
        -2px 0 rgba(0, 0, 0, 0.25);
    border-radius: 30px;

}

/* Content layout */
.chisiamo-card .glass-content {
    position: relative;
    z-index: 10;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 60px;
    text-align: center;
}

.chisiamo-icon {
    font-size: 70px;
    color: var(--accent-color);
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.4));
}

.chisiamo-card h3 {
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: -0.01em;
}

.chisiamo-card p {
    font-size: 18px;
    line-height: 1.6;
    color: white;
    opacity: 0.9;
    max-width: 700px;
}

.chisiamo-card:hover .btn-glass {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Responsive Chi Siamo */
@media (max-width: 768px) {
    .chisiamo-card {
        min-height: 350px;
    }

    .chisiamo-card .glass-content {
        min-height: 350px;
        padding: 40px 30px;
    }

    .chisiamo-icon {
        font-size: 50px;
    }

    .chisiamo-card h3 {
        font-size: 32px;
    }

    .chisiamo-card p {
        font-size: 16px;
    }
}

.category-info h3 {
    font-size: 21px;
    margin-bottom: 8px;
}

.category-info p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.btn-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
}

.btn-text i {
    margin-left: 4px;
    transition: margin-left 0.2s;
}

.btn-text:hover i {
    margin-left: 8px;
}

/* Chi Siamo Section */
.split-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.split-image {
    flex: 1;
}

.placeholder-rect.dark {
    background: #1d1d1f;
    color: #fff;
    height: 400px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

.split-content {
    flex: 1;
}

.split-content h2 {
    font-size: 48px;
    margin-bottom: 24px;
}

.split-content p {
    font-size: 19px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.5;
}

.split-content .btn-primary {
    background-color: #1d1d1f;
    color: #fff;
}

.split-content .btn-primary:hover {
    background-color: #333;
}

/* Contact Form */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.form-container h2 {
    font-size: 40px;
    margin-bottom: 16px;
}

.form-container p {
    font-size: 19px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

/* Contact Form - Glass Style (Removed inner glass, now on parent) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    /* Reset margin */
    padding: 0;
    /* Reset padding */
    border-radius: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

/* Glass button for form */
.btn-submit {
    align-self: flex-start;
    margin-top: 10px;
    font-size: 16px;
    padding: 14px 32px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-submit:hover {
    background: white;
    color: #1d1d1f;
    border-color: white;
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
    background-color: #1d1d1f;
    color: #fff;
}

.btn-block:hover {
    background-color: #333;
}

/* Scroll to Top Button - Liquid Glass Style */
/* Scroll to Top Button - Liquid Glass Style */
.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease;
    overflow: visible;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    /* Whitish background on hover */
}

/* Hide inner glass layers as we applied styles directly */
.scroll-to-top .glass-box {
    display: none;
}

/* Arrow icon */
.scroll-to-top i {
    position: relative;
    z-index: 10;
    font-size: 24px;
    color: white;
}

/* Footer - Dark Theme with Red Tint */
/* Footer - Dark Theme with Red Tint */
.footer {
    background: #1a0505;
    /* Ensure dark background */
    color: rgba(255, 255, 255, 0.6);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(220, 38, 38, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

.footer-logo {
    height: 40px;
    margin-bottom: 16px;
    opacity: 0.9;
    filter: brightness(0) invert(1);
    /* Make logo white */
    transition: opacity 0.2s;
}

.footer-logo:hover {
    opacity: 1;
}

/* Contact Info Items - Liquid Glass Style */
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex: 1;
    /* Expand to fill available space */
}

.contact-info-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.contact-info-item i {
    font-size: 24px;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-text h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
}

.contact-info-text a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.contact-info-item:hover .contact-info-text a {
    color: white;
}

/* Make the whole div clickable by stretching the link if needed, 
   but for now we rely on the user clicking the link or adding JS. 
   To make it fully clickable CSS-only, we'd need the <a> to wrap everything 
   or use a pseudo-element on the <a>. 
   Let's assume the user wants the visual style primarily. */

.footer p {
    margin-top: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

/* Mobile */
@media (max-width: 768px) {
    .hero-title {
        font-size: 40px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .split-layout {
        flex-direction: column;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid #d2d2d7;
        gap: 20px;
    }

    .nav-menu.active .nav-links {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        padding: 10px 0;
        display: none;
        z-index: auto;
    }

    .dropdown-item:hover .dropdown-menu {
        display: block;
    }

    .dropdown-content {
        flex-direction: column;
        gap: 20px;
        text-align: left;
        padding-left: 20px;
    }

    .dropdown-col ul li a {
        font-size: 16px;
    }
}

/* ================================
   CHI SIAMO PAGE STYLES
   ================================ */

/* Hero Section with Full Background Image */
.chisiamo-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
    overflow: hidden;
}

/* Full Screen Team Background Image (Grayscale) */
.chisiamo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.chisiamo-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.4);
}

/* Gradient overlay at bottom of hero to fade into contact section */
.chisiamo-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9));
    pointer-events: none;
    z-index: 6;
}

/* Sticky Title on the Left - HORIZONTAL with red liquid glass background */
.chisiamo-sticky-title {
    position: fixed;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(60px, 8vw, 100px);
    font-weight: 700;
    color: white;
    z-index: 5;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: difference;

    /* Red liquid glass background pill */
    background: rgba(220, 38, 38, 0.8);
    padding: 20px 50px;
    border-radius: 50px;

    /* Liquid glass effect */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Contact section has higher z-index to cover the sticky title */
.contact-section-chisiamo {
    position: relative;
    z-index: 15;
}

/* Container for Box */
.chisiamo-hero-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 40px;
    padding-left: 40px;
    max-width: 100%;
}

/* Header OUTSIDE the box */
.chisiamo-header {
    text-align: center;
    margin-bottom: 30px;
    z-index: 15;
}

.chisiamo-head.footer-links h5 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #ffffff;
    /* Pure white */
}

.chisiamo-header h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.chisiamo-header .chisiamo-tagline {
    font-size: 18px;
    font-weight: 500;
    color: rgba(220, 38, 38, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Liquid Glass Box - STRONGER BLUR with dropdown-glass structure */
.chisiamo-glass-box {
    position: relative;
    max-width: 1100px;
    width: 100%;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Dropdown-style glass layers for chisiamo box - EXACT COPY of dropdown */
.chisiamo-glass-box .dropdown-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion-dropdown) saturate(120%) brightness(1.15);
}

.chisiamo-glass-box .dropdown-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 2;
}

.chisiamo-glass-box .dropdown-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Box Content - LESS VERTICAL PADDING */
.chisiamo-box-content {
    position: relative;
    z-index: 10;
    padding: 35px 55px;
    color: white;
}

.chisiamo-story-text p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
}

/* Mission & Vision Boxes - Using category-stripe but square */
.mission-vision-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.mission-vision-container .category-stripe {
    aspect-ratio: 1;
    max-width: 350px;
}

/* Background Images for Mission and Vision - override ::before with custom images */
.mission-bg::before {
    background: linear-gradient(135deg, rgba(12, 12, 12, 0.5) 0%, rgba(6, 6, 6, 0.7) 100%),
        url('https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=800&q=80') !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(0) grayscale(100%);
    transition: 0.3s;
}

.mission-bg:hover::before {
    filter: blur(20px) grayscale(100%);
}

.vision-bg::before {
    background: linear-gradient(135deg, rgba(12, 12, 12, 0.5) 0%, rgba(6, 6, 6, 0.7) 100%),
        url('https://images.unsplash.com/photo-1573867639040-6dd25fa5f597?w=800&q=80') !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(0) grayscale(100%);
    transition: 0.3s;
}

.vision-bg:hover::before {
    filter: blur(20px) grayscale(100%);
}

/* Mission/Vision specific overrides for readability and hover blur */
.mission-vision-container .category-stripe .glass-content h3 {
    color: white !important;
}

.mission-vision-container .category-stripe .glass-content p {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mission-vision-container .category-stripe .category-icon {
    color: var(--accent-color) !important;
}

/* Enable glass-box blur on hover with transition */
.mission-vision-container .category-stripe .glass-box {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-vision-container .category-stripe:hover .glass-box {
    opacity: 1;
}

/* Contact Section for Chi Siamo */
#contatti-form {
    scroll-margin-top: 150px;
}

.contact-section-chisiamo {
    background: linear-gradient(to bottom, #0a0a0a, #1a0505);
    padding: 100px 0 120px;
    position: relative;
}

.contact-section-chisiamo .form-container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.contact-section-chisiamo .form-container h2 {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    text-align: center;
}

.contact-section-chisiamo .form-container p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 40px;
}

.contact-section-chisiamo .contact-form input,
.contact-section-chisiamo .contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    color: white;
    font-size: 16px;
    font-family: var(--font-main);
    transition: all 0.3s ease;
}

.contact-section-chisiamo .contact-form input:focus,
.contact-section-chisiamo .contact-form textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(220, 38, 38, 0.5);
}

.contact-section-chisiamo .contact-form input::placeholder,
.contact-section-chisiamo .contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-section-chisiamo .contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-section-chisiamo .btn-submit {
    width: 100%;
    margin-top: 10px;
}

/* Responsive Chi Siamo */
@media (max-width: 768px) {
    .chisiamo-sticky-title {
        left: 20px;
        font-size: 60px;
    }

    .chisiamo-hero-container {
        padding-right: 20px;
        padding-left: 20px;
        justify-content: center;
    }

    .chisiamo-glass-box {
        max-width: 100%;
        border-radius: 30px;
    }

    .chisiamo-box-content {
        padding: 40px 30px;
    }

    .chisiamo-box-content h2 {
        font-size: 32px;
    }

    .chisiamo-tagline {
        font-size: 14px;
    }

    .chisiamo-story-text p {
        font-size: 16px;
    }

    .contact-section-chisiamo .form-container {
        padding: 40px 30px;
    }

    /* Mission & Vision responsive */
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Contact Section for Chi Siamo Page */
.timeline-section {
    margin-top: 120px;
    padding: 80px 0;
}

.timeline-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: -0.02em;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Timeline vertical line */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(220, 38, 38, 0.5) 20%,
            rgba(220, 38, 38, 0.5) 80%,
            transparent);
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.timeline-item.active {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    flex: 0 0 150px;
    font-size: 42px;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Timeline dot */
.timeline-year::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(10, 10, 10, 1),
        0 0 20px rgba(220, 38, 38, 0.5);
    z-index: -1;
}

.timeline-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-5px);
}

.timeline-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

.timeline-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* Services Overview */
.services-overview {
    margin-top: 120px;
    padding: 80px 0;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -0.02em;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.service-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.service-card:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-10px);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.1));
    border-radius: 20px;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.service-icon i {
    font-size: 36px;
    color: var(--accent-color);
}

.service-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
}

.service-card p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

/* Contact Section for Chi Siamo Page */
.contact-section-dark {
    background: linear-gradient(to bottom, #0a0a0a, #1a0505);
    padding: 100px 0 120px;
    position: relative;
}

.contact-intro {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 40px;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    color: white;
    font-size: 16px;
    font-family: var(--font-main);
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(220, 38, 38, 0.5);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

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

.btn-submit {
    width: 100%;
    margin-top: 10px;
}

/* Responsive Chi Siamo Page */
@media (max-width: 768px) {
    .sticky-title {
        font-size: 48px;
    }

    .chisiamo-box {
        min-height: auto;
        border-radius: 30px;
    }

    .chisiamo-content {
        padding: 40px 30px;
    }

    .chisiamo-content h2 {
        font-size: 36px;
    }

    .chisiamo-content .subtitle {
        font-size: 18px;
    }

    .story-paragraphs p {
        font-size: 16px;
    }

    .chisiamo-stats {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stat-number {
        font-size: 40px;
    }

    /* Timeline responsive */
    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 60px;
    }

    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }

    .timeline-year {
        position: absolute;
        left: 0;
        flex: none;
        font-size: 32px;
    }

    .timeline-year::after {
        left: 30px;
    }

    .timeline-content {
        width: 100%;
    }

    .timeline-title,
    .section-title {
        font-size: 36px;
    }

    /* Services responsive */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ============================================
   PRODUCT PAGES STYLES - INTEGRATED HERO + PRODUCTS
   ============================================ */

/* Integrated Product Hero + Products Section - Full Screen like Chi Siamo */
.product-hero-integrated {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 120px 0 100px;
}

/* Background Image (Full Screen) - B&W and Dark like Chi Siamo */
.product-hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%),
        url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=1800&q=80');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
}

/* Sticky Title "Elettrici" on the Left - HORIZONTAL, will fade behind contact section */
.sticky-title-product {
    position: fixed;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(60px, 8vw, 100px);
    font-weight: 700;
    color: white;
    z-index: 5;
    /* Lower than contact section (z-index: 10), will go behind it */
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
    pointer-events: none;

    /* Red liquid glass background pill */
    background: rgba(220, 38, 38, 0.8);
    padding: 20px 50px;
    border-radius: 50px;

    /* Liquid glass effect */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Bottom fade gradient for smooth transition */
.product-hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9));
    pointer-events: none;
    z-index: 6;
}

/* Container for content */
.product-integrated-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-current {
    color: white;
    font-weight: 500;
}

/* Integrated Hero Title and Subtitle */
.product-integrated-title {
    font-size: clamp(42px, 6vw, 64px);
    font-weight: 700;
    color: white;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.product-integrated-subtitle {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin: 0 auto 60px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 700px;
}

/* Products Grid - Smaller Cards for Better Title Visibility */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
    gap: 30px;
    margin: 0 auto;
    justify-content: center;
}

/* Clickable Product Card Link Wrapper */
.product-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Product Card with Liquid Glass - Equal Height */
.product-card {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 520px;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Dropdown glass layers for product card */
.product-card .dropdown-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion-dropdown) saturate(120%) brightness(1.15);
}

.product-card .dropdown-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    z-index: 2;
}

.product-card .dropdown-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Product Content - Flexbox for equal height */
.product-content {
    position: relative;
    z-index: 10;
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Product Image Container */
.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 20px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Product Info - Flex grow to push button to bottom */
.product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-name {
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.product-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 auto 0;
    flex-grow: 1;
}

/* Product Button - Contact Form Style (Semi-transparent with white border) */
.btn-product {
    margin-top: 16px;
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;

    /* Semi-transparent background like contact form button */
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-product:hover {
    background: white;
    color: #0a0a0a;
    border-color: white;
    transform: translateY(-2px);
}

/* Glass button for form */
.btn-submit {
    align-self: flex-start;
    margin-top: 10px;
    font-size: 16px;
    padding: 14px 32px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    /* Match contact info default */
    color: white;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.btn-submit:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08) !important;
    /* Match contact info hover */
    color: white !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-product i {
    transition: transform 0.3s ease;
}

.btn-product:hover i {
    transform: translateX(4px);
}

/* Ensure contact section has higher z-index so sticky title goes behind it */
.dark-section {
    position: relative;
    z-index: 10;
    /* Higher than sticky-title-product */
}

/* Responsive Design */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .product-hero-integrated {
        min-height: auto;
        padding: 100px 0 80px;
    }

    .sticky-title-product {
        left: 40px;
        font-size: clamp(40px, 10vw, 60px);
        padding: 15px 35px;
    }

    .product-integrated-container {
        padding: 0 20px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 350px;
        margin: 0 auto;
    }

    .product-content {
        padding: 20px;
    }

    .product-name {
        font-size: 20px;
    }

    .product-description {
        font-size: 14px;
    }

    .breadcrumb {
        font-size: 12px;
    }
}

@media (min-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(4, 280px);
    }
}

/* ========================================
   ARREDAMENTI PARRUCCHIERI PAGE - CONSOLIDATED
   ======================================== */

/* Hero Section with B&W Background */
.furniture-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
    /* Fallback */
}

.furniture-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1600948836101-f9ffda59d250?w=1920&h=1080&fit=crop&q=80') center/cover no-repeat;
    filter: grayscale(100%) brightness(0.4);
    z-index: 0;
}

.furniture-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, transparent, #000);
    z-index: 1;
    pointer-events: none;
}

.furniture-hero-container {
    text-align: center;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
}

.furniture-hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    animation: fadeInUp 0.8s ease-out;
}

.furniture-hero-subtitle {
    font-size: 1.8rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* CTA Button with liquid glass effect */
.btn-furniture-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    /* Applied liquid glass style directly */
}

.btn-furniture-cta:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    /* Removed solid white hover to maintain glass effect */
}

@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }
}

.btn-furniture-cta i {
    transition: transform 0.3s ease;
}

.btn-furniture-cta:hover i {
    animation: arrowBounce 1.5s infinite ease-in-out;
}

/* Gallery Section */
.furniture-gallery-section {
    position: relative;
    padding: 6rem 0 10rem;
    background: #0a0a0a;
    /* Will be overridden by JS for dynamic background */
    min-height: 100vh;
    overflow: hidden;
    /* Changed from visible to hidden to contain the blurred background */
    transition: background-image 0.5s ease;
}

/* Dynamic Background Element */
.furniture-gallery-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.4);
    z-index: 0;
    transition: background-image 0.8s ease-in-out;
}

.furniture-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(120, 20, 20, 0.4) 40%, rgba(50, 0, 0, 0.6) 80%, rgba(10, 10, 10, 1) 100%);
    z-index: 1;
    pointer-events: none;
}

.furniture-gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

.furniture-gallery-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    z-index: 1;
    pointer-events: none;
}

.section-title-furniture {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.section-subtitle-furniture {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4rem;
}

/* Carousel Container */
.carousel-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    /* Reduced width to make room for arrows */
    margin: 0 auto 4rem;
    overflow: visible;
}

.carousel-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px;
    /* Match viewport radius */
}

.carousel-slide {
    min-width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    /* padding: 20px; Removed to match backup and fix layout */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: -70px;
}

.carousel-next {
    right: -70px;
}

/* Dots Indicator */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
    position: relative;
    margin-top: 20px;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.carousel-dot.active {
    background: #dc2626;
    border-color: #dc2626;
    transform: scale(1.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
}

*/

/* Contact Section */
.furniture-contact-section {
    position: relative;
    z-index: 2;
    margin-top: 4rem;
}

.furniture-contact-glass {
    position: relative;
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.furniture-contact-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.furniture-contact-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.furniture-contact-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.furniture-contact-buttons {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Contact Buttons */
.btn-furniture-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-furniture-contact:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

/* Lightbox Modal */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: 0 20px 100px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.lightbox-close {
    position: fixed;
    top: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-close .glass-box {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

.lightbox-close:hover .glass-box {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.lightbox-close i {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 1.5rem;
}

/* ========================================
   PARRUCCHE E TOUPÉ PAGE - CONSOLIDATED
   ======================================== */

/* Hero Section - Custom for Wigs Page */
.wigs-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
        url('https://images.unsplash.com/photo-1562322140-8baeececf3df?w=1920&h=1080&fit=crop&q=80&sat=-100') center/cover no-repeat;
}

.wigs-hero-container {
    text-align: center;
    z-index: 2;
    max-width: 800px;
    padding: 2rem;
}

.wigs-hero-title {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    animation: fadeInUp 0.8s ease-out;
}

.wigs-hero-subtitle {
    font-size: 1.8rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* CTA Button with liquid glass effect */
.btn-wigs-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-wigs-cta:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(220, 38, 38, 0.4);
}

.btn-wigs-cta i {
    transition: transform 0.3s ease;
}

.btn-wigs-cta:hover i {
    transform: translateY(3px);
}

/* Products Section */
.wigs-products-section {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(to bottom, #0a0a0a, #1a0505);
    min-height: 100vh;
    overflow: hidden;
}

.wigs-products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.06) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

.wigs-products-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    z-index: 1;
    pointer-events: none;
}

.section-title-wigs {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3rem;
}

/* Custom Request Section */
.wigs-custom-section {
    position: relative;
    z-index: 2;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.wigs-custom-glass {
    position: relative;
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.wigs-custom-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.wigs-custom-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.wigs-custom-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.wigs-custom-buttons {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Custom Request Buttons */
.btn-wigs-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-wigs-custom:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

/* Responsive Styles for Both Pages */
@media (max-width: 768px) {

    .furniture-hero-title,
    .wigs-hero-title {
        font-size: 2.5rem;
    }

    .furniture-hero-subtitle,
    .wigs-hero-subtitle {
        font-size: 1.3rem;
    }

    .section-title-furniture,
    .section-title-wigs {
        font-size: 2rem;
    }

    .furniture-contact-title,
    .wigs-custom-title {
        font-size: 1.6rem;
    }

    .furniture-contact-buttons,
    .wigs-custom-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-furniture-contact,
    .btn-wigs-custom {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .carousel-prev {
        left: 10px;
    }

    .carousel-next {
        right: 10px;
    }

    .lightbox-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .lightbox-close i {
        font-size: 1.2rem;
    }
}

/* =========================================
   NEW CAROUSEL STYLES
   ========================================= */

.carousel-wrapper-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.carousel-viewport-new {
    overflow: hidden;
    width: 100%;
    max-width: 900px;
    /* Adjust as needed */
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    aspect-ratio: 16 / 10;
    position: relative;
}

.carousel-track-new {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-slide-new {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img-new {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.carousel-img-new:hover {
    transform: scale(1.03);
}

/* External Buttons */
/* External Buttons */
.carousel-btn-new {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 60px;
    /* Increased to match lightbox buttons */
    height: 60px;
    /* Increased to match lightbox buttons */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    /* Note: We can't easily add the SVG filter here without extra HTML structure, 
       but this replicates the visual style (border, shadow, blur) very closely. 
       The user asked for the "style" of liquid glass. */
}

.carousel-btn-new:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.15);
}

.carousel-btn-new i {
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.carousel-btn-new:hover i {
    color: white;
    /* Keep white on hover */
}

/* External Dots */
.carousel-dots-new {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 10px;
    /* Reduced from 50px */
    position: relative;
    z-index: 100;
    /* High z-index */
}

.carousel-dot-new {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    /* Increased visibility */
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* Increased visibility */
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot-new:hover {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-dot-new.active {
    background: #dc2626;
    border-color: #dc2626;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.8);
}

/* =========================================
   LIGHTBOX STYLES
   ========================================= */

.lightbox-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    /* High z-index */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Prevent scrolling */
    background-color: transparent;
    /* Transparent background */
    backdrop-filter: blur(20px) saturate(120%) brightness(0.6);
    /* Strong blur for glass effect */
    -webkit-backdrop-filter: blur(20px) saturate(120%) brightness(0.6);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.lightbox-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    height: 75vh;
    /* Fixed height to ensure alignment */
    max-width: 90%;
    position: relative;
    z-index: 10002;
    /* animation: zoomIn 0.3s ease; Removed to prevent conflict */
}

.anim-zoom-in {
    animation: zoomIn 0.3s ease forwards;
}

.lightbox-content {
    height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    margin: 0;
    /* Reset */
}

.lightbox-info {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.lightbox-title-box,
.lightbox-desc-box {
    position: relative;
    border-radius: 24px;
    padding: 30px;
    overflow: hidden;
    /* Glass border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-title-box {
    flex: 0 0 auto;
    /* Size to content */
    display: flex;
    align-items: center;
    min-height: 100px;
}

.lightbox-desc-box {
    flex: 1;
    /* Fill remaining space */
}

.lightbox-title-box h3 {
    position: relative;
    z-index: 10;
    color: white;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.lightbox-desc-box p {
    position: relative;
    z-index: 10;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Glass layers for lightbox boxes */
.lightbox-title-box .dropdown-glass-filter,
.lightbox-desc-box .dropdown-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 1;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
    filter: url(#glass-distortion-smooth);
    /* Smoother liquid effect */
}

.lightbox-title-box .dropdown-glass-overlay,
.lightbox-desc-box .dropdown-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    mix-blend-mode: overlay;
}

.lightbox-title-box .dropdown-glass-specular,
.lightbox-desc-box .dropdown-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Responsiveness for Lightbox */
@media (max-width: 1024px) {
    .lightbox-container {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
        align-items: center;
        overflow-y: auto;
    }

    .lightbox-content {
        width: 100%;
        height: auto;
        max-height: 50vh;
    }

    .lightbox-info {
        width: 100%;
        height: auto;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 60px;
    /* Increased to 60px */
    height: 60px;
    /* Increased to 60px */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.lightbox-close:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.15);
}

.lightbox-close i {
    position: relative;
    z-index: 10;
    color: #f1f1f1;
    font-size: 24px;
    transition: color 0.3s ease;
}

.lightbox-close:hover i {
    color: white;
    /* Keep white */
}

/* Lightbox Navigation Buttons */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.lightbox-nav.prev {
    left: 40px;
}

.lightbox-nav.next {
    right: 40px;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.1);
    background: rgba(255, 255, 255, 0.15);
}

.lightbox-nav i {
    position: relative;
    z-index: 10;
    color: #f1f1f1;
    font-size: 24px;
    transition: color 0.3s ease;
}

.lightbox-nav:hover i {
    color: white;
    /* Keep white */
}

/* Hide inner glass layers as we applied styles directly */
.lightbox-nav .glass-box,
.lightbox-close .glass-box {
    display: none;
}

/* =========================================
   NEW ADDITIONS
   ========================================= */

/* =========================================
   LIQUID GLASS STYLE (MATCHING CHI SIAMO)
   ========================================= */

.carousel-glass-container,
.furniture-contact-glass {
    position: relative;
    width: 100%;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Added border for definition */
    /* No background color - purely transparent/glass */
}

.carousel-glass-container {
    padding: 40px;
    padding-bottom: 30px;
    /* Reduced bottom padding */
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.furniture-contact-glass {
    padding: 40px;
    text-align: center;
}

/* Reusing the dropdown glass layers for these containers */
.carousel-glass-container .dropdown-glass-filter,
.furniture-contact-glass .dropdown-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion-dropdown) saturate(120%) brightness(1.15);
}

.carousel-glass-container .dropdown-glass-overlay,
.furniture-contact-glass .dropdown-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 2;
}

.carousel-glass-container .dropdown-glass-specular,
.furniture-contact-glass .dropdown-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    z-index: 3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Ensure content is above glass layers */
.carousel-wrapper-new,
.carousel-dots-new,
.furniture-contact-content {
    position: relative;
    z-index: 10;
}

/* Estetisti Hero Background */
.furniture-hero.estetisti::before {
    background-image: url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=1600&h=900&fit=crop&q=80');
}

/* Ensure gallery bg transition is smooth, grayscale AND BLURRED */
.furniture-gallery-bg {
    transition: background-image 0.8s ease-in-out;
    filter: blur(20px) grayscale(100%) brightness(0.3);
}


/* =========================================
   CONTACT SECTION FIX
   ========================================= */
.furniture-contact-section {
    position: relative;
    z-index: 20;
    margin-top: 50px;
}

.furniture-gallery-overlay {
    z-index: 1;
}

/* Carousel Layout Adjustments */
.carousel-wrapper-new {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push arrows to edges */
    gap: 40px;
    /* Increase gap */
}

.carousel-viewport-new {
    flex-grow: 1;
    max-width: 800px;
    /* Constrain width to keep arrows visible */
    margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-wrapper-new {
        flex-direction: column;
        gap: 10px;
    }

    .carousel-btn-new {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    .carousel-viewport-new {
        width: 100%;
        border-radius: 10px;
    }
}

/* Lightbox Slide Animations - Faster (0.25s) */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-50px);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(50px);
        opacity: 0;
    }
}

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

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.lightbox-container.anim-out-left {
    animation: slideOutLeft 0.25s ease forwards;
}

.lightbox-container.anim-in-right {
    animation: slideInRight 0.25s ease forwards;
}

.lightbox-container.anim-out-right {
    animation: slideOutRight 0.25s ease forwards;
}

.lightbox-container.anim-in-left {
    animation: slideInLeft 0.25s ease forwards;
}

/* Cartoon Bounce Animation Removed */
/* --- PRIVACY CONCIERGE (Cookie Banner) --- */
.cookie-banner {
    position: fixed;
    left: 30px;
    bottom: -200px;
    max-width: 400px;
    width: calc(100% - 60px);
    border-radius: 20px;
    z-index: 9997;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    visibility: hidden;
    opacity: 0;
}

.cookie-banner.visible {
    Bottom: 30px;
    visibility: visible;
    opacity: 1;
}

/* Liquid Glass Elements for Cookie Banner - SAME AS PRODUCT CARDS */
.cookie-glass-filter {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion-dropdown) saturate(120%) brightness(1.15);
}

.cookie-glass-overlay {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 2;
    pointer-events: none;
}

.cookie-glass-specular {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.cookie-content {
    position: relative;
    z-index: 10;
    padding: 30px;
    background: transparent;
}

.cookie-title {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
    font-weight: 600;
}

.cookie-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 25px;
}

.cookie-link {
    color: #dc2626;
    text-decoration: none;
    border-bottom: 1px solid rgba(220, 38, 38, 0.4);
    transition: all 0.3s;
}

.cookie-link:hover {
    color: #b91c1c;
    border-color: #b91c1c;
}

/* Bottoni */
.cookie-actions {
    display: flex;
    gap: 15px;
}

.btn-cookie-gold {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border: none;
    padding: 12px 15px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
}

.btn-cookie-gold:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.btn-cookie-ghost {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
}

.btn-cookie-ghost:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.08);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cookie-banner {
        left: 20px;
        bottom: -200px;
        width: calc(100% - 40px);
        max-width: none;
    }

    .cookie-banner.visible {
        bottom: 20px;
    }

    .cookie-content {
        padding: 20px;
    }

    .cookie-actions {
        flex-direction: column-reverse;
    }
}

/* --- LEGAL MODAL SYSTEM --- */

.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200000;
    /* Sopra menu mobile (9998) */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Passa il click attraverso quando nascosto */

    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.legal-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Abilita interazione quando visibile */
}

/* Sfondo Oscurante - Cliccabile per chiudere */
.legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    /* Mostra che è cliccabile */
}

/* Il Foglio del Documento */
.legal-modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 85vh;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.legal-modal.active .legal-modal-content {
    transform: translateY(0) scale(1);
}

/* Header */
.legal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 30px 40px;
    /* Added padding for breathing room */
}

.legal-title {
    font-family: var(--font-body);
    /* Sans-serif invece di serif */
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.legal-close-btn {
    background: transparent;
    border: none;
    color: #dc2626;
    width: auto;
    height: auto;
    padding: 8px;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.legal-close-btn:hover {
    color: #b91c1c;
    transform: scale(1.15);
}

/* Corpo del Testo */
.legal-body {
    padding: 40px;
    overflow-y: auto;
    font-family: var(--font-body);
    /* Sans-serif */
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    cursor: text;
    /* Cursore testo per leggibilità */

    /* Nascondi scrollbar ma mantieni scroll */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Nascondi scrollbar Webkit (Chrome, Safari) */
.legal-body::-webkit-scrollbar {
    display: none;
}

/* Stili del testo legale */
.legal-body h3 {
    color: white;
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: var(--font-body);
    /* Sans-serif anche per i titoli */
    font-weight: 600;
}

.legal-body h3:first-child {
    margin-top: 0;
}

.legal-body p,
.legal-body ul {
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.legal-body a {
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
}

.legal-footer-note {
    margin-top: 50px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* Mobile - Safe Area Support */
@media (max-width: 768px) {
    .legal-modal-content {
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        max-width: 100%;
    }

    .legal-header {
        padding-top: calc(env(safe-area-inset-top) + 60px);
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: 20px;
    }

}