/*
Theme Name: Hello Elementor Child — Castelli Andrea
Theme URI: https://www.castelliandrea.it
Description: Child theme di Hello Elementor. Contiene il design system (token + font self-hostato Inter) del sito Castelli Andrea.
Author: Castelli Andrea
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ═══════════════════════════════════════════════════════════════════════
   1 · FONT — Inter self-hostato (GDPR + performance)
   File in /fonts/ — vedi README per dove scaricarli.
   Variable font: un solo file copre tutti i pesi 100–900.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;            /* variable: intero range in un file */
  font-display: swap;              /* niente testo invisibile (FOIT) */
  src: url("fonts/InterVariable.woff2") format("woff2");
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · TOKEN GLOBALI — fonte: _BRAND.md
   Qui, non nei blocchi. Tutti i blocchi .am-* leggono da :root.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Colori */
  --am-navy:      #003152;   /* primario: testo titoli, CTA */
  --am-navy-dark: #002440;   /* hover CTA */
  --am-cyan:      #ADDFF1;   /* accento: SOLO superfici, mai testo su bianco */
  --am-ink:       #0B1F2A;   /* testo principale */
  --am-ink-2:     #5B7382;   /* testo secondario */
  --am-bg:        #FFFFFF;
  --am-bg-alt:    #F4F8FA;
  --am-border:    #E3EDF2;

  /* Tipografia */
  --am-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Forma */
  --am-radius: 10px;

  /* Ritmo verticale (density: spacious) */
  --am-space-section: clamp(72px, 10vw, 140px);
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · BLOCCHI FULL-WIDTH — nessuno spazio Elementor tra un blocco e l'altro
   I blocchi .am-* portano il proprio padding verticale interno (128px).
   Elementor però aggiunge padding (10px) e gap (20px) sui contenitori che li
   avvolgono → strisce bianche tra i blocchi e sotto l'header.
   Questa regola li azzera per QUALSIASI contenitore che contiene un .am-*,
   inclusi i futuri blocchi. Il padding orizzontale del tema resta intatto.
   ═══════════════════════════════════════════════════════════════════════ */
.elementor .e-con:has([class*="am-"]){
  row-gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · PAGINE SERVIZIO (.am-svc-*) — CSS condiviso da tutte le pagine servizio
   (e riusato dalle pagine città). Così le pagine sono solo markup.
   ═══════════════════════════════════════════════════════════════════════ */
[class^="am-svc"], [class^="am-svc"] *, [class^="am-svc"] *::before, [class^="am-svc"] *::after{ box-sizing:border-box; }
[class^="am-svc-"]{ font-family:var(--am-font,"Inter",-apple-system,sans-serif); }

.am-svc__h2{ margin:0 0 clamp(32px,4vw,48px); font-size:clamp(1.625rem,3vw,2.5rem); font-weight:600; letter-spacing:-.025em; line-height:1.15; color:var(--am-navy,#003152); text-wrap:balance; }

.am-svc-btn{ display:inline-flex; align-items:center; gap:.5em; min-height:48px; padding:13px 26px; border-radius:var(--am-radius,10px); font-size:1rem; font-weight:500; line-height:1; text-decoration:none; transition:background-color .2s ease, transform .2s ease; }
.am-svc-btn--primary{ background:var(--am-navy,#003152); color:#fff; }
.am-svc-btn--primary:hover{ background:var(--am-navy-dark,#002440); }
.am-svc-btn--ghost{ padding-left:0; padding-right:0; background:none; color:var(--am-navy,#003152); }
.am-svc-btn--light{ background:#fff; color:var(--am-navy,#003152); }
.am-svc-btn:focus-visible{ outline:3px solid var(--am-navy,#003152); outline-offset:3px; }

.am-svc-hero{ background:var(--am-bg,#fff); padding:clamp(72px,9vw,120px) 24px clamp(56px,6vw,80px); }
.am-svc-hero__inner{ max-width:1120px; margin:0 auto; }
.am-svc-hero__eyebrow{ margin:0 0 20px; font-size:.8125rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--am-ink-2,#5B7382); }
.am-svc-hero__title{ margin:0 0 20px; font-size:clamp(2.25rem,5vw,3.5rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--am-navy,#003152); }
.am-svc-hero__sub{ margin:0 0 32px; max-width:52ch; font-size:1.25rem; line-height:1.5; color:var(--am-ink-2,#5B7382); }
.am-svc-hero__actions{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }

/* Hero esclusiva HUB SERVIZI — stack modulare 01–05 */
.am-svc-hero--hub{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(115deg,#fff 0%,#fff 58%,rgba(244,248,250,.82) 100%);
}
.am-svc-hero--hub::after{
  content:"";
  position:absolute;
  inset:0 0 0 52%;
  z-index:-1;
  opacity:.65;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,49,82,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,49,82,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 28%,#000);
}
.am-svc-hero--hub .am-svc-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);
  align-items:center;
  gap:clamp(32px,5vw,76px);
  max-width:1120px;
}
.am-svc-hero--hub .am-svc-hero__copy{ position:relative; z-index:2; }
.am-svc-hero--hub .am-svc-hero__title{ max-width:20ch; }
.am-svc-hero--hub .am-svc-hero__sub{ max-width:49ch; }

.am-stack{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:460px;
  aspect-ratio:1 / 1.02;
  justify-self:end;
}
.am-stack::before{
  content:"";
  position:absolute;
  inset:7%;
  z-index:-2;
  border:1px solid rgba(0,49,82,.08);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(228,238,243,.38));
  box-shadow:0 30px 70px rgba(0,49,82,.06);
}
.am-stack__grid{
  position:absolute;
  inset:4%;
  z-index:-1;
  opacity:.46;
  background-image:radial-gradient(circle,rgba(0,49,82,.16) 0 1px,transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
}
.am-stack__spine{
  position:absolute;
  z-index:1;
  left:57%;
  top:9%;
  bottom:9%;
  width:1px;
  background:linear-gradient(transparent,rgba(0,49,82,.24) 12%,rgba(0,49,82,.24) 88%,transparent);
}
.am-stack__spine::before,
.am-stack__spine::after{
  content:"";
  position:absolute;
  left:-3px;
  width:7px;
  height:7px;
  border:1px solid rgba(0,49,82,.28);
  border-radius:50%;
  background:#F4F8FA;
}
.am-stack__spine::before{ top:0; }
.am-stack__spine::after{ bottom:0; }
.am-stack__spine i{
  position:absolute;
  left:-3px;
  top:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#79CEE8;
  box-shadow:0 0 0 7px rgba(121,206,232,.1),0 0 18px rgba(121,206,232,.55);
  animation:am-stack-pulse 5.4s linear infinite;
}
.am-stack__layer{
  position:absolute;
  z-index:2;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  min-height:57px;
  padding:10px 15px;
  border:1px solid rgba(0,49,82,.13);
  border-radius:11px;
  background:rgba(255,255,255,.86);
  box-shadow:0 13px 28px rgba(0,49,82,.07);
  color:#003152;
  backdrop-filter:blur(8px);
  transform:skewX(-5deg);
  animation:am-stack-layer 7s ease-in-out infinite;
}
.am-stack__layer::after{
  content:"";
  position:absolute;
  right:calc(43% - 4px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ADDFF1;
  box-shadow:0 0 0 5px rgba(173,223,241,.12);
}
.am-stack__layer small,
.am-stack__layer strong,
.am-stack__layer em{ transform:skewX(5deg); }
.am-stack__layer small{
  color:#8BA8B8;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.12em;
}
.am-stack__layer strong{
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.01em;
}
.am-stack__layer em{
  color:#7895A5;
  font-size:.5rem;
  font-style:normal;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.am-stack__layer--1{ left:4%; top:10%; width:78%; animation-delay:-.3s; }
.am-stack__layer--2{ left:15%; top:25%; width:78%; animation-delay:-1.5s; }
.am-stack__layer--3{ left:7%; top:40%; width:86%; animation-delay:-2.7s; }
.am-stack__layer--4{ left:18%; top:55%; width:73%; animation-delay:-3.9s; }
.am-stack__layer--5{ left:5%; top:70%; width:88%; animation-delay:-5.1s; }
.am-stack__core{
  position:absolute;
  z-index:4;
  right:0;
  top:43%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:112px;
  aspect-ratio:1;
  border:1px solid rgba(0,49,82,.18);
  border-radius:18px;
  background:#003152;
  color:#fff;
  box-shadow:0 20px 42px rgba(0,49,82,.2),0 0 0 9px rgba(173,223,241,.1);
  animation:am-stack-core 4s ease-in-out infinite;
}
.am-stack__core strong{ font-size:1.7rem; line-height:1; letter-spacing:-.04em; }
.am-stack__core small{
  margin-top:8px;
  color:#ADDFF1;
  font-size:.4375rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
@keyframes am-stack-pulse{
  0%{ top:0; opacity:0; }
  12%,88%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
@keyframes am-stack-layer{
  0%,100%{ translate:0 0; }
  50%{ translate:5px -3px; }
}
@keyframes am-stack-core{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -4px; }
}

.am-svc-points{ background:var(--am-bg-alt,#F4F8FA); padding:clamp(64px,8vw,110px) 24px; }
.am-svc-points__inner{ max-width:1120px; margin:0 auto; }
.am-svc-points__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.am-svc-point{ padding:28px; background:#fff; border:1px solid var(--am-border,#E3EDF2); border-radius:16px; }
.am-svc-point h3{ margin:0 0 10px; font-size:1.25rem; font-weight:600; letter-spacing:-.015em; color:var(--am-navy,#003152); }
.am-svc-point p{ margin:0; font-size:1.0625rem; line-height:1.55; color:var(--am-ink-2,#5B7382); }

.am-svc-method{ background:var(--am-bg,#fff); padding:clamp(64px,8vw,110px) 24px; }
.am-svc-method__inner{ max-width:1120px; margin:0 auto; }
.am-svc-steps{ list-style:none; margin:0; padding:0; max-width:760px; display:flex; flex-direction:column; gap:28px; }
.am-svc-steps li{ display:flex; gap:22px; align-items:flex-start; }
.am-svc-steps__n{ flex:0 0 auto; font-size:1rem; font-weight:600; color:var(--am-navy,#003152); background:var(--am-cyan,#ADDFF1); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.am-svc-steps h3{ margin:0 0 6px; font-size:1.1875rem; font-weight:600; color:var(--am-navy,#003152); }
.am-svc-steps p{ margin:0; font-size:1.0625rem; line-height:1.55; color:var(--am-ink-2,#5B7382); }

.am-svc-proof{ background:var(--am-navy,#003152); padding:clamp(56px,7vw,96px) 24px; }
.am-svc-proof__inner{ max-width:1120px; margin:0 auto; }
.am-svc-proof__label{ margin:0 0 14px; font-size:.8125rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--am-cyan,#ADDFF1); }
.am-svc-proof__num{ margin:0 0 14px; font-size:clamp(1.75rem,4vw,2.75rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:#fff; }
.am-svc-proof__text{ margin:0 0 24px; max-width:46ch; font-size:1.0625rem; line-height:1.55; color:#C4D6E1; }
.am-svc-proof__cta{ color:#fff !important; }

.am-svc-faq{ background:var(--am-bg,#fff); padding:clamp(64px,8vw,110px) 24px; }
.am-svc-faq__inner{ max-width:1120px; margin:0 auto; }
.am-svc-faq__item{ border-bottom:1px solid var(--am-border,#E3EDF2); }
.am-svc-faq__item summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-size:1.125rem; font-weight:500; color:var(--am-navy,#003152); }
.am-svc-faq__item summary::-webkit-details-marker{ display:none; }
.am-svc-faq__item summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--am-ink-2,#5B7382); transition:transform .2s ease; }
.am-svc-faq__item[open] summary::after{ content:"–"; }
.am-svc-faq__a{ padding:0 0 22px; }
.am-svc-faq__a p{ margin:0; max-width:60ch; font-size:1.0625rem; line-height:1.6; color:var(--am-ink-2,#5B7382); }

.am-svc-cta{ background:var(--am-bg-alt,#F4F8FA); padding:clamp(64px,8vw,110px) 24px; }
.am-svc-cta__inner{ max-width:1120px; margin:0 auto; }
.am-svc-cta__title{ margin:0 0 14px; font-size:clamp(1.75rem,3.5vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--am-navy,#003152); }
.am-svc-cta__text{ margin:0 0 28px; max-width:48ch; font-size:1.1875rem; line-height:1.5; color:var(--am-ink-2,#5B7382); }
.am-svc-cta .am-svc-btn--light{ border:1px solid var(--am-border,#E3EDF2); }

@media (max-width:980px){
  .am-svc-hero--hub .am-svc-hero__inner{ grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:24px; }
  .am-stack__core{ width:94px; }
}
@media (max-width:820px){
  .am-svc-points__grid{ grid-template-columns:1fr; }
  .am-svc-hero--hub .am-svc-hero__inner{ grid-template-columns:1fr; }
  .am-svc-hero--hub::after{ inset:48% 0 0; }
  .am-stack{ width:min(100%,460px); margin-top:22px; justify-self:start; }
}
@media (max-width:480px){
  .am-stack__layer{ min-height:49px; padding:8px 10px; grid-template-columns:27px 1fr; }
  .am-stack__layer em{ display:none; }
  .am-stack__core{ width:82px; border-radius:14px; }
  .am-stack__core strong{ font-size:1.35rem; }
  .am-stack__core small{ font-size:.375rem; }
}
@media (prefers-reduced-motion:reduce){
  .am-svc-btn, .am-svc-faq__item summary::after{ transition:none; }
  .am-stack__spine i,
  .am-stack__layer,
  .am-stack__core{ animation:none; }
}

/* ── HUB SERVIZI (.am-hub-*) — griglia icone che smista ai 5 servizi ── */
.am-hub{ background:var(--am-bg-alt,#F4F8FA); padding:clamp(64px,8vw,110px) 24px; font-family:var(--am-font,"Inter",-apple-system,sans-serif); }
.am-hub__inner{ max-width:1120px; margin:0 auto; }
.am-hub__lead{ margin:0 0 clamp(32px,4vw,48px); max-width:58ch; font-size:1.1875rem; line-height:1.6; color:var(--am-ink-2,#5B7382); }
.am-hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.am-hub-card{ display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid var(--am-border,#E3EDF2); border-radius:16px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.am-hub-card:hover{ transform:translateY(-3px); border-color:#C9DCE6; box-shadow:0 12px 28px rgba(0,49,82,.08); }
.am-hub-card:focus-visible{ outline:3px solid var(--am-navy,#003152); outline-offset:3px; }
.am-hub-card__icon{ width:52px; height:52px; border-radius:14px; background:var(--am-cyan,#ADDFF1); color:var(--am-navy,#003152); display:grid; place-items:center; margin-bottom:18px; }
.am-hub-card__icon svg{ width:26px; height:26px; }
.am-hub-card h3{ margin:0 0 8px; font-size:1.25rem; font-weight:600; letter-spacing:-.015em; color:var(--am-navy,#003152); }
.am-hub-card p{ margin:0; font-size:1.0625rem; line-height:1.5; color:var(--am-ink-2,#5B7382); }
.am-hub-card__more{ margin-top:auto; padding-top:18px; font-size:.9375rem; font-weight:500; color:var(--am-navy,#003152); display:inline-flex; align-items:center; gap:.4em; }
.am-hub-card__more svg{ width:16px; height:16px; transition:transform .2s ease; }
.am-hub-card:hover .am-hub-card__more svg{ transform:translateX(4px); }
@media (max-width:820px){ .am-hub-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .am-hub-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .am-hub-card, .am-hub-card__more svg{ transition:none; } }

/* ── CASI STUDIO a tessera-immagine (.am-casi-*) — riusabile: home, pesca, portfolio, città ── */
.am-casi, .am-casi *, .am-casi *::before, .am-casi *::after{ box-sizing:border-box; }
.am-casi{ background:var(--am-bg,#FFFFFF); padding:var(--am-space-section,120px) 24px; font-family:var(--am-font,"Inter",-apple-system,sans-serif); }
.am-casi__inner{ max-width:1120px; margin:0 auto; }
.am-casi__title{ margin:0 0 clamp(40px,5vw,64px); font-size:clamp(1.75rem,3.5vw,2.75rem); font-weight:600; letter-spacing:-.025em; line-height:1.15; color:var(--am-navy,#003152); }
.am-casi__title-soft{ color:var(--am-ink-2,#5B7382); }
.am-casi__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:0 0 clamp(40px,5vw,56px); }
.am-casi__card{ position:relative; display:block; aspect-ratio:4/3; border-radius:18px; overflow:hidden; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.am-casi__card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,49,82,.16); }
.am-casi__card:focus-visible{ outline:3px solid var(--am-navy,#003152); outline-offset:3px; }
.am-casi__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; background:#0B2637; display:grid; place-items:center; }
.am-casi__img > span{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:#42627A; }
.am-casi__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,36,64,.94) 0%, rgba(0,36,64,.72) 32%, rgba(0,36,64,0) 62%); }
.am-casi__body{ position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,3vw,32px); }
.am-casi__client{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 10px; font-size:.875rem; font-weight:500; color:#C4D6E1; }
.am-casi__tag{ font-size:.625rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--am-navy,#003152); background:var(--am-cyan,#ADDFF1); padding:3px 8px; border-radius:100px; }
.am-casi__num{ display:block; font-size:clamp(2.25rem,4vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1; color:#FFFFFF; font-variant-numeric:tabular-nums; }
.am-casi__num-sub{ display:block; margin-top:6px; font-size:.9375rem; font-weight:400; color:#C4D6E1; }
.am-casi__cta{ display:inline-flex; align-items:center; gap:.5em; font-size:1.0625rem; font-weight:500; color:var(--am-navy,#003152); text-decoration:none; }
.am-casi__cta:hover .am-casi__arrow{ transform:translateX(4px); }
.am-casi__arrow{ transition:transform .2s ease; }
.am-casi__cta:focus-visible{ outline:3px solid var(--am-navy,#003152); outline-offset:3px; border-radius:4px; }
@media (max-width:700px){ .am-casi__grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .am-casi__card, .am-casi__arrow{ transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   SFONDI ANIMATI RIUSABILI (.am-bg)
   Servono a spezzare il ritmo visivo delle pagine lunghe senza duplicare
   il CSS dentro ogni blocco Elementor.

   USO — dentro una sezione, come primo figlio:
     <section class="...">
       <div class="am-bg am-bg--aurora" aria-hidden="true"></div>
       ...contenuto...
     </section>

   La sezione deve avere position:relative e overflow:hidden, e il
   contenuto un z-index sopra lo sfondo (di solito basta position:relative
   sul wrapper interno).

   REGOLA: massimo 2-3 sezioni animate per pagina, e MAI sull'hero —
   è l'elemento LCP e ogni animazione lì peggiora i Core Web Vitals.

   Sono CSS puro, senza JavaScript, su transform/opacity/background-position:
   proprietà che non forzano ricalcoli di layout. Si spengono tutte con
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

.am-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.am-bg::before, .am-bg::after{ content:""; position:absolute; }

/* ── AURORA — due masse di colore che derivano. Per fondi navy ── */
.am-bg--aurora::before{
  left:-16%; top:-22%; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(99,201,235,.30), rgba(99,201,235,0) 66%);
  filter:blur(12px);
  animation:am-bg-drift 19s ease-in-out infinite;
}
.am-bg--aurora::after{
  right:-20%; bottom:-26%; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(173,223,241,.22), rgba(173,223,241,0) 66%);
  filter:blur(12px);
  animation:am-bg-drift 26s ease-in-out infinite reverse;
}
@keyframes am-bg-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  34%    { transform:translate(8%,6%) scale(1.13); }
  67%    { transform:translate(-6%,4%) scale(.93); }
}

/* ── MESH — griglia tecnica che scorre, sfumata al centro. Fondi chiari ── */
.am-bg--mesh::before{
  inset:0;
  background-image:
    linear-gradient(rgba(0,49,82,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,49,82,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%, #000 16%, transparent 76%);
  mask-image:radial-gradient(ellipse at 50% 42%, #000 16%, transparent 76%);
  animation:am-bg-scroll 30s linear infinite;
}
@keyframes am-bg-scroll{ to{ background-position:46px 46px; } }

/* variante per fondi scuri */
.am-bg--mesh.am-bg--on-dark::before{
  background-image:
    linear-gradient(rgba(173,223,241,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,223,241,.07) 1px, transparent 1px);
}

/* ── BEAMS — fasci diagonali che pulsano. Per sezioni scure d'impatto ── */
.am-bg--beams::before{
  left:4%; top:-24%; width:34%; height:150%;
  transform:rotate(13deg); filter:blur(8px);
  background:linear-gradient(180deg, rgba(173,223,241,.16), rgba(173,223,241,0) 68%);
  animation:am-bg-pulse 13s ease-in-out infinite;
}
.am-bg--beams::after{
  right:2%; top:-24%; width:30%; height:150%;
  transform:rotate(-10deg); filter:blur(8px);
  background:linear-gradient(180deg, rgba(99,201,235,.13), rgba(99,201,235,0) 68%);
  animation:am-bg-pulse 18s ease-in-out -6s infinite;
}
@keyframes am-bg-pulse{ 0%,100%{ opacity:.42; } 50%{ opacity:1; } }

/* ── DOTS — matrice di punti in movimento. Leggera, per fondi ghiaccio ── */
.am-bg--dots::before{
  inset:0;
  background-image:radial-gradient(rgba(0,49,82,.13) 1px, transparent 1px);
  background-size:19px 19px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 46%, #000 6%, transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 46%, #000 6%, transparent 70%);
  animation:am-bg-scroll-dots 26s linear infinite;
}
@keyframes am-bg-scroll-dots{ to{ background-position:19px 19px; } }
.am-bg--dots.am-bg--on-dark::before{
  background-image:radial-gradient(rgba(173,223,241,.18) 1px, transparent 1px);
}

@media (prefers-reduced-motion:reduce){
  .am-bg::before, .am-bg::after{ animation:none !important; }
}