/* ============================================================
   Categora Design System — Foundations
   Brand: Cosmobile srl · Product: Categora (PIM / Data Hub)
   Background is ALWAYS #FFFFFF. Never use dark/colored page bg.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Gilroy";
  src: url("assets/eef312a9-077f-493d-8e00-8900942cc03f.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/f6dd0f27-816a-4bbb-a394-218b14d36b58.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/293bf797-cf24-4056-84a7-8b22db81ad12.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/2f9a3455-04f6-464e-b419-4011783484d4.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/2da5b80c-fe4e-4898-8740-51888a151f43.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/b1c5562e-e912-4ab8-8aff-05de0fc1670c.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/6c12dd34-8cce-4453-9fb0-e811673f9eed.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/b61ddb1f-8071-4662-afd4-d3d3c3c4ece8.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/f90ac48d-02a8-4ed5-b410-e724edb45574.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ── Fixed brand palette (same across every Cosmobile site) ── */
  --ink:           #39464e;   /* primary text + lines + icons */
  --ink-2:         #5a6a73;   /* secondary text */
  --ink-3:         #8a949b;   /* tertiary / placeholder text */
  --accent:        #dddc01;   /* fixed accent — borders, dots, underlines, pill */
  --paper:         #ffffff;   /* page bg — NEVER override */
  --paper-2:       #fafbfb;   /* subtle alt section */
  --hairline:      #e7eaec;   /* dividers, card borders */
  --shadow-soft:   0 14px 38px -18px rgba(57,70,78,0.18);
  --shadow-card:   0 12px 24px -16px rgba(57,70,78,0.12);
  --shadow-press:  0 4px 10px -6px rgba(57,70,78,0.22);

  /* ── Per-site decorative gradient (Categora = pastel blue → mint → teal) ──
     Pastello, basso contrasto. Solo per cerchi decorativi, blob, dot,
     ombre colorate e band-promo. Mai su body text. Mai sullo sfondo pagina. */
  --grad-start:    #BFE1F2;   /* pastel sky */
  --grad-mid:      #CFECE2;   /* pastel mint */
  --grad-end:      #CAEBE8;   /* pastel aqua */
  --color-grad: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);
  --color-grad-band: linear-gradient(90deg, var(--grad-start) 0%, var(--grad-mid) 47%, var(--grad-end) 100%);
  --color-grad-soft: linear-gradient(135deg, #eaf5fb 0%, #eef8f4 100%);

  /* ── Radii — pill buttons are the signature ── */
  --r-pill:        999px;     /* primary CTAs */
  --r-button:      6px;       /* secondary nav button (legacy) */
  --r-card:        15px;      /* content cards */
  --r-tag:         6px;       /* tag/badge chip */

  /* ── Spacing ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Type scale (per brand spec) ── */
  --font-sans: "Gilroy", "Helvetica Neue", Arial, sans-serif;

  --h1-size: 60px;   --h1-line: 1.08 /* @kind other */;  --h1-weight: 700;
  --h2-size: 40px;   --h2-line: 1.15 /* @kind other */;  --h2-weight: 700;
  --h3-size: 24px;   --h3-line: 1.25 /* @kind other */;  --h3-weight: 600;
  --h4-size: 20px;   --h4-line: 1.3 /* @kind other */;   --h4-weight: 600;
  --body-size: 17px; --body-line: 1.65 /* @kind other */; --body-weight: 400;
  --small-size: 15px; --small-line: 1.55 /* @kind other */;
  --label-size: 12px; --label-line: 1.4 /* @kind other */; --label-weight: 600;
  --label-tracking: 0.08em;
}

/* ---------- Base / semantic ---------- */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-weight);
  color: var(--ink);
  margin: 0;
}
h4, .h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-weight);
  color: var(--ink);
  margin: 0;
}
p, .p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.small { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-2); }

.label, .eyebrow {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--accent);
}

/* ---------- Accent details ---------- */
.accent-dot  { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }

/* ---------- Bullet list ---------- */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bullet-list li {
  position: relative;
  padding-left: 38px;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--ink);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 26px;
  height: 26px;
  background: url("assets/a3c4988c-a7b4-4662-8523-3cc5eba04fc7.svg") no-repeat center / contain;
  transform: translateY(-50%);
}

/* ---------- Buttons (signature: pill, radius 50px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.032em;
  line-height: 1.25;
  padding: 18px 36px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .15s ease;
  white-space: nowrap;
  will-change: transform;
}
.btn-primary {
  background: var(--color-grad);
  color: #ffffff;
  box-shadow: 0 12px 28px -14px color-mix(in oklab, var(--grad-mid) 80%, black);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -16px color-mix(in oklab, var(--grad-mid) 80%, black); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-press); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-secondary:active { transform: translateY(1px); }

.btn-accent {
  background: var(--accent);
  color: var(--ink);
}
.btn-accent:hover { filter: brightness(0.96); }

.btn-ghost {
  background: transparent; color: var(--ink); padding: 14px 18px;
}
.btn-ghost:hover { color: color-mix(in oklab, var(--ink) 80%, black); }

.btn-sm  { padding: 12px 24px; font-size: 14px; }
.btn-lg  { padding: 22px 44px; font-size: 17px; }

/* ---------- Tag / badge ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-tag);
  background: var(--accent); color: var(--ink);
  letter-spacing: 0.02em;
}
.tag-outline {
  background: transparent; border: 1.5px solid var(--accent); color: var(--ink);
}

/* ---------- Card ---------- */
.card {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---------- Decorative dot grid (signature) ---------- */
.dot-grid {
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  color: color-mix(in oklab, var(--grad-mid) 60%, white);
  opacity: 0.55;
}

/* ---------- Decorative blob — soft feathered edge ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--grad-start) 45%, transparent) 0%,
    color-mix(in oklab, var(--grad-start) 32%, transparent) 18%,
    color-mix(in oklab, var(--grad-end)   18%, transparent) 40%,
    color-mix(in oklab, var(--grad-end)    7%, transparent) 65%,
    transparent 100%);
  pointer-events: none;
}
/* ===========================================================
     VISIQ — site-specific overrides on the Categora design system
     - Fixed palette unchanged: #39464e ink, #dddc01 accent
     - Decorative gradient: #D9F2DC → #E3EC83 (pale mint → pale lime)
     - Page bg: always white
     =========================================================== */
  :root {
    --grad-start: #D9F2DC;
    --grad-end:   #E3EC83;
    --color-grad:      linear-gradient(135deg, #D9F2DC 0%, #E3EC83 100%);
    --color-grad-band: linear-gradient(90deg,  #D9F2DC 0%, #E3EC83 100%);
    --color-grad-soft: linear-gradient(135deg, #ecf8ed 0%, #f3f7c6 100%);
  }
  /* Primary CTA — pale gradient with DARK ink text (white wouldn't read on this gradient) */
  .btn-primary{ background: var(--color-grad); color: var(--ink); box-shadow: 0 14px 30px -16px rgba(57,70,78,.28); }
  .btn-primary:hover{ background: linear-gradient(135deg,#cde9d2 0%,#dbe475 100%); }
  /* Solid-ink CTA, used in the final dark band */
  .btn-ink{ background: var(--ink); color:#fff; border-radius: var(--r-pill); padding: 18px 36px; font-weight:700; font-size:16px; letter-spacing:.032em; text-decoration:none; display:inline-flex; align-items:center; gap:10px;}
  .btn-ink:hover{ background:#2c3940; }

  *{box-sizing:border-box}
  body{margin:0; background:#fff; overflow-x:hidden;}
  a{color:inherit}
  img{display:block; max-width:100%;}

  /* Section layout */
  .wrap{ max-width:1280px; margin:0 auto; padding: 0 32px;}
  section{ padding: 96px 0; position:relative; }
  section.tight{ padding: 64px 0; }
  .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:inline-flex; flex-direction:row; align-items:center; gap:14px; }
  .eyebrow::before{ content:""; width:60px; height:18px; background: url("assets/77c99761-7f67-43e2-ac26-223a219d833f.svg") no-repeat left center / contain; display:block; flex:none; }
  .h-title{ font-size:48px; line-height:1.1; font-weight:700; color:var(--ink); margin: 18px 0 18px; letter-spacing:-.008em; text-wrap:balance; }
  .h-sub{ font-size:18px; line-height:1.65; color:var(--ink-2); max-width:680px; text-wrap:pretty;}
  .h-bullet::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:#dddc01; margin-right:14px; vertical-align:0.18em; }

  /* ===== One-page: section headers + anchored sections ===== */
  .op-section{ padding: 88px 0 72px; position:relative; scroll-margin-top: 100px; }
  .op-section.alt{ background: #fafbf3; }
  .op-head{ text-align:center; max-width: 760px; margin: 0 auto 8px; }
  .op-head .eyebrow{ justify-content:center; margin-bottom: 14px; }
  .op-head h2{ font-size: 40px; line-height:1.12; font-weight:700; color:var(--ink); margin:0 0 16px; letter-spacing:-.008em; text-wrap:balance; }
  .op-head h2 .em{ position:relative; display:inline-block; }
  .op-head h2 .em::before{ content:""; position:absolute; left:-14px; right:-14px; bottom:4px; height:14px; background:#dddc01; opacity:.85; z-index:-1; border-radius:3px;}
  .op-head p{ font-size:18px; line-height:1.65; color:var(--ink-2); margin:0; text-wrap:pretty;}
  .op-section .content-rows{ padding-top: 32px; padding-bottom: 0;}

  /* ============ NAV ============ */
  .nav{ position:sticky; top:0; z-index:50; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:84px; padding: 0 32px; max-width:1380px; margin:0 auto;}
  .nav-logo{ height:42px; }
  .nav-links{ display:flex; gap:32px; list-style:none; padding:0; margin:0;}
  .nav-links a{ text-decoration:none; color:var(--ink); font-weight:500; font-size:15px; opacity:.85; transition:opacity .15s ease;}
  .nav-links a:hover{ opacity:1; }
  .nav-cta{ display:flex; align-items:center; gap:14px;}

  /* ============ BAND PROMO ============ */
  .band-promo{ margin: 24px 32px 0; border-radius:10px; background: var(--color-grad-band); padding: 18px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; color:var(--ink); font-weight:500; box-shadow: 0 14px 38px -22px rgba(57,70,78,.18); }
  .band-promo strong{ font-weight:700; }
  .band-promo .cta-arrow{ font-weight:700; letter-spacing:.032em; display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);}

  /* ============ HERO ============ */
  .hero{ padding-top: 80px; padding-bottom: 96px; position:relative; overflow:hidden;}
  .hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap:64px; align-items:center;}
  .hero h1{ font-size:64px; line-height:1.05; font-weight:700; color:var(--ink); margin: 18px 0 22px; letter-spacing:-.012em; text-wrap:balance;}
  .hero h1 .em{ background: none; padding: 0; }
  .hero .lead{ font-size:19px; line-height:1.65; color:var(--ink-2); max-width:560px; margin-bottom: 36px; text-wrap:pretty;}
  .hero .ctas{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
  .hero .video-link{ display:inline-flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); text-decoration:none; }
  .hero .video-link .play{ width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
  .hero .video-link:hover .play{ background:#2c3940; transform:scale(1.04); transition: all .2s ease;}
  .hero-art{ position:relative;}
  .hero-art .blob-a{ position:absolute; width:420px; height:420px; border-radius:50%; background:var(--color-grad); filter: blur(60px); opacity:.55; right:-60px; top:-40px; z-index:0;}
  .hero-art img,
  .hero-art .config-anim{ position:relative; z-index:1; width:100%; max-width:600px; margin-left:auto; display:block;}
  .hero .dot-bg{ position:absolute; left:-60px; bottom:-40px; width:200px; height:200px; background-image: radial-gradient(rgba(57,70,78,.22) 1.5px, transparent 1.6px); background-size: 16px 16px; pointer-events:none; }

  /* ============ COME FUNZIONA — 3 steps ============ */
  .how{ background: linear-gradient(180deg, #fff 0%, #fafdfa 100%); }
  .how-head{ display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:end; margin-bottom: 56px;}
  .how-body{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;}
  .how-art{ display:flex; justify-content:center;}
  .how-art img{ max-width: 480px; width: 100%; }
  .steps{ display:flex; flex-direction:column; gap:20px;}
  .step{ background:#fff; border:1px solid var(--hairline); border-radius:15px; padding: 28px 32px; position:relative; transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
    opacity: 0; transform: translateY(24px); }
  .step.is-visible{ opacity: 1; transform: translateY(0);}
  .step:nth-child(2){ transition-delay: .12s; }
  .step:nth-child(3){ transition-delay: .24s; }
  .step:hover{ box-shadow: 0 22px 40px -22px rgba(57,70,78,.18);}
  .step .num{ font-size:44px; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing:-.02em; margin-bottom:14px; }
  .step h3{ font-size:22px; font-weight:700; color:var(--ink); margin: 0 0 10px; text-wrap:balance;}
  .step p{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0;}
  .step .dot{ position:absolute; top:28px; right:28px; width:10px; height:10px; border-radius:50%; background:#dddc01;}

  /* ============ FUNZIONALITÀ ============ */
  .features{ }
  .features-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-top: 48px;}
  .feature{ background:#fff; border-radius:15px; padding: 32px 28px; border:1px solid var(--hairline); position:relative; overflow:hidden;}
  .feature .icon-tile{ position:relative; width:78px; height:78px; margin-bottom: 22px; }
  .feature .icon-tile .base, .feature .icon-tile .accent{
    position:absolute; inset:0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .feature .icon-tile .base{
    background: linear-gradient(180deg, #6e7e8e 0%, #a6b1bd 100%);
  }
  .feature .icon-tile .accent{
    background: linear-gradient(180deg, #f1ef85 0%, #dddc01 100%);
    width: 38%; height: 38%;
    inset: auto;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .feature h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 10px;}
  .feature p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0;}
  .features-banner{ margin-top: 48px; background: var(--color-grad); border-radius:15px; padding: 36px 56px; display:grid; grid-template-columns: auto 1fr; gap: 36px; align-items:center;}
  .features-banner .banner-icon{ width: 132px; height: auto; display:block; flex:none;}
  .features-banner .quote{ font-size:20px; line-height:1.5; color:var(--ink); font-weight:400; text-wrap:pretty;}
  .features-banner .quote strong{ font-weight:700; display:block; margin-bottom: 10px; font-size:22px; }

  /* ============ VANTAGGI ============ */
  .benefits{ background: #fafbf3; position:relative; overflow:hidden;}
  .benefits .blob-b{ position:absolute; width:380px; height:380px; border-radius:50%; background:var(--color-grad); filter: blur(80px); opacity:.6; right:-80px; top:60px; pointer-events:none;}
  .benefits-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; position:relative; z-index:1;}
  .benefit{ background:#fff; border-radius:15px; padding: 32px 28px; box-shadow: 0 14px 30px -22px rgba(57,70,78,.15); transition: transform .2s ease;}
  .benefit:hover{ transform: translateY(-3px); }
  .benefit .marker{ width:42px; height:4px; background:#dddc01; border-radius:2px; margin-bottom: 22px;}
  .benefit h3{ font-size:20px; font-weight:700; color:var(--ink); margin:0 0 12px; line-height:1.3; text-wrap:balance;}
  .benefit p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0;}

  /* ============ SETTORI ============ */
  .sectors-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 56px; align-items:stretch;}
  .sectors-art{ position:relative; display:flex;}
  .sectors-art .frame{ background: var(--color-grad-soft); border-radius:20px; padding: 32px; position:relative; overflow:hidden; flex:1; display:flex; align-items:center; justify-content:center;}
  .sectors-art .frame img{ width:100%; height:100%; object-fit:cover; border-radius:12px;}
  .sectors-list{ display:flex; flex-direction:column; gap: 16px;}
  .sector{ display:grid; grid-template-columns: 56px 1fr; gap:20px; align-items:start; padding: 16px 0; border-bottom: 1px solid var(--hairline);}
  .sector:last-child{ border-bottom:none; }
  .sector .num{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.04em; padding-top:4px;}
  .sector h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 6px;}
  .sector p{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0;}
  .sectors-target{ margin-top: 64px; padding-top: 40px; border-top: 1px dashed var(--hairline); display:flex; align-items:center; justify-content:center; gap: 40px; flex-wrap:wrap; }
  .sectors-target .lbl{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2);}
  .sectors-target .who{ display:flex; align-items:center; gap:14px; font-size:18px; font-weight:600; color:var(--ink);}
  .sectors-target .who::before{ content:""; width:8px; height:8px; background:#dddc01; border-radius:50%; display:inline-block;}

  /* ============ INTEGRAZIONI ============ */
  .integrations{ background:#fff;}
  .integ-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 40px; max-width: 760px;}
  .integ-item{ display:flex; align-items:center; gap:14px; font-size:17px; color:var(--ink); padding: 14px 20px; background:#fafbfb; border-radius:10px;}
  .integ-item .check{ width:26px; height:26px; border-radius:50%; background:var(--color-grad); display:flex; align-items:center; justify-content:center; flex:none;}
  .integ-item .check svg{ width:14px; height:14px; stroke:var(--ink); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .integ-systems{ margin-top: 56px;}
  .integ-systems-lbl{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom: 28px;}
  .integ-systems-row{ display:flex; align-items:center; justify-content:flex-start; gap: 48px; flex-wrap:wrap; }
  .erp-logo{ display:inline-flex; align-items:center; height: 44px; }
  .erp-logo img{ height: 100%; width:auto; max-width: 200px; object-fit: contain; display:block; opacity:.78; transition: opacity .2s ease;}
  .erp-logo:hover img{ opacity:1; }

  /* ============ CLIENTI / TRUST BAR ============ */
  .clients{ background: #fafbf3; }
  .clients-grid{ display:grid; grid-template-columns: repeat(8, 1fr); gap: 32px; align-items:center; margin-top: 48px;}
  .clients-grid img{ width:100%; height: 40px; object-fit:contain; opacity:.78; transition: opacity .2s ease;}
  .clients-grid img:hover{ opacity:1; }

  /* ============ VIDEO ============ */
  .video{ }
  .video-frame{ margin-top: 48px; position:relative; aspect-ratio: 16 / 9; border-radius:20px; overflow:hidden; background:#0a0a0a; box-shadow: 0 30px 60px -30px rgba(57,70,78,.4);}
  .video-frame iframe, .video-frame img{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}
  .video-frame .play-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%); cursor:pointer;}
  .video-frame .play-overlay .btn-play{ width:88px; height:88px; border-radius:50%; background: var(--color-grad); display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 40px -10px rgba(0,0,0,.4);}
  .video-frame .play-overlay .btn-play svg{ width:30px; height:30px; fill:var(--ink); margin-left: 5px;}
  .video-caption{ margin-top: 24px; text-align:center; font-size: 16px; color:var(--ink-2); font-style: italic;}

  /* ============ FINAL CTA ============ */
  .final-cta{ padding: 0 0 96px;}
  .final-cta-inner{ background: linear-gradient(120deg, #51626b 0%, #6a7b84 100%); color:#fff; border-radius: 24px; padding: 64px 72px 0; position:relative; overflow:hidden; display:grid; grid-template-columns: 1fr auto; gap: 48px; align-items:end;}
  .final-cta-text{ position:relative; z-index:2; padding: 16px 0 64px;}
  .final-cta-img{ position:relative; z-index:2; width: 300px; height:auto; align-self:end; display:block; margin-bottom:-1px;}
  .final-cta-inner::before{ content:""; position:absolute; right:-220px; top:-180px; width:460px; height:460px; border-radius:50%; background: var(--color-grad); opacity:.22; filter: blur(40px);}
  .final-cta-inner::after{ content:""; position:absolute; left:-80px; bottom:-140px; width:280px; height:280px; border-radius:50%; background: var(--color-grad); opacity:.14; filter: blur(40px);}
  .final-cta-inner h2{ position:relative; z-index:2; font-size:48px; font-weight:700; line-height:1.05; color:#fff; margin: 0 0 22px; max-width: 640px; text-wrap:balance;}
  .final-cta-inner h2 .em{ background: #dddc01; padding: 2px 12px 4px; color:var(--ink); border-radius:4px;}
  .final-cta-inner p{ position:relative; z-index:2; font-size:18px; line-height:1.65; color: rgba(255,255,255,.85); max-width: 660px; margin: 0 0 36px;}
  .final-cta-inner .ctas{ position:relative; z-index:2; display:flex; gap: 20px; flex-wrap:wrap; align-items:center;}
  .btn-on-dark{ background:#dddc01; color:var(--ink); border-radius: var(--r-pill); padding: 18px 36px; font-weight:700; font-size:16px; letter-spacing:.032em; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition: transform .15s ease;}
  .btn-on-dark:hover{ transform: translateY(-1px); }
  .btn-ghost-on-dark{ background:transparent; color:#fff; border-radius: var(--r-pill); padding: 18px 36px; font-weight:700; font-size:16px; letter-spacing:.032em; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:2px solid rgba(255,255,255,.6);}
  .btn-ghost-on-dark:hover{ background:rgba(255,255,255,.1);}

  /* ============ FOOTER ============ */
  .footer{ background:#fff; padding: 64px 0 32px; border-top: 1px solid var(--hairline);}
  .footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--hairline);}
  .footer-brand img{ height: 44px; margin-bottom: 20px;}
  .footer-brand p{ font-size:15px; color:var(--ink-2); line-height:1.65; max-width: 320px;}
  .footer-col .footer-col-title{ font-size: 12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin: 0 0 18px;}
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px;}
  .footer-col a{ font-size:15px; color:var(--ink-2); text-decoration:none;}
  .footer-col a:hover{ color:var(--ink); }
  .footer-col address{ font-style:normal; font-size:15px; color:var(--ink-2); line-height: 1.7;}
  .footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top: 28px; font-size:13px; color:var(--ink-3); gap: 20px; flex-wrap:wrap;}

  /* Responsive */
  @media (max-width: 1100px){
    .hero-grid{ grid-template-columns: 1fr; gap: 48px;}
    .hero h1{ font-size: 48px;}
    .features-grid{ grid-template-columns: repeat(2, 1fr); }
    .benefits-grid{ grid-template-columns: repeat(2, 1fr); }
    .sectors-grid{ grid-template-columns: 1fr;}
    .clients-grid{ grid-template-columns: repeat(4, 1fr); }
    .footer-top{ grid-template-columns: 1fr 1fr;}
    .final-cta-inner{ padding: 48px; grid-template-columns: 1fr;}
    .final-cta-img{ display:none;}
    .final-cta-text{ padding: 0;}
    .final-cta-inner h2{ font-size: 36px;}
    .how-head{ grid-template-columns: 1fr;}
    .how-body{ grid-template-columns: 1fr;}
    .how-art img{ max-width: 360px;}
    .steps{ grid-template-columns: 1fr;}
    .nav-links{ display:none;}
    .h-title{ font-size: 36px;}
  }

  /* ============ PAGE-LEVEL (detail pages) — Paginae-style template ============ */
  .page-hero{
    padding: 0;
    position:relative;
    overflow:hidden;
    height: 460px;
    display:flex;
    align-items:center;
    background: #ffffff url("assets/4cd355c5-e8d1-46c0-bc66-0e38378fb926.png") no-repeat bottom center / 100% 100%;
  }
  .page-hero > .wrap{ width: 100%; }
  .page-hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center; position:relative; z-index:2;}
  .page-hero h1{ font-size: 54px; line-height: 1.06; font-weight:700; margin: 0 0 18px; letter-spacing:-.012em; text-wrap:balance; position:relative;}
  .page-hero h1 .em{ position: relative; display: inline-block; z-index:1; }
  .page-hero h1 .em::before{ content:""; position:absolute; left:-22px; top:-26px; width:86px; height:86px; border-radius:50%;
    background: radial-gradient(circle, rgba(227,236,131,.55) 0%, rgba(217,242,220,.32) 50%, transparent 80%);
    z-index:-1;}
  .page-hero .lead{ font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 520px; text-wrap:pretty;}
  .page-hero-art{ position:relative;}
  .page-hero-art img{ width: auto; max-width: 380px; max-height: 340px; margin-left: auto; margin-right: 0; display:block; position:relative; z-index:2; object-fit: contain;}
  /* Soft mask backdrop — overlapping translucent ovals using Visiq gradient colors */
  .page-hero-mask{ display:none; }
  .page-hero-mask::before,
  .page-hero-mask::after,
  .page-hero-mask > span{
    content:""; position:absolute; border-radius:50%;
    pointer-events:none;
  }
  /* Left blob — tall pale mint #D9F2DC, extends DOWN past the section */
  .page-hero-mask::before{
    left: -80px; bottom: -160px;
    width: 300px; height: 460px;
    background: radial-gradient(ellipse at 50% 40%,
      rgba(217,242,220,.78) 0%,
      rgba(217,242,220,.50) 35%,
      rgba(217,242,220,.20) 65%,
      transparent 90%);
  }
  /* Center blob — teal #57b3a4 */
  .page-hero-mask::after{
    left: 48%; bottom: 30px;
    width: 360px; height: 260px;
    background: radial-gradient(ellipse at center,
      rgba(87,179,164,.40) 0%,
      rgba(87,179,164,.22) 35%,
      rgba(87,179,164,.08) 65%,
      transparent 90%);
  }
  /* Right blob — pale lime #E3EC83 + teal hybrid */
  .page-hero-mask > span.blob-right{
    right: -100px; bottom: 20px;
    width: 360px; height: 280px;
    background: radial-gradient(ellipse at center,
      rgba(87,179,164,.32) 0%,
      rgba(227,236,131,.22) 40%,
      rgba(227,236,131,.08) 70%,
      transparent 95%);
  }
  /* Small center-low blob */
  .page-hero-mask > span.blob-low{
    left: 36%; bottom: -50px;
    width: 240px; height: 160px;
    background: radial-gradient(ellipse at center,
      rgba(227,236,131,.25) 0%,
      rgba(217,242,220,.15) 50%,
      transparent 90%);
  }
  /* Subtle bottom trapezoid separator */
  .page-hero-mask > span.bottom-shade{
    left: 5%; right: 5%; bottom: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(57,70,78,.08) 50%, transparent 100%);
    border-radius: 0;
  }
  .breadcrumb{ font-size:13px; color: var(--ink-3); display:inline-flex; gap:8px; align-items:center; margin-bottom: 8px;}
  .breadcrumb a{ color: var(--ink-3); text-decoration:none;}
  .breadcrumb a:hover{ color: var(--ink);}
  .breadcrumb .sep{ opacity:.5;}
  .breadcrumb .current{ color: var(--ink); font-weight:600;}

  /* nav active state */
  .nav-links a.is-active{ color: var(--ink); opacity:1; position:relative;}
  .nav-links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:3px; background:#dddc01; border-radius:2px;}

  /* alternating content rows */
  .content-rows{ padding: 24px 0 96px;}
  .content-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; padding: 36px 0;
    opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease;}
  .content-row.is-visible{ opacity:1; transform:translateY(0);}
  .content-row-art{ display:flex; justify-content:center; align-items:center;}
  .content-row-art img{ max-width: 460px; width: 100%; height:auto; display:block;}
  .content-row-text{ padding: 0 16px;}
  .content-row-text .row-eyebrow{ display:inline-flex; align-items:center; gap: 12px; margin-bottom: 14px;
    font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);}
  .content-row-text .row-eyebrow::before{ content:""; width:50px; height:16px;
    background: url("assets/77c99761-7f67-43e2-ac26-223a219d833f.svg") no-repeat left center / contain; display:block; flex:none;}
  .content-row-text h3{ font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0 0 14px; text-wrap: balance;}
  .content-row-text p{ font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 480px;}
  .content-row.reverse > .content-row-text{ order: -1; }

  /* Bottom CTA strip (above footer) */
  .bottom-cta{ padding: 0 0 96px;}
  .bottom-cta-inner{ background: var(--color-grad-band); border-radius: 10px; padding: 36px 56px;
    display:grid; grid-template-columns: 1fr auto; gap: 32px; align-items:center;}
  .bottom-cta h3{ font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 6px; text-wrap: balance;}
  .bottom-cta p{ font-size: 16px; color: var(--ink); margin: 0; opacity: .9;}
  .bottom-cta a.btn-cta{ display:inline-flex; align-items:center; gap:10px;
    background: var(--ink); color: #fff;
    padding: 16px 32px; border-radius: var(--r-pill);
    font-weight:700; font-size:15px; letter-spacing:.032em;
    text-decoration:none; white-space:nowrap;
    transition: background .2s ease;}
  .bottom-cta a.btn-cta:hover{ background: #2c3940; }

  /* page-hero copy on the bullet-list svg path: relative to page root, not assets/ */
  .content-row-text .row-eyebrow::before{ background-image: url("assets/77c99761-7f67-43e2-ac26-223a219d833f.svg"); }

  @media (max-width: 1100px){
    .page-hero-grid{ grid-template-columns: 1fr; gap: 36px;}
    .page-hero h1{ font-size: 36px;}
    .page-hero-art img{ max-width: 280px; margin: 0 auto;}
    .content-row, .content-row.reverse{ grid-template-columns: 1fr; gap: 24px; padding: 24px 0;}
    .content-row.reverse > .content-row-text{ order: 0;}
    .content-row-text{ padding: 0;}
    .bottom-cta-inner{ grid-template-columns: 1fr; padding: 28px;}
  }
html{ scroll-behavior: smooth; }
  /* offset for sticky nav (84px) + a little air so headings aren't hidden */
  .how, .features, .benefits, .sectors, .integrations, .clients, .video, .final-cta{ scroll-margin-top: 96px; }
  #top{ scroll-margin-top: 0; }
  .nav-links a.is-active{ color: var(--ink); opacity:1; position:relative; }
  .nav-links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:3px; background:#dddc01; border-radius:2px; }
.vq-modal[hidden]{display:none}
.vq-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.vq-modal__overlay{position:absolute;inset:0;background:rgba(40,52,59,.55)}
.vq-modal__card{position:relative;background:#fff;border-radius:20px;max-width:440px;width:100%;padding:40px 32px 32px;text-align:center;box-shadow:0 30px 60px -20px rgba(57,70,78,.4);animation:vqpop .25s ease}
@keyframes vqpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.vq-modal__icon{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.vq-modal__card .vq-modal__title{font-size:26px;font-weight:700;color:#39464e;margin:0 0 10px;letter-spacing:-.01em}
.vq-modal__card p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 24px}
.vq-modal__btn{background:var(--ink);color:#fff;border:0;border-radius:50px;font-weight:600;font-size:16px;padding:14px 34px;cursor:pointer}
.vq-modal__btn:hover{background:#2c3940}
.vq-modal__x{position:absolute;top:12px;right:16px;background:none;border:0;font-size:28px;line-height:1;color:#9aa4a9;cursor:pointer}
@media (prefers-reduced-motion:reduce){.vq-modal__card{animation:none}}
.config-anim text { font-family: Gilroy, 'Helvetica Neue', Arial, sans-serif; }
              /* Option chips activate yellow at staggered times — 8s loop */
              .chip-1 { animation: chip1 8s infinite; }
              .chip-2 { animation: chip2 8s infinite; }
              .chip-3 { animation: chip3 8s infinite; transform-origin: left center; }
              @keyframes chip1 { 0%, 6% { fill:#eef1f4; } 10%, 92% { fill:#dddc01; } 96%, 100% { fill:#eef1f4; } }
              @keyframes chip2 { 0%, 18% { fill:#eef1f4; } 22%, 92% { fill:#dddc01; } 96%, 100% { fill:#eef1f4; } }
              @keyframes chip3 { 0%, 30% { transform: scaleX(0); } 34%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
              .chip-3-text { animation: chip3text 8s infinite; }
              @keyframes chip3text { 0%, 32% { opacity:0; } 36%, 95% { opacity:1; } 100% { opacity:0; } }
              /* quantity number swaps */
              .qty-1 { animation: qty1 8s infinite; }
              .qty-2 { animation: qty2 8s infinite; }
              .qty-3 { animation: qty3 8s infinite; }
              @keyframes qty1 { 0%, 42% { opacity:1; } 44%, 100% { opacity:0; } }
              @keyframes qty2 { 0%, 43% { opacity:0; } 45%, 54% { opacity:1; } 56%, 100% { opacity:0; } }
              @keyframes qty3 { 0%, 55% { opacity:0; } 57%, 95% { opacity:1; } 100% { opacity:0; } }
              /* price ticks up */
              .price-0 { animation: p0 8s infinite; }
              .price-1 { animation: p1 8s infinite; }
              .price-2 { animation: p2 8s infinite; }
              .price-3 { animation: p3 8s infinite; }
              .price-4 { animation: p4 8s infinite; }
              @keyframes p0 { 0%, 5% { opacity:1; } 8%, 100% { opacity:0; } }
              @keyframes p1 { 0%, 6% { opacity:0; } 9%, 17% { opacity:1; } 20%, 100% { opacity:0; } }
              @keyframes p2 { 0%, 18% { opacity:0; } 21%, 29% { opacity:1; } 32%, 100% { opacity:0; } }
              @keyframes p3 { 0%, 30% { opacity:0; } 33%, 42% { opacity:1; } 45%, 100% { opacity:0; } }
              @keyframes p4 { 0%, 43% { opacity:0; } 46%, 95% { opacity:1; } 100% { opacity:0; } }
              /* product parts fill yellow */
              .part-1 { animation: part1 8s infinite; }
              .part-2 { animation: part2 8s infinite; }
              .part-3 { animation: part3 8s infinite; }
              .bulb-on { animation: bulb 8s infinite; }
              @keyframes part1 { 0%, 6% { fill:#7d8a99; } 12%, 95% { fill:url(#yellowGrad); } 100% { fill:#7d8a99; } }
              @keyframes part2 { 0%, 18% { fill:#7d8a99; } 24%, 95% { fill:url(#yellowGrad); } 100% { fill:#7d8a99; } }
              @keyframes part3 { 0%, 30% { fill:#7d8a99; } 36%, 95% { fill:url(#yellowGrad); } 100% { fill:#7d8a99; } }
              @keyframes bulb { 0%, 50% { opacity:0; } 56%, 92% { opacity:1; } 96%, 100% { opacity:0; } }
              .beam { animation: beam 8s infinite; transform-origin: 90px 100px; }
              @keyframes beam { 0%, 55% { opacity:0; transform:scaleY(0.4); } 62%, 92% { opacity:0.65; transform:scaleY(1); } 96%, 100% { opacity:0; transform:scaleY(0.4); } }
              /* CTA pulses yellow at end */
              .cta-fill { animation: ctaFill 8s infinite; transform-origin: center; }
              .cta-text { animation: ctaText 8s infinite; }
              @keyframes ctaFill { 0%, 65% { opacity:0; transform:scale(1); } 72%, 88% { opacity:1; transform:scale(1.02); } 94%, 100% { opacity:0; transform:scale(1); } }
              @keyframes ctaText { 0%, 65% { fill:#fff; } 72%, 88% { fill:#39464e; } 94%, 100% { fill:#fff; } }
              /* cursor pointer animates between options */
              .cursor { animation: cursor 8s infinite; }
              @keyframes cursor {
                0%      { transform: translate(120px, 130px); opacity:0; }
                4%      { transform: translate(120px, 130px); opacity:1; }
                12%     { transform: translate(120px, 130px); opacity:1; }
                16%     { transform: translate(106px, 190px); opacity:1; }
                24%     { transform: translate(106px, 190px); opacity:1; }
                28%     { transform: translate(160px, 252px); opacity:1; }
                36%     { transform: translate(160px, 252px); opacity:1; }
                40%     { transform: translate(160px, 314px); opacity:1; }
                52%     { transform: translate(160px, 314px); opacity:1; }
                58%     { transform: translate(380px, 380px); opacity:1; }
                70%     { transform: translate(380px, 380px); opacity:1; }
                76%, 95% { opacity:0; }
                100%    { transform: translate(120px, 130px); opacity:0; }
              }
.contact{ background: var(--paper-2); }
  .contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:start; }
  .contact-intro h2{ font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); color:var(--ink); margin: 18px 0 20px; letter-spacing:-.012em; text-wrap:balance; }
  .contact-intro p{ font-size:18px; line-height:1.65; color:var(--ink-2); max-width: 440px; margin:0; }
  .contact-meta{ margin-top:32px; display:flex; flex-direction:column; gap:16px; }
  .contact-meta a, .contact-meta span{ font-size:16px; color:var(--ink); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:12px; }
  .contact-meta .ico{ width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--hairline); display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .contact-meta .ico span{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
  .contact-form{ background:#fff; border:1px solid var(--hairline); border-radius:24px; padding:40px; box-shadow: 0 14px 38px -12px rgba(57,70,78,.12); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
  .field label{ font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.01em; }
  .field .req, .consent .req{ color:var(--ink-3); }
  .contact-form input, .contact-form textarea{ box-sizing:border-box; font-family: var(--font-sans); font-size:16px; color:var(--ink); background:var(--paper-2); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; width:100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-3); }
  .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow: 0 0 0 4px rgba(221,220,1,.18); }
  .contact-form textarea{ resize:vertical; min-height:120px; }
  .consent{ display:flex; align-items:flex-start; gap:12px; margin: 4px 0 26px; cursor:pointer; }
  .consent input{ width:20px; height:20px; flex:none; margin-top:1px; accent-color: var(--ink); }
  .consent span{ font-size:14px; line-height:1.5; color:var(--ink-2); }
  .consent a{ color:var(--ink); text-decoration:underline; }
  .contact-submit{ border:0; cursor:pointer; font-family:var(--font-sans); }
  .contact-submit:hover{ background:#2c3940; }
  @media (max-width: 900px){
    .contact-grid{ grid-template-columns:1fr; gap:40px; }
    .field-row{ grid-template-columns:1fr; gap:0; }
    .contact-form{ padding:28px; }
  }
/* Mobile: collassa le griglie a colonne multiple per evitare overflow orizzontale */
@media (max-width: 640px){
  .benefits-grid,
  .features-grid{ grid-template-columns: 1fr; }
  .clients-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr; }
}
/* Larghezza massima coerente per header e band-promo */
.nav-inner{ max-width: 1920px; }
.band-promo{ width: calc(100% - 64px); max-width: 1920px; margin-left: auto; margin-right: auto; }
/* Nasconde la band-promo sotto lo scalino dei 1100px */
@media (max-width: 1100px){ .band-promo{ display: none; } }
/* Sotto i 1100px: nasconde l'icona del features-banner, citazione a piena larghezza */
@media (max-width: 1100px){
  .features-banner .banner-icon{ display: none; }
  .features-banner{ grid-template-columns: 1fr; }
}
/* Il blob sfumato deve stare dietro al contenuto della sezione benefits */
.benefits .blob-b{ z-index: 0; }
.benefits .wrap{ position: relative; z-index: 1; }
/* Integrazioni: layout a 2 colonne, collassa su mobile */
.integrations-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
@media (max-width: 1100px){
  .integrations-grid{ grid-template-columns: 1fr; gap: 40px; }
  .integ-list{ grid-template-columns: 1fr; }
}