/* System-i srl – Stili condivisi SEO-ottimizzati */
:root {
  --primary: #1a9fd8;
  --primary-dark: #1480b0;
  --secondary: #2c3e50;
  --accent: #e74c3c;
  --light-bg: #f8f9fa;
  --text-muted-custom: #6c757d;
}
body { font-family: 'Roboto', sans-serif; color: #333; }

/* Topbar */
.topbar { background: var(--secondary); color: #fff; font-size: .85rem; padding: .4rem 0; }
.topbar a { color: #cfd8dc; text-decoration: none; }
.topbar a:hover { color: #fff; }
.social-topbar a { color: #adb5bd; margin-left: .8rem; font-size: .95rem; }
.social-topbar a:hover { color: #fff; }

/* Navbar */
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.navbar-light .navbar-nav .nav-link { font-weight: 500; color: var(--secondary); padding: .5rem 1rem; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--primary); }

/* Buttons */
.btn-primary-custom { background: var(--primary); border: none; color: #fff; padding: .75rem 2rem; border-radius: 50px; font-weight: 500; font-size: 1rem; text-decoration: none; transition: all .3s; display: inline-block; }
.btn-primary-custom:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,159,216,.35); }
.btn-outline-custom { border: 2px solid rgba(255,255,255,.7); color: #fff; padding: .75rem 2rem; border-radius: 50px; font-weight: 500; font-size: 1rem; text-decoration: none; transition: all .3s; display: inline-block; }
.btn-outline-custom:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 60%, var(--primary) 100%); color: #fff; padding: 80px 0 70px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: rgba(255,255,255,.05); border-radius: 50%; }
.hero h1 { font-size: 2.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem; }
.hero .lead { font-size: 1.15rem; font-weight: 300; margin-bottom: 2rem; opacity: .92; }
.hero .badge-price { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 1rem; font-weight: 300; border-radius: 50px; padding: .45rem 1.1rem; display: inline-block; }

/* Breadcrumb hero */
.hero-breadcrumb .breadcrumb-item, .hero-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.7); font-size: .88rem; text-decoration: none; }
.hero-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.95); }
.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* Pricing */
.pricing-card { background: #fff; border-radius: 14px; border: 2px solid #e9ecef; padding: 2rem; text-align: center; transition: all .3s; position: relative; }
.pricing-card:hover { border-color: var(--primary); box-shadow: 0 10px 30px rgba(26,159,216,.15); transform: translateY(-4px); }
.pricing-card.featured { border-color: var(--primary); box-shadow: 0 12px 40px rgba(26,159,216,.2); }
.pricing-card .badge-featured { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem 1rem; border-radius: 50px; white-space: nowrap; }
.pricing-card .plan-name { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--secondary); margin-bottom: .8rem; }
.pricing-card .price { font-size: 2.4rem; font-weight: 300; color: var(--primary); line-height: 1; }
.pricing-card .price span { font-size: 1rem; }
.pricing-card ul { list-style: none; padding: 0; text-align: left; font-size: .9rem; }
.pricing-card ul li { padding: .4rem 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: .5rem; }
.pricing-card ul li:last-child { border-bottom: none; }
.pricing-card ul li .fa-check { color: #27ae60; }
.pricing-card ul li .fa-lock { color: #bdc3c7; }
.pricing-card ul li.disabled { color: #bdc3c7; text-decoration: line-through; }

/* Features */
.feature-item { display: flex; gap: 1rem; margin-bottom: 1.8rem; }
.feature-item .icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.feature-item .icon i { color: #fff; font-size: 1.2rem; }
.feature-item h4 { font-size: 1rem; font-weight: 600; color: var(--secondary); margin: 0 0 .3rem; }
.feature-item p { font-size: .9rem; color: var(--text-muted-custom); margin: 0; }

/* Cards generici */
.service-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 2rem; transition: all .3s; border-top: 4px solid transparent; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); border-top-color: var(--primary); }

/* Stats */
.stats-section { background: var(--secondary); color: #fff; padding: 60px 0; }
.stat-item h3 { font-size: 2.6rem; font-weight: 700; color: var(--primary); margin: 0; }
.stat-item p { font-size: .95rem; margin: 0; opacity: .8; }

/* CTA section */
.cta-section { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; padding: 70px 0; text-align: center; }

/* Section titles */
.section-title { font-size: 2rem; font-weight: 700; color: var(--secondary); }
.section-subtitle { color: var(--text-muted-custom); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* FAQ accordion */
.accordion-button:not(.collapsed) { color: var(--primary); background: rgba(26,159,216,.05); }
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(26,159,216,.25); }

/* Footer */
footer { background: var(--secondary); color: #cfd8dc; padding: 60px 0 20px; }
footer h5 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1rem; }
footer a { color: #adb5bd; text-decoration: none; font-size: .9rem; }
footer a:hover { color: #fff; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: .4rem; }
footer ul li a::before { content: '›'; margin-right: .4rem; color: var(--primary); }
.footer-divider { border-color: rgba(255,255,255,.1); }
.copyright { font-size: .82rem; opacity: .6; }

/* Responsive */
@media (max-width: 768px) {
  .hero h1 { font-size: 1.8rem; }
  .hero { padding: 60px 0 50px; }
  .pricing-card { margin-bottom: 1rem; }
}