/* ============================================
   BLACKPEARL ITALIA — Enterprise Design System
   ============================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
  /* Backgrounds — Light theme */
  --bp-bg-primary: #F0F0F0;
  --bp-bg-secondary: #E8E8E8;
  --bp-bg-tertiary: #004D61;
  /* Footer background = Midnight Petrol */
  --bp-bg-card: rgba(255, 255, 255, 0.7);
  --bp-bg-glass: rgba(255, 255, 255, 0.6);
  --bp-border-glass: rgba(0, 0, 0, 0.08);

  /* Accent — Logo Teal (graphic elements, icons, subtitles) */
  --bp-accent: #00897B;
  --bp-accent-light: #26A69A;
  --bp-accent-glow: rgba(0, 137, 123, 0.25);

  /* CTA — Persimmon Coral (conversion buttons) */
  --bp-cta: #E07A5F;
  --bp-cta-hover: #D4623F;
  --bp-cta-glow: rgba(224, 122, 95, 0.3);

  /* Secondary — Midnight Petrol (footer, secondary buttons) */
  --bp-petrol: #004D61;
  --bp-petrol-light: #006E7F;

  /* Gold replaced by CTA coral for the "custom" card */
  --bp-gold: #E07A5F;
  --bp-gold-light: #EDA08A;

  /* Text — Deep Charcoal */
  --bp-text-primary: #282828;
  --bp-text-secondary: #555555;
  --bp-text-muted: #888888;
  --bp-white: #ffffff;

  /* Gradients */
  --bp-gradient-hero: linear-gradient(135deg, rgba(40, 40, 40, 0.72) 0%, rgba(0, 77, 97, 0.55) 50%, rgba(0, 137, 123, 0.25) 100%);
  --bp-gradient-accent: linear-gradient(135deg, #00897B 0%, #004D61 100%);
  --bp-gradient-gold: linear-gradient(135deg, #E07A5F 0%, #EDA08A 100%);

  /* Radii */
  --bp-radius-sm: 8px;
  --bp-radius-md: 16px;
  --bp-radius-lg: 24px;
  --bp-radius-xl: 32px;

  /* Shadows — lighter for light theme */
  --bp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --bp-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
  --bp-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.12);
  --bp-shadow-glow: 0 0 40px var(--bp-accent-glow);

  /* Transitions */
  --bp-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bp-transition-fast: 0.2s ease;
}

/* --- Global Reset for Enterprise Look --- */
html {
  font-size: 16px !important;
  scroll-behavior: smooth;
}

/* --- Custom Modern Scrollbar --- */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #282828;
}

::-webkit-scrollbar-thumb {
  background: var(--bp-accent);
  border-radius: 10px;
  border: 3px solid #282828;
}

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

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bp-accent) #282828;
}

body.u-body {
  background-color: var(--bp-bg-primary) !important;
  color: var(--bp-text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.bp-no-scroll,
body.u-body.bp-no-scroll {
  overflow: hidden !important;
}

html.bp-no-scroll::-webkit-scrollbar,
body.u-body.bp-no-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

/* --- Animated Background Grain --- */
body.u-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   SECTION 1 — HERO
   ============================================ */
.u-section-1 {
  background-image: url("risorse/images/home_header.jpg") !important;
  background-position: 50% 30% !important;
  background-size: cover !important;
  position: relative !important;
  min-height: 85vh !important;
  display: flex !important;
  align-items: flex-start !important;
}

.u-section-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bp-gradient-hero);
  z-index: 1;
}

.u-section-1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bp-bg-primary) 0%, transparent 100%);
  z-index: 2;
  opacity: 0.85;
}

.u-section-1 .u-sheet-1 {
  position: relative !important;
  z-index: 3 !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 40px 80px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.u-section-1 .bp-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  animation: heroFadeUp 1s ease-out both;
}

.u-section-1 .u-text-1 {
  font-family: 'Cinzel', serif !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: var(--bp-white) !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

/* Language Switch removed */

.u-section-1 .u-text-2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: #4DB6AC !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin: 0 0 24px 0 !important;
  animation: heroFadeUp 1s ease-out 0.2s both;
}

/* Social Icons */
.u-section-1 .u-list-1 {
  width: auto !important;
  margin: 0 !important;
  animation: heroFadeUp 1s ease-out 0.4s both;
}

.u-section-1 .u-repeater-1 {
  display: flex !important;
  gap: 16px !important;
  grid-template-columns: none !important;
  min-height: auto !important;
}

.u-section-1 .u-container-layout-1,
.u-section-1 .u-container-layout-2,
.u-section-1 .u-container-layout-3 {
  padding: 0 !important;
}

.u-section-1 .u-image-1,
.u-section-1 .u-image-2,
.u-section-1 .u-image-3 {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: var(--bp-transition) !important;
  cursor: pointer;
}

.u-section-1 .u-image-1:hover,
.u-section-1 .u-image-2:hover,
.u-section-1 .u-image-3:hover {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  transform: translateY(-3px);
}

/* ============================================
   SECTION 2 — TOOL
   ============================================ */
.u-section-2 {
  background: var(--bp-bg-primary) !important;
  position: relative;
  padding: 50px 0 80px !important;
  z-index: 1;
}

.u-section-2 .u-sheet-1 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  min-height: auto !important;
}

/* Section Label */
.u-section-2 .u-text-1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--bp-accent) !important;
  margin: 0 0 12px 0 !important;
  --text-color-var: var(--bp-accent) !important;
}

.u-section-2 .u-shape-1 {
  width: 50px !important;
  height: 2px !important;
  background: var(--bp-gradient-accent) !important;
  --color-var: var(--bp-accent) !important;
  margin: 0 0 24px 0 !important;
  border-radius: 2px;
}

.u-section-2 .u-text-2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--bp-text-secondary) !important;
  --text-color-var: var(--bp-text-secondary) !important;
  letter-spacing: 0.3px !important;
  margin: 0 0 50px 0 !important;
  max-width: 100% !important;
}

.u-section-2 .u-text-2 span[style*="font-weight: 700"] {
  color: var(--bp-text-primary) !important;
  font-weight: 600 !important;
}

.u-section-2 .u-text-2 span[style*="font-style: italic"] {
  color: var(--bp-accent-light) !important;
}

/* Tool Cards Grid — Simplified Structure */
.bp-tools__wrap {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 !important;
}

.bp-tools__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: 100% !important;
}

.bp-tools__card {
  flex: 1 !important;
  min-height: 420px !important;
  border-radius: var(--bp-radius-lg) !important;
  --radius: var(--bp-radius-lg) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--bp-shadow-sm) !important;
  transition: var(--bp-transition) !important;
  cursor: pointer;
  background-size: cover !important;
  background-position: center !important;
}

@media (min-width: 992px) {

  .u-section-2 .u-image-1,
  .u-section-2 .u-image-2,
  .u-section-2 .u-image-3,
  .u-section-2 .u-image-4 {
    min-height: 420px !important;
  }
}

.u-section-2 .u-image-1 {
  background-image: url("risorse/tool/copertine/1.jpg") !important;
}

.u-section-2 .u-image-2 {
  background-image: url("risorse/tool/copertine/2.jpg") !important;
}

.u-section-2 .u-image-3 {
  background-image: url("risorse/tool/copertine/3.jpg") !important;
}

.u-section-2 .u-image-4 {
  background-image: url("risorse/tool/copertine/4.jpg") !important;
}

.u-section-2 .u-image-1::after,
.u-section-2 .u-image-2::after,
.u-section-2 .u-image-3::after,
.u-section-2 .u-image-4::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
  border-radius: inherit;
  transition: var(--bp-transition);
}

@media (min-width: 992px) {

  .u-section-2 .u-image-1:hover,
  .u-section-2 .u-image-2:hover,
  .u-section-2 .u-image-3:hover,
  .u-section-2 .u-image-4:hover {
    transform: translateY(-8px) !important;
    border-color: var(--bp-accent) !important;
    box-shadow: 0 0 30px var(--bp-accent-glow), var(--bp-shadow-md) !important;
  }
}

/* ============================================
   SECTION 3 — SaaS
   ============================================ */
.u-section-3 {
  background: var(--bp-bg-secondary) !important;
  position: relative;
  padding: 50px 0 80px !important;
  z-index: 1;
}

.u-section-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 20%, var(--bp-accent) 50%, rgba(0, 0, 0, 0.05) 80%, transparent 100%);
}

.u-section-3 .u-sheet-1 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  min-height: auto !important;
}

.u-section-3 .u-text-1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--bp-accent) !important;
  --text-color-var: var(--bp-accent) !important;
  margin: 0 0 12px 0 !important;
}

.u-section-3 .u-shape-1 {
  width: 50px !important;
  height: 2px !important;
  background: var(--bp-gradient-accent) !important;
  --color-var: var(--bp-accent) !important;
  margin: 0 0 24px 0 !important;
  border-radius: 2px;
}

.u-section-3 .u-text-2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--bp-text-secondary) !important;
  --text-color-var: var(--bp-text-secondary) !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Header allineato esattamente alla larghezza del showcase */
.bp-saas-header {
  width: 100%;
  margin-bottom: 32px;
  overflow: hidden;
}

.u-section-3 .u-text-2 span[style*="font-weight: 700"] {
  color: var(--bp-text-primary) !important;
  font-weight: 600 !important;
}

/* ============================================
   SaaS Showcase — Visual Product Cards
   ============================================ */
.bp-saas-showcase {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

/* --- Base Card --- */
.bp-sc {
  min-height: 280px;
  border-radius: var(--bp-radius-lg);
  border: 1px solid var(--bp-border-glass);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

/* Card immagine (Gestionale) occupa spazio rimanente */
.bp-sc--img {
  flex: 1;
}

/* Card custom (App su misura) — larghezza contenuta */
.bp-sc--custom {
  flex: 0 0 260px;
  width: 260px;
  background: linear-gradient(160deg, #004D61 0%, #003040 100%);
  justify-content: center;
  align-items: center;
}

.bp-sc:hover {
  border-color: var(--bp-accent);
  box-shadow: 0 0 30px var(--bp-accent-glow), var(--bp-shadow-md);
  transform: translateY(-6px);
}

.bp-sc:focus-visible {
  outline: 2px solid var(--bp-accent-light);
  outline-offset: 3px;
}

/* Radial glow behind the + */
.bp-sc__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -60%);
  background: radial-gradient(circle, var(--bp-accent-glow) 0%, transparent 70%);
  opacity: 0.3;
  filter: blur(30px);
  transition: opacity 0.5s ease, width 0.5s ease, height 0.5s ease;
  pointer-events: none;
}

.bp-sc--custom:hover .bp-sc__glow {
  opacity: 0.6;
  width: 240px;
  height: 240px;
}

/* Plus icon — CTA conversion button */
.bp-sc__plus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px dashed var(--bp-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-cta);
  margin-bottom: 20px;
  transition: var(--bp-transition);
  position: relative;
  z-index: 1;
}

.bp-sc--custom:hover .bp-sc__plus {
  border-color: var(--bp-cta);
  border-style: solid;
  color: var(--bp-white);
  background: var(--bp-cta);
  transform: scale(1.1);
  box-shadow: 0 0 24px var(--bp-cta-glow);
}

/* Content */
.bp-sc__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.bp-sc__content--bottom {
  margin-top: auto;
  align-items: flex-start;
  text-align: left;
  padding: 28px;
}

.bp-sc__title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bp-white);
  margin: 0 0 6px 0;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.bp-sc__desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: #999999;
  margin: 0 0 16px 0;
  line-height: 1.5;
  transition: color var(--bp-transition);
}

.bp-sc__desc-mobile {
  display: none;
}

.bp-sc:hover .bp-sc__desc {
  color: #ffffff;
}

/* Descrizione nella card custom — ora segue la regola generale */

.bp-sc__cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--bp-accent-light);
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.bp-sc:hover .bp-sc__cta {
  opacity: 1;
  transform: translateY(0);
}

.bp-sc--custom:hover .bp-sc__cta {
  color: var(--bp-cta);
}

/* ============================================
   More is coming — Ghost placeholder
   ============================================ */
.bp-sc-coming {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.35;
  transition: opacity 0.4s ease;
  padding: 24px 16px;
  pointer-events: none;
}

.bp-sc-coming__dots {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.bp-sc-coming__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bp-accent-light);
  animation: comingPulse 1.8s ease-in-out infinite;
}

.bp-sc-coming__dots span:nth-child(2) {
  animation-delay: 0.3s;
}

.bp-sc-coming__dots span:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes comingPulse {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.bp-sc-coming__label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
  margin: 0;
  white-space: nowrap;
}

.bp-sc-coming__sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--bp-text-muted);
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* Badge */
.bp-sc__badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bp-accent);
  background: rgba(0, 137, 123, 0.12);
  border: 1px solid rgba(0, 137, 123, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 10px;
  display: inline-block;
  line-height: 1;
}

/* --- Card 2: Image Product Card --- */
.bp-sc--img {
  background-size: cover;
  background-position: center;
}

.bp-sc__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.88) 100%);
  transition: background 0.5s ease;
}

.bp-sc--img:hover .bp-sc__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.85) 100%);
}

/* ============================================
   Popup Overlay (iframe)
   ============================================ */
.bp-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* Using a slightly darker background to anchor the design and hide background artifacts */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: opacity 0.4s ease, visibility 0.4s;
}

.bp-popup-overlay.bp-popup--open {
  display: flex;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.bp-popup-overlay__frame-wrap {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



.bp-popup-overlay__iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bp-popup-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--bp-transition-fast);
}

.bp-popup-overlay__close:hover {
  background: var(--bp-accent);
  transform: scale(1.1);
}

/* ============================================
   WhatsApp Floating Button
   ============================================ */
.bp-wa-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 8000;
  width: 52px;
  height: 52px;
  border-radius: 50px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: width 0.4s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.bp-wa-float.is-open {
  width: 145px;
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(37, 211, 102, 0.4), 0 6px 12px rgba(0, 0, 0, 0.3);
}

.bp-wa-float__icon {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
  display: block;
  flex-shrink: 0;
}

.bp-wa-float__text {
  margin-left: 10px;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bp-wa-float.is-open .bp-wa-float__text {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .bp-saas-showcase {
    flex-direction: column;
  }

  .bp-sc {
    min-height: 220px;
  }

  .bp-sc--img {
    min-height: 320px !important;
  }

  .bp-sc--img .bp-sc__content {
    position: absolute !important;
    inset: 0 !important;
    justify-content: flex-end !important;
  }

  .bp-sc--img .bp-sc__badge {
    position: absolute !important;
    top: 24px !important;
    left: 24px !important;
    margin: 0 !important;
  }

  .bp-sc--img .bp-sc__title {
    margin-bottom: -4px !important;
  }

  .bp-sc--custom {
    flex: 0 0 auto;
    width: 100%;
    min-height: 85px !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 20px !important;
    position: relative !important;
  }

  .bp-sc--custom .bp-sc__plus {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-bottom: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }

  .bp-sc--custom .bp-sc__content {
    padding: 0 0 0 32px !important;
    /* Sposta il contenuto leggermente per bilanciare l'icona a sinistra */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bp-sc--custom .bp-sc__title {
    margin: 0 !important;
    font-size: 0.95rem !important;
  }

  .bp-sc--custom .bp-sc__desc {
    margin: 0 !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  .bp-sc--custom .bp-sc__desc-full {
    display: none !important;
  }

  .bp-sc--custom .bp-sc__desc-mobile {
    display: inline !important;
  }

  /* Nascondi CTA su mobile per questa card ridotta */
  .bp-sc--custom .bp-sc__cta {
    display: none !important;
  }

  .bp-sc--custom .bp-sc__glow {
    width: 100px !important;
    height: 100px !important;
    left: 28px !important;
    top: 50% !important;
  }

  .bp-sc-coming {
    display: none !important;
  }

  .bp-sc-coming__dots {
    margin-bottom: 0;
    margin-right: 12px;
  }

  .bp-popup-overlay__frame-wrap {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .bp-popup-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
  }

  .bp-wa-float {
    bottom: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    justify-content: center !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  }

  .bp-wa-float.is-open {
    width: 60px !important;
    transform: none !important;
  }

  .bp-wa-float__icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  .bp-wa-float__text {
    display: none !important;
  }
}

/* ============================================
   NEW CUSTOM GEOMETRIC FOOTER
   ============================================ */
.bp-footer {
  background: #E4E4E4;
  border-top: none;
  padding: 80px 40px 40px;
  position: relative;
  font-family: 'Inter', sans-serif;
  color: var(--bp-petrol);
}

.bp-footer::before {
  display: none;
}

.bp-footer__container {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.bp-footer__brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bp-footer__logo {
  width: 90px;
  height: auto;
  filter: brightness(1.2);
  transition: var(--bp-transition);
}

.bp-footer__logo:hover {
  filter: brightness(1.5) drop-shadow(0 0 10px var(--bp-accent-glow));
}

.bp-footer__name {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bp-petrol);
  letter-spacing: 2px;
  line-height: 1.2;
  margin: 0;
}

.bp-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bp-footer__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bp-petrol);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 8px 0;
}

.bp-footer__text {
  font-size: 0.85rem;
  font-weight: 400;
  color: #555555;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

.bp-footer__bottom {
  max-width: 1120px;
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.bp-footer__legal {
  display: flex;
  gap: 24px;
  align-items: center;
}

.bp-footer__link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  transition: var(--bp-transition-fast);
}

.bp-footer__link:hover {
  color: var(--bp-petrol);
}

.bp-footer__copyright {
  font-size: 0.75rem;
  color: #999999;
  margin: 0;
}

/* Hide nicepage backlink */
.u-backlink {
  display: none !important;
}

/* Original Footer Alignment Fixes and Aesthetic Updates */
#footer.u-footer {
  /* Top 28px = SaaS bg (#E8E8E8), below = footer bg (#E4E4E4).
     Le shapes (linea spezzettata) cadono esattamente sulla transizione. */
  background: linear-gradient(to bottom,
      #E8E8E8 0px,
      #E8E8E8 27px,
      rgba(0, 0, 0, 0.08) 27px,
      rgba(0, 0, 0, 0.08) 29px,
      #E4E4E4 29px) !important;
  border-top: none !important;
  color: var(--bp-petrol) !important;
}

#footer.u-footer p {
  font-family: 'Inter', sans-serif !important;
}

#footer.u-footer .u-text-1,
#footer.u-footer .u-text-2,
#footer.u-footer .u-text-3 {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  color: var(--bp-petrol) !important;
  transition: color var(--bp-transition-fast) !important;

  /* Fix Allineamento Verticale (per correggere i margini negativi di Nicepage) */
  height: 28px !important;
  line-height: 28px !important;
  box-sizing: border-box !important;

  /* Gradiente che replica la transizione del footer, saltando la linea.
     Le etichette iniziano a 13px dal top del footer, sono alte 28px.
     La linea del footer è a 27-29px → dentro l'etichetta cade a 14-16px. */
  background: linear-gradient(to bottom,
      #E8E8E8 0px,
      #E8E8E8 14px,
      #E4E4E4 16px,
      #E4E4E4 100%) !important;
  padding: 0 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

#footer.u-footer .u-text-2,
#footer.u-footer .u-text-3 {
  margin-top: -28px !important;
}

#footer.u-footer .u-text-1:hover,
#footer.u-footer .u-text-2:hover,
#footer.u-footer .u-text-3:hover {
  color: var(--bp-accent) !important;
  cursor: pointer;
}

/* Le shapes Nicepage sono nascoste — la linea di separazione è ora nel gradient del footer */
#footer.u-footer .u-shape {
  background-color: transparent !important;
  height: 0px !important;
  border: none !important;
  box-shadow: none !important;
}

#footer.u-footer .u-shape-1 {
  margin-top: -14px !important;
  /* Centra la linea rispetto ai 28px del testo */
}

#footer.u-footer .u-shape-2,
#footer.u-footer .u-shape-3,
#footer.u-footer .u-shape-4 {
  margin-top: -1px !important;
  /* Allinea orizzontalmente le linee da 1px */
}

.u-footer .u-list-1,
.u-footer .u-list-2 {
  display: flex !important;
  justify-content: center !important;
}

.u-footer .u-list-1 .u-repeater-1,
.u-footer .u-list-2 .u-repeater-2 {
  display: inline-flex !important;
  flex-direction: column !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

.u-footer .u-list-1 .u-repeater-item,
.u-footer .u-list-2 .u-repeater-item {
  width: fit-content !important;
  text-align: left !important;
  display: block !important;
}

.u-footer .u-text-4,
.u-footer .u-text-5,
.u-footer .u-text-6,
.u-footer .u-text-7,
.u-footer .u-text-8,
.u-footer .u-text-9 {
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: #555555 !important;
}

#footer.u-footer .u-text-10 {
  font-family: 'Cinzel', serif !important;
  color: #282828 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
}

#footer.u-footer .u-image-1 {
  filter: brightness(1) drop-shadow(0 0 6px rgba(0, 0, 0, 0.08)) !important;
}

/* Fix Allineamento Logo + Testo (Gruppo) */
#footer.u-footer .u-group-elements-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  /* Riduce la distanza visiva */
  width: auto !important;
  min-height: 0 !important;

  /* Traslazione per allineamento perfetto:
     X: sposta a sinistra per compensare il padding dell'icona */
  transform: translate(0px, -5px) !important;
}

#footer.u-footer .u-group-elements-1 .u-image-1,
#footer.u-footer .u-group-elements-1 .u-text-10 {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  align-self: center !important;
  display: block !important;
}

#footer.u-footer .u-group-elements-1 .u-image-1 {
  width: 70px !important;
  height: 70px !important;
  flex-shrink: 0;
}

#footer.u-footer .u-group-elements-1 .u-text-10 {
  line-height: 1.1 !important;
  margin-top: 6px !important;
  /* Compensazione ottica per il font Cinzel */
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

@keyframes subtleFloat {

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

  50% {
    transform: translateY(-6px);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    box-shadow: 0 0 20px var(--bp-accent-glow);
  }

  50% {
    box-shadow: 0 0 40px var(--bp-accent-glow);
  }
}

/* Scroll reveal classes (applied via JS) */
.bp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.bp-reveal.bp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
  .u-section-1 .u-text-1 {
    font-size: 2.8rem !important;
  }

  .u-section-1 {
    min-height: 70vh !important;
  }
}

@media (max-width: 991px) {
  .u-section-1 {
    min-height: 60vh !important;
    background-position-x: 40% !important;
  }

  .u-section-1 .u-image-1,
  .u-section-1 .u-image-2,
  .u-section-1 .u-image-3 {
    width: 24px !important;
    height: 24px !important;
  }

  .u-section-1 .u-text-1 {
    font-size: 2.2rem !important;
  }

  .u-section-1 .u-text-2 {
    font-size: 1.1rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 8px !important;
  }

  /* === COVERFLOW: contenitore === */
  .u-section-2 .u-sheet-1 {
    padding: 0 20px !important;
    overflow: visible !important;
  }

  .bp-tools__wrap {
    width: auto !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    overflow: visible !important;
  }

  /* I testi ora seguono il padding naturale del sheet (allineamento perfetto) */
  .u-section-2 .u-text-2 {
    margin-bottom: 32px !important;
  }

  /*
   * BOMB-PROOF SCROLL SNAP CAROUSEL
   * ─────────────────────────────────────────────────────────────────
   * Larghezza card: 72vw  →  card centrale visibile, ~14vw per lato
   * Padding inline pari al (100vw - card_w) / 2 = 14vw → centra lo snap
   * gap: 12px fisso tra card (non collassano mai)
   * scroll-snap-type: x mandatory + scroll-snap-stop: always
   *   → una card per swipe, nessun doppio-snap
   * overflow-x: scroll (NON hidden) perché il track deve essere scrollabile
   * ─────────────────────────────────────────────────────────────────
   */
  .bp-tools__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 24px 17vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    will-change: scroll-position !important;
    transform: translateZ(0);
    /* GPU acceleration */
    position: relative !important;
  }

  .bp-tools__row::-webkit-scrollbar {
    display: none !important;
  }

  /* Card più piccola: 72vw larghezza, proporzione originale mantenuta */
  .u-section-2 .bp-tools__card {
    --bp-cf-scale: 1;
    --bp-cf-opacity: 1;
    flex: 0 0 66vw !important;
    width: 66vw !important;
    min-width: 66vw !important;
    max-width: 66vw !important;
    aspect-ratio: 1410 / 2250 !important;
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    transform: translateZ(0) scale(var(--bp-cf-scale)) !important;
    opacity: var(--bp-cf-opacity) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 0.1s linear,
      opacity 0.1s linear !important;
    transform-origin: center center !important;
    border-radius: var(--bp-radius-lg) !important;
  }

  .bp-footer__container {
    grid-template-columns: 1fr 1fr;
  }

  .bp-footer__brand {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    padding: 20px 24px 40px !important;
    margin-left: 0 !important;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.8rem !important;
  }

  .u-section-1 .u-text-2 {
    font-size: 0.95rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 8px !important;
  }

  .u-section-2,
  .u-section-3 {
    padding: 60px 0 50px !important;
  }

  .u-section-2 .u-sheet-1,
  .u-section-3 .u-sheet-1 {
    padding: 0 20px !important;
  }

  .u-section-2 .u-text-2,
  .u-section-3 .u-text-2 {
    font-size: 1.05rem !important;
  }



  .bp-footer {
    padding: 60px 20px 30px;
  }

  .bp-footer__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bp-footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 20px;
  }

  .bp-footer__legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .u-section-1 {
    min-height: 50vh !important;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.5rem !important;
  }


}

/* ============================================
   PDF Flipbook Overlay
   ============================================ */
.bp-pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* Changed from flex */
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bp-pdf-overlay.is-open {
  display: flex;
  pointer-events: all;
  opacity: 1;
}

.bp-pdf-overlay__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bp-pdf-overlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10001;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.bp-pdf-overlay__close:hover {
  background: var(--bp-cta);
  transform: scale(1.1);
}

.bp-pdf-container {
  position: relative;
  z-index: 10000;
  width: 90vw;
  height: 90vh;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-pdf-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  z-index: 10005;
  display: none;
  letter-spacing: 2px;
}

.bp-pdf-overlay.is-loading .bp-pdf-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bp-pdf-overlay.is-loading #bp-flipbook {
  opacity: 0;
}

#bp-flipbook {
  transition: opacity 0.3s ease;
}

.flipbook-page {
  background-color: #fff;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.flipbook-page canvas {
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* Ensure the canvas fills the page size */
}

.bp-pdf-loader__spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--bp-accent);
  border-radius: 50%;
  animation: bp-spinner 0.8s linear infinite;
}

@keyframes bp-spinner {
  to {
    transform: rotate(360deg);
  }
}

.bp-pdf-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10010;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: var(--bp-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
  max-width: 400px;
  width: 90%;
}

.bp-pdf-overlay.has-error .bp-pdf-error {
  display: block;
}

.bp-pdf-overlay.has-error .bp-pdf-container {
  display: none;
}

.bp-pdf-error svg {
  margin-bottom: 20px;
  color: #ff5252;
}

.bp-pdf-error h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.bp-pdf-error p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 24px;
}

.bp-pdf-error__btn {
  background: var(--bp-accent);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.bp-pdf-error__btn:hover {
  background: var(--bp-accent-light);
  transform: translateY(-2px);
}

/* Rimuove il contorno di focus dai link (social, ecc.) */
a:focus,
a:active,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================
   MOBILE E-READER OVERLAY
   ============================================ */
.bp-mobile-reader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bp-bg-primary);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bp-mobile-reader.is-open {
  opacity: 1;
  visibility: visible;
}

.bp-mobile-reader__header {
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.bp-mobile-reader__header-btn {
  background: none;
  border: none;
  color: #333;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bp-mobile-reader__title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.bp-mobile-reader__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px 100px 20px;
  background: #f8f9fa;
}

.bp-mobile-reader__fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
}

.bp-mobile-reader__fab-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bp-accent);
  color: white;
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(224, 122, 95, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.bp-mobile-reader__fab-btn:active {
  transform: scale(0.95);
}

.bp-ereader-content {
  font-size: var(--ereader-font-size, 17px);
  line-height: 1.6;
  color: #1a1a1a;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.bp-ereader-content h1 {
  font-size: 2.2em;
  margin-bottom: 0.2em;
  color: var(--bp-petrol);
  font-family: 'Libre Baskerville', serif;
}

.bp-ereader-content h2 {
  font-size: 1.4em;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  border-bottom: 1px solid #d1d1d1;
  padding-bottom: 6px;
  font-weight: 700;
  color: #333;
}

.bp-ereader-content p {
  margin-bottom: 1.2em;
}

.bp-ereader-content ul {
  padding-left: 20px;
  margin-bottom: 1.2em;
}

.bp-ereader-content li {
  margin-bottom: 0.5em;
}

.bp-ereader-content .eb-box {
  background: #ffffff;
  padding: 16px;
  border-left: 4px solid var(--bp-accent);
  margin-bottom: 1.2em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bp-ereader-content .eb-box h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--bp-petrol);
  font-size: 1.1em;
}

.bp-ereader-content strong {
  font-weight: 700;
  color: #000;
}

.bp-ereader-content em {
  color: #555;
  font-style: italic;
}

.bp-mobile-reader__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10001;
}

.bp-mobile-reader__loader.is-hidden {
  display: none;
}

.bp-mobile-reader__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--bp-accent);
  border-radius: 50%;
  animation: readerSpin 1s linear infinite;
}

@keyframes readerSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   NEW MOBILE FOOTER & APP BANNER
   ============================================ */
.bp-mobile-only-footer {
  display: none;
}

@media (max-width: 991px) {

  /* Nascondi tutte le scrollbar su mobile mantenendo lo scroll funzionante */
  * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  ::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }


  /* Nascondi footer desktop e card App su misura desktop */
  #footer,
  #bp-sc-add {
    display: none !important;
  }

  .bp-mobile-only-footer {
    display: block;
    width: 100%;
    background: #E8E8E8;
  }

  /* Banner App su Misura */
  .bp-mobile-banner-app {
    padding: 0;
    display: block;
    width: 100%;
    /* Transizione fluida dal body al footer */
    background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 100%);
  }

  .bp-mobile-banner-app__content {
    background: linear-gradient(135deg, #181818 0%, #003040 100%);
    border-radius: 0;
    padding: 36px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--bp-shadow-lg);
    width: 100%;
    max-width: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .bp-mobile-banner-app__content::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--bp-accent);
    filter: blur(70px);
    opacity: 0.35;
    pointer-events: none;
  }

  .bp-mobile-banner-app__badge {
    display: inline-block;
    background: rgba(224, 122, 95, 0.15);
    color: var(--bp-cta);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(224, 122, 95, 0.3);
  }

  .bp-mobile-banner-app h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .bp-mobile-banner-app p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 24px 0;
    line-height: 1.6;
  }

  .bp-mobile-banner-app button {
    background: var(--bp-cta);
    color: #fff;
    border: none;
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bp-radius-md);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(224, 122, 95, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bp-mobile-banner-app button:active {
    transform: scale(0.97);
    background: var(--bp-cta-hover);
    box-shadow: 0 4px 12px rgba(224, 122, 95, 0.25);
  }

  /* Nuovo Footer Mobile - Premium Minimalist V5 (Compact) */
  .bp-mobile-footer-new {
    background: #E8E8E8;
    padding: 20px 20px 6px;
    font-family: 'Inter', sans-serif;
    color: var(--bp-text-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .bp-mobile-footer-branding {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .bp-footer-logo-glow {
    width: 22px;
    height: auto;
    animation: bp-footer-glow 3s ease-in-out infinite;
  }

  .bp-footer-name-glow {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--bp-text-primary);
    animation: bp-footer-glow 3s ease-in-out infinite;
    white-space: nowrap;
  }

  @keyframes bp-footer-glow {

    0%,
    100% {
      filter: drop-shadow(0 0 1px rgba(0, 137, 123, 0.1));
      text-shadow: 0 0 1px rgba(0, 137, 123, 0.05);
      opacity: 0.85;
    }

    50% {
      filter: drop-shadow(0 0 4px var(--bp-accent));
      text-shadow: 0 0 3px var(--bp-accent-glow);
      opacity: 1;
    }
  }

  .bp-mobile-footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 0;
  }

  .bp-mobile-footer-links a {
    font-size: 0.52rem;
    color: var(--bp-petrol);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bp-mobile-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    text-align: left;
  }

  .bp-mobile-footer-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }



  .bp-info-label {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bp-accent);
    margin-bottom: 1px;
  }

  .bp-mobile-footer-col p,
  .bp-mobile-footer-col a {
    font-size: 0.62rem;
    color: var(--bp-text-secondary);
    margin: 0;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;
  }

  .bp-mobile-footer-col a {
    color: var(--bp-petrol);
    font-weight: 600;
  }

  .bp-mobile-footer-col strong {
    color: var(--bp-text-primary);
    font-weight: 700;
  }

  .bp-mobile-footer-bottom {
    padding-top: 2px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 1;
  }

  .bp-mobile-copyright {
    font-size: 10px;
    display: inline-block;
    transform: scale(0.7);
    transform-origin: center;
    color: var(--bp-text-muted);
    margin: 0;
    margin-top: -6px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Pill Cycle Banner Styles */
  .bp-pill-cycle {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    width: 100%;
  }

  .bp-pill {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(224, 122, 95, 0.15);
    color: var(--bp-cta);
    padding: 8px 16px;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(224, 122, 95, 0.3);
    position: absolute;
    white-space: nowrap;
  }

  .bp-pill.active {
    display: flex;
    animation: bp-pill-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }

  @keyframes bp-pill-pop {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
}