/* ================== Tema e base ================== */
:root{
  --bg: #f7f9fc;
  --paper: #ffffff;
  --ink: #111827;
  --muted: #5f6b7a;
  --brand: #4f46e5;     /* indigo */
  --accent: #06b6d4;    /* cyan */
  --accent-2: #f59e0b;  /* amber */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --paper:#0f172a;
    --ink:#e5e7eb;
    --muted:#94a3b8;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
}

*{ box-sizing: border-box }
html, body{ margin:0; padding:0 }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background:
    radial-gradient(1200px 400px at 20% -120px, rgba(79,70,229,.12), transparent),
    radial-gradient(900px 360px at 80% -160px, rgba(6,182,212,.12), transparent),
    conic-gradient(from 220deg at 50% -20%, rgba(245,158,11,.08), transparent 30%),
    var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container{ max-width: 1200px; margin: 0 auto; padding: 0 22px; }
a{ color: var(--brand); text-decoration: none }
a:hover{ text-decoration: underline }

/* Accessibilità utili */
.visually-hidden{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--brand); color:#fff;
  padding:8px 12px; border-radius:10px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

/* ================== HERO ================== */
.service-hero{
  padding: 40px 0 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.service-hero::before{
  content:"";
  position:absolute; inset:-100px -40px auto -40px; height:280px;
  background:
    radial-gradient(600px 240px at 50% 20%, rgba(79,70,229,.16), transparent 60%),
    radial-gradient(450px 220px at 20% 10%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(350px 160px at 80% 0%, rgba(245,158,11,.12), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
}
.eyebrow{
  display:inline-block; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); margin-bottom:10px;
}
.service-hero h1{
  font-size: clamp(2.1rem, 4vw, 3.25rem); margin:0 0 12px; font-weight: 700;
  background: linear-gradient(90deg, var(--ink), #334155);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle{
  max-width: 780px; margin:0 auto; color:#475569; font-size:1.08rem;
}

/* ================== INTRO + FEATURES ================== */
.service-intro{ padding: 44px 0 28px; }
.intro-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:start; }
.intro-text h2{ margin: 8px 0 12px; font-size: 1.7rem; }
.intro-text p{ color:#4b5563; }

.features{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
}
.feature{
  display:grid; grid-template-columns: 48px 1fr; gap: 14px; align-items:flex-start;
  background: linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--paper), #f1f5f9 60%));
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.feature h3{ margin:0 0 6px; font-size:1.05rem; }
.feature p{ margin:0; color:#64748b; font-size:.98rem; }
.icon{
  width: 28px; height: 28px;
  filter: drop-shadow(0 6px 18px rgba(79,70,229,.25));
}

/* ================== GALLERIA ================== */
.service-gallery{ padding: 28px 0 16px; }
.service-gallery h2{ font-size:1.5rem; margin:0 0 8px; }
.gallery-intro{ color:#4b5563; margin:0 0 22px; }

.masonry{ columns: 1; column-gap: 16px; }
@media (min-width: 640px){ .masonry{ columns: 2; } }
@media (min-width: 1024px){ .masonry{ columns: 3; } }

.masonry img{
  width: 100%; display:block; margin:0 0 16px; border-radius: 14px;
  background: var(--paper);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  filter: saturate(1.02) contrast(1.02) brightness(1.02);
  break-inside: avoid; /* importante per colonne */
}
.masonry img:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(16,24,40,.16);
}

/* ================== CALLOUT ================== */
.callout{
  margin-top: 24px; padding: 18px 18px;
  background: linear-gradient(145deg, rgba(79,70,229,.08), rgba(6,182,212,.08));
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
}
.callout h3{ margin:0 0 6px; }
.callout p{ margin:0; color:#334155; }

/* ================== PROCESSO ================== */
.service-process{ padding: 36px 0 64px; }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
.step{
  background: linear-gradient(180deg, var(--paper), #f8fafc);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align:center;
}
.step h3{ margin: 6px 0 6px; font-size:1.05rem; }
.step p{ margin:0; color:#475569; font-size:.96rem; }
.step-icon{
  display:inline-grid; place-items:center; width: 38px; height: 38px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-weight: 700; margin-bottom: 8px;
  box-shadow: 0 8px 18px rgba(79,70,229,.25);
}

/* Focus accessibili */
.feature:focus-within, .step:focus-within, .toc-card:focus-within, .stat-card:focus-within{
  outline: 3px solid color-mix(in oklab, var(--brand), transparent 70%);
  outline-offset: 2px;
}

/* ================== DETTAGLI SERVIZIO ================== */
.service-details{
  padding: 28px 0 36px;
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(79,70,229,.06), transparent 60%),
    radial-gradient(700px 260px at 90% -40px, rgba(6,182,212,.06), transparent 60%);
  border-top: 1px solid rgba(2,6,23,.06);
}

/* UNA sola definizione coerente di griglia */
.details-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px; /* articolo flessibile + aside fisso */
  gap: 32px;
  align-items: start;
}
.prose{ order:1; min-width:0; max-width: 78ch; }
.details-aside{
  order:2; position: sticky; top: 20px; max-width:320px; height: fit-content;
  display:grid; gap:14px;
}

.prose h2{ font-size: 1.6rem; margin: 0 0 10px; }
.prose h3{ font-size: 1.25rem; margin: 22px 0 8px; }
.prose p{ color: #374151; margin: 0 0 14px; font-size:1rem; }
.prose ul, .prose ol{ margin: 0 0 16px 18px; color: #374151; }
.prose li{ margin: 6px 0; }

/* Checklist */
.checklist{ list-style: none; margin:0; padding:0; }
.checklist li{ position: relative; padding-left: 28px; }
.checklist li::before{
  content: "✔"; position: absolute; left: 0; top: 0; line-height: 1.2;
  width: 20px; height: 20px; display: inline-grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-size: .75rem; box-shadow: 0 6px 14px rgba(79,70,229,.18);
}

/* Timeline */
.timeline{
  list-style: none; margin: 0; padding: 0; border-left: 3px solid rgba(79,70,229,.15);
}
.timeline li{ position: relative; padding: 10px 0 10px 16px; color: #374151; }
.timeline li::before{
  content: ""; position: absolute; left: -9px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 6px 14px rgba(79,70,229,.22);
}
.timeline li span{ display:inline-block; font-weight: 600; color: #111827; margin-right: 6px; }

/* Aside */
.toc-card, .stat-card{
  background: linear-gradient(180deg, var(--paper), #f8fafc);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.toc-card h3{ margin: 0 0 8px; font-size: 1.05rem; }
.toc-card ol{ margin: 0; padding-left: 18px; color: #475569; }
.toc-card a{ color: var(--brand); text-decoration: none; }
.toc-card a:hover{ text-decoration: underline; }

.kpi-label{ margin: 0; color: #64748b; font-size: .95rem; }
.kpi-value{
  margin: 2px 0 0; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card hr{ border: none; border-top: 1px solid rgba(2,6,23,.06); margin: 10px 0; }

/* ================== Responsività ================== */
@media (max-width: 1100px){
  .details-grid{ grid-template-columns: 1fr; }
  .details-aside{ position: static; max-width:none; order:2; }
}
@media (max-width: 900px){
  .intro-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .steps{ grid-template-columns: 1fr; }
}

/* ================== Riduzione motion ================== */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}