:root{
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --text-2: #94a3b8;
  --accent: #22d3ee;
  --success: #10b981;
}

html, body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  background: var(--bg);
  color: var(--text);
}

.backdrop-blur{ backdrop-filter: saturate(120%) blur(8px); }

.text-accent{ color: var(--accent) !important; }
.btn-accent{
  --bs-btn-color: #0b1220;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #1bc8e4;
  --bs-btn-hover-border-color: #1bc8e4;
}

.shadow-glass{ box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.bg-card{ background: var(--card); }
.app-card{ border: 0; border-radius: 1.25rem; box-shadow: 0 10px 25px rgba(0,0,0,.06); }
.feature-card{ background: var(--card); border: 1px solid rgba(255,255,255,.04); border-radius: .75rem; }
.step-card{ background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: .75rem; }
.price-card{ background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; }
.price-ribbon{ position:absolute; right:1rem; top:-.75rem; background: var(--success); color:#05240f; padding:.25rem .5rem; border-radius:.5rem; font-weight:700; }

/* Cookie banner GDPR */
.cookie-banner{ 
  position: fixed; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(17,24,39,.95); 
  padding: 1rem 0; 
  z-index: 1060; 
  border-top: 1px solid rgba(34,211,238,.2); 
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.cookie-banner .btn{
  min-width: 120px;
  font-weight: 500;
}
.cookie-banner .btn-outline-light:hover{
  background-color: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
}


/* Focus outlines for accessibility */
a, button, [role="button"], .btn, .nav-link{ outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Typography helpers */
.text-secondary{ color: var(--text-2) !important; }

/* Smooth scroll padding for fixed navbar */
:target{ scroll-margin-top: 80px; }

/* Hero */
#hero .btn{ transform: translateZ(0); }
#hero .btn.btn-accent{ animation: pulse 2.4s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(34,211,238,.45);} 50%{ box-shadow: 0 0 0 12px rgba(34,211,238,0);} }

/* Cards hover */
.feature-card:hover, .step-card:hover, .price-card:hover{ transform: translateY(-2px); transition: transform .2s ease; }

/* Forms */
input, textarea{ background: #0b1220 !important; color: var(--text) !important; border-color: rgba(255,255,255,.08) !important; }
input::placeholder, textarea::placeholder{ color: #6b7280; }

/* Payment logos */
.payment-logos img{ 
  filter: grayscale(0.2) brightness(1.1); 
  transition: filter 0.2s ease, transform 0.2s ease; 
  border-radius: 4px;
}
.payment-logos img:hover{ 
  filter: grayscale(0) brightness(1.2); 
  transform: scale(1.05); 
}

/* Promotional banner */
.alert-accent{
  background: linear-gradient(135deg, rgba(34,211,238,0.1) 0%, rgba(16,185,129,0.1) 100%);
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(34,211,238,0.15);
}
.bg-success-subtle{ background-color: rgba(16,185,129,0.15) !important; }
.text-success{ color: #10b981 !important; }
.bg-danger-subtle{ background-color: rgba(220,53,69,0.15) !important; }
.text-danger{ color: #dc3545 !important; }
.bg-warning-subtle{ background-color: rgba(255,193,7,0.15) !important; }
.text-warning{ color: #ffc107 !important; }

/* Master Password highlight */
.border-accent{ border: 2px solid var(--accent) !important; }
.feature-card.border-accent{ box-shadow: 0 0 20px rgba(34,211,238,0.3); }
.step-card.border-accent{ box-shadow: 0 0 20px rgba(34,211,238,0.3); }

/* Price highlighting */
.price-comparison{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 1rem; 
  flex-wrap: wrap; 
}
.price-original{ 
  text-decoration: line-through; 
  opacity: 0.6; 
  color: #dc3545 !important; 
}
.price-current{ 
  font-size: 2.5rem; 
  font-weight: 700; 
  color: #10b981 !important; 
}
.price-savings{ 
  color: #ffc107 !important; 
  font-weight: 600; 
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Prevenire overflow orizzontale */
  html, body { 
    overflow-x: hidden; 
    max-width: 100%; 
  }
  
  .container { 
    max-width: 100%; 
    padding-left: 0.75rem; 
    padding-right: 0.75rem; 
  }
  
  /* Badge nella hero section */
  .d-flex.gap-2 { 
    flex-wrap: wrap; 
    gap: 0.5rem !important; 
  }
  
  .badge { 
    font-size: 0.75rem; 
    padding: 0.375rem 0.75rem; 
    white-space: nowrap; 
    max-width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
  }
  
  /* Titoli responsive */
  .display-5 { 
    font-size: 1.75rem; 
    line-height: 1.2; 
  }
  
  .lead { 
    font-size: 1rem; 
    line-height: 1.5; 
  }
  
  /* Banner promozionale */
  .alert-accent .d-flex { 
    flex-direction: column; 
    gap: 1rem !important; 
  }
  
  .alert-accent .d-flex > div { 
    width: 100%; 
  }
  
  .alert-accent .badge { 
    font-size: 0.8rem; 
    padding: 0.5rem 1rem; 
    white-space: normal; 
    text-align: center; 
    max-width: 100%; 
  }
  
  /* Pulsanti responsive */
  .btn-lg { 
    font-size: 1rem; 
    padding: 0.75rem 1.5rem; 
  }
  
  .d-flex.flex-wrap.gap-2 { 
    flex-direction: column; 
    align-items: stretch; 
  }
  
  .d-flex.flex-wrap.gap-2 .btn { 
    width: 100%; 
    margin-bottom: 0.5rem; 
  }
  
  /* Footer responsive */
  footer .d-flex { 
    flex-direction: column; 
    gap: 0.5rem; 
    align-items: flex-start !important; 
  }
  
  /* Card responsive */
  .card-body { 
    padding: 1rem; 
  }
  
  /* Card informazioni footer mobile */
  #contact .app-card { 
    margin-bottom: 1rem; 
  }
  
  #contact .card-body { 
    padding: 1.25rem; 
  }
  
  /* Card sviluppatore mobile */
  #contact .col-md-6:first-child .card-body { 
    padding: 1.5rem 1rem; 
  }
  
  #contact .bg-primary.rounded-circle { 
    width: 60px !important; 
    height: 60px !important; 
    margin: 0 auto 1rem auto; 
  }
  
  #contact .bg-primary.rounded-circle i { 
    font-size: 1.5rem !important; 
  }
  
  /* Card contatti mobile - più compatta */
  #contact .col-md-6:last-child .card-body { 
    padding: 1rem; 
  }
  
  /* Spazio tra le card contatti mobile */
  #contact .row.g-3 { 
    gap: 0.5rem !important; 
  }
  
  #contact .row.g-3 .col-12 { 
    margin-bottom: 0.25rem; 
  }
  
  #contact .card-title { 
    font-size: 1rem; 
    margin-bottom: 1rem !important; 
  }
  
  /* Contatti individuali mobile - più compatti */
  #contact .d-flex.align-items-center { 
    flex-direction: row; 
    align-items: center !important; 
    gap: 0.75rem; 
    padding: 0.75rem !important; 
    margin-bottom: 0.5rem; 
  }
  
  #contact .bg-primary.rounded-circle,
  #contact .bg-success.rounded-circle { 
    width: 35px !important; 
    height: 35px !important; 
    flex-shrink: 0; 
    margin: 0; 
  }
  
  #contact .bg-primary.rounded-circle i,
  #contact .bg-success.rounded-circle i { 
    font-size: 0.9rem !important; 
  }
  
  /* Testo contatti mobile - più compatto */
  #contact .flex-grow-1 { 
    width: 100%; 
    text-align: left; 
    min-width: 0; 
  }
  
  #contact .small.text-secondary { 
    font-size: 0.7rem; 
    margin-bottom: 0.125rem; 
    line-height: 1.2; 
  }
  
  #contact a[href^="mailto:"],
  #contact a[href^="https://wa.me/"] { 
    font-size: 0.8rem; 
    word-break: break-all; 
    line-height: 1.2; 
    display: block; 
    font-weight: 500; 
  }
  
  /* Pulsante WhatsApp mobile - più compatto e visibile */
  #contact .btn-success { 
    width: 100%; 
    font-size: 0.9rem; 
    padding: 0.75rem 1.5rem; 
    margin-top: 1rem; 
    font-weight: 600; 
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); 
    border: none; 
    transition: all 0.3s ease; 
  }
  
  #contact .btn-success:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.4); 
  }
  
  /* Alert licenza mobile */
  #contact .alert-warning { 
    font-size: 0.8rem; 
    padding: 0.75rem; 
    margin-top: 1rem; 
  }
  
  /* Testo lungo */
  .text-break { 
    word-break: break-word; 
    overflow-wrap: break-word; 
  }
  
  /* Loghi di pagamento */
  .payment-logos { 
    flex-direction: column; 
    gap: 1rem !important; 
  }
  
  .payment-logos .d-flex { 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
  }
  
  .payment-logos img { 
    max-width: 50px; 
    height: auto; 
  }
  
  /* Immagini responsive */
  .img-fluid { 
    max-width: 100%; 
    height: auto; 
  }
  
  /* Prevenire overflow in tutti gli elementi */
  * { 
    box-sizing: border-box; 
  }
  
  .row { 
    margin-left: 0; 
    margin-right: 0; 
  }
  
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto,
  .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto,
  .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto,
  .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto { 
    padding-left: 0.375rem; 
    padding-right: 0.375rem; 
  }
  
  /* Testo che non deve andare a capo */
  .text-nowrap { 
    white-space: normal !important; 
    word-break: break-word; 
  }
  
  /* Elementi con larghezza fissa */
  .w-100 { 
    max-width: 100%; 
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 991px) {
  .container { 
    max-width: 100%; 
    padding-left: 1rem; 
    padding-right: 1rem; 
  }
  
  .d-flex.gap-2 { 
    flex-wrap: wrap; 
  }
  
  .badge { 
    font-size: 0.8rem; 
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
  }
  
  /* Banner promozionale tablet */
  .alert-accent .d-flex { 
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 1rem !important; 
  }
  
  .alert-accent .d-flex > div { 
    flex: 1; 
    min-width: 120px; 
  }
  
  /* Loghi di pagamento tablet */
  .payment-logos { 
    flex-direction: row; 
    justify-content: center; 
  }
  
  .payment-logos .d-flex { 
    gap: 0.75rem; 
  }
  
  .payment-logos img { 
    max-width: 60px; 
  }
  
  /* Card informazioni footer tablet */
  #contact .app-card { 
    margin-bottom: 1.5rem; 
  }
  
  #contact .card-body { 
    padding: 1.5rem; 
  }
  
  #contact .bg-primary.rounded-circle { 
    width: 70px !important; 
    height: 70px !important; 
  }
  
  #contact .bg-primary.rounded-circle i { 
    font-size: 1.75rem !important; 
  }
  
  #contact .d-flex.align-items-center { 
    flex-direction: row; 
    align-items: center !important; 
    gap: 1rem; 
  }
  
  #contact .bg-primary.rounded-circle,
  #contact .bg-success.rounded-circle { 
    width: 50px !important; 
    height: 50px !important; 
  }
  
  #contact .bg-primary.rounded-circle i,
  #contact .bg-success.rounded-circle i { 
    font-size: 1.25rem !important; 
  }
  
  #contact a[href^="mailto:"],
  #contact a[href^="https://wa.me/"] { 
    font-size: 0.9rem; 
    word-break: break-all; 
  }
  
  #contact .btn-success { 
    width: auto; 
    min-width: 220px; 
    font-weight: 600; 
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); 
    border: none; 
    transition: all 0.3s ease; 
    padding: 0.75rem 1.5rem; 
  }
  
  #contact .btn-success:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.4); 
  }
}

/* Pulsante WhatsApp generale - sempre visibile e centrato */
#contact .btn-success { 
  font-weight: 600; 
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); 
  border: none; 
  transition: all 0.3s ease; 
  text-decoration: none; 
}

#contact .btn-success:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 16px rgba(25, 135, 84, 0.4); 
  text-decoration: none; 
}

#contact .btn-success:focus { 
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); 
}

/* Centratura del contenitore del pulsante */
#contact .text-center { 
  margin-top: 1.5rem; 
}

/* Language Switcher Styles */
.language-btn {
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.3s ease;
}

.language-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.language-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.language-btn img {
  border-radius: 2px;
  object-fit: cover;
}

/* Language switcher mobile */
@media (max-width: 768px) {
  .language-btn {
    padding: 0.25rem 0.375rem;
  }
  
  .language-btn img {
    width: 16px !important;
    height: 12px !important;
  }
}

/* Light theme overrides (when data-bs-theme="light") */
html[data-bs-theme='light'] body{ background:#f8fafc; color:#0b1220; }
html[data-bs-theme='light'] .text-secondary{ color:#475569 !important; }
html[data-bs-theme='light'] .bg-card, html[data-bs-theme='light'] .feature-card, html[data-bs-theme='light'] .step-card, html[data-bs-theme='light'] .price-card{ background:#ffffff; border-color: rgba(0,0,0,.06); }
html[data-bs-theme='light'] .cookie-banner{ background: rgba(248,250,252,.95); }