:root{
  --bg:#000000; --panel:#111; --panel-2:#171717; --muted:#222222;
  --text:#EEEEEE; --text-2:#D0D0D0; --ring:rgba(255,255,255,.08);
}
body{background:#000;}

/* ===== Page enter / pro look ===== */
.page-enter{opacity:0}
.page-enter.page-in{opacity:1; transition:opacity .5s ease}

/* ===== HERO ===== */
.servizi-hero{
  max-width:1100px;margin:0 auto 18px;padding:26px clamp(16px,3vw,28px);
  text-align:center;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--ring); border-radius:18px; color:var(--text);
  position:relative; overflow:hidden;
  transform:translateY(8px) scale(.98); opacity:0;
  animation:heroIn .9s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.servizi-hero::after{
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  filter:blur(10px); pointer-events:none;
  animation:glowSweep 2.2s ease .35s both; opacity:.7;
}
.servizi-hero h1{
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight:700; letter-spacing:.4px;
  font-size:clamp(30px,4.8vw,44px); line-height:1.08; margin:0 0 12px;
  text-shadow:0 1px 0 rgba(255,255,255,.03);
}
.servizi-hero p{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:clamp(14px,1.4vw,16.5px); line-height:1.6;
  color:var(--text-2); margin:0 auto; max-width:780px;
}
@keyframes heroIn{to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes glowSweep{0%{transform:translateY(-40%) rotate(6deg); opacity:.0}50%{opacity:.8}100%{transform:translateY(0) rotate(0); opacity:.25}}

/* ===== INDICATORI DI SERVIZIO ===== */
.indicators{
  max-width:1100px;margin:0 auto 24px;padding:0 16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.indicator{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--ring); border-radius:14px; padding:14px 16px; color:var(--text);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  transform:translateY(8px); opacity:0; animation:heroIn .7s ease .25s forwards;
}
.indicator svg{flex:0 0 auto}
.indicator b{display:block; font:600 15px/1.2 Inter,system-ui,sans-serif; color:#fff}
.indicator span{display:block; font:400 13px/1.4 Inter,system-ui,sans-serif; color:var(--text-2)}

/* ===== TABS ===== */
.tabs{max-width:1100px;margin:18px auto 22px;display:flex;gap:10px;flex-wrap:wrap;padding:0 16px}
.tab-btn{
  appearance:none;border:1px solid var(--ring); background:var(--panel);
  color:var(--text-2); padding:10px 14px; border-radius:999px; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tab-btn:hover{transform:translateY(-2px)}
.tab-btn[aria-pressed="true"]{background:var(--muted); color:var(--text); box-shadow:0 0 0 6px var(--ring)}

/* =========================================================
   ===== CARDS con effetto Uiverse.io (Codewithvinay) ======
   ========================================================= */
.servizi-cards{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  padding:0 16px 40px;
}

.servizi-cards .box{
  position: relative;
  width: 100%;
  min-height: 300px; /* 300 come nel demo */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  z-index: 1;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: transparent; /* il glow fa da sfondo */
}

/* bande gradient + glow */
.servizi-cards .box::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background: linear-gradient(315deg, #d507c4, #090009);
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}
.servizi-cards .box::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background: linear-gradient(315deg, #d507c4, #090009);
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
}
.servizi-cards .box:hover::before,
.servizi-cards .box:hover::after{
  transform: skewX(0deg) scaleX(1.3);
}

/* decorazioni angolari */
.servizi-cards .box > span{
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.servizi-cards .box > span::before{
  content: '';
  position: absolute;
  top: -40px;
  left: 40px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.servizi-cards .box > span::after{
  content: '';
  position: absolute;
  bottom: -40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* contenitore contenuti */
.servizi-cards .box .content{
  position: relative;
  width: 85%;
  min-height: 254px; /* 254 come nel demo (190x254), adattato in % */
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.servizi-cards .box .content h2{
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

/* ===== CTA ===== */
.servizi-cta{
  max-width:1100px;margin:8px auto 64px;padding:22px clamp(16px,3vw,28px);
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--ring); border-radius:18px; color:var(--text);
  transform:translateY(8px); opacity:0; animation:heroIn .8s ease .25s forwards;
}
.servizi-cta p{margin:0;color:var(--text-2)}
.cta-btn{
  --shadow: rgba(255,255,255,.08);
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg,#1f1f1f,#161616);
  border:1px solid var(--ring); color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px var(--shadow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.cta-btn .arrow{display:inline-block; transition:transform .25s ease}
.cta-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12)}
.cta-btn:hover .arrow{transform:translateX(4px)}
.cta-btn:focus-visible{outline:2px solid #fff; outline-offset:3px; }

/* ===== MODAL ===== */
#servizi-modal.menu{
  position:fixed; inset:0; display:none; place-items:center;
  backdrop-filter:blur(6px); background:rgba(0,0,0,.65); z-index:9999; padding:20px;
}
#servizi-modal.is-open{display:grid;}
#servizi-modal .menu-inner{
  max-width:680px; width:min(680px, 100%);
  background:#0d0d0d; border:1px solid var(--ring);
  border-radius:16px; color:var(--text); padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.65);
  transform:translateY(20px); opacity:0; animation:modalIn .35s ease forwards;
}
#servizi-modal h3{margin:0 0 10px}
#servizi-modal p{margin:0 0 14px; color:var(--text-2)}
.service-faq{margin-top:12px; border-top:1px solid var(--ring); padding-top:12px}
.service-faq h4{margin:0 0 8px; font:600 15px/1.3 Inter,system-ui,sans-serif; color:#fff}
.service-faq details{background:#121212; border:1px solid var(--ring); border-radius:10px; padding:10px 12px; margin:8px 0}
.service-faq summary{cursor:pointer; outline:none}
.service-faq p{margin:8px 0 0; color:#ccc; font-size:14px}
@keyframes modalIn{to{opacity:1; transform:translateY(0)}}

/* ===== FAQ ===== */
.faq-block{max-width:900px;margin:0 auto 70px;padding:0 16px}
.faq-block h2{
  font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:26px;color:#eee;
  margin:0 0 16px;text-align:center
}
.faq-item{
  border:1px solid var(--ring); border-radius:12px; background:#111;
  padding:18px 22px; margin-bottom:12px;
}
.faq-item strong{color:#fff}
.faq-item p{margin:6px 0 0; color:#ccc; font-size:14px}

/* ===== Responsive ===== */
@media (max-width: 820px){
  .servizi-hero{ margin:0 12px 18px; }
  .servizi-cta{ margin:8px 12px 56px; }
}

@media (max-width: 640px){
  .indicators{ gap:10px; }
  .indicator{ padding:12px 14px; gap:10px; }

  .tabs{ padding-inline:12px; gap:8px; }
  .tab-btn{ padding:10px 12px; }

  .servizi-cards{
    grid-template-columns:repeat( auto-fit, minmax(200px,1fr) );
    padding:0 12px 24px;
    gap:14px;
  }
  .servizi-cards .box{
    min-height:260px;
  }

  .servizi-cta{ padding:18px 14px; gap:12px; }
  .cta-btn{ padding:12px 16px; }

  #servizi-modal .menu-inner{ padding:18px; border-radius:14px; }
}

@media (max-width: 600px){
  .servizi-cards{
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:0 12px 24px;
  }
  .servizi-cards .box{
    min-height:240px;
  }
  .servizi-cards .box .content{
    min-height:200px;
    padding:14px;
  }
  .servizi-cards .box .content h2{
    font-size:16px;
  }
}

@media (max-width: 420px){
  .servizi-hero{ padding:22px 14px; }
  .servizi-hero h1{ font-size:clamp(26px,8vw,34px); }
  .servizi-hero p{ font-size:15px; }

  .indicators{ grid-template-columns:repeat( auto-fit, minmax(170px,1fr) ); }
  .indicator b{ font-size:14px; }
  .indicator span{ font-size:12.5px; }

  .tabs{ gap:6px; }
  .tab-btn{ padding:9px 12px; }

  .faq-block{ padding:0 12p

    /* Fix overlap su mobile */
@media (max-width: 640px) {
  .servizi-hero {
    padding-top: 70px; /* aumenta lo spazio sopra il titolo */
  }
}