/* ============================================================
   N1 Informatica — Design System v2
   Brand: #1A3F8F (navy) · #E8501A (terracotta) · Plus Jakarta Sans
   ============================================================ */

/* ── FONT (auto-ospitato) ────────────────────────────────────
   Plus Jakarta Sans, font variabile 200-800, licenza SIL OFL 1.1.
   Ospitato sul nostro server invece che su fonts.googleapis.com:
   caricarlo da Google trasferirebbe l'IP del visitatore a un paese
   terzo prima del consenso. Non reintrodurre il <link> a Google.
   ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --blue:        #1A3F8F;
  --blue-dark:   #122D6E;
  --blue-mid:    #163580;
  --blue-light:  #EEF3FD;
  --blue-xlight: #D8E4FA;
  --orange:      #E8501A;
  --orange-dark: #B83D13;
  --orange-light:#FEF4F0;
  --green:       #1C8C5E;
  --green-dark:  #116244;
  --green-light: #EAFAF3;

  --ink:       #0E1C2F;
  --ink-mid:   #2D3D55;
  --ink-soft:  #435269;
  --ink-faint: #5A6B82;
  --ink-ghost: #64748B;
  --ink-xg:    #A8B6C8;
  --border:    #E2E8F0;
  --border-mid:#C8D3E0;
  --bg:        #F5F7FA;
  --bg-subtle: #F0F4F8;
  --white:     #FFFFFF;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --sh-xs: 0 1px 3px rgba(14,28,47,.06);
  --sh-sm: 0 2px 8px rgba(14,28,47,.08);
  --sh-md: 0 6px 20px rgba(14,28,47,.12);
  --sh-lg: 0 12px 36px rgba(14,28,47,.16);
  --sh-xl: 0 24px 64px rgba(14,28,47,.20);

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill:9999px;

  --t-fast:150ms ease;
  --t-base:200ms ease;
  --t-slow:300ms ease;

  --max-w: 1200px;
  --gutter:24px;
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-wrap:pretty;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:var(--font)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:var(--font)}
img{max-width:100%;display:block}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1{font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
h2{font-size:clamp(24px,3.5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
h3{font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.3;color:var(--ink)}
p{color:var(--ink-faint);line-height:1.65}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-ghost);display:block}

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:80px var(--gutter)}
.sec-w{background:var(--white)}
.sec-b{background:var(--bg)}

/* ── GRID HELPERS ────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}

/* ── SECTION HEADER ──────────────────────────────────────── */
.sh{text-align:center;margin-bottom:52px}
.sh .eyebrow{margin-bottom:10px}
.sh h2{margin:0 0 12px}
.sh p{font-size:16px;max-width:480px;margin:0 auto}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;line-height:1;padding:13px 24px;border-radius:var(--r-md);border:none;cursor:pointer;transition:var(--t-base);text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-accent{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(232,80,26,.3)}
.btn-accent:hover{background:var(--orange-dark);box-shadow:0 6px 20px rgba(232,80,26,.4)}
.btn-navy{background:var(--blue);color:#fff}
.btn-navy:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--white);color:var(--blue);border:1.5px solid #A8C0F0}
.btn-ghost:hover{background:var(--blue-light)}
.btn-ghost-w{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost-w:hover{background:rgba(255,255,255,.22)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#20b85a}
.btn-sm{font-size:13px;padding:9px 16px}
.btn-lg{font-size:16px;padding:16px 32px}

/* ── CARDS ───────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-sm);transition:var(--t-base);display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:#A8C0F0;box-shadow:var(--sh-md);transform:translateY(-2px)}
a.card{color:inherit;text-decoration:none}

/* ── ICON BOX ────────────────────────────────────────────── */
.ib{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r-lg)}
.ib-sm{width:44px;height:44px}
.ib-md{width:52px;height:52px}
.ib-lg{width:64px;height:64px}
.ib-blue{background:var(--blue-light);color:var(--blue)}
.ib-navy{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(26,63,143,.25)}
.ib-orange{background:var(--orange-light);color:var(--orange)}
.ib-green{background:var(--green-light);color:var(--green)}
.ib-bg{background:var(--bg);color:var(--blue)}

/* ── BADGES ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.badge-blue{background:var(--blue-light);color:var(--blue);border:1px solid #A8C0F0}
.badge-orange{background:var(--orange-light);color:var(--orange-dark)}
.badge-green{background:var(--green-light);color:var(--green-dark);border:1px solid #D4F0E5}

/* ── CHECK LIST ──────────────────────────────────────────── */
.chk-list{display:flex;flex-direction:column;gap:10px}
.chk-item{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.chk-dot{width:20px;height:20px;border-radius:6px;flex-shrink:0;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ── SITE HEADER ─────────────────────────────────────────── */
.site-hdr{background:var(--white);position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:box-shadow 200ms,border-color 200ms}
.site-hdr.scrolled{border-bottom-color:var(--border);box-shadow:0 2px 12px rgba(14,28,47,.07)}
.hdr-in{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hdr-logo:hover{text-decoration:none}
.logo-mk{width:40px;height:40px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;letter-spacing:-.02em}
.logo-nm{font-size:15px;font-weight:800;color:var(--blue);line-height:1.1;letter-spacing:-.01em}
.logo-sb{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-ghost);margin-top:1px}
.hdr-nav{display:flex;align-items:center;gap:2px}
.hdr-a{font-size:14px;font-weight:500;color:var(--ink-faint);padding:7px 12px;border-radius:8px;transition:var(--t-fast)}
.hdr-a:hover,.hdr-a.active{color:var(--blue);background:var(--blue-light);font-weight:600;text-decoration:none}
.hdr-acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-tel{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.hdr-tel:hover{text-decoration:none}
.hdr-wa{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--green);background:var(--green-light);border:1px solid #D4F0E5;padding:7px 13px;border-radius:8px}
.hdr-wa:hover{background:#D4F0E5;text-decoration:none}
.hdr-ham{background:none;border:none;cursor:pointer;padding:8px;display:none;flex-direction:column;gap:4px}
.hdr-ham span{display:block;height:2px;background:var(--ink-soft);border-radius:2px}
.hdr-ham span:nth-child(1){width:20px}
.hdr-ham span:nth-child(2){width:20px}
.hdr-ham span:nth-child(3){width:14px}
.mob-menu{display:none;border-top:1px solid var(--border);padding:12px 20px 16px;flex-direction:column;gap:2px;background:var(--white)}
.mob-menu.open{display:flex}
.mob-a{font-size:15px;font-weight:500;color:var(--ink-soft);padding:10px 8px;border-radius:7px}
.mob-a:hover{background:var(--blue-light);color:var(--blue);text-decoration:none}
.mob-btns{display:flex;gap:8px;margin-top:8px}

/* ── WHATSAPP FAB ────────────────────────────────────────── */
.wa-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.45);z-index:999;transition:transform 200ms}
.wa-fab:hover{transform:scale(1.08);text-decoration:none}

/* ── FOOTER ──────────────────────────────────────────────── */
.ftr-cta{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);padding:56px var(--gutter);text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.ftr-cta .eyebrow{color:rgba(255,255,255,.5)}
.ftr-cta h2{color:#fff;margin:10px 0 12px;font-size:clamp(24px,3vw,40px)}
.ftr-cta p{color:rgba(255,255,255,.65);font-size:16px;margin-bottom:28px}
.ftr-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ftr-main{background:#0E1C2F;padding:52px var(--gutter) 28px}
.ftr-grid{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07)}
.ftr-col-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px}
.ftr-l{display:block;font-size:13px;color:rgba(255,255,255,.5);padding:3px 0;transition:color 150ms}
.ftr-l:hover{color:rgba(255,255,255,.9);text-decoration:none}
.ftr-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;margin:12px 0}
.ftr-ct{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.55);padding:3px 0}
.ftr-ct:hover{color:rgba(255,255,255,.9);text-decoration:none}
.ftr-bot{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:20px;flex-wrap:wrap;gap:10px}
.ftr-bot-t{font-size:12px;color:rgba(255,255,255,.25)}
.ftr-bot-l{display:flex;gap:18px}
.ftr-bot a{font-size:12px;color:rgba(255,255,255,.25)}
.ftr-bot a:hover{color:rgba(255,255,255,.5);text-decoration:none}

/* ── PAGE BANNER ─────────────────────────────────────────── */
.page-banner{background:linear-gradient(160deg,var(--blue-light) 0%,var(--bg) 100%);padding:52px var(--gutter) 44px;border-bottom:1px solid var(--border)}
.page-banner .eyebrow{margin-bottom:10px}
.page-banner h1{font-size:clamp(28px,3.5vw,46px);margin:0 0 10px}
.page-banner p{font-size:16px;margin:0}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-ghost);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-ghost)}
.breadcrumb a:hover{color:var(--blue)}

/* ── FAQ ACCORDION ───────────────────────────────────────── */
.faq-item{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:8px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--white);border:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);text-align:left;gap:16px;transition:var(--t-fast)}
.faq-q:hover{background:var(--bg)}
.faq-ic{flex-shrink:0;transition:transform 300ms;color:var(--blue)}
.faq-q.open .faq-ic{transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 18px;font-size:14px;color:var(--ink-faint);line-height:1.7}
.faq-a.open{display:block}

/* ── PROBLEM CARD ────────────────────────────────────────── */
.prob-card{display:flex;align-items:flex-start;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-xs);transition:var(--t-base);color:inherit}
.prob-card:hover{border-color:#A8C0F0;box-shadow:var(--sh-md);transform:translateY(-2px);text-decoration:none}

/* ── STEP CONNECTOR ──────────────────────────────────────── */
.steps-wrap{position:relative}
.step-line{position:absolute;top:44px;left:22%;right:22%;height:2px;background:linear-gradient(90deg,#A8C0F0,#D8E4FA,#A8C0F0);border-radius:2px;z-index:0}

/* ── TESTIMONIAL ─────────────────────────────────────────── */
.testi{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:14px}
.testi-av{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.stars{display:flex;gap:2px}

/* ── ZONE TAG ────────────────────────────────────────────── */
.zone-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-soft);background:var(--white);border:1px solid var(--border);padding:8px 14px;border-radius:var(--r-pill);transition:var(--t-fast)}
.zone-tag:hover{border-color:#A8C0F0;color:var(--blue);background:var(--blue-light);text-decoration:none}

/* ── PRICING CARDS ───────────────────────────────────────── */
.price-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);padding:28px 26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:18px;position:relative}
.price-card.highlight{background:var(--blue);border-color:transparent;box-shadow:0 16px 48px rgba(26,63,143,.28);transform:scale(1.03)}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeUp 400ms ease both}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sec{padding:64px var(--gutter)}
  .hdr-nav,.hdr-tel,.hdr-wa{display:none!important}
  .hdr-ham{display:flex}
  .logo-sb{display:none!important}
  .logo-mk{width:34px;height:34px;font-size:14px}
  .logo-nm{font-size:15px}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-vis{display:none!important}
  .stats-g{grid-template-columns:repeat(2,1fr)!important}
  .steps-g{grid-template-columns:1fr!important}
  .step-line{display:none!important}
  .why-grid{grid-template-columns:1fr!important}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr;gap:16px}
  .pricing-g{grid-template-columns:1fr!important}
  .price-card.highlight{transform:none}
}
@media(max-width:768px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:24px}
  .g3{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .sec{padding:48px var(--gutter)}
  .g3{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-bot{flex-direction:column;text-align:center}
  .ftr-bot-l{justify-content:center}
}

/* ============================================================
   N1 Informatica — Component Extensions v2
   Classes used across all HTML pages
   ============================================================ */

/* ── LAYOUT ALIASES ──────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.section{padding:80px 0}
.section.bg-white{background:var(--white)}
.section.bg-light{background:var(--bg)}
.section.cta-dark{background:linear-gradient(135deg,#0E1C2F 0%,#1A3F8F 100%)}
.section-hd{text-align:center;margin-bottom:52px}
.section-hd h2{margin:0 0 12px}
.section-hd p{font-size:16px;max-width:480px;margin:0 auto;color:var(--ink-faint)}

/* ── HEADER (page-specific naming) ───────────────────────── */
.hdr-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-nav{display:flex;align-items:center;gap:4px}
.hdr-nav a{font-size:14px;font-weight:500;color:var(--ink-faint);padding:7px 12px;border-radius:8px;transition:var(--t-fast)}
.hdr-nav a:hover{color:var(--blue);background:var(--blue-light);text-decoration:none}
.hdr-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── LOGO ─────────────────────────────────────────────────── */
.logo-n1{font-size:18px;font-weight:900;color:var(--blue);letter-spacing:-.03em}
.logo-info{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-left:1px}

/* ── HAMBURGER / MOBILE MENU ─────────────────────────────── */
.mob-toggle{background:none;border:none;cursor:pointer;padding:8px;display:none;flex-direction:column;gap:5px;align-items:flex-end}
.mob-toggle span{display:block;height:2px;background:var(--ink-soft);border-radius:2px;transition:var(--t-base)}
.mob-toggle span:nth-child(1){width:22px}
.mob-toggle span:nth-child(2){width:22px}
.mob-toggle span:nth-child(3){width:14px}
.mob-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-toggle.open span:nth-child(2){opacity:0}
.mob-toggle.open span:nth-child(3){width:22px;transform:translateY(-7px) rotate(-45deg)}
.mob-menu{display:none;border-top:1px solid var(--border);padding:12px 20px 16px;flex-direction:column;gap:2px;background:var(--white)}
.mob-menu.open{display:flex}
.mob-menu a{font-size:15px;font-weight:500;color:var(--ink-soft);padding:10px 8px;border-radius:7px}
.mob-menu a:hover{background:var(--blue-light);color:var(--blue);text-decoration:none}

/* ── BUTTONS (page naming convention) ────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;font-size:15px;font-weight:700;padding:13px 24px;border-radius:var(--r-md);border:none;cursor:pointer;text-decoration:none;transition:var(--t-base);white-space:nowrap;box-shadow:0 4px 14px rgba(232,80,26,.28)}
.btn-primary:hover{background:var(--orange-dark);text-decoration:none;box-shadow:0 6px 20px rgba(232,80,26,.38)}
.btn-outline{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--blue);border:2px solid var(--blue);font-size:15px;font-weight:700;padding:11px 22px;border-radius:var(--r-md);cursor:pointer;text-decoration:none;transition:var(--t-base);white-space:nowrap}
.btn-outline:hover{background:var(--blue-light);text-decoration:none}
.btn-primary-sm{display:inline-flex;align-items:center;gap:5px;background:var(--orange);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--r-md);text-decoration:none;transition:var(--t-base);white-space:nowrap}
.btn-primary-sm:hover{background:var(--orange-dark);text-decoration:none}
.btn-outline-sm{display:inline-flex;align-items:center;gap:5px;color:var(--blue);border:1.5px solid #A8C0F0;background:transparent;font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--r-md);text-decoration:none;transition:var(--t-base);white-space:nowrap}
.btn-outline-sm:hover{background:var(--blue-light);text-decoration:none}
.btn-white{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;padding:13px 24px;border-radius:var(--r-md);text-decoration:none;transition:var(--t-base);white-space:nowrap}
.btn-white:hover{background:#f0f0f0;text-decoration:none}
.btn-outline-white{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);font-size:15px;font-weight:700;padding:11px 22px;border-radius:var(--r-md);text-decoration:none;transition:var(--t-base);white-space:nowrap}
.btn-outline-white:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* ── BADGES (inner page version) ─────────────────────────── */
.badge-blue{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--blue-light);color:var(--blue);border:1px solid #A8C0F0;padding:5px 12px;border-radius:var(--r-pill)}
.badge-orange{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--orange-light);color:var(--orange-dark);padding:5px 12px;border-radius:var(--r-pill)}

/* ── CHECK LIST ──────────────────────────────────────────── */
.check-list{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--ink-soft);line-height:1.5}
.check-list li::before{content:"✓";flex-shrink:0;width:20px;height:20px;background:var(--green-light);color:var(--green);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px;line-height:20px;text-align:center}

/* ── SERVICE INTRO 2-COL ─────────────────────────────────── */
.service-intro-grid{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:start}
.service-intro-body{}
.service-intro-aside{}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--sh-md);overflow:hidden;position:sticky;top:88px}
.aside-card-header{background:var(--blue);color:#fff;font-size:14px;font-weight:700;padding:14px 20px}
.aside-card-body{padding:20px;display:flex;flex-direction:column;gap:12px}
.aside-stat{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--bg);border-radius:var(--r-md)}
.aside-stat-val{font-size:1.5rem;font-weight:800;color:var(--blue);line-height:1}
.aside-stat-lbl{font-size:12px;color:var(--ink-ghost)}

/* ── CARDS GRID ──────────────────────────────────────────── */
.cards-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:10px;transition:var(--t-base)}
.card:hover{border-color:#A8C0F0;box-shadow:var(--sh-md);transform:translateY(-2px)}
.card-icon{font-size:2rem;line-height:1;margin-bottom:4px}
.card h3{font-size:16px;font-weight:700;color:var(--ink)}
.card p{font-size:14px;color:var(--ink-faint);margin-top:2px}
.price-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-light);border:1px solid #A8C0F0;padding:4px 10px;border-radius:var(--r-pill);margin-top:auto}

/* ── PROBLEM CARDS ───────────────────────────────────────── */
.prob-card{display:flex;align-items:flex-start;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-xs);transition:var(--t-base)}
.prob-card:hover{border-color:#A8C0F0;box-shadow:var(--sh-md);transform:translateY(-2px)}
.prob-icon{font-size:1.75rem;flex-shrink:0;line-height:1;margin-top:2px}
.prob-card strong{font-size:15px;font-weight:700;color:var(--ink);display:block;margin-bottom:4px}
.prob-card p{font-size:13px;color:var(--ink-faint);margin:0}

/* ── STEPS ───────────────────────────────────────────────── */
.steps-g{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:start;margin-top:1rem}
.step-item{text-align:center;padding:0 16px}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step-item h3{font-size:17px;font-weight:700;margin-bottom:8px}
.step-item p{font-size:14px;color:var(--ink-faint)}
.step-connector{width:60px;height:2px;background:linear-gradient(90deg,#A8C0F0,#D8E4FA);border-radius:2px;align-self:center;margin-top:-20px;flex-shrink:0}

/* ── PRICE TABLE ─────────────────────────────────────────── */
.price-table-wrap{overflow-x:auto}
.price-table{width:100%;border-collapse:collapse;font-size:14px}
.price-table thead th{background:var(--blue);color:#fff;padding:12px 16px;text-align:left;font-weight:700;font-size:13px}
.price-table tbody tr{border-bottom:1px solid var(--border)}
.price-table tbody tr:hover{background:var(--bg)}
.price-table td{padding:12px 16px;color:var(--ink-soft);vertical-align:top}
.price-table td:first-child{font-weight:600;color:var(--ink)}
.price-val{font-weight:800;color:var(--blue)!important;white-space:nowrap}

/* ── FAQ (page-level classes) ────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--white);border:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);text-align:left;gap:16px;transition:var(--t-fast)}
.faq-q:hover{background:var(--bg)}
.faq-icon{flex-shrink:0;font-size:20px;font-weight:300;color:var(--blue);transition:transform 300ms;line-height:1}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 18px}
.faq-a p{font-size:14px;color:var(--ink-faint);line-height:1.7;margin:0}
.faq-item.open .faq-a{display:block}

/* ── FOOTER (extended naming) ────────────────────────────── */
.ftr{}
.ftr-cta{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);padding:32px var(--gutter)}
.ftr-cta .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ftr-cta span{font-size:17px;font-weight:700;color:#fff}
.ftr-main{background:#0E1C2F;padding:52px var(--gutter) 28px}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07)}
.ftr-col{}
.ftr-col h4{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px}
.ftr-col a{display:block;font-size:13px;color:rgba(255,255,255,.5);padding:3px 0;transition:color 150ms}
.ftr-col a:hover{color:rgba(255,255,255,.9);text-decoration:none}
.ftr-col p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65}
.ftr-brand p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;margin:0}
.ftr-bot{padding:20px var(--gutter) 0}
.ftr-bot .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ftr-bot span{font-size:12px;color:rgba(255,255,255,.25)}
.ftr-bot a{color:rgba(255,255,255,.25)}

/* ── INK OPACITY ALIASES (mapped to design tokens) ──────── */
/* --ink80 → var(--ink-soft)  --ink60 → var(--ink-faint)  --ink40 → var(--ink-ghost) */
.text-ink60{color:var(--ink-faint)}

/* ── RESPONSIVE EXTENSIONS ───────────────────────────────── */
@media(max-width:1024px){
  .cards-g4{grid-template-columns:repeat(2,1fr)}
  .service-intro-grid{grid-template-columns:1fr;gap:40px}
  .aside-card{position:static}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:900px){
  .section{padding:60px 0}
  .mob-toggle{display:flex}
  .hdr-nav{display:none!important}
  .hdr-cta .btn-primary-sm{display:none!important}
  .hdr-cta .btn-outline-sm{padding:7px 10px;font-size:13px;white-space:nowrap}
  .steps-g{grid-template-columns:1fr;gap:24px}
  .step-connector{display:none}
}
@media(max-width:768px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:640px){
  .section{padding:48px 0}
  .cards-g4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-cta .container{flex-direction:column;text-align:center}
  .ftr-bot .container{flex-direction:column;text-align:center}
  .service-intro-grid{grid-template-columns:1fr}
}

/* ── DOWNLOAD PIATTAFORME (assistenza-remota-anydesk.html) ─── */
.os-ic{width:100%;height:100%;display:block;fill:currentColor}

/* Card del dispositivo riconosciuto: unico elemento con bordo accento della pagina */
.dl-hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  background:var(--white);border:2px solid var(--orange);border-radius:var(--r-2xl);padding:26px 28px;
  box-shadow:0 8px 28px rgba(232,80,26,.14);text-decoration:none;color:inherit;transition:var(--t-base)}
.dl-hero:hover{box-shadow:0 12px 36px rgba(232,80,26,.22);transform:translateY(-2px)}
.dl-hero:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dl-hero.is-generic{border:1px dashed var(--border-mid);box-shadow:none;background:var(--white)}
.dl-hero.is-generic:hover{transform:none;box-shadow:var(--sh-sm)}
.dl-pill{position:absolute;top:-13px;left:26px;background:var(--orange);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-pill);
  box-shadow:0 3px 10px rgba(232,80,26,.35)}
.dl-hero.is-generic .dl-pill{display:none}
.dl-hero-icon{width:76px;height:76px;padding:17px;border-radius:var(--r-xl);flex-shrink:0;
  background:var(--bg-subtle);color:var(--ink)}
.dl-hero-body{display:block;min-width:0}
.dl-hero-title{display:block;font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2}
.dl-hero-meta{display:block;font-size:14px;color:var(--ink-faint);margin-top:6px}
.dl-hero-btn{flex-shrink:0}

/* Elenco delle altre piattaforme: righe compatte, una riga = una piattaforma */
.dl-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.dl-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:var(--r-lg);padding:14px 18px;text-decoration:none;color:inherit;transition:var(--t-base)}
.dl-row:hover{border-color:var(--border-mid);border-left-color:var(--os,var(--blue));
  box-shadow:var(--sh-sm);transform:translateY(-1px)}
.dl-row:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.dl-row.is-you{border-color:var(--orange);border-left-color:var(--orange)}
.dl-row-icon{width:42px;height:42px;padding:9px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--bg-subtle);color:var(--os,var(--ink))}
@supports (background:color-mix(in srgb,red 10%,white)){
  .dl-row-icon{background:color-mix(in srgb,var(--os,#1A3F8F) 11%,#fff)}
}
.dl-row-body{display:block;min-width:0}
.dl-row-name{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.dl-row-meta{display:block;font-size:12.5px;color:var(--ink-ghost);margin-top:3px;line-height:1.35}
.dl-chip{font-size:11px;font-weight:600;color:var(--ink-faint);background:var(--bg-subtle);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.dl-row.is-you .dl-chip{background:var(--orange-light);border-color:var(--orange);color:var(--orange-dark)}
.dl-row-arrow{color:var(--ink-xg);transition:var(--t-fast);flex-shrink:0}
.dl-row:hover .dl-row-arrow{color:var(--ink-mid);transform:translateX(3px)}
.dl-note{font-size:13px;color:var(--ink-ghost);margin-top:22px;max-width:760px;line-height:1.6}

@media(max-width:900px){
  .dl-list{grid-template-columns:1fr}
  .dl-hero{grid-template-columns:auto 1fr;gap:14px 18px;padding:24px 20px}
  .dl-hero-icon{width:60px;height:60px;padding:13px}
  .dl-hero-btn{grid-column:1/-1;justify-content:center;margin-top:6px}
}
@media(max-width:480px){
  .dl-chip{display:none}
  .dl-row{gap:13px;padding:13px 15px}
}
@media(prefers-reduced-motion:reduce){
  .dl-hero,.dl-row,.dl-row-arrow{transition:none}
  .dl-hero:hover,.dl-row:hover{transform:none}
  .dl-row:hover .dl-row-arrow{transform:none}
}

/* ── PULSANTE ASSISTENZA REMOTA (header + menu mobile) ─────── */
/* Pillola blu: stessa grammatica del pulsante WhatsApp (verde), cosi' resta
   un'azione di servizio e non compete con la CTA arancione "Prenota ora". */
.hdr-remote{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--blue);background:var(--blue-light);border:1px solid #A8C0F0;padding:7px 13px;
  border-radius:8px;text-decoration:none;white-space:nowrap;transition:var(--t-base)}
.hdr-remote:hover{background:var(--blue-xlight);text-decoration:none}
.hdr-remote:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hdr-remote svg{flex-shrink:0}

.mob-menu .mob-remote{display:flex;align-items:center;gap:11px;margin-top:8px;padding:11px 12px;
  background:var(--blue-light);border:1px solid #A8C0F0;border-radius:8px;
  color:var(--blue);font-size:15px;font-weight:700;text-decoration:none}
.mob-menu .mob-remote:hover{background:var(--blue-xlight);color:var(--blue);text-decoration:none}
.mob-menu .mob-remote svg{flex-shrink:0}
.mob-menu .mob-remote small{display:block;font-size:12px;font-weight:500;
  color:var(--ink-faint);margin-top:2px;line-height:1.3}

/* Sotto i 900px header e nav spariscono: il pulsante vive nel menu mobile */
@media(max-width:900px){ .hdr-remote{display:none!important} }

/* Il pulsante in piu' satura l'header moderno tra 900 e 1100px (il legacy no,
   ha meno azioni). Sotto i 1100 la nav passa nell'hamburger: telefono, WhatsApp,
   assistenza remota e "Prenota ora" restano tutti visibili. */
@media(max-width:1100px){
  .hdr-in .hdr-nav{display:none!important}
  .hdr-ham{display:flex}
}

/* ── BANNER COOKIE ───────────────────────────────────────────
   Iniettato da tracking.js. Compare solo finché non c'è una scelta
   salvata; "Preferenze cookie" nel footer lo riapre. Niente GA4 e
   niente cookie finché non si accetta: vedi tracking.js.
   ─────────────────────────────────────────────────────────── */
.n1-cons{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  max-width:640px;margin:0 auto;padding:22px 24px;
  background:var(--white);border:1px solid var(--border-mid);
  border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  font-size:14px;line-height:1.55;color:var(--ink-soft);
  animation:n1-cons-up var(--t-slow) both;
}
@keyframes n1-cons-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.n1-cons{animation:none}}
.n1-cons h2{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px;line-height:1.35}
.n1-cons p{margin:0 0 16px;font-size:14px;color:var(--ink-soft)}
.n1-cons a{color:var(--blue);font-weight:600;text-decoration:underline}
.n1-cons-btns{display:flex;gap:10px;flex-wrap:wrap}
.n1-cons-btns .btn{flex:1 1 auto;justify-content:center;min-width:150px}
/* Rifiuta e Accetta hanno lo stesso peso visivo: un "rifiuta" nascosto
   o depotenziato non è un consenso libero (linee guida EDPB). */
.n1-cons-min{
  position:fixed;left:16px;bottom:16px;z-index:9998;
  width:38px;height:38px;border-radius:var(--r-pill);
  display:none;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border-mid);
  box-shadow:var(--sh-sm);color:var(--ink-ghost);cursor:pointer;
  transition:var(--t-base);
}
.n1-cons-min:hover{color:var(--ink);border-color:var(--border-mid);box-shadow:var(--sh-md)}
@media(max-width:560px){
  .n1-cons{left:10px;right:10px;bottom:10px;padding:18px 18px 20px}
  .n1-cons-btns .btn{flex:1 1 100%}
  /* Il controllo per riaprire le preferenze resta visibile anche su telefono:
     revocare il consenso deve essere facile quanto darlo, e su mobile prima
     restava solo il link nel footer. Sta in basso a SINISTRA, dalla parte
     opposta al pulsante WhatsApp (.wa-fab, in basso a destra). */
  .n1-cons-min{width:34px;height:34px;left:12px;bottom:12px}
}

/* ── MOVIMENTO (23/08/2026) ───────────────────────────────────
   Obiettivo: rendere la visita più viva senza far aspettare nessuno.
   Regole che questo blocco rispetta, e che vanno rispettate se si
   aggiunge qualcosa qui dentro:

   1. Si animano SOLO `opacity`, `translate`, `transform` e `scale`.
      Sono le uniche proprietà che il browser compone sulla GPU senza
      ricalcolare il layout: nessuno spostamento di contenuto, quindi
      nessun peggioramento del CLS (che è un fattore di ranking).
   2. Durate 150–560 ms. Sopra i 600 ms l'animazione smette di essere
      raffinatezza e diventa attesa.
   3. Ogni elemento si anima UNA volta sola. Niente effetti che
      ripartono a ogni scroll: dopo il secondo passaggio irritano.
   4. Si usa la proprietà `translate` (non `transform`) per l'entrata,
      così l'entrata e gli hover in `transform` già esistenti
      convivono senza sovrascriversi a vicenda.
   5. Gli stati "nascosti" valgono solo sotto `html.n1-js`, classe che
      `motion.js` conferma e che l'inline in <head> ritira da sé dopo
      1,5 s se lo script non è mai partito. Senza JS, o con JS rotto,
      la pagina resta esattamente quella di prima: nessun testo può
      restare invisibile per un guasto.
   6. `prefers-reduced-motion` spegne tutto, incluso lo scroll morbido.
      Non è cortesia: per chi soffre di disturbi vestibolari il
      movimento non richiesto è un sintomo, non un dettaglio estetico.
   ─────────────────────────────────────────────────────────── */

:root{
  --e-out:cubic-bezier(.22,.61,.36,1);   /* decelera: entrate    */
  --e-soft:cubic-bezier(.4,0,.2,1);      /* simmetrica: hover    */
  --m-rise:14px;                          /* quanto sale un blocco */
}

/* ── 1. Comparsa dei blocchi allo scorrimento ───────────────
   Lo stato nascosto è in CSS (non aggiunto dal JS) di proposito:
   se lo aggiungesse lo script, il browser dipingerebbe prima il
   contenuto visibile e poi lo nasconderebbe — uno sfarfallio.
   `motion.js` aggiunge solo `.n1-in`, mai lo stato nascosto.      */
/* `:where()` e non `:is()`: :where() vale specificità zero, quindi la
   regola qui sotto che scopre (`html.n1-js .n1-in`) riesce a batterla.
   Con :is() la specificità saliva a quella dell'argomento più pesante
   (`.page-banner .container>*`, due classi) e vinceva il nascondimento:
   i blocchi restavano invisibili per sempre. Verificato in Chrome. */
html.n1-js :where(.sh,.section-hd,.card,.prob-card,.price-card,.testi,
               .faq-item,.step-item,.zone-tag,
               .hero-grid>*,.service-intro-grid>*,.contact-grid>*,
               .page-banner .container>*){
  opacity:0;
  translate:0 var(--m-rise);
}
html.n1-js .n1-in{
  opacity:1;
  translate:none;
  transition:opacity 560ms var(--e-out),translate 560ms var(--e-out);
}

/* ── 2. Micro-interazioni sui pulsanti ──────────────────────
   Il pulsante si solleva all'hover e si riabbassa alla pressione:
   è la conferma tattile che il clic è stato ricevuto. Le ombre
   colorate erano già nel design system, qui si limitano a seguire. */
.btn,.btn-primary,.btn-outline,.btn-white,.btn-outline-white,
.btn-primary-sm,.btn-outline-sm,.btn-ghost,.btn-navy,.btn-accent,.btn-wa{
  transition:background 200ms var(--e-soft),color 200ms var(--e-soft),
             box-shadow 220ms var(--e-soft),transform 220ms var(--e-out);
}
.btn:hover,.btn-primary:hover,.btn-outline:hover,.btn-white:hover,
.btn-outline-white:hover,.btn-primary-sm:hover,.btn-outline-sm:hover,
.btn-ghost:hover,.btn-navy:hover,.btn-accent:hover,.btn-wa:hover{
  transform:translateY(-2px);
}
.btn:active,.btn-primary:active,.btn-outline:active,.btn-white:active,
.btn-outline-white:active,.btn-primary-sm:active,.btn-outline-sm:active,
.btn-ghost:active,.btn-navy:active,.btn-accent:active,.btn-wa:active{
  transform:translateY(0);
  transition-duration:70ms;
}

/* ── 3. Schede: l'icona respira insieme alla scheda ─────────
   Il sollevamento della scheda esisteva già; qui si aggiunge solo
   l'icona, che dà profondità al movimento senza inventarne uno nuovo. */
.card,.prob-card{transition:border-color 220ms var(--e-soft),
                            box-shadow 260ms var(--e-soft),
                            transform 260ms var(--e-out)}
.card .card-icon,.card .ib,.prob-card .ib{transition:transform 280ms var(--e-out)}
.card:hover .card-icon,.card:hover .ib,.prob-card:hover .ib{transform:scale(1.07)}

/* ── 4. Riquadri di zona e link del footer ──────────────────── */
.zone-tag{transition:color 160ms,border-color 160ms,background 160ms,
                     translate 200ms var(--e-out)}
.zone-tag:hover{color:var(--blue);border-color:#A8C0F0;translate:0 -2px}
.ftr-l,.ftr-col a{transition:color 160ms,translate 160ms var(--e-out)}
.ftr-l:hover,.ftr-col a:hover{color:rgba(255,255,255,.92);translate:3px 0}

/* ── 5. FAQ: la risposta scende invece di apparire di colpo ──
   Il JS di pagina commuta `display`, che non è animabile: si anima
   quindi la comparsa con un keyframe, che parte a ogni cambio di
   display. La chiusura resta istantanea, ed è corretto così:
   chi chiude ha già deciso e non vuole aspettare.                */
.faq-a.open,.faq-item.open .faq-a{animation:n1-faq-open 240ms var(--e-out) both}
@keyframes n1-faq-open{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}
.faq-q{transition:background 160ms var(--e-soft)}
.faq-q:hover{background:var(--bg-subtle)}

/* ── 6. Scheda servizi in home: dissolvenza fra un servizio e l'altro
   Il contenuto della scheda cambia da solo ogni 2,8 s. Prima il
   cambio era secco; `motion.js` marca l'elemento a ogni cambio e
   questo keyframe lo accompagna.                                  */
.n1-swap{animation:n1-swap-in 380ms var(--e-out) both}
@keyframes n1-swap-in{from{opacity:.35;translate:0 6px}to{opacity:1;translate:none}}

/* ── 7. Pulsante WhatsApp: entra, si fa notare due volte, poi tace
   È il canale di conversione principale insieme al telefono. Due
   pulsazioni a 3 s dall'apertura, poi basta: un elemento che pulsa
   all'infinito viene letto come pubblicità e ignorato.             */
html.n1-js .wa-fab{animation:n1-fab-in 420ms var(--e-out) 500ms both}
@keyframes n1-fab-in{from{opacity:0;scale:.7;translate:0 10px}
                     to{opacity:1;scale:1;translate:none}}
.wa-fab::after{content:'';position:absolute;inset:0;border-radius:50%;
  pointer-events:none;animation:n1-fab-ring 2.2s var(--e-soft) 3s 2}
@keyframes n1-fab-ring{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* ── 8. Focus da tastiera visibile ──────────────────────────
   Non è un'animazione ma appartiene alla stessa cura: senza un
   contorno esplicito chi naviga da tastiera non sa dove si trova.
   Arancione perché è l'unico colore leggibile sia sul bianco delle
   pagine sia sul blu del footer.                                  */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

/* ── 9. Interruttore generale per chi chiede meno movimento ─── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.n1-js :where(.sh,.section-hd,.card,.prob-card,.price-card,.testi,
                 .faq-item,.step-item,.zone-tag,
                 .hero-grid>*,.service-intro-grid>*,.contact-grid>*,
                 .page-banner .container>*){opacity:1;translate:none}
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}