/*
Theme Name: SA Theme
Theme URI: https://sistemiaperti.com
Author: Anthilla System
Author URI: https://anthilla.com
Description: Custom theme for Sistemi Aperti - IT Solutions, Software, Hardware & Consulting. Dark theme with purple/blue gradients, Inter typography, Bootstrap 5 grid.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sa-theme
*/

/* ===================================================================
   CSS VARIABLES & DESIGN TOKENS
   =================================================================== */
:root {
  --ff-inter: 'Inter', sans-serif;
  --ff-inter-tight: 'Inter Tight', sans-serif;
  --primary-black: #02021A;
  --primary-black-two: #070B17;
  --primary-black-three: #0A0E19;
  --primary-green: #1D9E43;
  --primary-purple: #6E45E9;
  --color-light-black: #0E0F23;
  --color-light-black-two: #1B1D2B;
  --color-white: #FFF;
  --color-light-white: rgba(255, 255, 255, 0.70);
  --color-blue: #4229FF;
  --color-deep-blue: #00001D;
  --color-text-heading: #031811;
  --color-text-body: rgba(3, 24, 17, 0.70);
  --container-max: 1320px;
  --header-height: 80px;
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-inter);
  font-size: 16px;
  line-height: 2;
  color: var(--color-light-white);
  background-color: var(--primary-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all .3s ease; }
a:hover { color: var(--primary-green); }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-inter-tight);
  color: var(--color-white);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

/* ===================================================================
   SCROLLBAR
   =================================================================== */
::-webkit-scrollbar { width: 0.3em; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: darkgrey; outline: 1px solid slategrey; border-radius: 10px; }

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col { padding: 0 15px; }

/* Grid columns */
.col-12 { width: 100%; padding: 0 15px; }
.col-lg-3 { padding: 0 15px; }
.col-lg-4 { padding: 0 15px; }
.col-lg-5 { padding: 0 15px; }
.col-lg-6 { padding: 0 15px; }
.col-lg-7 { padding: 0 15px; }
.col-lg-8 { padding: 0 15px; }
.col-lg-10 { padding: 0 15px; }
.col-md-4 { padding: 0 15px; }
.col-md-6 { padding: 0 15px; }
.col-xl-4 { padding: 0 15px; }
.col-xl-7 { padding: 0 15px; }

@media (min-width: 768px) {
  .col-md-4 { width: 33.333%; }
  .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333%; }
  .col-lg-5 { width: 41.666%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.333%; }
  .col-lg-8 { width: 66.666%; }
  .col-lg-10 { width: 83.333%; }
}
@media (min-width: 1200px) {
  .col-xl-4 { width: 33.333%; }
  .col-xl-7 { width: 58.333%; }
}

/* Flex utilities */
.d-flex { display: flex; }
.d-none { display: none; }
.d-block { display: block; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-100 { width: 100%; }

/* Spacing */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 48px; }
.pt-3 { padding-top: 16px; }
.pt-4 { padding-top: 24px; }
.pb-3 { padding-bottom: 16px; }
.pb-4 { padding-bottom: 24px; }
.px-3 { padding-left: 16px; padding-right: 16px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.p-4 { padding: 24px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Section spacing */
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }
.mt-120 { margin-top: 120px; }
.mb-120 { margin-bottom: 120px; }
.mt-60 { margin-top: 60px; }
.mb-60 { margin-bottom: 60px; }
.mt-24 { margin-top: 24px; }
.mt-36 { margin-top: 36px; }

@media (max-width: 991.98px) {
  .pt-120 { padding-top: 60px; }
  .pb-120 { padding-bottom: 60px; }
  .mt-120 { margin-top: 60px; }
  .mb-120 { margin-bottom: 60px; }
}

/* Display responsive */
@media (max-width: 991.98px) {
  .d-lg-none { display: none !important; }
}
@media (min-width: 992px) {
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-none-up { display: none !important; }
}

/* Colors */
.text-white, .text_color_white { color: var(--color-white) !important; }
.text_color_light_white { color: var(--color-light-white) !important; }
.bg_color_black { background-color: var(--primary-black); }
.bg_color_black_two { background-color: var(--primary-black-two); }
.bg_color_black_three { background-color: var(--primary-black-three); }
.bg_color_deep_blue { background-color: var(--color-deep-blue); }
.bg_color_light_black { background-color: var(--color-light-black); }

/* Typography */
.h2 { font-size: 24px; font-weight: 500; line-height: 1.6; }
.h3 { font-size: 20px; font-weight: 500; }
.text-p-18 { font-size: 18px; }
.max-width-728 { max-width: 728px; }
.max-width-500 { max-width: 500px; }

@media (max-width: 991.98px) {
  .h2 { font-size: 22px; }
  .h3 { font-size: 18px; }
  .text-p-18 { font-size: 16px; }
}
@media (max-width: 767.98px) {
  .h2 { font-size: 20px; }
}

/* ===================================================================
   PRELOADER
   =================================================================== */
.preloader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 99999; background: var(--color-deep-blue);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
.preloader.hidden { opacity: 0; pointer-events: none; }
.preloader .spinner {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid #040404; border-top: 3px solid var(--primary-green);
  animation: spin 2s infinite linear;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===================================================================
   CUSTOM CURSOR
   =================================================================== */
.cursor {
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; pointer-events: none; z-index: 99999;
  mix-blend-mode: exclusion;
  transition: transform .3s ease, opacity .4s ease;
}
.cursor.cursor-active { transform: scale(2); }

/* ===================================================================
   BACK TO TOP
   =================================================================== */
.back-to-top-btn {
  position: fixed; bottom: 40px; right: 30px; z-index: 999;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; display: none; align-items: center; justify-content: center;
  mix-blend-mode: exclusion; cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transition: all .3s ease;
}
.back-to-top-btn.show { display: flex; }
.back-to-top-btn:hover { transform: translateY(-3px); }
.back-to-top-btn i { color: #000; font-size: 16px; }

/* ===================================================================
   HEADER
   =================================================================== */
.header-top {
  background: rgba(0,0,0,0.3); padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 1001;
}
.header-top .container {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.header-top-left { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-light-white); }
.header-top-left svg { flex-shrink: 0; }
.header-top-right { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.header-top-right a { color: var(--color-light-white); }
.header-top-right a:hover { color: var(--color-white); }

.menu-area {
  padding: 12px 0; position: relative; z-index: 1000;
  transition: all .35s ease;
}
.menu-area .container { display: flex; justify-content: space-between; align-items: center; }
.menu-area.sticky {
  position: fixed; top: 0; left: 0; width: 100%;
  background-color: #0c0c0c; z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  animation: slide_down_site .35s ease-out;
  padding: 8px 0;
}
@keyframes slide_down_site {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.site-logo img { max-width: 180px; height: auto; }
@media (max-width: 767.98px) {
  .site-logo img { max-width: 140px; }
}

/* Navigation */
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav ul { display: flex; list-style: none; gap: 28px; margin: 0; padding: 0; }
.main-nav a {
  font-family: var(--ff-inter-tight); font-size: 15px; font-weight: 500;
  color: var(--color-white); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 8px 0; position: relative;
}
.main-nav a:hover, .main-nav a.active { color: var(--primary-green); }
.main-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--primary-green);
  transition: width .3s ease;
}
.main-nav a:hover::after { width: 100%; }

.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 30px; font-size: 14px; font-weight: 500;
  background: var(--primary-green); color: var(--color-white);
  transition: all .3s ease; white-space: nowrap;
}
.header-cta:hover { background: hsl(138, 69%, 30%); color: var(--color-white); transform: translateY(-2px); }
.header-cta img { height: 20px; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px;
}
.mobile-menu-toggle span {
  display: block; width: 24px; height: 2px; background: #fff;
  margin: 5px 0; transition: all .3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 991.98px) {
  .main-nav { display: none; }
  .header-cta-desktop { display: none; }
  .mobile-menu-toggle { display: block; }
  .main-nav.mobile-open {
    display: flex; flex-direction: column; position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(2,2,26,0.98); z-index: 9999;
    justify-content: center; align-items: center;
    padding: 40px 20px;
  }
  .main-nav.mobile-open ul {
    flex-direction: column; align-items: center; gap: 20px;
  }
  .main-nav.mobile-open a { font-size: 22px; }
  .main-nav.mobile-open .mobile-close {
    position: absolute; top: 20px; right: 20px;
    font-size: 32px; color: #fff; cursor: pointer;
    background: none; border: none;
  }
}

/* ===================================================================
   HERO SECTION
   =================================================================== */
.hero-section {
  position: relative; overflow: hidden;
  padding: 100px 0 80px;
  background: linear-gradient(to bottom, #4828b7 0%, #5a2a99 35%, #1e0a40 60%, #02021A 80%, #02021A 100%);
}
.hero-section::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,70,255,0.7) 0%, transparent 70%);
  filter: blur(80px); pointer-events: none;
}
.hero-section::after {
  content: ''; position: absolute; top: -10%; left: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(40,80,255,0.6) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.hero-section .container { position: relative; z-index: 2; }
.hero-content { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero-text-col { flex: 1; min-width: 300px; }
.hero-img-col { flex: 1; min-width: 300px; display: flex; justify-content: center; }
.hero-img-col img { max-width: 100%; height: auto; }

.hero-section h1 {
  font-size: clamp(32px, 4vw, 56px); font-weight: 700;
  line-height: 1.15; margin-bottom: 24px; color: var(--color-white);
}
.hero-section .hero-desc {
  font-size: 18px; line-height: 1.8; color: var(--color-light-white);
  margin-bottom: 32px; max-width: 520px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Partners slider */
.partners-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.partners-slider-container { overflow: hidden; position: relative; }
.partners-slider-container::before,
.partners-slider-container::after {
  content: ''; position: absolute; top: 0; width: 80px; height: 100%;
  z-index: 2; pointer-events: none;
}
.partners-slider-container::before { left: 0; background: linear-gradient(to right, var(--primary-black), transparent); }
.partners-slider-container::after { right: 0; background: linear-gradient(to left, var(--primary-black), transparent); }
.partners-track {
  display: flex; align-items: center; gap: 50px;
  animation: scrollPartners 30s linear infinite;
  width: max-content;
}
.partners-slider-container:hover .partners-track { animation-play-state: paused; }
.partner-logo {
  flex-shrink: 0; max-height: 70px; max-width: 150px;
  filter: brightness(90%) contrast(110%) saturate(80%);
  transition: all .3s ease; opacity: 0.7;
}
.partner-logo:hover { filter: brightness(120%) hue-rotate(45deg); opacity: 1; transform: scale(1.1); }
@keyframes scrollPartners {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.common-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 25px; border-radius: 32px;
  font-family: var(--ff-inter-tight); font-size: 16px; font-weight: 500;
  letter-spacing: 0.32px; cursor: pointer;
  transition: all .4s linear; border: none; text-decoration: none;
}
.common-btn.bg-white-style {
  background: #fff; color: var(--primary-black);
}
.common-btn.bg-white-style:hover { background: hsl(0, 0%, 95%); color: var(--primary-black); }
.common-btn.border-style {
  border: 1px solid rgba(255,255,255,0.32);
  background: var(--color-light-black); color: var(--color-white);
}
.common-btn.border-style:hover {
  background: linear-gradient(rgba(117,172,255,0) 0%, rgba(255,255,255,0.12) 100%);
  border-color: rgba(255,255,255,0.5); color: var(--color-white);
}
.common-btn.bg-green-style { background: var(--primary-green); color: #fff; }
.common-btn.bg-green-style:hover { background: hsl(138, 69%, 30%); color: #fff; }
.common-btn.border-style-transparent {
  border: 1px solid #fff; background: transparent; color: #fff;
}
.common-btn.border-style-transparent:hover { background: rgba(255,255,255,0.1); color: #fff; }

.border-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.25); background: transparent;
  color: var(--color-white); font-size: 14px; font-weight: 500;
  transition: all .3s ease; cursor: pointer; text-decoration: none;
}
.border-btn:hover { border-color: var(--primary-green); color: var(--primary-green); }
.border-btn svg { transition: transform .3s ease; }
.border-btn:hover svg { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .common-btn { font-size: 14px; padding: 11px 20px; }
}

/* ===================================================================
   SECTION TITLES
   =================================================================== */
.section-title { margin-bottom: 48px; }
.section-title .sub-title {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--primary-green); margin-bottom: 12px;
}
.section-title .title {
  font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--color-white);
}
.section-title .desc {
  font-size: 18px; line-height: 1.7; color: var(--color-light-white);
  margin-top: 16px; max-width: 680px;
}

@media (max-width: 991.98px) {
  .section-title .title { font-size: 32px; }
}
@media (max-width: 767.98px) {
  .section-title .title { font-size: 26px; }
  .section-title .desc { font-size: 16px; }
}

/* ===================================================================
   SOFTWARE SECTION - SERVICE CARDS
   =================================================================== */
.service-card {
  background: #0C0D25; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 30px; min-height: 280px;
  display: flex; flex-direction: column; transition: all .3s ease;
  margin-bottom: 30px;
}
.service-card:hover {
  border-color: rgba(66,41,255,0.4);
  box-shadow: 0 0 30px rgba(66,41,255,0.15);
  transform: translateY(-4px);
}
.service-card .icon-wrap {
  width: 48px; height: 48px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
.service-card .icon-wrap svg { width: 32px; height: 32px; }
.service-card h3 {
  font-size: 20px; font-weight: 500; margin-bottom: 12px; color: var(--color-white);
}
.service-card p {
  font-size: 15px; line-height: 1.7; color: var(--color-light-white); flex: 1;
}

/* ===================================================================
   HARDWARE SECTION
   =================================================================== */
.hardware-section { scroll-margin-top: 80px; }
.hardware-section .container { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
.hardware-img-col { flex: 1; min-width: 280px; position: relative; }
.hardware-img-col img { max-width: 100%; }
.hardware-text-col { flex: 1; min-width: 300px; }

.custom-ul li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px; font-size: 16px; line-height: 1.7;
  color: var(--color-light-white);
}
.custom-ul li svg { flex-shrink: 0; margin-top: 4px; }
.custom-ul li strong { color: var(--color-white); }

@media (max-width: 991.98px) {
  .hardware-section .container { flex-direction: column; }
  .hardware-img-col { order: 2; }
}

/* ===================================================================
   CONSULENZA IT SECTION
   =================================================================== */
.consulting-card {
  background: rgba(12,13,37,0.8); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; padding: 36px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  min-height: 380px; transition: all .3s ease; margin-bottom: 30px;
}
.consulting-card:hover {
  border-color: rgba(66,41,255,0.3);
  transform: translateY(-4px);
}
.consulting-card .icon-wrap {
  width: 80px; height: 80px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
.consulting-card .icon-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.consulting-card h3 {
  font-size: 20px; font-weight: 500; margin-bottom: 14px; color: var(--color-white);
}
.consulting-card p {
  font-size: 15px; line-height: 1.7; color: var(--color-light-white); flex: 1;
}
.consulting-card .border-btn { margin-top: auto; }

/* Services mini grid */
.services-mini-grid { margin-top: 60px; }
.service-mini-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 16px; margin-bottom: 30px;
}
.icon-circle {
  width: 70px; height: 70px; border-radius: 50%;
  display: inline-flex; justify-content: center; align-items: center;
  margin-bottom: 16px; transition: all .3s ease;
}
.icon-circle:hover { transform: scale(1.1); }
.icon-circle svg { width: 28px; height: 28px; }
.service-mini-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.service-mini-card p { font-size: 14px; line-height: 1.6; color: var(--color-light-white); }

/* ===================================================================
   CHI SIAMO (ABOUT)
   =================================================================== */
.about-section { scroll-margin-top: 80px; }
.about-grid { display: flex; gap: 60px; align-items: flex-start; flex-wrap: wrap; }
.about-img-col { flex: 0 0 33%; min-width: 280px; }
.about-img-col img { border-radius: 16px; width: 100%; }
.about-text-col { flex: 1; min-width: 300px; }
.about-text-col p { text-align: justify; line-height: 1.8; font-size: 16px; color: var(--color-light-white); }

/* Values */
.values-section { margin-top: 80px; }
.values-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.value-card {
  flex: 1; min-width: 200px; padding: 24px;
  background: var(--color-light-black); border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.value-card .icon-wrap { margin-bottom: 16px; }
.value-card .icon-wrap svg { width: 24px; height: 24px; color: var(--primary-green); }
.value-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.value-card p { font-size: 14px; line-height: 1.6; color: var(--color-light-white); }

@media (max-width: 991.98px) {
  .about-grid { flex-direction: column; }
  .about-img-col { flex: auto; }
}

/* ===================================================================
   NEWS / BLOG SECTION
   =================================================================== */
.blog-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.blog-card {
  flex: 1; min-width: 300px; max-width: 420px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 460px;
  transition: all .3s ease;
}
.blog-card:hover { border-color: rgba(255,255,255,0.35); transform: translateY(-4px); }
.blog-card-img {
  width: 100%; height: 220px; overflow: hidden;
}
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.07); }
.blog-card-body {
  padding: 24px; display: flex; flex-direction: column; flex: 1;
}
.blog-card-body h3 {
  font-size: 20px; font-weight: 500; margin-bottom: 12px; line-height: 1.4;
}
.blog-card-body h3 a { color: var(--color-white); }
.blog-card-body h3 a:hover { color: var(--primary-green); }
.blog-card-body p { font-size: 15px; line-height: 1.7; color: var(--color-light-white); flex: 1; margin-bottom: 16px; }
.blog-card-body .border-btn { align-self: flex-start; }

/* Swiper overrides */
.blog-slider-section .swiper-slide { height: auto; }
.blog-slider-section .swiper-slide .blog-card { max-width: none; height: 100%; }

.slider-nav { display: flex; gap: 16px; margin-top: 30px; justify-content: center; }
.slider-nav button {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); background: transparent;
  color: var(--color-white); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .3s ease;
}
.slider-nav button:hover { border-color: #ffc107; color: #ffc107; transform: scale(1.1); }
.slider-nav button svg { width: 20px; height: 20px; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer-section { border-top: 1px solid rgba(255,255,255,0.06); }
.contact-cards { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 60px; }
.contact-card {
  flex: 1; min-width: 260px; text-align: center;
  background: rgba(32,33,36,0.6); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 30px;
}
.contact-card .icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-blue); margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease;
}
.contact-card:hover .icon-wrap { background: var(--primary-green); }
.contact-card .icon-wrap svg { width: 24px; height: 24px; color: #fff; }
.contact-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.contact-card p { font-size: 14px; color: var(--color-light-white); line-height: 1.6; }
.contact-card a { color: var(--color-light-white); }
.contact-card a:hover { color: var(--color-white); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px; padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-logo img { height: 30px; }
.footer-copy { font-size: 13px; color: var(--color-light-white); display: flex; align-items: center; gap: 6px; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 13px; color: var(--color-light-white); }
.footer-links a:hover { color: var(--color-white); }

@media (max-width: 767.98px) {
  .footer-bottom { flex-direction: column; text-align: center; align-items: center; }
}

/* ===================================================================
   SINGLE POST
   =================================================================== */
.single-post-wrap { max-width: 800px; margin: 0 auto; }
.single-post-wrap h1 {
  font-size: 2.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 16px;
}
.post-meta { font-size: 14px; color: var(--color-light-white); margin-bottom: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.post-featured-img { border-radius: 16px; overflow: hidden; margin-bottom: 32px; }
.post-featured-img img { width: 100%; }
.post-content { font-size: 17px; line-height: 1.8; }
.post-content h2 { font-size: 1.6rem; margin: 32px 0 16px; }
.post-content h3 { font-size: 1.3rem; margin: 24px 0 12px; }
.post-content p { margin-bottom: 20px; color: var(--color-light-white); }
.post-content strong { color: var(--color-white); }
.post-content a { color: var(--primary-green); text-decoration: underline; }
.post-content a:hover { color: #fff; }
.post-content img { border-radius: 12px; margin: 24px 0; }
.post-content blockquote {
  border-left: 4px solid var(--color-blue); padding: 16px 24px;
  margin: 24px 0; font-style: italic; background: rgba(255,255,255,0.03);
  border-radius: 0 8px 8px 0;
}
.post-content ul, .post-content ol { margin: 16px 0; padding-left: 24px; }
.post-content li { margin-bottom: 8px; list-style: disc; color: var(--color-light-white); }

.post-tags { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a {
  display: inline-block; padding: 5px 15px;
  background: rgba(255,255,255,0.1); border-radius: 20px;
  font-size: 13px; color: var(--color-light-white);
}
.post-tags a:hover { background: rgba(255,255,255,0.2); color: var(--color-white); }

.post-nav { margin-top: 48px; display: flex; justify-content: space-between; gap: 20px; }
.post-nav a { font-size: 14px; color: var(--color-light-white); }
.post-nav a:hover { color: var(--primary-green); }

/* ===================================================================
   TELE-ASSISTENZA PAGE
   =================================================================== */
.teleassistenza-hero {
  padding: 80px 0 60px;
  background: linear-gradient(to bottom, #4828b7 0%, #5a2a99 35%, #1e0a40 60%, #02021A 80%);
  position: relative;
}
.teleassistenza-content {
  background: var(--primary-black-two); padding: 80px 0;
}
.teleassistenza-content .feature-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 30px; text-align: center;
  transition: all .3s ease; margin-bottom: 24px;
}
.teleassistenza-content .feature-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.15); }
.teleassistenza-content .feature-card img { max-width: 80px; margin: 0 auto 16px; }
.teleassistenza-content .feature-card h3 { font-size: 18px; margin-bottom: 10px; }
.teleassistenza-content .feature-card p { font-size: 14px; color: var(--color-light-white); }

/* ===================================================================
   CONTACT FORM (AJAX)
   =================================================================== */
.contact-form-wrap { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--color-white); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05);
  color: var(--color-white); font-family: var(--ff-inter); font-size: 15px;
  transition: border-color .3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--primary-green);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-message { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 14px; }
.form-message.success { background: rgba(29,158,67,0.15); color: var(--primary-green); }
.form-message.error { background: rgba(255,50,50,0.15); color: #ff5050; }
.honeypot { position: absolute; left: -9999px; }

/* ===================================================================
   ANIMATIONS
   =================================================================== */
[data-animate] { opacity: 0; transform: translateY(30px); transition: all .6s ease; }
[data-animate].animated { opacity: 1; transform: translateY(0); }

/* Stagger */
[data-animate].stagger-1 { transition-delay: 0.1s; }
[data-animate].stagger-2 { transition-delay: 0.2s; }
[data-animate].stagger-3 { transition-delay: 0.3s; }
[data-animate].stagger-4 { transition-delay: 0.4s; }

/* ===================================================================
   ODOMETER / COUNTERS
   =================================================================== */
.counter-wrap { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin-top: 40px; }
.counter-box { text-align: center; }
.counter-box .count { font-size: 48px; font-weight: 700; color: var(--color-white); font-family: var(--ff-inter-tight); }
.counter-box .count-suffix { font-size: 32px; font-weight: 700; color: var(--primary-green); }
.counter-box .count-label { font-size: 14px; color: var(--color-light-white); margin-top: 4px; }

/* ===================================================================
   BLOG ARCHIVE (home.php)
   =================================================================== */
.blog-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
.blog-archive-grid .blog-card { max-width: none; }

.pagination-wrap { margin-top: 48px; display: flex; justify-content: center; gap: 8px; }
.pagination-wrap a, .pagination-wrap span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15); font-size: 14px;
  color: var(--color-light-white); transition: all .3s ease;
}
.pagination-wrap a:hover { border-color: var(--primary-green); color: var(--primary-green); }
.pagination-wrap .current { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }

/* ===================================================================
   GRADIENT SECTION TITLES (matching original)
   =================================================================== */
.gradient-sub-title { position: relative; }
.gradient-sub-border-wrap { display: inline-block; margin-bottom: 12px; }
.gradient-sub {
  font-family: var(--ff-inter-tight);
  background: linear-gradient(80deg, rgba(66,41,255,0.80) 17.87%, rgba(255,255,255,0.50) 45.75%, rgba(66,41,255,0.80) 80.38%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px; font-weight: 600;
}

/* Service box (original pattern) */
.service-box-wrap { height: 100%; }
.service-box {
  display: flex; flex-direction: column; height: 100%; min-height: 280px;
  justify-content: flex-start; padding: 30px;
  background: #0C0D25; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; transition: all .3s ease; margin-bottom: 30px;
}
.service-box:hover {
  border-color: rgba(66,41,255,0.4);
  box-shadow: 0 0 30px rgba(66,41,255,0.15);
  transform: translateY(-4px);
}
.service-box h3 { margin-bottom: 15px; }
.service-box p { flex: 1; }

/* Features card (consulenza - original pattern) */
.cg-features-box-bordered { display: flex; flex-direction: column; height: 100%; }
.cg-features-content { display: flex; flex-direction: column; height: 100%; }
.cg-features-info { display: flex; flex-direction: column; flex-grow: 1; }
.cg-features-info .text-center.mt-3 { margin-top: auto; }

/* Values wrapper (original pattern) */
.values-wrapper {
  border-radius: 24px; padding: 60px 48px;
  border: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 991.98px) {
  .values-wrapper { padding: 30px 20px; }
}

/* ===================================================================
   WORDPRESS CORE OVERRIDES
   =================================================================== */
.wp-block-image img { border-radius: 12px; }
.aligncenter { text-align: center; }
.alignleft { float: left; margin-right: 24px; margin-bottom: 16px; }
.alignright { float: right; margin-left: 24px; margin-bottom: 16px; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* ===================================================================
   PRINT
   =================================================================== */
@media print {
  .header-top, .menu-area, .back-to-top-btn, .cursor, .preloader { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}