/* ============================================
   COLOR ART CENTER — Bold & Colorful Theme
   ============================================ */

:root {
    --orange: #FF6B35;
    --pink: #E91E63;
    --purple: #7C4DFF;
    --blue: #448AFF;
    --teal: #00BFA5;
    --yellow: #FFD600;
    --green: #00E676;

    --bg: #FAFAF8;
    --bg-warm: #FFF8F0;
    --bg-card: #FFFFFF;
    --text: #1A1A2E;
    --text-light: #555;
    --text-muted: #888;
    --border: #E8E8E8;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-ui: 'DM Sans', sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

    --nav-h: 76px;
    --container: 1280px;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 100px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--bg);
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

/* ── Preloader ── */
#preloader {
    position: fixed; inset: 0; z-index: 10000;
    background: white;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-inner { text-align: center; }

.preloader-colors {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 24px;
}
.preloader-colors span {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--c);
    animation: preloaderBounce 0.6s var(--ease-bounce) infinite alternate;
    animation-delay: calc(var(--d) * 0.1s);
}
@keyframes preloaderBounce {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-20px) scale(1.2); }
}

.preloader-text {
    font-family: var(--font-heading);
    font-size: clamp(20px, 4vw, 36px);
    font-weight: 800;
    color: var(--text);
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.preloader-bar {
    width: 200px; height: 4px; background: var(--border); border-radius: 2px;
    margin: 0 auto; overflow: hidden;
}
.preloader-bar-fill {
    width: 0%; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple), var(--teal));
    background-size: 300% 100%;
    animation: preloaderFill 2s var(--ease) forwards, gradientShift 2s linear infinite;
}
@keyframes preloaderFill { to { width: 100%; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ── Navigation ── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h); z-index: 1000;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: all 0.4s var(--ease);
}
.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

.nav-container {
    max-width: var(--container); margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    height: 100%; display: flex; align-items: center; justify-content: space-between;
}

.nav-logo { display: flex; flex-direction: column; gap: 0; z-index: 1001; }
.logo-main {
    font-family: var(--font-heading);
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 800; color: var(--text); letter-spacing: 1px;
}
.logo-dot { color: var(--orange); }
.logo-sub { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 1px; }

.nav-menu { display: flex; gap: clamp(16px, 2.5vw, 32px); }
.nav-link {
    font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    color: var(--text-light); letter-spacing: 0.5px;
    padding: 6px 0; position: relative; transition: color 0.3s;
}
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--orange), var(--pink));
    transition: width 0.4s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ── Nav Dropdown ── */
.nav-item-drop {
    position: relative;
    display: flex;
    align-items: center;
}
/* Invisible hover bridge — prevents gap between link and menu from killing hover */
.nav-item-drop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    height: 14px;
    pointer-events: auto;
}
.nav-item-drop > .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-drop-arrow {
    width: 10px; height: 10px;
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
    opacity: 0.5;
}
.nav-item-drop:hover .nav-drop-arrow { transform: rotate(180deg); opacity: 1; }
.nav-drop-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: white;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    min-width: 190px;
    z-index: 1100;
    white-space: nowrap;
}
.nav-drop-menu::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: white;
    border-top: none;
}
.nav-item-drop:hover .nav-drop-menu,
.nav-item-drop:focus-within .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-drop-link {
    display: block;
    padding: 7px 12px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-light);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.nav-drop-link:hover {
    background: var(--bg);
    color: var(--orange);
}
/* Theme overrides for dark navbars */
.pp-body .nav-drop-menu,
.at-body .nav-drop-menu { background: #1a1a2e; border: 1px solid rgba(255,255,255,0.08); }
.pp-body .nav-drop-menu::before { border-bottom-color: #1a1a2e; }
.at-body .nav-drop-menu::before { border-bottom-color: #1a1a2e; }
.pp-body .nav-drop-link { color: rgba(240,236,228,0.65); }
.at-body .nav-drop-link { color: var(--at-text-sec, rgba(255,255,255,0.65)); }
.pp-body .nav-drop-link:hover { background: rgba(255,255,255,0.06); color: #C4A265; }
.at-body .nav-drop-link:hover { background: rgba(232,105,10,0.1); color: var(--at-accent, #E8690A); }
.cp-body .nav-drop-menu { background: white; border: 1px solid rgba(43,108,176,0.1); }
.cp-body .nav-drop-link:hover { background: rgba(43,108,176,0.06); color: var(--cp-accent, #2B6CB0); }

/* ── Mobile Dropdown Accordion ── */
.mobile-drop-wrap {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(0.05s * var(--i, 3));
}
.mobile-menu.active .mobile-drop-wrap {
    opacity: 1;
    transform: translateX(0);
}
.mobile-drop-toggle-row {
    display: flex;
    align-items: center;
}
.mobile-drop-toggle-row .mobile-link {
    flex: 1;
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
    padding: 8px 0;
}
.mobile-drop-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    opacity: 0.45;
    flex-shrink: 0;
    border-radius: 8px;
    transition: opacity 0.2s, background 0.2s;
}
.mobile-drop-btn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.mobile-drop-btn svg {
    width: 16px; height: 16px;
    transition: transform 0.35s var(--ease);
}
.mobile-drop-wrap.open .mobile-drop-btn { opacity: 1; }
.mobile-drop-wrap.open .mobile-drop-btn svg { transform: rotate(180deg); }
.mobile-sub-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
    padding-left: 36px;
}
.mobile-drop-wrap.open .mobile-sub-list { max-height: 460px; }
.mobile-sub-link {
    display: block;
    padding: 10px 0;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: color 0.2s, padding-left 0.2s;
}
.mobile-sub-link:last-child { border-bottom: none; }
.mobile-sub-link:hover, .mobile-sub-link:active { color: var(--orange); padding-left: 4px; }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-cta {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    color: white; letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    padding: 10px 20px; border-radius: var(--radius-pill);
    transition: all 0.4s var(--ease);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); }

/* Hamburger */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 30px; height: 22px; position: relative; z-index: 1001;
}
.hamburger span {
    display: block; width: 100%; height: 2.5px; border-radius: 2px;
    background: var(--text); position: absolute; left: 0;
    transition: all 0.4s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; width: 65%; }
.hamburger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); background: var(--orange); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.hamburger.active span:nth-child(3) { bottom: 50%; width: 100%; transform: translateY(50%) rotate(-45deg); background: var(--orange); }

/* Mobile Menu */
.mobile-menu {
    position: fixed; inset: 0; z-index: 999;
    background: white;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.5s var(--ease);
}
.mobile-menu.active { opacity: 1; visibility: visible; pointer-events: all; }
.mobile-menu-inner {
    height: 100%; display: flex; flex-direction: column;
    justify-content: center; padding: 0 40px;
}
.mobile-link {
    display: block; font-family: var(--font-heading);
    font-size: clamp(28px, 7vw, 48px); font-weight: 800;
    color: var(--text); padding: 8px 0;
    opacity: 0; transform: translateX(-30px);
    transition: all 0.5s var(--ease);
}
.mobile-menu.active .mobile-link {
    opacity: 1; transform: translateX(0);
    transition-delay: calc(0.05s * var(--i, 0));
}
.mobile-link:nth-child(1) { --i: 1; } .mobile-link:nth-child(2) { --i: 2; }
.mobile-link:nth-child(3) { --i: 3; } .mobile-link:nth-child(4) { --i: 4; }
.mobile-link:nth-child(5) { --i: 5; } .mobile-link:nth-child(6) { --i: 6; }
.mobile-link:nth-child(7) { --i: 7; }

.mobile-link:hover { color: var(--orange); }
.ml-num { font-size: 14px; color: var(--orange); margin-right: 12px; font-weight: 600; }

.mobile-menu-footer { margin-top: 40px; }
.mobile-wa {
    display: inline-block; font-family: var(--font-ui);
    font-size: 14px; font-weight: 700; color: white;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    padding: 16px 36px; border-radius: var(--radius-pill);
}

/* ── Page Transition ── */
.page-transition {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; pointer-events: none;
}
.pt-slice {
    flex: 1; background: var(--text);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform 0.5s var(--ease);
    transition-delay: calc(var(--i) * 0.06s);
}
.page-transition.active .pt-slice {
    transform: scaleY(1);
    transform-origin: top;
}
.page-transition.exit .pt-slice {
    transform: scaleY(0);
    transform-origin: bottom;
    transition-delay: calc(var(--i) * 0.06s);
}

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 14px; font-weight: 700;
    padding: 16px 32px; border-radius: var(--radius-pill);
    cursor: pointer; border: none; position: relative; overflow: hidden;
    transition: all 0.4s var(--ease);
}
.btn-vibrant {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    color: white;
    box-shadow: 0 6px 24px rgba(255, 107, 53, 0.35);
}
.btn-vibrant:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(255, 107, 53, 0.45);
}
.btn-vibrant::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s var(--ease);
}
.btn-vibrant:hover::after { left: 100%; }

.btn-outline-fun {
    background: transparent; color: var(--text);
    border: 2.5px solid var(--text);
}
.btn-outline-fun:hover {
    background: var(--text); color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.btn-lg { padding: 20px 40px; font-size: 15px; }

/* ── Animations ── */
.anim-in {
    opacity: 0; transform: translateY(50px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--ai-d, 0s);
}
.anim-in.visible { opacity: 1; transform: translateY(0); }

.anim-slide-up {
    display: block; overflow: hidden;
}
.anim-slide-up > * {
    display: block; transform: translateY(110%);
    transition: transform 0.9s var(--ease);
    transition-delay: var(--su-d, 0s);
}
.active-page .anim-slide-up > * { transform: translateY(0); }

.anim-pop {
    opacity: 0; transform: scale(0.8);
    transition: all 0.6s var(--ease-bounce);
    transition-delay: var(--pop-d, 0s);
}
.active-page .anim-pop { opacity: 1; transform: scale(1); }

.anim-fade {
    opacity: 0;
    transition: opacity 1s var(--ease);
    transition-delay: var(--f-d, 0s);
}
.active-page .anim-fade { opacity: 1; }

/* ── Section Common ── */
.page-section {
    min-height: 100vh;
    padding: clamp(100px, 10vw, 160px) 0 clamp(60px, 8vw, 120px);
    position: relative;
}

.section-header { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }

.section-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    color: var(--orange); background: rgba(255, 107, 53, 0.08);
    padding: 8px 20px; border-radius: var(--radius-pill);
    margin-bottom: 20px; letter-spacing: 0.5px;
}
.chip-icon { font-size: 16px; }

.section-title-big {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5.5vw, 64px);
    font-weight: 800; line-height: 1.1; color: var(--text);
    margin-bottom: 16px;
}

.highlight-orange { color: var(--orange); }
.highlight-pink { color: var(--pink); }
.highlight-purple { color: var(--purple); }
.highlight-teal { color: var(--teal); }
.highlight-blue { color: var(--blue); }

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

.section-sub {
    font-family: var(--font-body); font-size: clamp(16px, 2vw, 20px);
    color: var(--text-light); max-width: 650px; margin: 0 auto; line-height: 1.7;
}

/* ═══════════════════════════════════
   HERO PAGE
   ═══════════════════════════════════ */
.hero-page {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    padding-top: var(--nav-h);
    background: var(--bg-warm);
}

/* Blobs */
.hero-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.15;
    animation: blobMove 12s ease-in-out infinite alternate;
}
.blob-1 { width: 500px; height: 500px; background: var(--orange); top: -10%; left: -10%; }
.blob-2 { width: 400px; height: 400px; background: var(--purple); top: 20%; right: -10%; animation-delay: 2s; }
.blob-3 { width: 350px; height: 350px; background: var(--teal); bottom: -10%; left: 30%; animation-delay: 4s; }
.blob-4 { width: 300px; height: 300px; background: var(--pink); bottom: 20%; right: 20%; animation-delay: 6s; }

@keyframes blobMove {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
    100% { transform: translate(30px, -10px) scale(1.05); }
}

/* Splashes */
.color-splashes { position: absolute; inset: 0; pointer-events: none; }
.splash {
    position: absolute; left: var(--sx); top: var(--sy);
    width: var(--ss); height: var(--ss); border-radius: 50%;
    background: var(--sc); opacity: 0.06; filter: blur(40px);
    animation: splashPulse 5s ease-in-out infinite;
    animation-delay: var(--sd);
}
@keyframes splashPulse {
    0%, 100% { transform: scale(1); opacity: 0.06; }
    50% { transform: scale(1.3); opacity: 0.1; }
}

/* Paint Drips */
.hero-drips { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.drip {
    position: absolute; top: 0; left: var(--dx);
    width: 6px; height: 0; border-radius: 0 0 6px 6px;
    background: var(--dc); opacity: 0.2;
    animation: dripDown 2s var(--ease) forwards;
    animation-delay: var(--dd);
}
@keyframes dripDown {
    0% { height: 0; }
    70% { height: var(--dh); }
    100% { height: calc(var(--dh) - 10px); }
}

/* Hero Content */
.hero-content {
    position: relative; z-index: 2; text-align: center; padding: 0 20px;
    max-width: 900px;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    color: var(--text-light); margin-bottom: 28px;
}
.badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.hero-title { margin-bottom: 28px; }
.ht-line { display: block; overflow: hidden; }
.ht-word {
    display: block; font-family: var(--font-heading);
    font-size: clamp(48px, 10vw, 110px);
    font-weight: 800; line-height: 1.05; color: var(--text);
}

.hero-desc {
    font-family: var(--font-body);
    font-size: clamp(16px, 2.2vw, 21px);
    color: var(--text-light); max-width: 600px;
    margin: 0 auto 40px; line-height: 1.7;
}

.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Scroll Indicator */
.hero-scroll {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-mouse {
    width: 24px; height: 38px; border: 2px solid var(--text);
    border-radius: 12px; position: relative; opacity: 0.4;
}
.scroll-wheel {
    width: 3px; height: 8px; background: var(--orange);
    border-radius: 2px; position: absolute; top: 8px;
    left: 50%; transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel {
    0% { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(-50%) translateY(12px); opacity: 0; }
}
.hero-scroll span {
    font-family: var(--font-ui); font-size: 10px;
    font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-muted);
}

/* Hero Marquee */
.hero-marquee {
    position: absolute; bottom: 100px; left: 0; right: 0;
    overflow: hidden; z-index: 1;
}
.marquee-track {
    display: flex; width: max-content;
    animation: marquee 25s linear infinite;
}
.marquee-content { display: flex; align-items: center; gap: 24px; padding: 0 12px; }
.mq-brand {
    font-family: var(--font-heading); font-size: clamp(14px, 2vw, 20px);
    font-weight: 700; color: var(--text); opacity: 0.08; white-space: nowrap;
}
.mq-sep { color: var(--orange); opacity: 0.15; font-size: 6px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ═══════════════════════════════════
   STORIA PAGE — Emotional Redesign
   ═══════════════════════════════════ */
.storia-page {
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(255,107,53,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(124,77,255,0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 70%, rgba(233,30,99,0.03) 0%, transparent 45%),
        radial-gradient(ellipse at 10% 90%, rgba(0,191,165,0.02) 0%, transparent 40%);
}

/* ── Animated Blobs ── */
.storia-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.s-blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.12;
    animation: storiaBlobMove 14s ease-in-out infinite alternate;
}
.s-blob-1 { width: 420px; height: 420px; background: var(--orange); top: -8%; left: -5%; }
.s-blob-2 { width: 350px; height: 350px; background: var(--purple); top: 25%; right: -8%; animation-delay: 3s; }
.s-blob-3 { width: 300px; height: 300px; background: var(--pink); bottom: 15%; left: 20%; animation-delay: 6s; }
.s-blob-4 { width: 280px; height: 280px; background: var(--teal); bottom: -5%; right: 15%; animation-delay: 9s; }
@keyframes storiaBlobMove {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(35px, -25px) scale(1.08); }
    50% { transform: translate(-20px, 30px) scale(0.94); }
    75% { transform: translate(25px, 10px) scale(1.06); }
    100% { transform: translate(-10px, -15px) scale(1.02); }
}

/* ── Soft Splashes ── */
.storia-splashes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.s-splash {
    position: absolute; left: var(--sx); top: var(--sy);
    width: var(--ss); height: var(--ss); border-radius: 50%;
    background: var(--sc); opacity: 0.05; filter: blur(50px);
    animation: storiaSplash 6s ease-in-out infinite;
    animation-delay: var(--sd);
}
@keyframes storiaSplash {
    0%, 100% { transform: scale(1); opacity: 0.05; }
    50% { transform: scale(1.35); opacity: 0.09; }
}

/* ── Paint Drips ── */
.storia-drips { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; z-index: 0; }
.s-drip {
    position: absolute; top: 0; left: var(--dx);
    width: 4px; height: 0; border-radius: 0 0 4px 4px;
    background: var(--dc); opacity: 0.12;
    animation: storiaDripDown 2.5s var(--ease) forwards;
    animation-delay: var(--dd);
}
@keyframes storiaDripDown {
    0% { height: 0; }
    70% { height: var(--dh); }
    100% { height: calc(var(--dh) - 8px); }
}

/* ── Floating Particles ── */
.storia-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.s-particle {
    position: absolute; left: var(--px); top: var(--py);
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--orange); opacity: 0;
    animation: storiaParticleFloat var(--pp-dur, 10s) var(--pp-del, 0s) ease-in-out infinite;
}
@keyframes storiaParticleFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    8% { opacity: 0.4; transform: translateY(-15px) scale(1); }
    50% { opacity: 0.2; }
    100% { transform: translateY(-180px) scale(0); opacity: 0; }
}

/* ── Decorative SVG Line Art ── */
.storia-lineart {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.storia-lineart-svg { width: 100%; height: 100%; }
.sl-line {
    stroke: var(--orange); stroke-width: 1.5; opacity: 0.07;
    transition: stroke-dashoffset 2.5s var(--ease);
}
.active-page .sl-line { stroke-dashoffset: 0 !important; }
.sl-1 { transition-delay: 0.3s; }
.sl-2 { transition-delay: 0.6s; stroke: var(--purple); }
.sl-3 { transition-delay: 0.9s; stroke: var(--teal); }
.sl-4 { transition-delay: 1.2s; stroke: var(--pink); }
.sl-5 { transition-delay: 1.4s; stroke: var(--pink); }
.sl-6 { transition-delay: 0.5s; stroke: var(--purple); }
.sl-7 { transition-delay: 0.8s; }
.sl-8 { transition-delay: 1.0s; stroke: var(--pink); }
.sl-9 { transition-delay: 1.2s; stroke: var(--teal); }

/* ── Hero ── */
.storia-hero { text-align: center; margin-bottom: clamp(60px, 8vw, 100px); position: relative; z-index: 1; }
.storia-hero-title {
    font-family: var(--font-heading); font-size: clamp(36px, 6vw, 72px);
    font-weight: 900; line-height: 1.08; color: var(--text);
    margin-bottom: 24px; letter-spacing: -0.02em;
}
.storia-highlight {
    background: linear-gradient(135deg, var(--orange), var(--pink), var(--orange));
    background-size: 200% 200%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-style: italic;
    font-family: 'Playfair Display', serif;
    animation: storiaHighlightShimmer 4s ease-in-out infinite;
}
@keyframes storiaHighlightShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.storia-hero-sub {
    font-family: var(--font-body); font-size: clamp(17px, 2.2vw, 22px);
    color: var(--text-light); max-width: 680px; margin: 0 auto;
    line-height: 1.7;
}
.storia-hero-line {
    width: 80px; height: 3px; margin: 40px auto 0;
    background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple));
    background-size: 200% 100%;
    border-radius: 2px;
    animation: heroLineShimmer 3s ease-in-out infinite;
}
@keyframes heroLineShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.hide-mobile { display: inline; }

/* ── Founders Section ── */
.founders-section { margin-bottom: clamp(60px, 8vw, 100px); position: relative; z-index: 1; }
.founders-label {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 28px;
}
.founders-year {
    font-family: var(--font-heading); font-size: 14px; font-weight: 800;
    color: white; background: linear-gradient(135deg, var(--orange), var(--pink));
    padding: 6px 16px; border-radius: var(--radius-pill); letter-spacing: 1px;
}
.founders-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.founders-caption {
    font-family: var(--font-body); font-size: 15px; font-weight: 500;
    color: var(--text-muted); font-style: italic;
}

/* Photo Carousel */
.founders-gallery {
    overflow: hidden; border-radius: var(--radius);
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.founders-track {
    display: flex; gap: 20px; width: max-content;
    animation: foundersScroll 40s linear infinite;
}
.founders-track:hover { animation-play-state: paused; }
@keyframes foundersScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.founder-photo { flex-shrink: 0; width: clamp(260px, 30vw, 340px); }
.founder-photo-inner {
    position: relative; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 4/5; background: #f0ece6;
    border: 3px solid transparent;
    transition: all 0.5s var(--ease);
}
.founder-photo-inner:hover {
    border-color: var(--orange);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.founder-photo-inner img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(0.15) contrast(1.05);
    transition: all 0.6s var(--ease);
}
.founder-photo-inner:hover img { filter: sepia(0) contrast(1.1); transform: scale(1.05); }
.founder-photo-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    font-family: var(--font-body); font-size: 13px;
    color: white; font-weight: 500; letter-spacing: 0.3px;
    opacity: 0; transform: translateY(8px);
    transition: all 0.4s var(--ease);
}
.founder-photo-inner:hover .founder-photo-caption { opacity: 1; transform: translateY(0); }

/* ── Brush Separator ── */
.storia-brush-sep {
    text-align: center; margin: 0 auto clamp(40px, 6vw, 72px);
    max-width: 400px; opacity: 0.4;
}
.brush-sep-svg { width: 100%; height: 20px; }

/* ── Narrative / Story Section ── */
.storia-narrative {
    max-width: 800px; margin: 0 auto clamp(60px, 8vw, 100px);
    position: relative; z-index: 1;
    padding: clamp(32px, 5vw, 60px) clamp(24px, 4vw, 48px);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255,107,53,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(124,77,255,0.03) 0%, transparent 50%),
        var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 8px 40px rgba(0,0,0,0.03);
}

.narrative-block { margin-bottom: clamp(32px, 5vw, 56px); }

.narrative-quote-mark {
    font-family: 'Playfair Display', serif; font-size: clamp(80px, 10vw, 140px);
    line-height: 0.6; color: var(--orange); opacity: 0.2;
    margin-bottom: -10px;
}
.narrative-quote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 700; font-style: italic;
    color: var(--text); line-height: 1.3;
    border: none; margin: 0; padding: 0;
}

.narrative-text-block p {
    font-family: var(--font-body); font-size: clamp(16px, 1.8vw, 19px);
    color: var(--text-light); line-height: 1.8;
    margin-bottom: 20px;
}
.narrative-text-block p:last-child { margin-bottom: 0; }
.narrative-text-block strong { color: var(--text); font-weight: 600; }

/* Milestones */
.narrative-milestone {
    display: flex; gap: 24px; align-items: stretch;
    margin-bottom: clamp(32px, 5vw, 56px);
    padding: 32px;
    background: var(--bg-card); border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
}
.narrative-milestone:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
    border-color: var(--orange);
}
.milestone-line {
    width: 4px; flex-shrink: 0; border-radius: 2px;
    background: linear-gradient(180deg, var(--orange), var(--pink));
}
.milestone-content { flex: 1; }
.milestone-year {
    display: inline-block;
    font-family: var(--font-heading); font-size: 13px; font-weight: 800;
    color: var(--orange); background: rgba(255, 107, 53, 0.08);
    padding: 4px 14px; border-radius: var(--radius-pill);
    margin-bottom: 10px; letter-spacing: 1px;
}
.milestone-title {
    font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.milestone-content p {
    font-family: var(--font-body); font-size: 15px;
    color: var(--text-light); line-height: 1.7;
}
.milestone-content strong { color: var(--orange); font-weight: 600; }

/* ── Values Section ── */
.storia-values {
    margin-bottom: clamp(60px, 8vw, 100px);
    position: relative; z-index: 1;
}
.values-header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.values-chip {
    display: inline-block;
    font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    color: var(--orange); background: rgba(255, 107, 53, 0.08);
    padding: 8px 20px; border-radius: var(--radius-pill);
    margin-bottom: 20px; letter-spacing: 0.5px;
}
.values-title {
    font-family: var(--font-heading);
    font-size: clamp(30px, 5vw, 58px);
    font-weight: 800; line-height: 1.12; color: var(--text);
}
.values-strike {
    text-decoration: line-through;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 3px;
    opacity: 0.5;
}

.values-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.value-card {
    padding: clamp(28px, 3vw, 40px);
    background: var(--bg-card); border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
    position: relative; overflow: hidden;
}
.value-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--orange), var(--pink));
    opacity: 0; transition: opacity 0.4s var(--ease);
}
.value-card:hover::before { opacity: 1; }
.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
    border-color: var(--orange);
}
.value-icon {
    width: 56px; height: 56px; margin-bottom: 20px;
    color: var(--orange);
}
.value-icon svg { width: 100%; height: 100%; }
.value-title {
    font-family: var(--font-heading); font-size: clamp(18px, 2vw, 22px);
    font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.value-desc {
    font-family: var(--font-body); font-size: 15px;
    color: var(--text-light); line-height: 1.7;
}

/* ── Closing Section ── */
.storia-closing {
    position: relative; z-index: 1;
    text-align: center;
    padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 60px);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,107,53,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(233,30,99,0.04) 0%, transparent 50%),
        var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.04);
}
.storia-closing::before {
    content: ''; position: absolute; inset: -2px;
    background: linear-gradient(135deg, var(--orange), var(--pink), var(--purple), var(--teal));
    border-radius: calc(var(--radius) + 2px);
    opacity: 0; z-index: -1;
    transition: opacity 0.6s var(--ease);
}
.storia-closing:hover::before { opacity: 0.15; }
.closing-bg-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading); font-size: clamp(80px, 15vw, 220px);
    font-weight: 900; color: var(--orange); opacity: 0.03;
    white-space: nowrap; pointer-events: none; user-select: none;
    letter-spacing: -0.02em;
}
.closing-content { position: relative; z-index: 1; }
.closing-icon { margin-bottom: 24px; }
.closing-quote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 3.5vw, 38px);
    font-weight: 400; font-style: italic;
    color: var(--text); line-height: 1.35;
    margin: 0 auto 16px; max-width: 700px;
    border: none; padding: 0;
}
.closing-quote strong {
    font-weight: 700;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.closing-author {
    font-family: var(--font-body); font-size: 15px;
    color: var(--text-muted); margin-bottom: 28px;
}
.closing-values-row {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: wrap;
}
.closing-value-tag {
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    color: var(--orange); background: rgba(255, 107, 53, 0.06);
    padding: 6px 16px; border-radius: var(--radius-pill);
    letter-spacing: 1px; text-transform: uppercase;
}
.closing-value-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--border);
}

/* Stats Bar */
.stats-bar {
    display: flex; justify-content: center; align-items: center;
    gap: clamp(24px, 4vw, 48px); margin-top: 0;
    padding: 40px; background: var(--bg-card);
    border-radius: var(--radius); border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.stat-block { text-align: center; }
.stat-num {
    font-family: var(--font-heading); font-size: clamp(36px, 5vw, 56px);
    font-weight: 800; color: var(--orange); line-height: 1;
}
.stat-plus { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--pink); }
.stat-lbl {
    display: block; font-family: var(--font-ui); font-size: 12px;
    font-weight: 600; color: var(--text-muted); margin-top: 6px;
    letter-spacing: 0.5px;
}
.stat-divider { width: 1px; height: 48px; background: var(--border); }

/* ═══════════════════════════════════
   VERNICI PAGE — Immersive Experience
   ═══════════════════════════════════ */

/* ── Hero ── */
.vp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(160deg, #FAFAFA 0%, #FFF5F0 40%, #FFF0E8 100%);
    color: var(--text);
    overflow: hidden;
    padding: calc(var(--nav-h) + 40px) 0 80px;
}
.vp-hero-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Floating paint cans */
.vp-float-cans {
    position: absolute; inset: 0;
    z-index: 0;
}
.vp-float-can {
    position: absolute;
    left: var(--fc-x);
    top: var(--fc-y);
    width: var(--fc-s);
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    opacity: 0.3;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.12));
    animation: vpCanFloat var(--fc-dur, 15s) ease-in-out infinite;
    animation-delay: var(--fc-d, 0s);
}
@keyframes vpCanFloat {
    0% {
        transform: rotate(var(--fc-r, 0deg)) translateY(0) translateX(0) scale(1);
    }
    15% {
        transform: rotate(calc(var(--fc-r, 0deg) + 6deg)) translateY(-35px) translateX(15px) scale(1.03);
    }
    30% {
        transform: rotate(calc(var(--fc-r, 0deg) - 3deg)) translateY(-10px) translateX(-10px) scale(0.98);
    }
    50% {
        transform: rotate(calc(var(--fc-r, 0deg) - 7deg)) translateY(25px) translateX(-20px) scale(1.02);
    }
    65% {
        transform: rotate(calc(var(--fc-r, 0deg) + 4deg)) translateY(-20px) translateX(12px) scale(0.97);
    }
    80% {
        transform: rotate(calc(var(--fc-r, 0deg) + 8deg)) translateY(-40px) translateX(8px) scale(1.04);
    }
    100% {
        transform: rotate(var(--fc-r, 0deg)) translateY(0) translateX(0) scale(1);
    }
}
/* Cartella Colori Fan — si apre a ventaglio */
.vp-fan-container {
    position: absolute;
    bottom: 5%;
    right: -2%;
    width: 420px;
    height: 420px;
    transform-origin: bottom center;
}
.vp-fan-strip {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 44px;
    height: 260px;
    background: var(--fs-color);
    border-radius: 22px 22px 6px 6px;
    transform-origin: bottom center;
    transform: rotate(0deg);
    opacity: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    animation: vpFanOpen 1.8s var(--ease) forwards;
    animation-delay: calc(var(--fs-i) * 0.06s + 0.3s);
}
.vp-fan-strip::after {
    content: '';
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
@keyframes vpFanOpen {
    0% { opacity: 0; transform: rotate(0deg) translateX(-50%); }
    100% { opacity: 0.85; transform: rotate(calc( (var(--fs-i) - 7.5) * 6deg )) translateX(-50%); }
}
/* Floating color swatches */
.vp-floating-swatch {
    position: absolute;
    left: var(--sw-x);
    top: var(--sw-y);
    width: var(--sw-size);
    height: var(--sw-size);
    background: var(--sw-color);
    border-radius: 8px;
    opacity: 0.12;
    animation: vpSwatchFloat 8s ease-in-out infinite;
    animation-delay: var(--sw-delay);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
@keyframes vpSwatchFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-3deg); }
}
.vp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.vp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    background: rgba(255,107,53,0.1);
    border: 1px solid rgba(255,107,53,0.2);
    color: var(--orange);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}
.vp-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 7vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -1px;
}
.vp-hero-accent {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.vp-hero-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    -webkit-text-fill-color: var(--text);
}
.vp-hero-desc {
    font-family: var(--font-body);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 32px;
    max-width: 640px;
}
.vp-hero-ctas {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-bottom: 48px;
}
.vp-hero-stats {
    display: flex; align-items: center; gap: 32px;
    flex-wrap: wrap;
}
.vp-stat { display: flex; flex-direction: column; gap: 2px; }
.vp-stat-num {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: var(--text);
    line-height: 1.1;
}
.vp-stat-suffix {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--orange);
}
.vp-stat-label {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.vp-stat-divider {
    width: 1px; height: 40px;
    background: var(--border);
}

/* ── Sections Common ── */
.vp-section {
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    overflow: hidden;
}
.vp-laser-section { background: var(--bg); }
.vp-interni { background: var(--bg-warm); }
.vp-esterni { background: var(--bg); }

/* Section background photo */
.vp-has-bg {
    position: relative;
    overflow: hidden;
}
.vp-section-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.vp-section-bg-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, var(--bg-warm) 0%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.7) 80%, var(--bg-warm) 100%);
}
.vp-has-bg > .container { position: relative; z-index: 1; }
.vp-esterni.vp-has-bg .vp-section-bg-overlay {
    background:
        linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.7) 80%, var(--bg) 100%);
}

.vp-smalti { background: var(--bg-warm); }
.vp-decorative { background: #0D0D12; color: white; position: relative; }
.vp-gallery { background: var(--bg); }
.vp-brands { background: var(--bg-warm); }
.vp-final-cta { background: var(--bg); }

/* ── Laser Animation ── */
.vp-laser-demo {
    margin-bottom: clamp(48px, 6vw, 80px);
}
.vp-laser-stage {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: var(--radius);
    min-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.vp-wall-sample {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.1);
}
.vp-wall-texture {
    width: 100%;
    height: 100%;
    background:
        repeating-conic-gradient(rgba(196,149,106,0.3) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px,
        linear-gradient(135deg, #C4956A, #A07850, #C4956A);
}
.vp-wall-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-family: var(--font-ui);
    font-size: 11px;
    text-align: center;
    letter-spacing: 0.5px;
}
.vp-laser-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}
.vp-laser-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #FF0000;
    box-shadow: 0 0 20px 8px rgba(255,0,0,0.6), 0 0 60px 20px rgba(255,0,0,0.3);
    position: absolute;
    top: -6px; left: -6px;
}
.vp-laser-line {
    position: absolute;
    top: 0; left: 6px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #FF0000, transparent);
    opacity: 0.8;
}
.vp-laser-result {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.vp-laser-stage.scanned .vp-laser-result { opacity: 1; }
.vp-result-swatch {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: #C4956A;
    box-shadow: 0 4px 16px rgba(196,149,106,0.4);
}
.vp-result-data {
    display: flex; flex-direction: column; gap: 4px;
}
.vp-result-hex {
    font-family: 'DM Sans', monospace;
    font-size: 20px; font-weight: 700;
    color: white;
}
.vp-result-match {
    font-family: var(--font-ui);
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.vp-result-match strong { color: #00E676; }
.vp-scan-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.vp-scan-line {
    stroke: rgba(255,0,0,0.15);
    stroke-width: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}
.vp-laser-stage.scanning .vp-scan-line {
    animation: vpScanDraw 1.5s var(--ease) forwards;
}
.vp-scan-line:nth-child(1) { animation-delay: 0s; }
.vp-scan-line:nth-child(2) { animation-delay: 0.2s; }
.vp-scan-line:nth-child(3) { animation-delay: 0.4s; }
.vp-scan-line:nth-child(4) { animation-delay: 0.6s; }
.vp-scan-line:nth-child(5) { animation-delay: 0.8s; }
@keyframes vpScanDraw {
    to { stroke-dashoffset: 0; }
}

/* Laser beam animation */
.vp-laser-stage.scanning .vp-laser-dot {
    animation: vpLaserPulse 0.8s ease-in-out infinite;
}
.vp-laser-stage.scanning .vp-laser-line {
    animation: vpLaserGrow 2s var(--ease) forwards;
}
@keyframes vpLaserPulse {
    0%, 100% { box-shadow: 0 0 20px 8px rgba(255,0,0,0.6), 0 0 60px 20px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 30px 12px rgba(255,0,0,0.8), 0 0 80px 30px rgba(255,0,0,0.4); }
}
@keyframes vpLaserGrow {
    0% { height: 0; opacity: 0.8; }
    100% { height: 200px; opacity: 0; }
}

/* Laser beam horizontal scanning animation */
.vp-laser-stage.scanning .vp-laser-beam {
    animation: vpLaserScan 3s var(--ease) forwards;
}
@keyframes vpLaserScan {
    0% { left: 30%; top: 30%; }
    25% { left: 60%; top: 30%; }
    50% { left: 60%; top: 60%; }
    75% { left: 30%; top: 60%; }
    100% { left: 45%; top: 45%; }
}

/* ── Process Steps ── */
.vp-process {
    margin-bottom: clamp(48px, 6vw, 80px);
}
.vp-process-title {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 40px;
}
.vp-process-steps {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.vp-step {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    text-align: center;
    padding: 24px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.5s var(--ease);
}
.vp-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border-color: var(--orange);
}
.vp-step-num {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 12px;
}
.vp-step-icon {
    width: 48px; height: 48px;
    margin: 0 auto 16px;
    color: var(--orange);
}
.vp-step-icon svg { width: 100%; height: 100%; }
.vp-step h4 {
    font-family: var(--font-heading);
    font-size: 17px; font-weight: 700;
    color: var(--text); margin-bottom: 10px;
}
.vp-step p {
    font-family: var(--font-body);
    font-size: 14px; color: var(--text-light);
    line-height: 1.6;
}
.vp-step-arrow {
    display: flex; align-items: center;
    color: var(--orange);
    opacity: 0.4;
    padding-top: 80px;
}
.vp-step-arrow svg { width: 24px; height: 24px; }

/* ── Tintometro Machine ── */
.vp-tintometro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.vp-tinto-visual {
    position: relative;
}
.vp-tinto-machine {
    position: relative;
}
.vp-tinto-body {
    position: relative;
    background: linear-gradient(180deg, #2d2d3d, #1a1a2e);
    border-radius: var(--radius);
    padding: 24px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.vp-tinto-screen {
    background: #0a0a14;
    border: 2px solid rgba(0,230,118,0.3);
    border-radius: 8px;
    padding: 12px 24px;
    margin-bottom: 24px;
    width: 80%;
    text-align: center;
}
.vp-tinto-screen-text {
    font-family: 'DM Sans', monospace;
    font-size: 14px;
    color: #00E676;
    letter-spacing: 2px;
    animation: vpScreenBlink 1.5s step-end infinite;
}
@keyframes vpScreenBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.vp-tinto-nozzles {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.vp-nozzle {
    width: 20px;
    height: 40px;
    background: var(--nz-color);
    border-radius: 4px 4px 0 0;
    position: relative;
}
.vp-nozzle::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nz-color);
    opacity: 0;
}
.vp-tinto-body.active .vp-nozzle::after {
    animation: vpNozzleDrip 2s ease-in-out infinite;
    animation-delay: var(--nz-delay);
}
@keyframes vpNozzleDrip {
    0% { opacity: 0; transform: translateX(-50%) translateY(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(80px); }
}
.vp-drops-container {
    position: absolute;
    bottom: 100px;
    left: 0; right: 0;
    height: 120px;
    pointer-events: none;
}
.vp-drop {
    position: absolute;
    left: var(--drop-x);
    top: 0;
    width: 8px;
    height: 12px;
    background: var(--drop-color);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
}
.vp-tinto-body.active .vp-drop {
    animation: vpDropFall 2.5s ease-in infinite;
    animation-delay: var(--drop-delay);
}
@keyframes vpDropFall {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(100px) scale(0.5); opacity: 0; }
}
.vp-bucket {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 70px;
    background: linear-gradient(180deg, #666, #444);
    border-radius: 0 0 10px 10px;
    border: 3px solid #888;
    border-top: none;
    overflow: hidden;
}
.vp-bucket::before {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px;
    height: 12px;
    background: linear-gradient(180deg, #999, #777);
    border-radius: 4px;
}
.vp-bucket-fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0;
    background: linear-gradient(135deg, var(--orange), var(--pink), var(--purple));
    transition: height 3s var(--ease);
    border-radius: 0 0 6px 6px;
}
.vp-tinto-body.active .vp-bucket-fill { height: 70%; }

.vp-tinto-info h3 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 16px;
}
.vp-tinto-info p {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 24px;
}
.vp-tinto-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vp-tinto-features li {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}
.vp-tinto-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
}

/* ── Product Cards (Interni/Esterni) ── */
.vp-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.vp-prod-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.5s var(--ease);
}
.vp-prod-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: var(--vpc-accent);
}
.vp-prod-img-slot {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}
.vp-prod-img-slot img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.vp-prod-card:hover .vp-prod-img-slot img { transform: scale(1.08); }
.vp-prod-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #aaa;
    min-height: 200px;
}
.vp-prod-placeholder span {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #bbb;
}
.vp-prod-body { padding: 24px; }
.vp-prod-body h3 {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 700;
    color: var(--text); margin-bottom: 10px;
}
.vp-prod-body p {
    font-family: var(--font-body);
    font-size: 15px; color: var(--text-light);
    line-height: 1.6; margin-bottom: 16px;
}
.vp-prod-tags {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.vp-prod-tags span {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255,107,53,0.08);
    color: var(--orange);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
}

/* ── Smalti Grid ── */
.vp-smalti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.vp-smalti-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 32px 24px;
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.5s var(--ease);
}
.vp-smalti-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
    border-color: var(--si-color);
}
.vp-smalti-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    color: var(--si-color);
    transition: transform 0.4s var(--ease-bounce);
}
.vp-smalti-card:hover .vp-smalti-icon { transform: scale(1.15) rotate(-5deg); }
.vp-smalti-icon svg { width: 100%; height: 100%; }
.vp-smalti-card h4 {
    font-family: var(--font-heading);
    font-size: 18px; font-weight: 700;
    color: var(--text); margin-bottom: 10px;
}
.vp-smalti-card p {
    font-family: var(--font-body);
    font-size: 14px; color: var(--text-light);
    line-height: 1.6;
}

/* ── Decorative Section ── */
.vp-deco-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.vp-deco-blob {
    position: absolute;
    left: var(--db-x);
    top: var(--db-y);
    width: var(--db-size);
    height: var(--db-size);
    background: var(--db-color);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: vpDecoFloat 12s ease-in-out infinite;
    animation-delay: var(--db-delay);
}
@keyframes vpDecoFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.9); }
}
.vp-decorative .section-sub { color: rgba(255,255,255,0.6); }
.vp-decorative .section-chip { background: rgba(255,107,53,0.2) !important; }

.vp-deco-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.vp-deco-card {
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.5s var(--ease);
    backdrop-filter: blur(10px);
}
.vp-deco-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.vp-deco-visual {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
}
/* (texture classes removed — now using real photos via .vp-deco-img-slot) */
.vp-deco-info {
    padding: 20px;
}
.vp-deco-info h4 {
    font-family: var(--font-heading);
    font-size: 18px; font-weight: 700;
    color: white; margin-bottom: 8px;
}
.vp-deco-info p {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

/* ── Gallery Carousel Rows ── */
.vp-gal-row {
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.vp-gal-row:last-child { margin-bottom: 0; }
.vp-gal-track {
    display: flex;
    flex-shrink: 0;
    gap: 16px;
}
.vp-gal-track-left { animation: vpGalScrollLeft 30s linear infinite; }
.vp-gal-track-right { animation: vpGalScrollRight 35s linear infinite; }
@keyframes vpGalScrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes vpGalScrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.vp-gal-track:hover { animation-play-state: paused; }
.vp-gal-slide {
    flex-shrink: 0;
    width: 320px;
    height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.vp-gal-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.vp-gal-slide:hover img { transform: scale(1.08); }
.vp-gal-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #bbb;
}
.vp-gal-placeholder span {
    font-family: var(--font-ui);
    font-size: 12px;
}
.vp-gal-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.vp-gal-slide:hover .vp-gal-overlay { opacity: 1; }
.vp-gal-overlay span {
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600;
    color: white;
}

/* ── Brands Grid (static) ── */
.vp-brands-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.vp-brand-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    position: relative;
}
.vp-brand-tile:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 12px 36px rgba(255,107,53,0.12);
}
.vp-brand-tile::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    z-index: -1;
    transition: opacity 0.3s var(--ease);
}
.vp-brand-tile:hover::after { opacity: 0.12; }
.vp-brand-tile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-brand-tile-logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: grayscale(40%) opacity(0.7);
    transition: filter 0.3s var(--ease);
}
.vp-brand-tile:hover .vp-brand-tile-logo img {
    filter: grayscale(0%) opacity(1);
}
.vp-brand-tile-logo span {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* ── Decorative image slots ── */
.vp-deco-img-slot {
    position: relative;
}
.vp-deco-img-slot img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.vp-deco-card:hover .vp-deco-img-slot img { transform: scale(1.06); }
.vp-deco-placeholder-img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex; align-items: center; justify-content: center;
    min-height: 180px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vp-deco-placeholder-img span {
    font-family: var(--font-ui);
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

/* ── VP CTA ── */
.vp-cta-box {
    position: relative;
    background: linear-gradient(135deg, #1A1A2E, #16213E);
    border-radius: var(--radius);
    padding: clamp(48px, 6vw, 80px);
    overflow: hidden;
    text-align: center;
}
.vp-cta-bg-blobs { position: absolute; inset: 0; pointer-events: none; }
.vp-cta-content { position: relative; z-index: 2; }
.vp-cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}
.vp-cta-content p {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 32px;
}
.vp-cta-box .btn-outline-fun {
    color: white;
    border-color: rgba(255,255,255,0.45);
}
.vp-cta-box .btn-outline-fun:hover {
    background: white;
    color: var(--text);
    border-color: white;
}

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

/* ═══════════════════════════════════════════
   VERNICI — Cinematic Photo Break Sections
   ═══════════════════════════════════════════ */
.vp-photo-break {
    position: relative;
    height: clamp(50vh, 65vh, 80vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-pb-img-wrap {
    position: absolute;
    inset: -40px;
    z-index: 0;
}
.vp-pb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: vpPbKenBurns 25s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes vpPbKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.vp-pb-alt .vp-pb-img {
    animation-name: vpPbKenBurns2;
    animation-duration: 30s;
}
@keyframes vpPbKenBurns2 {
    0%   { transform: scale(1.05) translate(1%, 0); }
    100% { transform: scale(1) translate(-1%, -1.5%); }
}
.vp-pb-warm .vp-pb-img {
    animation-name: vpPbKenBurns3;
    animation-duration: 22s;
}
@keyframes vpPbKenBurns3 {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(1.5%, -0.5%); }
}
.vp-pb-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(10,10,15,0.45) 0%,
            rgba(10,10,15,0.2) 40%,
            rgba(10,10,15,0.25) 60%,
            rgba(10,10,15,0.55) 100%),
        radial-gradient(ellipse at center, transparent 0%, rgba(10,10,15,0.3) 100%);
}
.vp-pb-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    padding: 0 24px;
}
.vp-pb-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 16px;
    padding: 6px 18px;
    background: rgba(255,107,53,0.15);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,107,53,0.25);
    backdrop-filter: blur(8px);
}
.vp-pb-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.vp-pb-title em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    background: linear-gradient(135deg, var(--orange), #FFD600);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vp-pb-desc {
    font-family: var(--font-body);
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    max-width: 520px;
    margin: 0 auto;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
/* Alternating alignment for visual rhythm */
.vp-pb-alt .vp-pb-content { text-align: left; margin-right: auto; margin-left: 8%; }
.vp-pb-warm .vp-pb-content { text-align: right; margin-left: auto; margin-right: 8%; }

/* ═════════════════════════════════════════════
   INDEX — Vernici Section Full Background Photo
   ═════════════════════════════════════════════ */
.idx-vernici-bg {
    position: absolute;
    inset: -30px;
    z-index: 0;
}
.idx-vernici-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    animation: idxVerniciBgDrift 30s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes idxVerniciBgDrift {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.idx-vernici-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,250,245,0.45) 30%,
            rgba(255,245,240,0.40) 60%,
            rgba(255,255,255,0.55) 100%);
    backdrop-filter: blur(1.5px);
}
.idx-vernici > .container {
    position: relative;
    z-index: 2;
}
.idx-vernici .ivg-card {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,0.6);
}
.idx-vernici .logo-carousel-section {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
    padding: 32px;
}
.idx-vernici .palette-showcase {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);
    border-radius: var(--radius);
    padding: clamp(24px, 4vw, 48px);
}

/* ═══════════════════════════════════
   PARATI PAGE — Luxury Dark Theme
   ═══════════════════════════════════ */

/* ── Dark Body Override ── */
.pp-body {
    background: #0a0a0f;
    color: #f0ece4;
}
.pp-body ::selection { background: #C4A265; color: #0a0a0f; }
.pp-body .navbar { background: rgba(10,10,15,0.85); backdrop-filter: blur(20px); }
.pp-body .navbar.scrolled { background: rgba(10,10,15,0.95); border-bottom: 1px solid rgba(196,162,101,0.15); }
.pp-body .nav-link { color: rgba(240,236,228,0.7); }
.pp-body .nav-link:hover, .pp-body .nav-link.active { color: #C4A265; }
.pp-body .logo-main { color: #f0ece4; }
.pp-body .logo-dot { color: #C4A265; }
.pp-body .footer { background: #080810; color: rgba(240,236,228,0.7); }
.pp-body .footer-wave svg { color: #080810; }
.pp-body .footer-logo { color: #f0ece4; }
.pp-body .footer-links h4, .pp-body .footer-contact h4 { color: #C4A265; }
.pp-body .footer-links a:hover { color: #C4A265; }
.pp-body .footer-bottom { border-top-color: rgba(196,162,101,0.15); }
.pp-body .btn-outline-light {
    border: 2px solid rgba(196,162,101,0.4); color: #C4A265;
}
.pp-body .btn-outline-light:hover {
    background: rgba(196,162,101,0.1); border-color: #C4A265;
}

/* ── Gold accent ── */
.pp-accent-gold {
    background: linear-gradient(135deg, #C4A265, #E8D5A3, #C4A265);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Section Base ── */
.pp-section {
    padding: 100px 0;
    position: relative;
}
.pp-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}
.pp-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 16px;
}
.pp-section-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800; line-height: 1.1;
    color: #f0ece4;
    margin-bottom: 20px;
}
.pp-section-sub {
    font-family: var(--font-body);
    font-size: 17px; line-height: 1.7;
    color: rgba(240,236,228,0.6);
}

/* ═══════════════════════════════════
   REVIEWS — Continuous Side Float
   ═══════════════════════════════════ */
.pp-reviews-splash {
    position: fixed; inset: 0; z-index: 99;
    pointer-events: none;
    overflow: hidden;
}
.pp-review-card {
    position: absolute;
    background: rgba(14,14,22,0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(196,162,101,0.2);
    border-radius: 14px;
    padding: 16px 20px;
    width: 260px;
    opacity: 0;
    animation: ppRevFloat 4.5s var(--ease) forwards;
    animation-delay: var(--rc-del, 0s);
}
.pp-review-card p {
    font-family: var(--font-body); font-size: 13px;
    color: rgba(240,236,228,0.8); line-height: 1.5;
    margin-bottom: 6px; font-style: italic;
}
.pp-review-card > span {
    font-family: var(--font-ui); font-size: 11px;
    font-weight: 600; color: #C4A265;
}
.pp-rc-stars {
    color: #C4A265; font-size: 12px; margin-bottom: 6px;
    letter-spacing: 2px;
}

/* Left side reviews: stay in left 20% */
.pp-review-card.pp-rc-left {
    left: var(--rc-x, 2%);
}
/* Right side reviews: stay in right 20% */
.pp-review-card.pp-rc-right {
    right: var(--rc-x, 2%);
}

@keyframes ppRevFloat {
    0%   { opacity: 0; transform: translateY(30px) scale(0.92); }
    12%  { opacity: 0.9; transform: translateY(0) scale(1); }
    75%  { opacity: 0.9; transform: translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.95); }
}

/* ═══════════════════════════════════
   HERO
   ═══════════════════════════════════ */
.pp-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pp-hero-bg {
    position: absolute; inset: 0;
}

/* ── Checkerboard Scrolling Mosaic ── */
.pp-mosaic {
    position: absolute; inset: -20%;
    display: flex;
    gap: 10px;
    transform: rotate(-12deg) scale(1.3);
    transform-origin: center center;
}
.pp-mosaic-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 10px;
}
.pp-mosaic-col img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 5;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}
.pp-mosaic-up {
    animation: ppMosaicUp 45s linear infinite;
}
.pp-mosaic-down {
    animation: ppMosaicDown 50s linear infinite;
}
@keyframes ppMosaicUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes ppMosaicDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
.pp-mosaic-col-extra {
    display: none;
}
@media (min-width: 1200px) {
    .pp-mosaic-col-extra { display: flex; }
}

/* Dark overlay to keep text readable */
.pp-mosaic-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 45%, rgba(10,10,15,0.65) 0%, rgba(10,10,15,0.45) 60%, rgba(10,10,15,0.7) 100%),
        linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.25) 40%, rgba(10,10,15,0.7) 100%);
    z-index: 1;
}

.pp-hero-texture {
    position: absolute; inset: 0; z-index: 2;
    background:
        repeating-linear-gradient(45deg, rgba(196,162,101,0.03) 0px, transparent 1px, transparent 40px, rgba(196,162,101,0.03) 41px),
        repeating-linear-gradient(-45deg, rgba(196,162,101,0.02) 0px, transparent 1px, transparent 40px, rgba(196,162,101,0.02) 41px);
    animation: ppTextureDrift 30s linear infinite;
}
@keyframes ppTextureDrift {
    from { transform: translate(0, 0); }
    to { transform: translate(40px, 40px); }
}
.pp-hero-gradient {
    position: absolute; inset: 0; z-index: 2;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(196,162,101,0.08) 0%, transparent 70%),
        linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.9) 100%);
}
.pp-hero-gold-particles {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none; overflow: hidden;
}
.pp-gold-p {
    position: absolute;
    width: var(--gp-size, 3px); height: var(--gp-size, 3px);
    background: radial-gradient(circle, #C4A265, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: ppGoldFloat var(--gp-dur, 8s) var(--gp-del, 0s) ease-in-out infinite;
}
@keyframes ppGoldFloat {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    20% { opacity: 0.8; }
    80% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-20vh) scale(1); }
}

.pp-hero-content {
    position: relative; z-index: 2;
    text-align: center;
    padding-top: calc(var(--nav-h) + 40px);
}
.pp-hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: #C4A265;
    padding: 10px 24px;
    border: 1px solid rgba(196,162,101,0.3);
    border-radius: var(--radius-pill);
    background: rgba(196,162,101,0.05);
    margin-bottom: 32px;
}
.pp-chip-diamond {
    font-size: 10px; animation: ppDiamondPulse 2s ease-in-out infinite;
}
@keyframes ppDiamondPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}
.pp-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(48px, 10vw, 100px);
    font-weight: 900; line-height: 0.95;
    color: #f0ece4;
    margin-bottom: 24px;
    letter-spacing: -2px;
}
.pp-title-serif {
    font-family: 'Playfair Display', serif;
    font-style: italic; font-weight: 700;
    background: linear-gradient(135deg, #C4A265, #E8D5A3, #C4A265);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    background-size: 200% 100%;
    animation: ppGoldShimmer 4s ease-in-out infinite;
}
@keyframes ppGoldShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pp-hero-sub {
    font-family: var(--font-body);
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(240,236,228,0.6);
    max-width: 600px; margin: 0 auto 40px;
    line-height: 1.7;
}
.pp-hero-sub strong { color: #f0ece4; }

/* Hero Stats */
.pp-hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 40px;
    margin-bottom: 48px;
}
.pp-hstat { text-align: center; }
.pp-hstat-num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900; color: #C4A265;
    line-height: 1;
}
.pp-hstat-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: rgba(240,236,228,0.5);
    margin-top: 8px;
}
.pp-hstat-divider {
    width: 1px; height: 48px;
    background: rgba(196,162,101,0.2);
}

/* Hero CTAs */
.pp-hero-ctas {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
}

/* Hero scroll indicator */
.pp-hero-scroll {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 2;
}
.pp-scroll-line {
    width: 1px; height: 48px;
    background: linear-gradient(180deg, #C4A265, transparent);
    animation: ppScrollPulse 2s ease-in-out infinite;
}
@keyframes ppScrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50% { opacity: 0.8; transform: scaleY(1); }
}
.pp-hero-scroll span {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(196,162,101,0.5);
}

/* ═══════════════════════════════════
   BRAND MARQUEE
   ═══════════════════════════════════ */
.pp-brand-marquee {
    background: rgba(196,162,101,0.04);
    border-top: 1px solid rgba(196,162,101,0.1);
    border-bottom: 1px solid rgba(196,162,101,0.1);
    padding: 24px 0;
    overflow: hidden;
    position: relative;
}
.pp-brand-marquee::before,
.pp-brand-marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
    pointer-events: none;
}
.pp-brand-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #0a0a0f, transparent);
}
.pp-brand-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, #0a0a0f, transparent);
}
.pp-marquee-track {
    display: flex; gap: 64px; align-items: center;
    animation: ppMarqueeScroll 40s linear infinite;
    width: max-content;
}
.pp-marquee-item {
    flex-shrink: 0;
}
.pp-marquee-item img {
    height: 40px; width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
.pp-marquee-item img:hover {
    opacity: 0.9;
    filter: brightness(0) invert(0.82) sepia(1) hue-rotate(5deg) saturate(0.5);
}
@keyframes ppMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════
   TEXTURE GALLERY
   ═══════════════════════════════════ */
/* ── I Nostri Lavori — Vertical Carousel ── */
.pp-lavori {
    background: #0d0d14;
    overflow: hidden;
}
.pp-lavori-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 0 20px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.pp-lavori-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: ppLavoriScroll 60s linear infinite;
    cursor: grab;
}
.pp-lavori-track:active { cursor: grabbing; }
.pp-lavori-track:hover { animation-play-state: paused; }

.pp-lavori-card {
    flex-shrink: 0;
    width: 260px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pp-lavori-card:hover {
    transform: scale(1.04) translateY(-6px);
    box-shadow: 0 20px 50px rgba(196,162,101,0.15);
}
.pp-lavori-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease);
}
.pp-lavori-card:hover img { transform: scale(1.06); }

@keyframes ppLavoriScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Lightbox ── */
.pp-lightbox {
    position: fixed; inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.pp-lightbox.active {
    opacity: 1; visibility: visible;
}
.pp-lb-img-wrap {
    position: relative;
    max-width: 90vw; max-height: 90vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}
.pp-lb-img-wrap.zoomed { cursor: zoom-out; overflow: auto; }
.pp-lb-img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.35s var(--ease);
    transform-origin: center center;
    user-select: none; -webkit-user-drag: none;
}
.pp-lb-img-wrap.zoomed .pp-lb-img {
    max-width: none; max-height: none;
    transform: scale(2);
    cursor: grab;
}
.pp-lb-close {
    position: absolute; top: 20px; right: 28px;
    background: none; border: none;
    color: #f0ece4; font-size: 40px; font-weight: 300;
    cursor: pointer; z-index: 10;
    opacity: 0.7; transition: opacity 0.3s;
    line-height: 1;
}
.pp-lb-close:hover { opacity: 1; }
.pp-lb-prev, .pp-lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(196,162,101,0.15);
    border: 1px solid rgba(196,162,101,0.25);
    color: #C4A265; font-size: 24px;
    width: 50px; height: 50px;
    border-radius: 50%;
    cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.7; transition: opacity 0.3s, background 0.3s;
}
.pp-lb-prev:hover, .pp-lb-next:hover {
    opacity: 1; background: rgba(196,162,101,0.3);
}
.pp-lb-prev { left: 20px; }
.pp-lb-next { right: 20px; }
.pp-lb-counter {
    position: absolute; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600;
    letter-spacing: 2px;
    color: rgba(196,162,101,0.7);
    z-index: 10;
}

/* ═══════════════════════════════════
   BRANDS SHOWCASE GRID
   ═══════════════════════════════════ */
.pp-brands-showcase {
    background: #0a0a0f;
}
.pp-brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pp-brand-card {
    position: relative;
    background: rgba(240,236,228,0.03);
    border: 1px solid rgba(196,162,101,0.1);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s var(--ease);
}
.pp-brand-card:hover {
    transform: translateY(-8px);
    border-color: rgba(196,162,101,0.35);
    background: rgba(196,162,101,0.05);
    box-shadow: 0 20px 60px rgba(196,162,101,0.08);
}
.pp-brand-card-glow {
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(196,162,101,0.08) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.5s var(--ease);
    pointer-events: none;
}
.pp-brand-card:hover .pp-brand-card-glow { opacity: 1; }
.pp-brand-card-logo {
    height: 56px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.pp-brand-card-logo img {
    max-height: 56px; width: auto;
    filter: brightness(0) invert(0.82) sepia(1) hue-rotate(5deg) saturate(0.4);
    transition: filter 0.4s var(--ease);
}
.pp-brand-card:hover .pp-brand-card-logo img {
    filter: brightness(0) invert(0.85) sepia(1) hue-rotate(5deg) saturate(0.6);
}
.pp-brand-card h3 {
    font-family: var(--font-heading);
    font-size: 18px; font-weight: 800;
    color: #f0ece4;
    margin-bottom: 6px;
}
.pp-brand-card p {
    font-family: var(--font-body);
    font-size: 13px; color: rgba(240,236,228,0.45);
    line-height: 1.5;
}
.pp-brand-card-arrow {
    display: block;
    font-size: 20px; color: #C4A265;
    margin-top: 12px;
    opacity: 0; transform: translateX(-8px);
    transition: all 0.4s var(--ease);
}
.pp-brand-card:hover .pp-brand-card-arrow {
    opacity: 1; transform: translateX(0);
}

/* ═══════════════════════════════════
   SHOWROOM SECTION
   ═══════════════════════════════════ */
.pp-showroom {
    background: #0d0d14;
}
.pp-showroom-noappt {
    display: flex; align-items: center; gap: 24px;
    background: linear-gradient(135deg, rgba(196,162,101,0.08), rgba(196,162,101,0.03));
    border: 1px solid rgba(196,162,101,0.2);
    border-radius: var(--radius);
    padding: 28px 36px;
    margin-bottom: 48px;
}
.pp-noappt-icon {
    flex-shrink: 0; color: #C4A265;
}
.pp-noappt-text h3 {
    font-family: var(--font-heading);
    font-size: 22px; font-weight: 800;
    color: #C4A265; margin-bottom: 4px;
}
.pp-noappt-text p {
    font-family: var(--font-body);
    font-size: 15px; color: rgba(240,236,228,0.6);
}
.pp-showroom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.pp-show-card {
    background: rgba(240,236,228,0.03);
    border: 1px solid rgba(196,162,101,0.08);
    border-radius: var(--radius);
    padding: 36px;
    transition: all 0.5s var(--ease);
}
.pp-show-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196,162,101,0.25);
    background: rgba(196,162,101,0.04);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.pp-show-icon {
    color: #C4A265;
    margin-bottom: 20px;
    transition: transform 0.5s var(--ease);
}
.pp-show-card:hover .pp-show-icon {
    transform: scale(1.1) rotate(-3deg);
}
.pp-show-card h3 {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 800;
    color: #f0ece4; margin-bottom: 10px;
}
.pp-show-card p {
    font-family: var(--font-body);
    font-size: 15px; color: rgba(240,236,228,0.5);
    line-height: 1.7;
}

/* ── Showroom Carousel ── */
.pp-showroom-carousel {
    position: relative;
    margin-bottom: 48px;
    border-radius: var(--radius);
    overflow: hidden;
}
.pp-showcar-viewport {
    overflow: hidden;
    border-radius: var(--radius);
}
.pp-showcar-track {
    display: flex;
    transition: transform 0.7s var(--ease);
}
.pp-showcar-slide {
    flex: 0 0 100%;
    position: relative;
    aspect-ratio: 16/7;
    overflow: hidden;
}
.pp-showcar-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 6s ease-out;
}
.pp-showcar-slide.active img {
    transform: scale(1.05);
}
.pp-showcar-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 32px;
    background: linear-gradient(0deg, rgba(10,10,15,0.85) 0%, transparent 100%);
    font-family: var(--font-heading);
    font-size: 18px; font-weight: 700;
    color: #f0ece4;
    letter-spacing: 0.5px;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.5s var(--ease);
}
.pp-showcar-slide.active .pp-showcar-caption {
    transform: translateY(0); opacity: 1;
}
.pp-showcar-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(196,162,101,0.3);
    background: rgba(10,10,15,0.6);
    backdrop-filter: blur(10px);
    color: #C4A265;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease);
    z-index: 3;
}
.pp-showcar-btn:hover {
    background: rgba(196,162,101,0.15);
    border-color: #C4A265;
    transform: translateY(-50%) scale(1.08);
}
.pp-showcar-prev { left: 16px; }
.pp-showcar-next { right: 16px; }
.pp-showcar-dots {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 3;
}
.pp-showcar-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(196,162,101,0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s var(--ease);
}
.pp-showcar-dot.active {
    background: #C4A265;
    border-color: #C4A265;
    transform: scale(1.2);
}

/* ── Showroom Photo Gallery (shared: index + parati — 4 big equal photos) ── */
.showroom-gal {
    margin-bottom: clamp(40px, 5vw, 64px);
}
.showroom-gal-heading {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}
.showroom-gal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 20px);
}
.showroom-gal-card {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(196,162,101,0.12);
    cursor: pointer;
    transition: all 0.5s var(--ease);
}
.showroom-gal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(196,162,101,0.15);
    border-color: rgba(196,162,101,0.4);
}
.showroom-gal-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease);
}
.showroom-gal-card:hover img {
    transform: scale(1.06);
}
.showroom-gal-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: clamp(14px, 2vw, 24px) clamp(16px, 2.5vw, 28px);
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s var(--ease);
}
.showroom-gal-card:hover .showroom-gal-overlay {
    opacity: 1;
    transform: translateY(0);
}
.showroom-gal-overlay span {
    font-family: var(--font-heading);
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    color: #C4A265;
}
@media (max-width: 480px) {
    .showroom-gal-grid {
        grid-template-columns: 1fr;
    }
    .showroom-gal-card {
        aspect-ratio: 16/10;
    }
    /* Always show overlay label on mobile */
    .showroom-gal-overlay {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Showroom Lightbox ── */
.idx-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.idx-lightbox.active { opacity: 1; pointer-events: all; }
.idx-lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.93);
    cursor: zoom-out;
}
.idx-lb-inner {
    position: relative; z-index: 2;
    max-width: min(90vw, 1300px);
    max-height: 88vh;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.idx-lb-img {
    max-width: 100%; max-height: 78vh;
    object-fit: contain;
    border-radius: 10px; display: block;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    transition: opacity 0.25s ease;
}
.idx-lb-img.loading { opacity: 0; }
.idx-lb-caption {
    font-family: var(--font-body); font-size: 14px;
    color: rgba(255,255,255,0.7); text-align: center; letter-spacing: 0.5px;
}
.idx-lb-close {
    position: fixed; top: 18px; right: 18px; z-index: 3;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: white;
    transition: background 0.2s, transform 0.2s;
}
.idx-lb-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }
.idx-lb-prev, .idx-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 3;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: white;
    transition: background 0.2s, transform 0.2s;
}
.idx-lb-prev { left: 18px; }
.idx-lb-next { right: 18px; }
.idx-lb-prev:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); }
.idx-lb-next:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); }
.idx-lb-dots {
    display: flex; gap: 8px; justify-content: center;
}
.idx-lb-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,0.35); cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.idx-lb-dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 768px) {
    .idx-lb-prev { left: 8px; }
    .idx-lb-next { right: 8px; }
    .idx-lb-prev, .idx-lb-next { width: 42px; height: 42px; }
}

/* ═══════════════════════════════════
   CATALOGS
   ═══════════════════════════════════ */
.pp-catalogs { background: #0a0a0f; }
.pp-cat-row {
    display: flex; flex-direction: column;
    gap: 12px;
    max-width: 700px; margin: 0 auto;
}
.pp-cat-card {
    display: flex; align-items: center;
    gap: 20px; width: 100%;
    padding: 14px;
    background: rgba(240,236,228,0.03);
    border: 1px solid rgba(196,162,101,0.08);
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    font: inherit; color: inherit;
    text-align: left;
    transition: all 0.4s var(--ease);
}
.pp-cat-card:hover {
    background: rgba(196,162,101,0.06);
    border-color: rgba(196,162,101,0.2);
    transform: translateX(4px);
}
.pp-cat-thumb {
    flex-shrink: 0;
    width: 80px; height: 100px;
    border-radius: 10px;
    overflow: hidden;
}
.pp-cat-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.pp-cat-card:hover .pp-cat-thumb img { transform: scale(1.08); }
.pp-cat-body {
    flex: 1; min-width: 0;
}
.pp-cat-tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 4px;
}
.pp-cat-body h3 {
    font-family: var(--font-heading);
    font-size: 17px; font-weight: 800;
    color: #f0ece4; margin-bottom: 3px;
    line-height: 1.2;
}
.pp-cat-body p {
    font-family: var(--font-body);
    font-size: 13px; color: rgba(240,236,228,0.45);
    line-height: 1.5; margin: 0;
}
.pp-cat-arrow {
    flex-shrink: 0;
    color: rgba(196,162,101,0.3);
    transition: color 0.3s, transform 0.3s;
    display: flex; align-items: center;
}
.pp-cat-card:hover .pp-cat-arrow {
    color: #C4A265; transform: translateX(4px);
}

/* ── Digital Catalog Viewer ── */
.pp-catview {
    position: fixed; inset: 0;
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.pp-catview.active { opacity: 1; visibility: visible; }
.pp-catview-backdrop {
    position: absolute; inset: 0;
    background: rgba(6,6,10,0.95);
    backdrop-filter: blur(20px);
}
.pp-catview-container {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px;
}

/* Header */
.pp-catview-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 800px;
    margin-bottom: 20px;
}
.pp-catview-brand {
    font-family: var(--font-heading);
    font-size: clamp(16px, 3vw, 22px); font-weight: 800;
    color: #f0ece4;
    letter-spacing: 1px;
}
.pp-catview-close {
    background: rgba(240,236,228,0.06);
    border: 1px solid rgba(240,236,228,0.1);
    color: #f0ece4;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.pp-catview-close:hover {
    background: rgba(196,162,101,0.15);
    border-color: rgba(196,162,101,0.3);
    color: #C4A265;
}

/* Book */
.pp-catview-book {
    position: relative;
    width: 100%; max-width: 800px;
    aspect-ratio: 4 / 3;
    max-height: 65vh;
    perspective: 1800px;
    display: flex;
}
.pp-catview-spine {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(196,162,101,0.3), rgba(196,162,101,0.08), rgba(196,162,101,0.3));
    border-radius: 2px;
    z-index: 10;
    box-shadow: 0 0 20px rgba(196,162,101,0.1);
}
.pp-catview-pages {
    position: relative;
    width: 100%; height: 100%;
}

/* Individual page */
.pp-catview-page {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    pointer-events: none;
}
.pp-catview-page.active {
    opacity: 1; pointer-events: auto;
}
.pp-catview-page.flip-left {
    transform: translateX(-30px) scale(0.96);
    opacity: 0;
}
.pp-catview-page.flip-right {
    transform: translateX(30px) scale(0.96);
    opacity: 0;
}
.pp-catview-pg-left,
.pp-catview-pg-right {
    position: relative;
    overflow: hidden;
    background: #111;
    border-radius: 4px;
}
.pp-catview-pg-left {
    border-radius: 8px 2px 2px 8px;
    box-shadow: inset -8px 0 20px rgba(0,0,0,0.3);
}
.pp-catview-pg-right {
    border-radius: 2px 8px 8px 2px;
    box-shadow: inset 8px 0 20px rgba(0,0,0,0.3);
}
.pp-catview-pg-left img,
.pp-catview-pg-right img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* page number label */
.pp-catview-pg-num {
    position: absolute; bottom: 10px;
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 600;
    letter-spacing: 1px;
    color: rgba(240,236,228,0.35);
    padding: 3px 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
}
.pp-catview-pg-left .pp-catview-pg-num { left: 12px; }
.pp-catview-pg-right .pp-catview-pg-num { right: 12px; }

/* Cover (first spread) */
.pp-catview-page.is-cover .pp-catview-pg-left {
    background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
    display: flex; align-items: center; justify-content: center;
}
.pp-catview-cover-title {
    font-family: var(--font-heading);
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 900; color: #C4A265;
    text-align: center; line-height: 1.2;
    padding: 30px;
}
.pp-catview-cover-title small {
    display: block; margin-top: 8px;
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(196,162,101,0.5);
}

/* Controls */
.pp-catview-controls {
    display: flex; align-items: center; gap: 24px;
    margin-top: 20px;
}
.pp-catview-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(196,162,101,0.2);
    background: rgba(196,162,101,0.06);
    color: #C4A265;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.pp-catview-btn:hover {
    background: rgba(196,162,101,0.15);
    border-color: rgba(196,162,101,0.4);
    transform: scale(1.08);
}
.pp-catview-btn:disabled {
    opacity: 0.25; pointer-events: none;
}
.pp-catview-counter {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600;
    letter-spacing: 2px;
    color: rgba(196,162,101,0.6);
    min-width: 80px; text-align: center;
}

/* Mobile single-page mode */
@media (max-width: 600px) {
    .pp-catview-book { aspect-ratio: 3/4; max-height: 60vh; }
    .pp-catview-page { grid-template-columns: 1fr; }
    .pp-catview-pg-left { border-radius: 8px; display: none; }
    .pp-catview-pg-right { border-radius: 8px; }
    .pp-catview-page.is-cover .pp-catview-pg-left { display: flex; }
    .pp-catview-page.is-cover .pp-catview-pg-right { display: none; }
    .pp-catview-spine { display: none; }
    .pp-catview-btn { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════
   POSTER PERSONALIZZATI
   ═══════════════════════════════════ */
.pp-poster {
    background: #0d0d14;
    position: relative;
    overflow: hidden;
}
.pp-poster::before {
    content: '';
    position: absolute; inset: 0;
    background: url('foto/parati/poster-personalizzati/hero-bg.webp') center/cover no-repeat;
    opacity: 0.25;
}
.pp-poster::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, #0d0d14 0%, rgba(13,13,20,0.4) 30%, rgba(13,13,20,0.4) 70%, #0d0d14 100%),
        radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(13,13,20,0.6) 100%);
}
.pp-poster > .container { position: relative; z-index: 1; }
.pp-poster-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
}
.pp-poster-text p {
    font-family: var(--font-body);
    font-size: 16px; color: rgba(240,236,228,0.6);
    line-height: 1.8; margin-bottom: 28px;
}
.pp-poster-features {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 32px;
}
.pp-pf-item {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-body);
    font-size: 15px; color: rgba(240,236,228,0.7);
}
.pp-pf-icon {
    color: #C4A265; font-size: 14px;
}
.pp-poster-visual {
    display: flex; gap: 20px;
    justify-content: center;
    position: relative;
}
.pp-poster-frame {
    width: 200px; aspect-ratio: 3/4;
    border: 3px solid rgba(196,162,101,0.3);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    transition: all 0.5s var(--ease);
}
.pp-poster-frame:hover {
    border-color: #C4A265;
    box-shadow: 0 20px 60px rgba(196,162,101,0.15);
}
.pp-poster-frame-2 {
    width: 160px;
    margin-top: 40px;
    opacity: 0.6;
}
.pp-poster-inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(196,162,101,0.08), rgba(196,162,101,0.02));
    position: relative;
}
.pp-poster-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(196,162,101,0.1) 50%, transparent 70%);
    animation: ppShimmer 3s ease-in-out infinite;
}
@keyframes ppShimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}
.pp-poster-inner span {
    position: relative; z-index: 1;
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-style: italic;
    color: rgba(196,162,101,0.5);
    text-align: center; line-height: 1.4;
    padding: 20px;
}

/* ═══════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════ */
.pp-final-cta {
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pp-final-cta-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(196,162,101,0.06) 0%, transparent 70%),
        linear-gradient(180deg, #0a0a0f, #0d0d14);
}
.pp-final-cta-content {
    position: relative; z-index: 2;
}
.pp-final-cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900; color: #f0ece4;
    margin-bottom: 20px;
}
.pp-final-cta-content > p {
    font-family: var(--font-body);
    font-size: 18px; color: rgba(240,236,228,0.55);
    max-width: 550px; margin: 0 auto 40px;
    line-height: 1.7;
}
.pp-final-cta-buttons {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 40px;
}
.pp-final-address {
    font-family: var(--font-ui);
    font-size: 13px; color: rgba(240,236,228,0.35);
    line-height: 1.8;
}
.pp-final-address p + p { margin-top: 2px; }

/* ═══════════════════════════════════
   ATTREZZATURE PAGE
   ═══════════════════════════════════ */
.attr-page { background: var(--bg-warm); }

.attr-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.attr-card {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 28px; background: var(--bg-card);
    border-radius: var(--radius); border: 1px solid var(--border);
    position: relative; overflow: hidden;
    transition: all 0.5s var(--ease);
}
.attr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.08);
    border-color: var(--ac);
}
.attr-card-icon {
    flex-shrink: 0; width: 64px; height: 64px;
    color: var(--ac); transition: transform 0.4s var(--ease-bounce);
}
.attr-card:hover .attr-card-icon { transform: scale(1.15) rotate(-5deg); }
.attr-card-icon svg { width: 100%; height: 100%; }
.attr-card-body h3 {
    font-family: var(--font-heading); font-size: 18px;
    font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.attr-card-body p {
    font-family: var(--font-body); font-size: 14px;
    color: var(--text-light); line-height: 1.6;
}
.attr-card-glow {
    position: absolute; top: -50%; right: -50%;
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--ac); opacity: 0; filter: blur(60px);
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}
.attr-card:hover .attr-card-glow { opacity: 0.06; }

/* ═══════════════════════════════════
   COMPLEMENTI PAGE
   ═══════════════════════════════════ */
.comp-page { background: var(--bg); }

.comp-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; margin-bottom: 60px;
}
.comp-card {
    border-radius: var(--radius); overflow: hidden;
    position: relative; min-height: 280px;
    transition: all 0.5s var(--ease);
}
.comp-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
.comp-featured { grid-column: span 2; min-height: 340px; }
.comp-card-bg { position: absolute; inset: 0; transition: transform 0.8s var(--ease); }
.comp-card:hover .comp-card-bg { transform: scale(1.05); }
.comp-card-body {
    position: relative; z-index: 1; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 32px; color: white;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%);
}
.comp-tag-pill {
    display: inline-block; align-self: flex-start;
    font-family: var(--font-ui); font-size: 10px;
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    margin-bottom: 12px;
}
.comp-card h3 {
    font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px);
    font-weight: 800; margin-bottom: 8px;
}
.comp-card p {
    font-family: var(--font-body); font-size: 15px;
    line-height: 1.6; opacity: 0.9; margin-bottom: 14px;
}
.comp-features { display: flex; gap: 8px; flex-wrap: wrap; }
.comp-features span {
    font-family: var(--font-ui); font-size: 11px;
    font-weight: 600; padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
}

/* Showroom CTA */
.showroom-cta {
    position: relative; padding: 60px 48px;
    border-radius: var(--radius); overflow: hidden;
    background: var(--text); color: white;
}
.showroom-cta-bg { position: absolute; inset: 0; overflow: hidden; }
.cta-blob {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.15;
    animation: blobMove 10s ease-in-out infinite alternate;
}
.cta-blob-1 { width: 300px; height: 300px; background: var(--orange); top: -20%; right: -10%; }
.cta-blob-2 { width: 250px; height: 250px; background: var(--purple); bottom: -30%; left: 10%; animation-delay: 3s; }
.cta-blob-3 { width: 200px; height: 200px; background: var(--teal); top: 20%; left: 50%; animation-delay: 5s; }

.showroom-cta-content { position: relative; z-index: 1; text-align: center; }
.cta-chip {
    display: inline-block; font-family: var(--font-ui);
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--orange);
    background: rgba(255, 107, 53, 0.15);
    padding: 6px 18px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.showroom-cta-content h3 {
    font-family: var(--font-heading); font-size: clamp(28px, 4vw, 44px);
    font-weight: 800; margin-bottom: 14px;
}
.showroom-cta-content p {
    font-family: var(--font-body); font-size: 17px;
    color: rgba(255,255,255,0.7); max-width: 550px;
    margin: 0 auto 32px; line-height: 1.7;
}
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.showroom-cta .btn-outline-fun { color: white; border-color: rgba(255,255,255,0.3); }
.showroom-cta .btn-outline-fun:hover { background: white; color: var(--text); }

/* ═══════════════════════════════════
   CONTATTI PAGE
   ═══════════════════════════════════ */
.contatti-page { background: var(--bg-warm); }

.contatti-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
}
.contatti-cards { display: flex; flex-direction: column; gap: 16px; }

.c-card {
    display: flex; gap: 18px; padding: 24px;
    background: var(--bg-card); border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
}
.c-card:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: var(--orange);
}
.c-card-icon {
    flex-shrink: 0; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; color: white;
    background: var(--ci);
}
.c-card-icon svg { width: 22px; height: 22px; }
.c-card-info h4 {
    font-family: var(--font-heading); font-size: 16px;
    font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.c-card-info p {
    font-family: var(--font-body); font-size: 14px;
    color: var(--text-light); line-height: 1.5;
}
.c-card-info a { color: var(--orange); font-weight: 600; }
.c-card-info a:hover { text-decoration: underline; }

.social-bar { display: flex; gap: 12px; }
.social-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-pill);
    background: var(--bg-card); border: 1px solid var(--border);
    font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    color: var(--text); transition: all 0.4s var(--ease);
}
.social-btn svg { width: 18px; height: 18px; color: var(--sb); }
.social-btn:hover {
    background: var(--sb); color: white; border-color: var(--sb);
    transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.social-btn:hover svg { color: white; }

.contatti-map { border-radius: var(--radius); overflow: hidden; }
.map-frame {
    width: 100%; height: 100%; min-height: 500px;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 500px; }

/* ═══════════════════════════════════
   FOOTER
   ═══════════════════════════════════ */
.footer {
    background: var(--text); color: white; padding: 80px 0 40px; position: relative;
}
.footer-wave {
    position: absolute; top: -1px; left: 0; right: 0; color: var(--bg);
    line-height: 0;
}
.footer-wave svg { width: 100%; height: 60px; }

.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px; margin-bottom: 48px;
}
.footer-logo {
    font-family: var(--font-heading); font-size: 22px;
    font-weight: 800; color: white; display: block; margin-bottom: 12px;
}
.footer-brand p {
    font-family: var(--font-body); font-size: 15px;
    color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 20px;
}
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 40px; height: 40px; display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    transition: all 0.4s var(--ease);
}
.footer-socials a:hover {
    background: var(--orange); border-color: var(--orange);
    color: white; transform: translateY(-3px);
}
.footer-socials a svg { width: 18px; height: 18px; }

.footer-links h4, .footer-contact h4 {
    font-family: var(--font-heading); font-size: 15px;
    font-weight: 700; margin-bottom: 16px;
}
.footer-links a {
    display: block; font-family: var(--font-ui); font-size: 13px;
    color: rgba(255,255,255,0.5); padding: 4px 0;
    transition: all 0.3s var(--ease);
}
.footer-links a:hover { color: var(--orange); transform: translateX(4px); }

.footer-contact p {
    font-family: var(--font-body); font-size: 14px;
    color: rgba(255,255,255,0.5); line-height: 1.6;
}
.footer-contact a { color: var(--orange); }

.footer-bottom {
    text-align: center; padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom p {
    font-family: var(--font-ui); font-size: 12px;
    color: rgba(255,255,255,0.4);
}

/* ── WhatsApp ── */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; display: flex;
    align-items: center; justify-content: center;
    z-index: 900; transition: all 0.4s var(--ease);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.whatsapp-float:hover { transform: scale(1.1) translateY(-4px); }
.whatsapp-float svg { width: 28px; height: 28px; color: white; }
.wa-pulse {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid #25D366;
    animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } }

/* ═══════════════════════════════════
   INDEX SECTIONS (Homepage)
   ═══════════════════════════════════ */
.idx-section {
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    overflow: hidden;
}
.idx-vernici { background: var(--bg); position: relative; }
.idx-parati-lux {
    background: #0D0D12;
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    overflow: hidden;
    color: white;
}
.idx-boiserie { background: var(--bg); position: relative; overflow: hidden; }
.idx-care { background: var(--bg-warm); }

/* ── Palette Fan Animation ── */
.palette-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.palette-fan {
    position: relative;
    height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.palette-strip {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 240px;
    border-radius: 20px 20px 6px 6px;
    transform-origin: bottom center;
    transition: transform 1.2s var(--ease), opacity 0.8s var(--ease);
    opacity: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.palette-fan.animate .palette-strip {
    opacity: 1;
}

.palette-info { display: flex; flex-direction: column; gap: 20px; position: relative; }
.palette-counter { display: flex; flex-direction: column; gap: 4px; }
.palette-num {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--orange), var(--pink), var(--purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1.1;
}
.palette-label {
    font-family: var(--font-ui);
    font-size: 14px; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0.5px;
}
.palette-desc {
    font-family: var(--font-body);
    font-size: 16px; color: var(--text-light); line-height: 1.7;
}

/* ── Index Vernici Grid ── */
.idx-vernici-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.ivg-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 32px 24px;
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease);
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.ivg-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ivg-accent);
    transform: scaleX(0);
    transition: transform 0.6s var(--ease);
}
.ivg-card:hover::before { transform: scaleX(1); }
.ivg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    border-color: var(--ivg-accent);
}
.ivg-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    color: var(--ivg-accent);
    transition: transform 0.4s var(--ease-bounce);
}
.ivg-card:hover .ivg-icon { transform: scale(1.15) rotate(-5deg); }
.ivg-icon svg { width: 100%; height: 100%; }
.ivg-card h3 {
    font-family: var(--font-heading); font-size: 18px;
    font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.ivg-card p {
    font-family: var(--font-body); font-size: 14px;
    color: var(--text-light); line-height: 1.6;
}

/* ── Logo Carousel ── */
.logo-carousel-section {
    text-align: center;
    margin-bottom: 40px;
}
.carousel-heading {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800; color: var(--text);
    margin-bottom: 24px;
}
.logo-carousel {
    overflow: hidden;
    position: relative;
    display: flex;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logo-track {
    display: flex;
    flex-shrink: 0;
    animation: logoScroll 35s linear infinite;
}
.logo-item {
    flex-shrink: 0;
    padding: 18px 36px;
    margin: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: all 0.3s var(--ease);
    display: flex; align-items: center; justify-content: center;
}
.logo-item:hover {
    border-color: var(--orange);
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-2px);
}
.logo-item img {
    height: 82px; width: auto; object-fit: contain;
    filter: grayscale(50%) opacity(0.6);
    transition: filter 0.3s var(--ease);
}
.logo-item:hover img { filter: grayscale(0%) opacity(1); }
.logo-item span {
    font-family: var(--font-ui); font-size: 17px;
    font-weight: 700; color: var(--text); white-space: nowrap;
}
@keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════
   LUXURY PARATI SECTION (Homepage)
   ═══════════════════════════════════ */

/* Luxury typography overrides */
.lux-title { color: white; }
.lux-sub { color: rgba(255,255,255,0.6); }
.lux-chip {
    background: rgba(196, 162, 101, 0.15) !important;
    color: #C4A265 !important;
}
.lux-gold {
    background: linear-gradient(135deg, #C4A265, #E8D5A8, #C4A265);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Floating Luxury Logos BG ── */
.lux-floating-logos {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.lux-float-logo {
    position: absolute;
    opacity: 0;
    animation: floatLogo var(--fl-dur, 18s) var(--fl-del, 0s) linear infinite;
}
.lux-float-logo img {
    width: var(--fl-size, 90px);
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.12;
}
.lux-float-logo span {
    font-family: var(--font-heading);
    font-size: var(--fl-size, 28px);
    font-weight: 800;
    color: white;
    opacity: 0.08;
    white-space: nowrap;
    letter-spacing: 2px;
}
@keyframes floatLogo {
    0% {
        transform: translate(var(--fl-x, 0), 110vh) rotate(var(--fl-rot, 0deg));
        opacity: 0;
    }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% {
        transform: translate(calc(var(--fl-x, 0) + var(--fl-drift, 30px)), -10vh) rotate(calc(var(--fl-rot, 0deg) + 15deg));
        opacity: 0;
    }
}

/* ── Gold Particles ── */
.gold-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gold-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #C4A265;
    opacity: 0;
    animation: goldFloat var(--gp-dur, 8s) var(--gp-del, 0s) ease-in-out infinite;
}
@keyframes goldFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    10% { opacity: 0.6; transform: translateY(-10px) scale(1); }
    90% { opacity: 0.3; }
    100% { transform: translateY(-120px) scale(0); opacity: 0; }
}

/* ── 3D Catalog Flip ── */
.catalog-stage {
    margin-bottom: clamp(48px, 6vw, 72px);
    text-align: center;
}
.catalog-3d {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
    perspective: 1200px;
    margin-bottom: 24px;
}
.catalog-book {
    position: absolute;
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: all 0.8s var(--ease);
    opacity: 0;
    transform: scale(0.7) rotateY(30deg) translateX(80px);
    pointer-events: none;
}
.catalog-book.active {
    opacity: 1;
    transform: scale(1) rotateY(0deg) translateX(0);
    pointer-events: all;
    z-index: 10;
}
.catalog-book.prev {
    opacity: 0.4;
    transform: scale(0.75) rotateY(25deg) translateX(-200px);
    z-index: 5;
}
.catalog-book.next {
    opacity: 0.4;
    transform: scale(0.75) rotateY(-25deg) translateX(200px);
    z-index: 5;
}

/* Book Cover */
.book-spine {
    position: absolute;
    left: -12px; top: 4px;
    width: 12px; height: calc(100% - 8px);
    background: var(--spine-color, #333);
    border-radius: 4px 0 0 4px;
    transform: rotateY(-90deg);
    transform-origin: right;
    box-shadow: -2px 0 8px rgba(0,0,0,0.3);
}
.book-cover {
    width: 100%; height: 100%;
    border-radius: 4px 12px 12px 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
    transition: transform 0.7s var(--ease), box-shadow 0.5s var(--ease);
}
.catalog-book.open .book-cover {
    transform: rotateY(-160deg);
    transform-origin: left;
    box-shadow: -10px 10px 40px rgba(0,0,0,0.4);
}
.book-cover-inner {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative;
    padding: 32px;
}
.book-pattern {
    position: absolute; inset: 0;
    opacity: 0.2;
}
.versace-deco {
    background:
        repeating-linear-gradient(45deg, rgba(196,162,101,0.4) 0px, transparent 1px, transparent 20px, rgba(196,162,101,0.4) 21px),
        repeating-linear-gradient(-45deg, rgba(196,162,101,0.3) 0px, transparent 1px, transparent 20px, rgba(196,162,101,0.3) 21px);
}
.armani-deco {
    background:
        repeating-linear-gradient(0deg, rgba(150,150,150,0.2) 0px, transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg, rgba(150,150,150,0.15) 0px, transparent 1px, transparent 8px);
}
.cavalli-deco {
    background:
        radial-gradient(circle at 30% 40%, rgba(196,162,101,0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(196,162,101,0.15) 0%, transparent 40%);
}
.lambo-deco {
    background:
        repeating-linear-gradient(60deg, rgba(196,162,101,0.15) 0px, transparent 2px, transparent 25px),
        repeating-linear-gradient(-60deg, rgba(196,162,101,0.1) 0px, transparent 2px, transparent 25px);
}
.book-brand-name {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #C4A265;
    text-align: center;
    position: relative; z-index: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    letter-spacing: 3px;
}
.book-subtitle {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 600;
    color: rgba(196,162,101,0.7);
    letter-spacing: 3px; text-transform: uppercase;
    margin-top: 8px;
    position: relative; z-index: 1;
}

/* Book Pages */
.book-pages {
    position: absolute;
    top: 4px; left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 2px 10px 10px 2px;
    overflow: hidden;
    background: #f8f6f0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.catalog-book.open .book-pages { opacity: 1; }
.book-page {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    transform: translateX(30px);
    background: #f8f6f0;
}
.book-page.active {
    opacity: 1;
    transform: translateX(0);
}
.page-photo-slot {
    width: 85%; height: 85%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #eeece6;
    border: 1px solid #ddd8cc;
}
.page-photo-slot img {
    width: 100%; height: 100%; object-fit: cover;
}
.page-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: #bbb5a8;
}
.page-placeholder span {
    font-family: var(--font-ui); font-size: 10px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.page-placeholder svg { opacity: 0.3; }

/* Catalog Navigation */
.catalog-nav {
    display: flex; justify-content: center;
    gap: 8px; margin-bottom: 16px;
}
.cat-dot {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(196,162,101,0.3);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.4s var(--ease);
}
.cat-dot span {
    font-family: var(--font-ui); font-size: 12px;
    font-weight: 700; color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}
.cat-dot.active, .cat-dot:hover {
    background: rgba(196,162,101,0.15);
    border-color: #C4A265;
}
.cat-dot.active span, .cat-dot:hover span {
    color: #C4A265;
}

.flip-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: rgba(255,255,255,0.3);
    font-family: var(--font-ui); font-size: 12px; font-weight: 500;
    animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Catalog Fan Marquee (horizontal scrolling books) ── */
.cat-fan-wrap {
    margin-bottom: clamp(48px, 6vw, 72px);
}
.cat-fan-marquee {
    overflow: hidden;
    margin: 0 calc(-1 * clamp(16px, 4vw, 60px));
    padding: 30px 0 20px;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.cat-fan-track {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    animation: catFanScroll 20s linear infinite;
    width: max-content;
    padding: 0 clamp(16px, 4vw, 60px);
}
.cat-fan-track:hover {
    animation-play-state: paused;
}
@keyframes catFanScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Each book */
.cat-fan-book {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
    transform: rotate(var(--fan-r, 0deg));
    transition: transform 0.5s var(--ease), filter 0.4s;
    filter: brightness(0.85);
}
.cat-fan-book:hover {
    transform: rotate(0deg) scale(1.06) translateY(-8px);
    filter: brightness(1);
    z-index: 5;
}

/* Cover — big book shape */
.cat-fan-cover {
    position: relative;
    width: clamp(180px, 22vw, 280px);
    height: clamp(250px, 30vw, 380px);
    border-radius: 4px 14px 14px 4px;
    overflow: hidden;
    box-shadow:
        0 18px 50px rgba(0,0,0,0.55),
        0 4px 16px rgba(0,0,0,0.3),
        inset 0 0 0 1px rgba(196,162,101,0.12);
    transition: box-shadow 0.5s var(--ease);
}
.cat-fan-book:hover .cat-fan-cover {
    box-shadow:
        0 24px 60px rgba(0,0,0,0.65),
        0 6px 24px rgba(196,162,101,0.15),
        inset 0 0 0 1px rgba(196,162,101,0.25);
}
.cat-fan-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease);
}
.cat-fan-book:hover .cat-fan-cover img {
    transform: scale(1.05);
}

/* Spine effect — left edge */
.cat-fan-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 14px;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.2) 40%,
        rgba(255,255,255,0.06) 60%,
        rgba(0,0,0,0.15) 100%
    );
    pointer-events: none;
}

/* Label below cover */
.cat-fan-label {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cat-fan-tag {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #C4A265;
}
.cat-fan-label strong {
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 800;
    color: #f0ece4;
    letter-spacing: 0.5px;
}

/* ── Luxury Gallery ── */
.lux-gallery {
    margin-bottom: clamp(40px, 5vw, 64px);
}
.lux-gallery-title {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}
.lux-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.lux-gal-wide { grid-column: span 3; }
.lux-gal-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(196,162,101,0.15);
    transition: all 0.5s var(--ease);
    cursor: pointer;
}
.lux-gal-item:not(.lux-gal-wide) .lux-gal-frame {
    aspect-ratio: 4/3;
}
.lux-gal-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(196,162,101,0.15);
    border-color: rgba(196,162,101,0.4);
}
.lux-gal-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #15151c, #1a1a24);
    color: rgba(255,255,255,0.25);
}
.lux-gal-placeholder span {
    font-family: var(--font-ui); font-size: 10px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.lux-gal-placeholder svg { opacity: 0.15; }
.lux-gal-frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.lux-gal-frame:hover img { transform: scale(1.06); }
.lux-gal-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s var(--ease);
}
.lux-gal-frame:hover .lux-gal-overlay {
    opacity: 1;
    transform: translateY(0);
}
.lux-gal-overlay span {
    font-family: var(--font-heading); font-size: 14px;
    font-weight: 700; color: #C4A265;
}

/* ── Luxury Logo Carousel Override ── */
.lux-carousel-section { margin-bottom: 40px; }
.lux-carousel-heading { color: white !important; }
.lux-logo-carousel {
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent) !important;
}
.lux-logo-item {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(196,162,101,0.15) !important;
    padding: 20px 40px !important;
}
.lux-logo-item:hover {
    background: rgba(196,162,101,0.1) !important;
    border-color: #C4A265 !important;
}
.lux-logo-item span { font-size: 18px !important; color: rgba(255,255,255,0.6) !important; }
.lux-logo-item:hover span { color: #C4A265 !important; }
.lux-logo-item img {
    height: 56px !important; width: auto !important; object-fit: contain !important;
    filter: brightness(0) invert(1) opacity(0.4) !important;
}
.lux-logo-item:hover img {
    filter: brightness(0) invert(0.78) sepia(1) saturate(0.5) hue-rotate(10deg) opacity(1) !important;
}

/* Luxury CTA Button */
.btn-lux {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 15px; font-weight: 700;
    padding: 20px 40px;
    border-radius: var(--radius-pill);
    cursor: pointer; border: 2px solid #C4A265;
    background: transparent;
    color: #C4A265;
    position: relative; overflow: hidden;
    transition: all 0.5s var(--ease);
    letter-spacing: 0.5px;
}
.btn-lux:hover {
    background: #C4A265;
    color: #0D0D12;
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(196,162,101,0.3);
}
.btn-lux::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s var(--ease);
}
.btn-lux:hover::after { left: 100%; }

/* ── Boiserie Artistic SVG Background ── */
.boiserie-art-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.bois-art-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.bois-line {
    stroke: var(--teal);
    stroke-width: 1;
    opacity: 0.12;
    transition: stroke-dashoffset 2s var(--ease);
}
.idx-boiserie.bois-drawn .bois-line {
    stroke-dashoffset: 0 !important;
}
.bl-1 { transition-delay: 0s; }
.bl-2 { transition-delay: 0.2s; }
.bl-3 { transition-delay: 0.5s; }
.bl-4 { transition-delay: 0.65s; }
.bl-5 { transition-delay: 0.8s; }
.bl-6 { transition-delay: 0.95s; }
.bl-7 { transition-delay: 0.3s; }
.bl-8 { transition-delay: 0.6s; }
.bl-9 { transition-delay: 0.1s; }
.bl-10 { transition-delay: 0.25s; }
.bl-11 { transition-delay: 0.4s; }
.bl-12 { transition-delay: 0.7s; }
.bl-13 { transition-delay: 0.9s; }

/* ── Boiserie Image Carousel ── */
.bois-carousel-wrapper {
    margin-bottom: clamp(40px, 5vw, 64px);
    position: relative;
}
.bois-carousel {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}
.bois-carousel-track {
    display: flex;
    transition: transform 0.6s var(--ease);
}
.bois-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: clamp(360px, 40vw, 480px);
}
.bois-slide-img {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0ede8, #e4ddd4);
}
.bois-slide-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 6s ease-out;
}
.bois-slide.active .bois-slide-img img {
    transform: scale(1.06);
}
/* Placeholder (until real photos exist) */
.bois-slide-img .boiserie-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    color: var(--text-muted);
    background: linear-gradient(135deg, #f0ede8, #e4ddd4);
    min-height: 380px;
}
.bois-slide-img .boiserie-placeholder span {
    font-family: var(--font-ui); font-size: 11px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.bois-slide-img .boiserie-placeholder svg { opacity: 0.2; }
.bois-slide-caption {
    display: flex; flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
    background: var(--bg-card);
}
.bois-slide-caption strong {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 800; color: var(--text);
    margin-bottom: 12px;
    display: block;
}
.bois-slide-caption p {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--text-light); line-height: 1.7; margin: 0;
}
.bois-slide-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 20px;
    font-family: var(--font-body); font-size: 14px; font-weight: 700;
    color: var(--teal); text-decoration: none;
    border: 1.5px solid var(--teal);
    border-radius: 100px;
    padding: 8px 20px;
    transition: background 0.3s, color 0.3s, gap 0.3s;
}
.bois-slide-cta:hover { background: var(--teal); color: #fff; gap: 10px; }

/* Carousel navigation */
.bois-carousel-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 20px;
}
.bois-nav-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    color: var(--text);
}
.bois-nav-btn:hover {
    border-color: var(--teal);
    background: rgba(0, 191, 165, 0.06);
    transform: scale(1.08);
}
.bois-dots {
    display: flex; gap: 8px; align-items: center;
}
.bois-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border);
    border: none; cursor: pointer;
    transition: all 0.4s var(--ease);
    padding: 0;
}
.bois-dot.active {
    background: var(--teal);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(0, 191, 165, 0.35);
}

/* ── Boiserie Product Cards Row ── */
.bois-products-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.bois-prod-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.bois-prod-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s var(--ease);
}
.bois-prod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 191, 165, 0.2);
}
.bois-prod-card:hover::after {
    transform: scaleX(1);
}
.bois-prod-icon {
    width: 52px; height: 52px; margin: 0 auto 16px;
    color: var(--teal);
}
.bois-prod-icon svg { width: 100%; height: 100%; }
.bois-prod-card strong {
    font-family: var(--font-heading); font-size: 15px;
    font-weight: 700; color: var(--text);
    display: block; margin-bottom: 8px;
}
.bois-prod-card p {
    font-family: var(--font-body); font-size: 13px;
    color: var(--text-light); line-height: 1.55; margin: 0;
}

/* Montaggio highlight card */
.bois-prod-montaggio {
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.03), rgba(0, 191, 165, 0.08));
    border-color: rgba(0, 191, 165, 0.2);
}
.bois-prod-montaggio .bois-prod-icon { color: var(--teal); }
.bois-montaggio-badge {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-ui); font-size: 10px;
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    background: var(--teal); color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

/* Section CTA */
.bois-section-cta { margin-top: 8px; padding-bottom: 8px; }

/* ── ORAC DECOR Spotlight ── */
.orac-spotlight {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #0f2027, #1a1a2e);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 48px);
    margin-bottom: clamp(40px, 5vw, 64px);
    overflow: hidden;
    border: 1px solid rgba(0, 191, 165, 0.15);
}
.orac-spotlight::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(0, 191, 165, 0.08), transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(0, 191, 165, 0.05), transparent 50%);
    pointer-events: none;
}
.orac-spotlight::after {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 191, 165, 0.03), transparent, rgba(0, 191, 165, 0.02), transparent);
    animation: oracGlow 10s linear infinite;
    pointer-events: none;
}
@keyframes oracGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.orac-badge {
    position: absolute;
    top: 20px; right: 20px;
    background: linear-gradient(135deg, var(--teal), #00897B);
    color: #fff;
    font-family: var(--font-ui); font-size: 11px;
    font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    z-index: 1;
}
.orac-content {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
}
.orac-logo-area {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 140px;
}
.orac-brand-name {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--teal), #64FFDA, var(--teal));
    background-size: 200% 200%;
    animation: oracTextShimmer 4s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes oracTextShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.orac-origin {
    font-family: var(--font-ui); font-size: 11px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(0, 191, 165, 0.6);
    display: flex; align-items: center; gap: 6px;
}
.orac-origin::before, .orac-origin::after {
    content: ''; width: 16px; height: 1px;
    background: rgba(0, 191, 165, 0.3);
}
.orac-text h3 {
    font-family: var(--font-heading); font-size: clamp(18px, 2vw, 22px);
    font-weight: 800; color: #fff;
    margin-bottom: 10px;
}
.orac-text p {
    font-family: var(--font-body); font-size: 14px;
    color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0;
}
.orac-features {
    grid-column: 1 / -1;
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-top: 8px;
}
.orac-feat {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 191, 165, 0.08);
    border: 1px solid rgba(0, 191, 165, 0.15);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: 12px;
    font-weight: 600; color: rgba(255,255,255,0.8);
    transition: all 0.3s var(--ease);
}
.orac-feat:hover {
    background: rgba(0, 191, 165, 0.14);
    border-color: rgba(0, 191, 165, 0.3);
    transform: translateY(-2px);
}

/* ── Boiserie Static Brand Logos ── */
.bois-brands { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.bois-brands-row {
    display: flex; justify-content: center; gap: clamp(20px, 4vw, 48px);
    flex-wrap: wrap;
}
.bois-brand-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 48px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.4s var(--ease);
    text-decoration: none;
    min-width: 200px;
}
.bois-brand-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 191, 165, 0.1);
}
.bois-brand-logo {
    display: flex; align-items: center; justify-content: center;
    min-height: 70px;
}
.bois-brand-logo img {
    height: 60px; width: auto; object-fit: contain;
    filter: grayscale(80%) opacity(0.7);
    transition: filter 0.4s var(--ease);
}
.bois-brand-card:hover .bois-brand-logo img {
    filter: grayscale(0%) opacity(1);
}
.bois-brand-logo span {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900; letter-spacing: 2px;
    color: var(--text);
    transition: color 0.3s var(--ease);
}
.bois-brand-card:hover .bois-brand-logo span {
    color: var(--teal);
}
.bois-brand-label {
    font-family: var(--font-ui); font-size: 12px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Care Grid ── */
.care-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.care-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 36px 28px;
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease);
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.care-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px;
    background: var(--care-accent);
    transform: scaleX(0);
    transition: transform 0.6s var(--ease);
}
.care-card:hover::after { transform: scaleX(1); }
.care-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    border-color: var(--care-accent);
}
.care-icon {
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    color: var(--care-accent);
    transition: transform 0.5s var(--ease-bounce);
}
.care-card:hover .care-icon { transform: scale(1.2) rotate(-5deg); }
.care-icon svg { width: 100%; height: 100%; }
.care-card h3 {
    font-family: var(--font-heading); font-size: 20px;
    font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.care-card p {
    font-family: var(--font-body); font-size: 14px;
    color: var(--text-light); line-height: 1.7;
}

/* ── Dream CTA ── */
.dream-cta {
    position: relative;
    padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--text);
    color: white;
}
.dream-cta-bg { position: absolute; inset: 0; overflow: hidden; }
.dream-cta-content {
    position: relative; z-index: 1;
    text-align: center;
}
.dream-cta-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800; margin-bottom: 16px;
}
.dream-cta-content p {
    font-family: var(--font-body);
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(255,255,255,0.7);
    max-width: 600px; margin: 0 auto 32px;
    line-height: 1.7;
}
.dream-cta .cta-buttons {
    display: flex; gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.dream-cta .btn-outline-fun {
    color: white;
    border-color: rgba(255,255,255,0.3);
}
.dream-cta .btn-outline-fun:hover {
    background: white; color: var(--text);
}

/* ═══════════════════════════════════
   BRAND STORY MODAL
   ═══════════════════════════════════ */
.brand-modal {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.brand-modal.active {
    opacity: 1; visibility: visible; pointer-events: all;
}
.brand-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 18, 0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}
.brand-modal-container {
    position: relative;
    width: 92%; max-width: 680px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 24px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    z-index: 1;
    transform: translateY(60px) scale(0.92);
    opacity: 0;
    transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
}
.brand-modal-container::-webkit-scrollbar { width: 4px; }
.brand-modal-container::-webkit-scrollbar-track { background: transparent; }
.brand-modal-container::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
.brand-modal.active .brand-modal-container {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

/* Close button */
.brand-modal-close {
    position: sticky; top: 16px; float: right;
    margin: 16px 16px 0 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    border: none; cursor: pointer;
    color: var(--text-light);
    transition: all 0.3s var(--ease);
    z-index: 10;
}
.brand-modal-close:hover {
    background: var(--orange);
    color: white;
    transform: rotate(90deg);
}

/* Modal Content */
.brand-modal-content {
    padding: 0 clamp(28px, 5vw, 48px) clamp(32px, 5vw, 48px);
}

/* Header */
.bm-header {
    text-align: center;
    padding-top: 8px;
    margin-bottom: 32px;
    position: relative;
}
.bm-logo-wrap {
    width: 100px; height: 100px;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8f8f6, #f0f0ee);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.bm-logo-wrap img {
    width: 70%; height: 70%; object-fit: contain;
}
.bm-logo-wrap .bm-logo-text {
    font-family: var(--font-heading);
    font-size: 16px; font-weight: 800;
    color: var(--text);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
}
/* Luxury variant for parati logos */
.bm-logo-wrap.bm-logo-lux {
    background: linear-gradient(135deg, #1a1a2e, #0D0D12);
    border-color: rgba(196,162,101,0.25);
}
.bm-logo-wrap.bm-logo-lux img {
    filter: brightness(0) invert(1);
}
.bm-logo-wrap.bm-logo-lux .bm-logo-text {
    color: #C4A265;
}

.bm-category-chip {
    display: inline-block;
    font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 6px 18px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.bm-category-chip.bm-chip-vernici {
    color: var(--orange);
    background: rgba(255, 107, 53, 0.08);
}
.bm-category-chip.bm-chip-parati {
    color: #C4A265;
    background: rgba(196, 162, 101, 0.1);
}

.bm-brand-name {
    font-family: var(--font-heading);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800; color: var(--text);
    line-height: 1.1; margin-bottom: 10px;
}
.bm-brand-tagline {
    font-family: var(--font-body);
    font-size: clamp(15px, 2vw, 18px);
    color: var(--text-light);
    line-height: 1.5;
    max-width: 480px; margin: 0 auto;
}

/* Body */
.bm-body { display: flex; flex-direction: column; gap: 28px; }

.bm-story {
    font-family: var(--font-body);
    font-size: 15px; color: var(--text-light);
    line-height: 1.8;
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--orange);
}
.bm-story.bm-story-lux {
    border-left-color: #C4A265;
}

/* Features */
.bm-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bm-feature-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}
.bm-feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.bm-feature-icon {
    font-size: 20px; flex-shrink: 0;
}
.bm-feature-text {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

/* Color Art Center connection */
.bm-cac-connection {
    background: linear-gradient(135deg, rgba(255,107,53,0.04), rgba(233,30,99,0.04));
    border: 1px solid rgba(255,107,53,0.15);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
}
.bm-cac-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    color: var(--orange);
    background: rgba(255,107,53,0.08);
    padding: 8px 20px; border-radius: var(--radius-pill);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.bm-cac-icon { font-size: 16px; }
.bm-cac-text {
    font-family: var(--font-body);
    font-size: 14px; color: var(--text-light);
    line-height: 1.7; margin-bottom: 20px;
    max-width: 500px; margin-left: auto; margin-right: auto;
}
.bm-cac-ctas {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.btn-sm { padding: 12px 24px; font-size: 13px; }

/* Logo items clickable style */
.logo-item[data-brand] {
    cursor: pointer;
    position: relative;
}
.logo-item[data-brand]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    z-index: -1;
    transition: opacity 0.3s var(--ease);
}
.logo-item[data-brand]:hover::after {
    opacity: 0.15;
}

/* ═══════════════════════════════════
   COMPLEMENTI PAGE — Blueprint Azure
   Technical Interior Design Studio
   ═══════════════════════════════════ */
.cp-body {
    --cp-bg: #F4F6F9;
    --cp-bg-alt: #EDF1F5;
    --cp-bg-light: #F9FAFB;
    --cp-card: #FFFFFF;
    --cp-accent: #2B6CB0;
    --cp-accent-light: #63B3ED;
    --cp-accent-dark: #1A4971;
    --cp-text: #1A202C;
    --cp-text-sec: #4A5568;
    --cp-text-muted: #A0AEC0;
    --cp-border: #CBD5E0;
    --cp-border-light: #E2E8F0;
    --cp-font-heading: 'Inter', sans-serif;
    --cp-font-body: 'IBM Plex Sans', sans-serif;
    --cp-font-mono: 'JetBrains Mono', monospace;
    background: var(--cp-bg);
    color: var(--cp-text);
}
.cp-body ::selection { background: var(--cp-accent); color: #fff; }
.cp-body .navbar { background: rgba(244,246,249,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(43,108,176,0.06); }
.cp-body .navbar.scrolled { background: rgba(244,246,249,0.95); box-shadow: 0 1px 30px rgba(0,0,0,0.06); }
.cp-body .nav-link { color: var(--cp-text-sec); }
.cp-body .nav-link:hover, .cp-body .nav-link.active { color: var(--cp-accent); }
.cp-body .logo-main { color: var(--cp-text); }
.cp-body .logo-dot { color: var(--cp-accent); }
.cp-body .logo-sub { color: var(--cp-text-muted); }
.cp-body .mobile-menu { background: var(--cp-bg); }
.cp-body .mobile-link { color: var(--cp-text-sec); border-bottom-color: var(--cp-border-light); }
.cp-body .ml-num { color: var(--cp-accent); }
.cp-body .footer { background: #1A202C; }
.cp-body .footer-wave { color: var(--cp-bg); }
.cp-body .footer-col h4 { color: #f0ece4; }
.cp-body .footer-link { color: rgba(240,236,228,0.6); }
.cp-body .footer-link:hover { color: var(--cp-accent-light); }
.cp-body .footer-bottom { border-top-color: rgba(255,255,255,0.08); color: rgba(240,236,228,0.4); }
.cp-body .footer-bottom a { color: var(--cp-accent-light); }

.cp-gold {
    background: linear-gradient(135deg, #2B6CB0, #63B3ED, #2B6CB0);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Blueprint Grid Background ── */
.cp-blueprint-grid {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(43,108,176,0.05) 59px, rgba(43,108,176,0.05) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(43,108,176,0.05) 59px, rgba(43,108,176,0.05) 60px);
    opacity: 0;
    animation: cpGridFadeIn 1.8s ease forwards 0.3s;
    pointer-events: none;
}
@keyframes cpGridFadeIn { to { opacity: 1; } }

.cp-blueprint-shapes {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
}
.cp-bp-shape {
    position: absolute;
    opacity: 0;
    animation: cpShapeFloat var(--cp-shape-dur, 20s) var(--cp-shape-del, 0s) ease-in-out infinite;
}
.cp-bp-shape-1 { top: 12%; left: 8%; --cp-shape-dur: 24s; --cp-shape-del: 0s; }
.cp-bp-shape-2 { top: 25%; right: 6%; --cp-shape-dur: 20s; --cp-shape-del: 2s; }
.cp-bp-shape-3 { bottom: 18%; left: 15%; --cp-shape-dur: 26s; --cp-shape-del: 1s; }
.cp-bp-shape-4 { top: 55%; right: 12%; --cp-shape-dur: 22s; --cp-shape-del: 3s; }

@keyframes cpShapeFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
    25% { transform: translate(6px, -8px) rotate(1deg); opacity: 0.4; }
    50% { transform: translate(-4px, -12px) rotate(-0.5deg); opacity: 0.2; }
    75% { transform: translate(5px, -4px) rotate(0.5deg); opacity: 0.35; }
}

/* ── Hero ── */
.cp-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 40px) 0 80px;
    overflow: hidden;
}
.cp-hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.cp-hero-gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(43,108,176,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(99,179,237,0.04) 0%, transparent 60%),
        linear-gradient(160deg, #F4F6F9 0%, #E8EEF5 40%, #DCE6F0 100%);
}
.cp-hero-content {
    position: relative; z-index: 2;
    max-width: 800px;
}
.cp-hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cp-font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--cp-accent);
    background: rgba(43,108,176,0.06);
    border: 1px solid rgba(43,108,176,0.12);
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
}
.cp-chip-diamond {
    width: 6px; height: 6px;
    background: var(--cp-accent);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.cp-hero-title {
    font-family: var(--cp-font-heading);
    font-size: clamp(40px, 8vw, 80px);
    font-weight: 900;
    color: var(--cp-text);
    line-height: 1.05;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}
.cp-hero-accent {
    font-family: var(--cp-font-heading);
    font-weight: 800;
    background: linear-gradient(135deg, #2B6CB0, #63B3ED, #2B6CB0);
    background-size: 200% 200%;
    animation: cpAzureShimmer 5s ease-in-out infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes cpAzureShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.cp-hero-sub {
    font-family: var(--cp-font-body);
    font-size: clamp(16px, 2vw, 19px);
    color: var(--cp-text-sec);
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto 36px;
    font-weight: 400;
}
.cp-hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
}
.cp-hstat { text-align: center; }
.cp-hstat-num {
    display: block;
    font-family: var(--cp-font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: var(--cp-accent);
    line-height: 1.1;
}
.cp-hstat-label {
    font-family: var(--cp-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--cp-text-muted);
    margin-top: 4px;
    display: block;
}
.cp-hstat-divider {
    width: 1px; height: 40px;
    background: var(--cp-border);
}
.cp-hero-ctas {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
}
.cp-hero-scroll {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 2;
}
.cp-scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(180deg, rgba(43,108,176,0.4), transparent);
    animation: cpScrollPulse 2s ease-in-out infinite;
}
@keyframes cpScrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}
.cp-hero-scroll span {
    font-family: var(--cp-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,108,176,0.5);
}

/* ── Before / After Hero Background ── */
.cp-ba-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.cp-ba-pair {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.cp-ba-pair.cp-ba-active {
    opacity: 1;
}
.cp-ba-img-after,
.cp-ba-img-before {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.cp-ba-img-before {
    clip-path: inset(0 50% 0 0);
    z-index: 1;
}
.cp-ba-img-after {
    z-index: 0;
}
/* Divider line */
.cp-ba-divider-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    background: rgba(255,255,255,0.65);
    box-shadow: 0 0 24px rgba(0,0,0,0.25), 0 0 60px rgba(43,108,176,0.12);
    z-index: 2;
    transform: translateX(-50%);
}
.cp-ba-divider-line::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 28px rgba(255,255,255,0.25);
    animation: cpBaGlow 3s ease-in-out infinite;
}
@keyframes cpBaGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}
/* PRIMA / DOPO labels */
.cp-ba-label {
    position: absolute;
    bottom: 56px;
    z-index: 3;
    font-family: var(--cp-font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0.8;
}
.cp-ba-label-prima {
    left: 36px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}
.cp-ba-label-dopo {
    right: 36px;
    background: rgba(43,108,176,0.55);
    color: #fff;
    border: 1px solid rgba(99,179,237,0.25);
}
/* ── Vertical Scrolling Image Carousel Background ── */
.cp-carousel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.cp-carousel-track {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    animation: cpCarouselScroll 25s linear infinite;
}
.cp-carousel-track img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
@keyframes cpCarouselScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
/* Overlay gradient on carousel for readability */
.cp-carousel-bg + .cp-hero-gradient,
.cp-carousel-overlay {
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(26,32,44,0.55) 0%, transparent 75%),
        linear-gradient(180deg, rgba(26,32,44,0.35) 0%, rgba(26,32,44,0.55) 45%, rgba(26,32,44,0.7) 100%) !important;
}
/* Subpage hero overlay when carousel is present */
.cp-subpage-hero .cp-carousel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Subpage hero text colors when carousel background is present */
.cp-subpage-hero.cp-has-carousel .cp-sub-title { color: #fff; }
.cp-subpage-hero.cp-has-carousel .cp-sub-title .cp-gold {
    background: linear-gradient(135deg, #63B3ED, #90CDF4, #63B3ED) !important;
    background-size: 200% 200% !important;
    animation: cpAzureShimmer 5s ease-in-out infinite !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.cp-subpage-hero.cp-has-carousel .cp-sub-desc { color: rgba(255,255,255,0.85); }
.cp-subpage-hero.cp-has-carousel .cp-sub-breadcrumb { color: rgba(255,255,255,0.5); }
.cp-subpage-hero.cp-has-carousel .cp-sub-breadcrumb a { color: rgba(255,255,255,0.5); }
.cp-subpage-hero.cp-has-carousel .cp-sub-breadcrumb a:hover { color: #63B3ED; }
/* Pause carousel on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .cp-carousel-track { animation-play-state: paused; }
}

/* Stronger overlay so text is readable over photos */
.cp-ba-bg + .cp-hero-gradient {
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(26,32,44,0.5) 0%, transparent 75%),
        linear-gradient(180deg, rgba(26,32,44,0.25) 0%, rgba(26,32,44,0.5) 45%, rgba(26,32,44,0.65) 100%) !important;
}
/* Make hero text white/light when bg photos are active */
.cp-hero-title { color: #fff; }
.cp-hero-accent {
    background: linear-gradient(135deg, #63B3ED, #90CDF4, #63B3ED) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.cp-hero-sub { color: rgba(255,255,255,0.85); }
.cp-hero-chip {
    color: #90CDF4;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.cp-chip-diamond { background: #63B3ED; }
.cp-hstat-num { color: #63B3ED; }
.cp-hstat-label { color: rgba(255,255,255,0.55); }
.cp-hstat-divider { background: rgba(255,255,255,0.15); }
.cp-hero-scroll span { color: rgba(255,255,255,0.4); }
.cp-scroll-line { background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent); }
/* Hero outline button on photo bg */
.cp-hero .cp-btn-outline {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.cp-hero .cp-btn-outline:hover {
    border-color: #63B3ED;
    color: #fff;
    background: rgba(99,179,237,0.12);
}

/* ── Buttons ── */
.cp-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cp-font-body); font-size: 15px; font-weight: 500;
    padding: 18px 36px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #2B6CB0, #3182CE);
    color: #FFFFFF;
    transition: all 0.5s var(--ease);
    position: relative; overflow: hidden;
}
.cp-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(43,108,176,0.25);
    color: #FFFFFF;
}
.cp-btn-primary::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s var(--ease);
}
.cp-btn-primary:hover::after { left: 100%; }
.cp-btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cp-font-body); font-size: 15px; font-weight: 500;
    padding: 18px 36px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--cp-border);
    color: var(--cp-text-sec);
    transition: all 0.5s var(--ease);
}
.cp-btn-outline:hover {
    border-color: var(--cp-accent);
    color: var(--cp-accent);
    transform: translateY(-3px);
}
.cp-btn-gold {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cp-font-body); font-size: 15px; font-weight: 500;
    padding: 18px 36px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #2B6CB0, #3182CE);
    color: #FFFFFF;
    transition: all 0.5s var(--ease);
    position: relative; overflow: hidden;
}
.cp-btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(43,108,176,0.25);
    color: #FFFFFF;
}
.cp-btn-outline-gold {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cp-font-body); font-size: 15px; font-weight: 500;
    padding: 18px 36px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(43,108,176,0.25);
    color: var(--cp-accent);
    transition: all 0.5s var(--ease);
}
.cp-btn-outline-gold:hover {
    background: rgba(43,108,176,0.06);
    border-color: var(--cp-accent);
    transform: translateY(-3px);
}

/* ── Sections ── */
.cp-section {
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    z-index: 1;
}
.cp-section-header {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 80px);
    position: relative;
}
.cp-section-header::after {
    content: '';
    display: block;
    width: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-accent), transparent);
    margin: 20px auto 0;
    transition: width 0.8s var(--ease);
}
.cp-section-header.visible::after,
.cp-section-header .anim-in.visible ~ .cp-section-header::after { width: 120px; }
.cp-section-chip {
    display: inline-block;
    font-family: var(--cp-font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--cp-accent);
    background: rgba(43,108,176,0.06);
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.cp-section-title {
    font-family: var(--cp-font-heading);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: var(--cp-text);
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.cp-section-sub {
    font-family: var(--cp-font-body);
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--cp-text-sec);
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}

/* ── Products Grid ── */
.cp-products { background: var(--cp-bg-alt); }
.cp-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.cp-prod-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
    transition: all 0.6s var(--ease);
    display: block;
    text-decoration: none;
    color: var(--cp-text);
    background: var(--cp-card);
    border: 1px solid var(--cp-border-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cp-prod-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #2B6CB0, #63B3ED);
    transform: scaleY(0.3);
    transform-origin: top;
    transition: transform 0.5s var(--ease);
    z-index: 5;
    border-radius: 4px 0 0 4px;
}
.cp-prod-card:hover::before { transform: scaleY(1); }
.cp-prod-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(43,108,176,0.12);
    border-color: rgba(43,108,176,0.2);
}
.cp-prod-featured {
    grid-column: span 2;
    min-height: 400px;
}
.cp-prod-bg {
    position: absolute; inset: 0;
    transition: transform 0.8s var(--ease);
}
.cp-prod-card:hover .cp-prod-bg { transform: scale(1.05); }
.cp-prod-img-slot {
    position: absolute; inset: 0;
}
.cp-prod-img-slot img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.6s var(--ease);
}
.cp-prod-card:hover .cp-prod-img-slot img { opacity: 0.8; }
.cp-prod-body {
    position: relative; z-index: 2;
    height: 100%; display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    background: linear-gradient(180deg, transparent 20%, rgba(255,255,255,0.85) 60%, #FFFFFF 100%);
}
.cp-prod-tag {
    display: inline-block; align-self: flex-start;
    font-family: var(--cp-font-mono); font-size: 10px;
    font-weight: 500; letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: rgba(43,108,176,0.08);
    color: var(--cp-accent);
    margin-bottom: 12px;
}
.cp-prod-card h3 {
    font-family: var(--cp-font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--cp-text);
}
.cp-prod-card p {
    font-family: var(--cp-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cp-text-sec);
    margin-bottom: 14px;
}
.cp-prod-features {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.cp-prod-features span {
    font-family: var(--cp-font-mono); font-size: 10px;
    font-weight: 500; padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(43,108,176,0.06);
    color: var(--cp-accent);
    border: 1px solid rgba(43,108,176,0.1);
}
.cp-prod-cta {
    font-family: var(--cp-font-mono);
    font-size: 12px; font-weight: 500;
    color: var(--cp-accent);
    letter-spacing: 0.5px;
    transition: transform 0.3s var(--ease);
}
.cp-prod-card:hover .cp-prod-cta {
    transform: translateX(6px);
}

/* ── ORAC DECOR Section ── */
.cp-orac { background: var(--cp-bg); }
.cp-orac-showcase {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--cp-card);
    border: 1px solid var(--cp-border-light);
    padding: clamp(40px, 6vw, 80px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.cp-orac-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 20% 50%, rgba(43,108,176,0.04), transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 30%, rgba(99,179,237,0.03), transparent 50%);
    pointer-events: none;
}
.cp-orac-showcase::before {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(43,108,176,0.015), transparent, rgba(99,179,237,0.01), transparent);
    animation: cpOracSpin 20s linear infinite;
    pointer-events: none;
}
@keyframes cpOracSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cp-orac-content { position: relative; z-index: 1; text-align: center; }
.cp-orac-header {
    margin-bottom: 24px;
}
.cp-orac-badge {
    display: inline-block;
    font-family: var(--cp-font-mono); font-size: 11px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #2B6CB0, #3182CE);
    color: #FFFFFF;
    margin-bottom: 16px;
}
.cp-orac-brand {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cp-orac-name {
    font-family: var(--cp-font-heading);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #2B6CB0, #63B3ED, #2B6CB0);
    background-size: 200% 200%;
    animation: cpAzureShimmer 5s ease-in-out infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cp-orac-origin {
    font-family: var(--cp-font-mono); font-size: 11px;
    font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
    color: var(--cp-text-muted);
}
.cp-orac-title {
    font-family: var(--cp-font-heading);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--cp-text);
    margin-bottom: 20px;
}
.cp-orac-desc {
    font-family: var(--cp-font-body);
    font-size: clamp(15px, 1.8vw, 17px);
    color: var(--cp-text-sec);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 36px;
}
.cp-orac-features {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}
.cp-orac-feat {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: rgba(43,108,176,0.04);
    border: 1px solid rgba(43,108,176,0.1);
    border-radius: var(--radius-pill);
    font-family: var(--cp-font-body); font-size: 13px;
    font-weight: 500; color: var(--cp-text-sec);
    transition: all 0.3s var(--ease);
}
.cp-orac-feat:hover {
    background: rgba(43,108,176,0.08);
    border-color: rgba(43,108,176,0.25);
    transform: translateY(-2px);
}
.cp-orac-feat svg { color: var(--cp-accent); flex-shrink: 0; }
.cp-orac-ctas {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
}

/* ── Services Grid ── */
.cp-services { background: var(--cp-bg-alt); }
.cp-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cp-service-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border-light);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.5s var(--ease);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.cp-service-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2B6CB0, #63B3ED);
    transform: scaleX(0);
    transition: transform 0.5s var(--ease);
}
.cp-service-card:hover::after { transform: scaleX(1); }
.cp-service-card:hover {
    background: var(--cp-card);
    border-color: rgba(43,108,176,0.2);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(43,108,176,0.08);
}
.cp-service-icon {
    width: 60px; height: 60px;
    margin: 0 auto 20px;
    color: var(--cp-accent);
    transition: transform 0.4s var(--ease-bounce);
}
.cp-service-card:hover .cp-service-icon { transform: scale(1.15) rotate(-5deg); }
.cp-service-icon svg { width: 100%; height: 100%; }
.cp-service-card h3 {
    font-family: var(--cp-font-heading); font-size: 18px;
    font-weight: 700; color: var(--cp-text);
    margin-bottom: 10px;
}
.cp-service-card p {
    font-family: var(--cp-font-body); font-size: 14px;
    color: var(--cp-text-sec); line-height: 1.7;
}

/* ── Gallery Marquee ── */
.cp-gallery-section { background: var(--cp-bg); overflow: hidden; }
.cp-gallery-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.cp-gallery-track {
    display: flex;
    flex-shrink: 0;
    animation: cpGalleryScroll 40s linear infinite;
}
@keyframes cpGalleryScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.cp-gal-item { flex-shrink: 0; padding: 0 8px; }
.cp-gal-frame {
    width: 300px; height: 200px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--cp-border-light);
    transition: all 0.5s var(--ease);
    position: relative;
    background: var(--cp-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cp-gal-frame:hover {
    border-color: rgba(43,108,176,0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(43,108,176,0.08);
}
.cp-gal-frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.cp-gal-frame:hover img { transform: scale(1.06); }
.cp-gal-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #EDF1F5, #E2E8F0);
    color: var(--cp-text-muted);
}
.cp-gal-placeholder span {
    font-family: var(--cp-font-mono); font-size: 10px;
    font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.cp-gal-placeholder svg { opacity: 0.25; }

/* ── Final CTA ── */
.cp-final-cta {
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cp-final-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(43,108,176,0.05), transparent 70%),
        linear-gradient(180deg, var(--cp-bg), #EDF1F5);
}
.cp-final-content { position: relative; z-index: 2; }
.cp-final-title {
    font-family: var(--cp-font-heading);
    font-size: clamp(32px, 6vw, 60px);
    font-weight: 900; color: var(--cp-text);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.cp-final-sub {
    font-family: var(--cp-font-body);
    font-size: clamp(15px, 2vw, 18px);
    color: var(--cp-text-sec);
    max-width: 600px; margin: 0 auto 40px;
    line-height: 1.7;
}
.cp-final-ctas {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 40px;
}
.cp-final-address {
    font-family: var(--cp-font-mono);
    font-size: 12px; color: var(--cp-text-muted);
    line-height: 1.8;
}
.cp-final-address a { color: var(--cp-accent); }

/* ── Sub-page shared styles ── */
.cp-subpage-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 80px;
    text-align: center;
    overflow: hidden;
}
.cp-subpage-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(43,108,176,0.04), transparent 70%),
        linear-gradient(160deg, #F4F6F9 0%, #E8EEF5 40%, #EDF1F5 100%);
}
.cp-sub-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cp-font-mono); font-size: 11px; font-weight: 500;
    color: var(--cp-text-muted);
    margin-bottom: 20px;
}
.cp-sub-breadcrumb a { color: var(--cp-text-muted); transition: color 0.3s var(--ease); }
.cp-sub-breadcrumb a:hover { color: var(--cp-accent); }
.cp-sub-breadcrumb svg { width: 14px; height: 14px; opacity: 0.4; }
.cp-sub-title {
    font-family: var(--cp-font-heading);
    font-size: clamp(36px, 7vw, 72px);
    font-weight: 900; color: var(--cp-text);
    line-height: 1.05; margin-bottom: 16px;
    letter-spacing: -1px;
}
.cp-sub-desc {
    font-family: var(--cp-font-body);
    font-size: clamp(16px, 2vw, 19px);
    color: var(--cp-text-sec);
    line-height: 1.7; max-width: 650px;
    margin: 0 auto;
}
.cp-content-section {
    padding: clamp(60px, 8vw, 100px) 0;
    position: relative; z-index: 1;
}
.cp-content-section:nth-child(even) { background: var(--cp-bg-alt); }
.cp-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.cp-content-grid.cp-reverse { direction: rtl; }
.cp-content-grid.cp-reverse > * { direction: ltr; }
.cp-content-text h2 {
    font-family: var(--cp-font-heading);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800; color: var(--cp-text);
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}
.cp-content-text p {
    font-family: var(--cp-font-body);
    font-size: 15px; color: var(--cp-text-sec);
    line-height: 1.8; margin-bottom: 16px;
}
.cp-content-text ul {
    list-style: none; padding: 0;
    margin-bottom: 20px;
}
.cp-content-text ul li {
    font-family: var(--cp-font-body);
    font-size: 14px; color: var(--cp-text-sec);
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}
.cp-content-text ul li::before {
    content: '';
    position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px;
    background: var(--cp-accent);
    border-radius: 50%;
}
.cp-content-img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #EDF1F5, #E2E8F0);
    border: 1px solid var(--cp-border-light);
}
.cp-content-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.cp-content-img-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: var(--cp-text-muted);
}
.cp-content-img-placeholder span {
    font-family: var(--cp-font-mono); font-size: 10px;
    font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.cp-content-img-placeholder svg { opacity: 0.2; }

.cp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}
.cp-feat-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border-light);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.4s var(--ease);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.cp-feat-card:hover {
    background: var(--cp-card);
    border-color: rgba(43,108,176,0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(43,108,176,0.06);
}
.cp-feat-card h4 {
    font-family: var(--cp-font-heading); font-size: 15px;
    font-weight: 700; color: var(--cp-text);
    margin-bottom: 8px;
}
.cp-feat-card p {
    font-family: var(--cp-font-body); font-size: 13px;
    color: var(--cp-text-sec); line-height: 1.6;
}
.cp-feat-icon {
    width: 40px; height: 40px;
    margin: 0 auto 12px;
    color: var(--cp-accent);
}
.cp-feat-icon svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════
   ATTREZZATURE PAGE — Industrial Workshop Dark
   ═══════════════════════════════════════════════════ */

/* ─── Theme Variables ─── */
.at-body {
    --at-bg: #111418;
    --at-bg-alt: #0D1014;
    --at-bg-light: #1A1D22;
    --at-card: #1A1D22;
    --at-accent: #E8690A;
    --at-accent-light: #FF8C42;
    --at-accent-dark: #B85200;
    --at-text: #F5F0E8;
    --at-text-sec: rgba(245,240,232,0.65);
    --at-text-muted: rgba(245,240,232,0.35);
    --at-border: rgba(255,255,255,0.08);
    --at-border-accent: rgba(232,105,10,0.25);
    --at-font-heading: 'Outfit', sans-serif;
    --at-font-body: 'Space Grotesk', sans-serif;
    --at-font-mono: 'JetBrains Mono', monospace;
    background: var(--at-bg);
    color: var(--at-text);
}
.at-body ::selection { background: var(--at-accent); color: #fff; }

/* ─── Navbar Override ─── */
.at-body .navbar { background: rgba(17,20,24,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(232,105,10,0.08); }
.at-body .navbar.scrolled { background: rgba(17,20,24,0.96); box-shadow: 0 1px 30px rgba(0,0,0,0.4); border-bottom-color: rgba(232,105,10,0.15); }
.at-body .nav-link { color: var(--at-text-sec); }
.at-body .nav-link:hover, .at-body .nav-link.active { color: var(--at-accent); }
.at-body .nav-cta { background: rgba(232,105,10,0.12); border-color: rgba(232,105,10,0.25); color: var(--at-accent); }
.at-body .nav-cta:hover { background: var(--at-accent); color: #0D1014; }
.at-body .logo-main { color: var(--at-text); }
.at-body .logo-dot { color: var(--at-accent); }
.at-body .logo-sub { color: var(--at-text-muted); }
.at-body .mobile-menu { background: var(--at-bg); }
.at-body .mobile-link { color: var(--at-text-sec); border-bottom-color: var(--at-border); }
.at-body .mobile-link:hover { color: var(--at-accent); }
.at-body .ml-num { color: var(--at-accent); }
.at-body .mobile-wa { background: var(--at-accent); color: #0D1014; }
.at-body .footer { background: #0A0C0F; border-top: 1px solid var(--at-border); }
.at-body .footer-wave { display: none; }
.at-body .footer-logo { color: var(--at-text); }
.at-body .footer-brand p { color: var(--at-text-sec); }
.at-body .footer-links h4 { color: var(--at-text); }
.at-body .footer-links a { color: var(--at-text-sec); }
.at-body .footer-links a:hover { color: var(--at-accent); }
.at-body .footer-contact h4 { color: var(--at-text); }
.at-body .footer-contact p, .at-body .footer-contact a { color: var(--at-text-sec); }
.at-body .footer-contact a:hover { color: var(--at-accent); }
.at-body .footer-socials a { color: var(--at-text-muted); border-color: var(--at-border); }
.at-body .footer-socials a:hover { color: var(--at-accent); border-color: var(--at-accent); }
.at-body .footer-bottom { border-top-color: var(--at-border); }
.at-body .footer-bottom p { color: var(--at-text-muted); }

/* ─── Accent Gradient Text ─── */
.at-spark {
    background: linear-gradient(135deg, #E8690A, #FFB84C, #E8690A);
    background-size: 200% 200%;
    animation: atSparkShimmer 5s ease-in-out infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes atSparkShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ─── Hero ─── */
.at-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h, 80px) + 40px) 0 80px;
    overflow: hidden;
}
.at-hero-bg { position: absolute; inset: 0; z-index: 0; }
.at-hero-gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(232,105,10,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255,140,66,0.03) 0%, transparent 60%),
        linear-gradient(180deg, #111418 0%, #0D1014 100%);
}
.at-hero-grid {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(232,105,10,0.025) 20px, rgba(232,105,10,0.025) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(232,105,10,0.025) 20px, rgba(232,105,10,0.025) 21px);
    opacity: 0;
    animation: atGridFadeIn 2s ease forwards 0.4s;
    pointer-events: none;
}
@keyframes atGridFadeIn { to { opacity: 1; } }

/* Floating Tool SVG Shapes */
.at-hero-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.at-shape {
    position: absolute;
    opacity: 0;
    animation: atShapeFloat var(--at-shape-dur, 22s) var(--at-shape-del, 0s) ease-in-out infinite;
}
.at-shape-1 { top: 15%; left: 6%; --at-shape-dur: 26s; --at-shape-del: 0s; }
.at-shape-2 { top: 20%; right: 8%; --at-shape-dur: 22s; --at-shape-del: 2s; }
.at-shape-3 { bottom: 22%; left: 12%; --at-shape-dur: 28s; --at-shape-del: 1.5s; }
.at-shape-4 { top: 60%; right: 10%; --at-shape-dur: 24s; --at-shape-del: 3s; }
@keyframes atShapeFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.18; }
    25% { transform: translate(8px, -10px) rotate(2deg); opacity: 0.28; }
    50% { transform: translate(-6px, -16px) rotate(-1deg); opacity: 0.14; }
    75% { transform: translate(7px, -6px) rotate(1deg); opacity: 0.24; }
}

/* Spark Particles */
.at-spark-p {
    position: absolute;
    bottom: 0;
    width: var(--sp-size, 3px);
    height: var(--sp-size, 3px);
    border-radius: 50%;
    background: var(--at-accent);
    opacity: 0;
    animation: atSparkRise var(--sp-dur, 8s) var(--sp-del, 0s) ease-in infinite;
    pointer-events: none;
}
@keyframes atSparkRise {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 0.9; }
    80% { opacity: 0.4; }
    100% { transform: translate(var(--sp-dx, 20px), -100vh); opacity: 0; }
}

/* Hero Content */
.at-hero-content {
    position: relative; z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}
.at-hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--at-font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--at-accent);
    background: rgba(232,105,10,0.08);
    border: 1px solid rgba(232,105,10,0.18);
    padding: 8px 22px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.at-chip-bolt {
    width: 6px; height: 6px;
    background: var(--at-accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    flex-shrink: 0;
}
.at-hero-title {
    font-family: var(--at-font-heading);
    font-size: clamp(42px, 8vw, 82px);
    font-weight: 900;
    color: var(--at-text);
    line-height: 1.04;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}
.at-hero-sub {
    font-family: var(--at-font-body);
    font-size: clamp(16px, 2vw, 19px);
    color: var(--at-text-sec);
    line-height: 1.7;
    max-width: 660px;
    margin: 0 auto 36px;
}
.at-hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 32px; margin-bottom: 40px;
}
.at-hstat { text-align: center; }
.at-hstat-num {
    display: inline-block;
    font-family: var(--at-font-heading);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--at-accent);
    line-height: 1.1;
}
.at-hstat-label {
    font-family: var(--at-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--at-text-muted);
    margin-top: 4px;
    display: block;
}
.at-hstat-divider { width: 1px; height: 40px; background: var(--at-border); }
.at-hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.at-hero-scroll {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 2;
}
.at-scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(180deg, rgba(232,105,10,0.6), transparent);
    animation: atScrollPulse 2s ease-in-out infinite;
}
@keyframes atScrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.3); }
}
.at-hero-scroll span {
    font-family: var(--at-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(232,105,10,0.5);
}

/* ─── Buttons ─── */
.at-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--at-font-body); font-size: 15px; font-weight: 600;
    padding: 18px 36px;
    border-radius: 100px;
    background: linear-gradient(135deg, #E8690A, #FF8C42);
    color: #0D1014;
    transition: all 0.5s var(--ease);
    position: relative; overflow: hidden;
    text-decoration: none;
}
.at-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(232,105,10,0.35);
    color: #0D1014;
}
.at-btn-primary::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s var(--ease);
}
.at-btn-primary:hover::after { left: 100%; }
.at-btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--at-font-body); font-size: 15px; font-weight: 500;
    padding: 18px 36px;
    border-radius: 100px;
    border: 2px solid var(--at-border);
    color: var(--at-text-sec);
    transition: all 0.5s var(--ease);
    text-decoration: none;
    background: transparent;
}
.at-btn-outline:hover {
    border-color: var(--at-accent);
    color: var(--at-accent);
    transform: translateY(-3px);
}

/* ─── Brand Marquee ─── */
.at-brand-marquee {
    padding: 24px 0;
    background: var(--at-bg-light);
    border-top: 1px solid var(--at-border);
    border-bottom: 1px solid var(--at-border);
    overflow: hidden;
    position: relative;
}
.at-brand-marquee::before,
.at-brand-marquee::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 120px; z-index: 2; pointer-events: none;
}
.at-brand-marquee::before { left: 0; background: linear-gradient(90deg, var(--at-bg-light), transparent); }
.at-brand-marquee::after { right: 0; background: linear-gradient(-90deg, var(--at-bg-light), transparent); }
.at-brand-track {
    display: flex; align-items: center; gap: 60px;
    animation: atMarqueeScroll 30s linear infinite;
    width: max-content;
}
@keyframes atMarqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.at-brand-item {
    height: 40px; opacity: 0.4;
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.at-brand-item:hover { opacity: 0.8; }
.at-brand-item img { height: 100%; width: auto; filter: brightness(0) invert(1) opacity(0.6); }
.at-brand-placeholder {
    height: 32px; padding: 4px 20px;
    border: 1px dashed var(--at-border);
    border-radius: 4px;
    font-family: var(--at-font-mono); font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--at-text-muted);
    display: flex; align-items: center;
    white-space: nowrap;
}

/* ─── Sections ─── */
.at-section {
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative; z-index: 1;
}
.at-section-header {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.at-section-chip {
    display: inline-block;
    font-family: var(--at-font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--at-accent);
    background: rgba(232,105,10,0.08);
    border: 1px solid rgba(232,105,10,0.15);
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.at-section-title {
    font-family: var(--at-font-heading);
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 900;
    color: var(--at-text);
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.at-section-sub {
    font-family: var(--at-font-body);
    font-size: clamp(15px, 2vw, 17px);
    color: var(--at-text-sec);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ─── Product Grid ─── */
.at-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.at-prod-card {
    background: var(--at-card);
    border-radius: 16px;
    border: 1px solid var(--at-border);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.at-prod-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--at-accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s var(--ease);
    z-index: 2;
    border-radius: 4px 0 0 4px;
}
.at-prod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,105,10,0.15);
    border-color: var(--at-border-accent);
}
.at-prod-card:hover::before { transform: scaleY(1); }
.at-prod-featured { grid-column: span 2; }
.at-prod-bg {
    aspect-ratio: 16/10;
    background: var(--at-bg-alt);
    position: relative;
    overflow: hidden;
}
.at-prod-featured .at-prod-bg { aspect-ratio: 21/10; }
.at-prod-img-slot {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.at-prod-img-slot img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.at-prod-card:hover .at-prod-img-slot img { transform: scale(1.05); }
.at-prod-img-placeholder {
    display: none; flex-direction: column; align-items: center; gap: 10px;
    color: var(--at-text-muted);
    font-family: var(--at-font-mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase;
}
.at-prod-img-slot img[style*="display:none"] ~ .at-prod-img-placeholder,
.at-prod-img-slot img[style*="display: none"] ~ .at-prod-img-placeholder {
    display: flex;
}
.at-prod-img-placeholder svg { width: 48px; height: 48px; opacity: 0.3; }
.at-prod-body {
    padding: 24px 24px 28px 28px;
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.at-prod-tag {
    font-family: var(--at-font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--at-accent);
}
.at-prod-body h3 {
    font-family: var(--at-font-heading); font-size: 20px; font-weight: 800;
    color: var(--at-text); line-height: 1.2;
}
.at-prod-body p {
    font-family: var(--at-font-body); font-size: 14px;
    color: var(--at-text-sec); line-height: 1.6;
    flex: 1;
}
.at-prod-features {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.at-prod-features span {
    font-family: var(--at-font-mono); font-size: 10px;
    color: var(--at-text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--at-border);
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: 0.5px;
}
.at-prod-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--at-font-body); font-size: 14px; font-weight: 600;
    color: var(--at-accent);
    margin-top: 8px;
    transition: gap 0.3s;
}
.at-prod-card:hover .at-prod-cta { gap: 10px; }

/* ─── Spotlight Panel ─── */
.at-spotlight { background: var(--at-bg-alt); }
.at-spotlight-panel {
    background: var(--at-card);
    border: 1px solid var(--at-border-accent);
    border-radius: 16px;
    padding: clamp(40px, 5vw, 72px);
    position: relative;
    overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.at-spotlight-panel::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--at-accent), var(--at-accent-light));
    border-radius: 4px 0 0 4px;
}
.at-spotlight-glow {
    position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,105,10,0.06), transparent 70%);
    pointer-events: none;
}
.at-spotlight-badge {
    font-family: var(--at-font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--at-accent);
    background: rgba(232,105,10,0.1);
    border: 1px solid rgba(232,105,10,0.2);
    padding: 5px 14px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 16px;
}
.at-spotlight-title {
    font-family: var(--at-font-heading); font-size: clamp(28px, 4vw, 42px);
    font-weight: 900; color: var(--at-text);
    line-height: 1.1; margin-bottom: 16px;
}
.at-spotlight-desc {
    font-family: var(--at-font-body); font-size: 15px;
    color: var(--at-text-sec); line-height: 1.7;
    margin-bottom: 28px;
}
.at-spotlight-feats { list-style: none; margin: 0 0 32px; padding: 0; }
.at-spotlight-feats li {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--at-font-body); font-size: 14px;
    color: var(--at-text-sec);
    padding: 10px 0;
    border-bottom: 1px solid var(--at-border);
}
.at-spotlight-feats li:last-child { border-bottom: none; }
.at-spotlight-feats li::before {
    content: '';
    width: 6px; height: 6px; flex-shrink: 0;
    background: var(--at-accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.at-spotlight-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.at-spotlight-img {
    aspect-ratio: 4/5;
    background: var(--at-bg);
    border-radius: 12px;
    border: 1px solid var(--at-border);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.at-spotlight-img img { width: 100%; height: 100%; object-fit: cover; }
.at-spotlight-img-placeholder {
    display: none; flex-direction: column; align-items: center; gap: 10px;
    color: var(--at-text-muted);
    font-family: var(--at-font-mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase;
}
.at-spotlight-img-placeholder svg { width: 60px; height: 60px; opacity: 0.2; }

/* ─── Services / Why Cards ─── */
.at-services-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.at-service-card {
    background: var(--at-card);
    border: 1px solid var(--at-border);
    border-radius: 16px;
    padding: 32px 24px;
    position: relative; overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.at-service-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--at-accent), var(--at-accent-light));
    transform: scaleX(0);
    transition: transform 0.4s var(--ease);
}
.at-service-card:hover { transform: translateY(-4px); border-color: var(--at-border-accent); }
.at-service-card:hover::after { transform: scaleX(1); }
.at-service-icon {
    width: 52px; height: 52px;
    background: rgba(232,105,10,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--at-accent);
    margin-bottom: 20px;
    transition: transform 0.4s var(--ease);
}
.at-service-card:hover .at-service-icon { transform: scale(1.1) rotate(-5deg); }
.at-service-icon svg { width: 26px; height: 26px; }
.at-service-card h3 {
    font-family: var(--at-font-heading); font-size: 17px; font-weight: 800;
    color: var(--at-text); margin-bottom: 10px;
}
.at-service-card p {
    font-family: var(--at-font-body); font-size: 14px;
    color: var(--at-text-sec); line-height: 1.6;
}

/* ─── Gallery Marquee ─── */
.at-gallery-section { overflow: hidden; }
.at-gallery-marquee {
    overflow: hidden; position: relative;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.at-gallery-track {
    display: flex; gap: 16px;
    animation: atGalleryScroll 40s linear infinite;
    width: max-content;
}
@keyframes atGalleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.at-gal-item { flex-shrink: 0; }
.at-gal-frame {
    width: 320px; height: 220px;
    background: var(--at-card);
    border: 1px solid var(--at-border);
    border-radius: 12px;
    overflow: hidden; position: relative;
    transition: border-color 0.3s;
}
.at-gal-frame:hover { border-color: var(--at-border-accent); }
.at-gal-frame img { width: 100%; height: 100%; object-fit: cover; }
.at-gal-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: var(--at-text-muted);
    font-family: var(--at-font-mono); font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase;
}
.at-gal-placeholder svg { width: 36px; height: 36px; opacity: 0.2; }

/* ─── Final CTA ─── */
.at-final-cta {
    text-align: center; position: relative; overflow: hidden;
}
.at-final-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(232,105,10,0.07), transparent 70%),
        linear-gradient(180deg, var(--at-bg), var(--at-bg-alt));
}
.at-final-content { position: relative; z-index: 2; }
.at-final-title {
    font-family: var(--at-font-heading); font-size: clamp(32px, 6vw, 60px);
    font-weight: 900; color: var(--at-text);
    margin-bottom: 20px; letter-spacing: -0.5px;
}
.at-final-sub {
    font-family: var(--at-font-body); font-size: clamp(15px, 2vw, 18px);
    color: var(--at-text-sec); max-width: 600px; margin: 0 auto 40px; line-height: 1.7;
}
.at-final-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.at-final-address {
    font-family: var(--at-font-mono); font-size: 12px;
    color: var(--at-text-muted); line-height: 1.8;
    letter-spacing: 0.5px;
}
.at-final-address a { color: var(--at-accent); text-decoration: none; }
.at-final-address a:hover { text-decoration: underline; }

/* ─── Sub-page Hero ─── */
.at-sub-hero {
    position: relative;
    padding: calc(var(--nav-h, 80px) + 60px) 0 80px;
    text-align: center; overflow: hidden;
}
.at-sub-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(232,105,10,0.05), transparent 70%),
        linear-gradient(180deg, #111418 0%, #0D1014 100%);
}
.at-sub-hero-grid {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(232,105,10,0.018) 20px, rgba(232,105,10,0.018) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(232,105,10,0.018) 20px, rgba(232,105,10,0.018) 21px);
    pointer-events: none;
}
.at-sub-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--at-font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 1px;
    color: var(--at-text-muted);
    margin-bottom: 24px;
    position: relative; z-index: 2;
}
.at-sub-breadcrumb a { color: var(--at-text-sec); transition: color 0.2s; text-decoration: none; }
.at-sub-breadcrumb a:hover { color: var(--at-accent); }
.at-sub-breadcrumb svg { width: 14px; height: 14px; opacity: 0.4; }
.at-sub-breadcrumb .at-bc-current { color: var(--at-accent); }

/* ─── Sub-page Content Sections ─── */
.at-content-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px); align-items: center;
}
.at-content-grid.at-reverse { direction: rtl; }
.at-content-grid.at-reverse > * { direction: ltr; }
.at-content-text h3 {
    font-family: var(--at-font-heading); font-size: clamp(22px, 3vw, 30px);
    font-weight: 800; color: var(--at-text);
    margin-bottom: 16px; line-height: 1.2;
}
.at-content-text p {
    font-family: var(--at-font-body); font-size: 15px;
    color: var(--at-text-sec); line-height: 1.75;
    margin-bottom: 16px;
}
.at-content-text p:last-child { margin-bottom: 0; }
.at-content-img {
    background: var(--at-bg-light);
    border: 1px solid var(--at-border);
    border-radius: 12px;
    aspect-ratio: 4/3; overflow: hidden; position: relative;
}
.at-content-img img { width: 100%; height: 100%; object-fit: cover; }
.at-content-img-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: var(--at-text-muted);
    font-family: var(--at-font-mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase;
}
.at-content-img-placeholder svg { width: 48px; height: 48px; opacity: 0.2; }

/* ─── Features Grid ─── */
.at-features-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.at-feat-card {
    background: var(--at-card);
    border: 1px solid var(--at-border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform 0.4s var(--ease), border-color 0.3s;
    position: relative; overflow: hidden;
}
.at-feat-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--at-accent);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform 0.4s var(--ease);
    border-radius: 3px 0 0 3px;
}
.at-feat-card:hover { transform: translateY(-4px); border-color: var(--at-border-accent); }
.at-feat-card:hover::before { transform: scaleY(1); }
.at-feat-icon {
    width: 44px; height: 44px;
    background: rgba(232,105,10,0.1);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--at-accent);
    margin-bottom: 16px;
    transition: transform 0.4s var(--ease);
}
.at-feat-card:hover .at-feat-icon { transform: scale(1.1) rotate(-5deg); }
.at-feat-icon svg { width: 22px; height: 22px; }
.at-feat-card h4 {
    font-family: var(--at-font-heading); font-size: 16px; font-weight: 800;
    color: var(--at-text); margin-bottom: 8px;
}
.at-feat-card p {
    font-family: var(--at-font-body); font-size: 13px;
    color: var(--at-text-sec); line-height: 1.6;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
    .nav-menu { display: none; }
    .hamburger { display: block; }
    .nav-cta span { display: none; }
    .nav-cta { padding: 10px; border-radius: 50%; }

    .values-grid { grid-template-columns: 1fr 1fr; }
    .narrative-milestone { padding: 24px; }
    .founder-photo { width: 280px; }

    .pp-brands-grid { grid-template-columns: repeat(3, 1fr); }
    .pp-poster-layout { grid-template-columns: 1fr; }
    .pp-showroom-grid { grid-template-columns: 1fr 1fr; }
    .pp-cat-thumb { width: 70px; height: 88px; }
    .pp-cat-body h3 { font-size: 15px; }
    .contatti-layout { grid-template-columns: 1fr; }
    .comp-grid { grid-template-columns: 1fr; }
    .comp-featured { grid-column: span 1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .palette-showcase { grid-template-columns: 1fr; }
    .palette-fan { height: 240px; }

    .vp-tintometro { grid-template-columns: 1fr; }
    .vp-step-arrow { display: none; }
    .vp-process-steps { gap: 16px; }
    .vp-laser-result { position: static; transform: none; margin-top: 20px; }
    .vp-laser-stage { flex-direction: column; gap: 20px; }
    .vp-deco-showcase { grid-template-columns: 1fr 1fr; }
    .vp-brands-grid { grid-template-columns: repeat(3, 1fr); }
    .vp-fan-container { width: 300px; height: 300px; right: -5%; }
    .vp-fan-strip { width: 36px; height: 200px; }
    .vp-gal-slide { width: 280px; height: 190px; }
    .bois-slide { grid-template-columns: 1fr; height: auto; }
    .bois-slide-img { height: 280px; }
    .bois-slide-img .boiserie-placeholder { min-height: 260px; }
    .bois-products-row { grid-template-columns: 1fr 1fr; }
    .orac-content { grid-template-columns: 1fr; text-align: center; }
    .orac-logo-area { min-width: auto; }

    .cp-products-grid { grid-template-columns: 1fr; }
    .cp-prod-featured { grid-column: span 1; }
    .cp-services-grid { grid-template-columns: 1fr 1fr; }
    .cp-content-grid { grid-template-columns: 1fr; }
    .cp-content-grid.cp-reverse { direction: ltr; }
    .cp-features-grid { grid-template-columns: 1fr 1fr; }

    /* Attrezzature 1024px */
    .at-products-grid { grid-template-columns: repeat(2, 1fr); }
    .at-prod-featured { grid-column: span 2; }
    .at-services-grid { grid-template-columns: repeat(2, 1fr); }
    .at-spotlight-panel { grid-template-columns: 1fr; gap: 40px; }
    .at-features-grid { grid-template-columns: repeat(2, 1fr); }
    .at-content-grid { grid-template-columns: 1fr; }
    .at-content-grid.at-reverse { direction: ltr; }

    .catalog-book { width: 250px; height: 340px; }
    .catalog-book.prev { transform: scale(0.65) rotateY(20deg) translateX(-160px); }
    .catalog-book.next { transform: scale(0.65) rotateY(-20deg) translateX(160px); }
    .lux-gallery-grid { grid-template-columns: 1fr 1fr; }
    .lux-gal-wide { grid-column: span 2; }

    .pp-lavori-card { width: 200px; }
    .pp-lavori-track { gap: 12px; }
    .pp-lb-prev { left: 10px; width: 40px; height: 40px; font-size: 20px; }
    .pp-lb-next { right: 10px; width: 40px; height: 40px; font-size: 20px; }
}

@media (max-width: 768px) {
    :root { --nav-h: 64px; }

    .brand-modal-container {
        width: 96%; max-height: 92vh;
        border-radius: 20px;
    }
    .brand-modal-content { padding: 0 20px 28px; }
    .bm-features { grid-template-columns: 1fr; }
    .bm-cac-connection { padding: 20px; }
    .bm-cac-ctas { flex-direction: column; align-items: center; }

    .hero-ctas { flex-direction: column; align-items: center; }
    .btn { width: 100%; max-width: 300px; justify-content: center; }
    .hero-drips .drip { width: 4px; }
    .hero-marquee { bottom: 70px; }
    .hero-scroll { bottom: 24px; }

    .stats-bar { flex-direction: column; gap: 20px; padding: 32px; }
    .stat-divider { width: 60px; height: 1px; }
    .values-grid { grid-template-columns: 1fr; }
    .hide-mobile { display: none; }
    .founder-photo { width: 240px; }
    .narrative-milestone { flex-direction: column; gap: 16px; }
    .milestone-line { width: 100%; height: 4px; }
    .closing-values-row { gap: 10px; }
    .closing-value-dot { display: none; }

    .pp-brands-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-showroom-grid { grid-template-columns: 1fr; }
    .pp-cat-thumb { width: 60px; height: 76px; }
    .pp-cat-card { gap: 14px; padding: 10px; }
    .pp-hero-stats { flex-direction: column; gap: 20px; }
    .pp-hstat-divider { width: 48px; height: 1px; }
    .pp-hero-ctas { flex-direction: column; align-items: center; }
    .pp-hero-title { font-size: clamp(40px, 10vw, 72px); }
    .pp-mosaic { gap: 6px; transform: rotate(-12deg) scale(1.5); }
    .pp-mosaic-col { gap: 6px; }
    .pp-mosaic-col:nth-child(n+5) { display: none; }
    .pp-mosaic-col-extra { display: none !important; }
    .pp-showroom-noappt { flex-direction: column; text-align: center; }
    .pp-showcar-slide { aspect-ratio: 16/9; }
    .pp-showcar-btn { width: 40px; height: 40px; }
    .pp-showcar-caption { font-size: 15px; padding: 16px 20px; }
    .pp-final-cta-buttons { flex-direction: column; align-items: center; }
    .pp-review-card { width: 200px; padding: 12px 14px; }
    .pp-review-card p { font-size: 11px; }
    .pp-review-card.pp-rc-left { left: 1% !important; }
    .pp-review-card.pp-rc-right { right: 1% !important; }

    .attr-grid { grid-template-columns: 1fr; }
    .attr-card { flex-direction: column; text-align: center; align-items: center; }

    /* Attrezzature 768px */
    .at-products-grid { grid-template-columns: 1fr; }
    .at-prod-featured { grid-column: span 1; }
    .at-services-grid { grid-template-columns: 1fr; }
    .at-hero-stats { flex-direction: column; gap: 20px; }
    .at-hstat-divider { width: 48px; height: 1px; }
    .at-hero-ctas { flex-direction: column; align-items: center; }
    .at-final-ctas { flex-direction: column; align-items: center; }
    .at-features-grid { grid-template-columns: 1fr; }
    .at-gal-frame { width: 260px; height: 180px; }
    .at-hero-shapes { display: none; }
    .at-spotlight-ctas { flex-direction: column; align-items: flex-start; }

    .social-bar { flex-wrap: wrap; }
    .map-frame { min-height: 320px; }
    .map-frame iframe { min-height: 320px; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .showroom-cta { padding: 40px 24px; }
    .cta-buttons { flex-direction: column; align-items: center; }

    .idx-vernici-grid { grid-template-columns: 1fr; }
    .idx-vernici-bg { display: none; }
    .idx-vernici-overlay { display: none; }
    .idx-vernici .ivg-card { background: var(--bg-card); backdrop-filter: none; border-color: var(--border); }
    .idx-vernici .logo-carousel-section { background: none; backdrop-filter: none; padding: 0; }
    .idx-vernici .palette-showcase { background: none; backdrop-filter: none; padding: 0; }
    .care-grid { grid-template-columns: 1fr; }

    .vp-hero-title { font-size: clamp(28px, 8vw, 48px); }
    .vp-hero-stats { flex-direction: column; gap: 16px; }
    .vp-stat-divider { width: 60px; height: 1px; }
    .vp-hero-ctas { flex-direction: column; align-items: flex-start; }
    .vp-float-can { opacity: 0.1 !important; }
    .vp-float-cans img:nth-child(n+8) { display: none; }
    .vp-products-grid { grid-template-columns: 1fr; }
    .vp-smalti-grid { grid-template-columns: 1fr; }
    .vp-deco-showcase { grid-template-columns: 1fr; }
    .vp-laser-stage { min-height: 250px; padding: 24px; }
    .vp-wall-sample { width: 150px; height: 150px; }
    .vp-cta-box { padding: 40px 24px; }
    .vp-tinto-body { min-height: 300px; }
    .vp-brands-grid { grid-template-columns: repeat(2, 1fr); }
    .vp-fan-container { width: 220px; height: 220px; bottom: 10%; right: -8%; }
    .vp-fan-strip { width: 28px; height: 150px; }
    .vp-floating-swatch { display: none; }
    .vp-gal-slide { width: 260px; height: 170px; }
    .vp-photo-break { height: clamp(40vh, 55vh, 65vh); }
    .vp-pb-alt .vp-pb-content,
    .vp-pb-warm .vp-pb-content { text-align: center; margin: 0 auto; }
    .bois-products-row { grid-template-columns: 1fr; }
    .bois-slide-img { height: 240px; }
    .bois-slide-img .boiserie-placeholder { min-height: 220px; }
    .boiserie-art-bg { display: none; }
    .orac-badge { position: static; display: inline-block; margin-bottom: 12px; }
    .orac-features { justify-content: center; }
    .dream-cta .cta-buttons { flex-direction: column; align-items: center; }

    .cp-ba-label { font-size: 9px; padding: 4px 10px; bottom: 12px; }
    .cp-ba-label-prima { left: 12px; }
    .cp-ba-label-dopo { right: 12px; }
    .cp-hero-stats { flex-direction: column; gap: 20px; }
    .cp-hstat-divider { width: 48px; height: 1px; }
    .cp-hero-ctas { flex-direction: column; align-items: center; }
    .cp-services-grid { grid-template-columns: 1fr; }
    .cp-orac-ctas { flex-direction: column; align-items: center; }
    .cp-final-ctas { flex-direction: column; align-items: center; }
    .cp-gal-frame { width: 250px; height: 170px; }
    .cp-blueprint-shapes { display: none; }
    .cp-features-grid { grid-template-columns: 1fr; }

    .catalog-3d { min-height: 360px; }
    .catalog-book { width: 220px; height: 300px; }
    .catalog-book.prev, .catalog-book.next { display: none; }
    .catalog-nav { flex-wrap: wrap; }
    .lux-gallery-grid { grid-template-columns: 1fr; }
    .lux-gal-wide { grid-column: span 1; }
}

@media (max-width: 480px) {
    .pp-brands-grid { grid-template-columns: 1fr; }
    .pp-lavori-card { width: 160px; }
    .pp-lavori-track { gap: 10px; }
    .pp-section { padding: 60px 0; }
    .pp-mosaic { gap: 5px; transform: rotate(-12deg) scale(1.7); }
    .pp-mosaic-col { gap: 5px; }
    .pp-mosaic-col:nth-child(n+4) { display: none; }

    .bois-slide-img { height: 200px; }

    /* Attrezzature 480px */
    .at-section { padding: 60px 0; }
    .at-hero-chip { font-size: 9px; padding: 6px 14px; letter-spacing: 1.5px; }
    .at-brand-marquee::before, .at-brand-marquee::after { width: 40px; }
    .at-gal-frame { width: 220px; height: 150px; }
    .pp-poster-visual { flex-direction: column; align-items: center; }
    .pp-poster-frame-2 { margin-top: 0; }
    .pp-reviews-splash { display: none; }
    .founder-photo { width: 200px; }
    .vp-process-steps { flex-direction: column; align-items: center; }
    .vp-gal-slide { width: 220px; height: 150px; }
    .vp-photo-break { height: 45vh; }
    .vp-pb-title { font-size: clamp(24px, 7vw, 36px); }
    .vp-pb-desc { font-size: 14px; }
    .founders-track { gap: 12px; }
    .storia-hero-title { font-size: clamp(28px, 8vw, 48px); }
    .pp-section-header { margin-bottom: 40px; }
    .whatsapp-float { bottom: 16px; right: 16px; width: 52px; height: 52px; }
}

/* ═══════════════════════════════════════════════════════
   POSTER PERSONALIZZATI — pst- prefix
   ═══════════════════════════════════════════════════════ */

/* --- HERO --- */
.pst-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    overflow: hidden;
    background: #0a0a0f;
}
.pst-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.pst-hero-bgimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.12;
    filter: grayscale(30%);
    pointer-events: none;
    z-index: 0;
}
.pst-hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(196,162,101,0.08) 0%, transparent 70%),
                radial-gradient(ellipse 50% 80% at 20% 80%, rgba(196,162,101,0.04) 0%, transparent 60%);
}
.pst-hero-content { position: relative; z-index: 2; max-width: 800px; }
.pst-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    font-family: 'Space Grotesk', sans-serif;
}
.pst-breadcrumb a { color: rgba(240,236,228,0.5); text-decoration: none; transition: color 0.3s; }
.pst-breadcrumb a:hover { color: #C4A265; }
.pst-breadcrumb svg { color: rgba(240,236,228,0.3); }
.pst-bc-current { color: #C4A265; }
.pst-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(42px, 6vw, 80px);
    font-weight: 800;
    line-height: 1.05;
    color: #f0ece4;
    margin: 16px 0 24px;
    letter-spacing: -0.02em;
}
.pst-hero-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(240,236,228,0.65);
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 36px;
}
.pst-hero-sub strong { color: #C4A265; }
.pst-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- BILLIONS SECTION — MATRIX RUSH --- */
.pst-billions {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #080810;
    min-height: 600px;
    display: flex;
    align-items: center;
}
.pst-billions-bg {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 6px;
    padding: 0 6px;
    z-index: 0;
    opacity: 0.55;
}
.pst-rush-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pst-rush-item {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 6px;
    background: var(--ph-h, hsl(30,60%,45%));
    position: relative;
    overflow: hidden;
}
.pst-rush-item > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    z-index: 1;
}
.pst-rush-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%),
        linear-gradient(225deg, rgba(0,0,0,0.2) 0%, transparent 50%);
    border-radius: 6px;
    z-index: 2;
}
.pst-rush-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}

/* Column animations — each column scrolls at different speed & direction */
.pst-rush-1 { animation: pstRushUp 12s linear infinite; }
.pst-rush-2 { animation: pstRushDown 15s linear infinite; }
.pst-rush-3 { animation: pstRushUp 10s linear infinite; }
.pst-rush-4 { animation: pstRushDown 13s linear infinite; }
.pst-rush-5 { animation: pstRushUp 11s linear infinite; }

@keyframes pstRushUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes pstRushDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.pst-billions-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(8,8,16,0.3) 0%, rgba(8,8,16,0.85) 100%),
        linear-gradient(180deg, rgba(8,8,16,0.9) 0%, rgba(8,8,16,0.2) 15%, rgba(8,8,16,0.2) 85%, rgba(8,8,16,0.95) 100%);
    pointer-events: none;
}
.pst-billions-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.pst-big-num {
    display: block;
    font-size: clamp(48px, 8vw, 100px);
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(135deg, #C4A265 0%, #f0d8a0 50%, #C4A265 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.pst-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.pst-cat-pill {
    padding: 8px 20px;
    border: 1px solid rgba(196,162,101,0.3);
    border-radius: 100px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(240,236,228,0.7);
    background: rgba(196,162,101,0.06);
    transition: all 0.3s ease;
    cursor: default;
}
.pst-cat-pill:hover {
    background: rgba(196,162,101,0.15);
    border-color: #C4A265;
    color: #C4A265;
    transform: translateY(-2px);
}

/* --- 3 STEPS --- */
.pst-steps { background: #0d0d14; }
.pst-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.pst-step-card {
    position: relative;
    background: rgba(196,162,101,0.04);
    border: 1px solid rgba(196,162,101,0.1);
    border-radius: 16px;
    padding: 48px 32px 36px;
    text-align: center;
    transition: all 0.4s ease;
}
.pst-step-card:hover {
    background: rgba(196,162,101,0.08);
    border-color: rgba(196,162,101,0.25);
    transform: translateY(-4px);
}
.pst-step-num {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #C4A265, #a88642);
    color: #0a0a0f;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.pst-step-icon {
    margin-bottom: 20px;
    color: #C4A265;
}
.pst-step-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f0ece4;
    margin-bottom: 12px;
}
.pst-step-card p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: rgba(240,236,228,0.6);
    line-height: 1.6;
}

/* --- SHOWREEL GALLERY --- */
.pst-gallery { background: #080810; overflow: hidden; }
.pst-showreel {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
.pst-showreel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: pstShowreel 35s linear infinite;
}
.pst-showreel-track:hover { animation-play-state: paused; }

@keyframes pstShowreel {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.pst-show-item { flex-shrink: 0; width: 320px; }
.pst-show-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(196,162,101,0.15);
    transition: all 0.4s ease;
    position: relative;
}
.pst-show-frame:hover {
    border-color: rgba(196,162,101,0.4);
    transform: scale(1.02);
}
.pst-show-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.pst-show-ph {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--sh-c1) 0%, var(--sh-c2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.pst-show-ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
}
.pst-show-ph-icon { position: relative; z-index: 1; color: rgba(255,255,255,0.15); }
.pst-show-ph span {
    position: relative;
    z-index: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* --- DIMENSIONS --- */
.pst-dimensions { background: #0d0d14; }
.pst-dim-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.pst-dim-visual { display: flex; justify-content: center; }
.pst-dim-frame {
    width: 340px;
    height: 340px;
    border: 2px dashed rgba(196,162,101,0.3);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    animation: pstDimPulse 3s ease-in-out infinite;
}
@keyframes pstDimPulse {
    0%, 100% { border-color: rgba(196,162,101,0.2); }
    50% { border-color: rgba(196,162,101,0.5); }
}
.pst-dim-inner {
    width: 100%;
    height: 100%;
    background: rgba(196,162,101,0.04);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pst-dim-label {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #C4A265;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pst-dim-label::before, .pst-dim-label::after {
    content: '';
    width: 30px;
    height: 1px;
    background: rgba(196,162,101,0.3);
}
.pst-dim-w { bottom: -30px; left: 50%; transform: translateX(-50%); }
.pst-dim-h {
    right: -80px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.pst-dim-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(196,162,101,0.3);
}
.pst-dim-center span {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: rgba(240,236,228,0.5);
    text-align: center;
    line-height: 1.3;
}
.pst-dim-text p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    color: rgba(240,236,228,0.65);
    line-height: 1.7;
    margin-top: 16px;
}
.pst-dim-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
}
.pst-dim-feat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: rgba(240,236,228,0.75);
}

/* --- QUALITY --- */
.pst-quality { background: #080810; }
.pst-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.pst-qual-card {
    background: rgba(196,162,101,0.04);
    border: 1px solid rgba(196,162,101,0.1);
    border-radius: 16px;
    padding: 36px 24px;
    text-align: center;
    transition: all 0.4s ease;
}
.pst-qual-card:hover {
    background: rgba(196,162,101,0.08);
    border-color: rgba(196,162,101,0.25);
    transform: translateY(-4px);
}
.pst-qual-icon {
    color: #C4A265;
    margin-bottom: 18px;
}
.pst-qual-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #f0ece4;
    margin-bottom: 10px;
}
.pst-qual-card p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    color: rgba(240,236,228,0.55);
    line-height: 1.6;
}

/* --- POSTER SECTION SHARED --- */
.pst-section { padding: 100px 0; }

/* --- RESPONSIVE POSTER --- */
@media (max-width: 1024px) {
    .pst-steps-grid { grid-template-columns: repeat(2, 1fr); }
    .pst-quality-grid { grid-template-columns: repeat(2, 1fr); }
    .pst-dim-layout { grid-template-columns: 1fr; gap: 40px; }
    .pst-dim-frame { width: 280px; height: 280px; }
}
@media (max-width: 768px) {
    .pst-hero { min-height: 70vh; padding: 120px 0 60px; }
    .pst-hero-title { font-size: clamp(32px, 8vw, 52px); }
    .pst-steps-grid { grid-template-columns: 1fr; }
    .pst-quality-grid { grid-template-columns: 1fr; }
    .pst-show-item { width: 260px; }
    .pst-billions { padding: 80px 0; min-height: 500px; }
    .pst-billions-bg { gap: 4px; padding: 0 4px; }
    .pst-rush-item { aspect-ratio: 2/3; }
    .pst-rush-col:nth-child(5) { display: none; }
    .pst-dim-layout { text-align: center; }
    .pst-dim-features { align-items: center; }
    .pst-section { padding: 70px 0; }
    .pst-hero-ctas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .pst-hero { min-height: 60vh; }
    .pst-show-item { width: 220px; }
    .pst-dim-frame { width: 240px; height: 240px; }
    .pst-dim-h { right: -60px; }
    .pst-rush-col:nth-child(4),
    .pst-rush-col:nth-child(5) { display: none; }
    .pst-categories { gap: 8px; }
    .pst-cat-pill { padding: 6px 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .anim-in, .anim-slide-up > *, .anim-pop, .anim-fade { opacity: 1; transform: none; }
}