/* ============================================================
   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/gilroy-light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-regular-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-bold-italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-extrabold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/gilroy-black.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 */

  /* ── Layout widths ── */
  --header-max-w:  1920px;    /* header is fluid (follows the screen) and capped at the 1920px design canvas, then centred */

  /* ── 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/bullet-check.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;
}

/* ---------- Header / top nav ---------- */
/* The site header is FLUID: it follows the screen width at 100% and is
   capped at the 1920px design canvas, then centred. Both the header bar
   AND its inner content column scale with the viewport up to that max —
   the content is held off the edges with horizontal padding rather than a
   narrower fixed column, so the header always "follows the screen".
   Token: --header-max-w (1920px). */
.site-header,
header.nav {
  width: 100%;
  max-width: var(--header-max-w);
  margin-inline: auto;
}
/* Inner content row: same fluid-up-to-1920px behaviour, padded off edges. */
.site-header > .nav-inner,
header.nav > .nav-inner {
  max-width: var(--header-max-w);
}

/* ===========================================================
   MED TRAVEL — site-specific theme on the Cosmobile design system
   - Fixed palette unchanged: #39464e ink, #dddc01 accent (matches logo)
   - Decorative gradient: pale mint → aqua (clinical / medicale)
   - Page bg: always white
   =========================================================== */
:root{
  --grad-start: #e3f6f8;
  --grad-mid:   #f4f6ec;
  --grad-end:   #dddc01;
  --color-grad:      linear-gradient(135deg, #e3f6f8 0%, #f4f6ec 52%, #dddc01 145%);
  --color-grad-band: linear-gradient(120deg, #e3f6f8 0%, #f4f6ec 52%, #dddc01 140%);
  --color-grad-soft: linear-gradient(135deg,#eef9f9 0%,#f7f8ee 60%,#f6f4dc 100%);
  --teal-deep: #3f8f8f;
}
/* Primary CTA — pale gradient with DARK ink text */
.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,#d7eff1 0%,#f0f2e0 52%,#cdcc00 140%); }

*{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; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:14px; }
.eyebrow::before{ content:""; width:60px; height:18px; background:url("assets/eyebrow-rule.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; 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;}
.section-intro{ max-width:760px; }
.section-intro.center{ margin:0 auto; text-align:center; }
.section-intro.center .eyebrow{ justify-content:center; }

/* ===== NAV ===== */
.nav{ position:sticky; top:0; z-index:50; max-width:var(--header-max-w,1920px); margin-inline:auto; 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 48px; max-width:var(--header-max-w,1920px); margin:0 auto;}
.nav-logo{ height:40px; width:auto; }
.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-links a.is-active{ 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;}
.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); white-space:nowrap;}

/* ===== 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:62px; 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:580px; margin-bottom:36px; text-wrap:pretty;}
.hero .ctas{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.hero .ctas .text-link{ display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); text-decoration:none; font-size:15px; letter-spacing:.02em; transition:gap .2s ease; }
.hero .ctas .text-link:hover{ gap:14px; }
.hero .ctas .text-link .dot{ width:36px; height:36px; border-radius:50%; background:var(--color-grad); display:inline-flex; align-items:center; justify-content:center; }
.hero .ctas .text-link .dot svg{ width:15px; height:15px; fill:var(--ink); }
.hero-art{ position:relative;}
.hero-art .blob-a{ position:absolute; width:440px; height:440px; border-radius:50%; background:var(--color-grad); filter:blur(60px); opacity:.6; right:-60px; top:-40px; z-index:0;}
.hero-art .device{ position:relative; z-index:1; margin-left:auto;}
.hero-art .hero-shot{ max-width:600px; }
.hero-art .hero-shot img{ width:100%; height:auto; border-radius:18px; box-shadow:0 36px 70px -34px rgba(57,70,78,.45); display:block; }
.hero .dot-bg{ position:absolute; left:-50px; bottom:-30px; width:200px; height:200px; background-image:radial-gradient(rgba(57,70,78,.20) 1.5px,transparent 1.6px); background-size:16px 16px; pointer-events:none; }

/* Hero illustration (static) */
.hero-illu{ position:relative; z-index:1; width:100%; max-width:600px; margin-left:auto; }
.hero-illu img{ width:100%; height:auto; display:block; filter:drop-shadow(0 30px 50px rgba(57,70,78,.12)); }

/* ===== DEVICE / SCREENSHOT PLACEHOLDER (iPad-style) ===== */
.device{ width:100%; max-width:560px; }
.device .tablet{ background:#39464e; border-radius:30px; padding:16px; box-shadow:0 36px 70px -34px rgba(57,70,78,.5); }
.device .screen{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:#eef3f4; }
.device .screen > img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(135deg, rgba(63,143,143,.07) 0 11px, rgba(63,143,143,0) 11px 22px),
    var(--color-grad-soft); }
.shot-ph .ph-ic{ width:48px; height:48px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(57,70,78,.25);}
.shot-ph .ph-ic svg{ width:24px; height:24px; stroke:var(--teal-deep); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.shot-ph .ph-label{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:12px; font-weight:600; color:var(--teal-deep); letter-spacing:.02em; }
.shot-ph .ph-hint{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:10.5px; color:var(--ink-3); max-width:240px; line-height:1.5;}

/* ===== A CHI SERVE / USE CASES ===== */
.usecases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.usecase{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--hairline); border-radius:15px; padding:30px 30px 32px; transition:box-shadow .2s ease, transform .2s ease;}
.usecase:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -22px rgba(57,70,78,.16);}
.usecase .uc-ico{ width:52px; height:52px; border-radius:13px; background:var(--color-grad); display:flex; align-items:center; justify-content:center; flex:none;}
.usecase .uc-ico svg{ width:26px; height:26px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.usecase h4{ font-size:19px; font-weight:700; color:var(--ink); margin:0 0 8px;}
.usecase p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0;}

/* ===== FUNZIONALITÀ ===== */
.features-grid{ display:grid; grid-template-columns:repeat(3,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:74px; height:74px; margin-bottom:22px; border-radius:18px; background:linear-gradient(155deg,#f4f6f7 0%,#e7ebed 100%); display:flex; align-items:center; justify-content:center; overflow:visible; }
.feature .icon-tile .glyph{ width:38px; height:38px; display:block; }
.feature .icon-tile .glyph svg{ width:100%; height:100%; display:block; stroke:#51626b; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feature .icon-tile .badge{ position:absolute; right:-6px; bottom:-6px; width:30px; height:30px; border-radius:50%; background:linear-gradient(165deg,#f1ef85 0%,#dddc01 100%); display:flex; align-items:center; justify-content:center; border:2.5px solid #fff; box-shadow:0 5px 12px -3px rgba(57,70,78,.30); }
.feature .icon-tile .badge svg{ width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.feature h4{ 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;}

/* ===== SHOWCASE (image rows) ===== */
.showcase{ background:linear-gradient(180deg,#fff 0%,#fafdfd 100%); }
.showcase-rows{ margin-top:56px; display:flex; flex-direction:column; gap:16px;}
.showcase-row{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; padding:36px 0;
  opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
.showcase-row.is-visible{ opacity:1; transform:none;}
.showcase-row.reverse .showcase-text{ order:-1;}
.showcase-art{ position:relative; display:flex; justify-content:center; align-items:center; min-height:280px;}
.showcase-art .glow{ position:absolute; left:12%; top:14%; width:76%; height:72%; border-radius:50%; background:var(--color-grad); filter:blur(60px); opacity:.55; z-index:0;}
.showcase-art img{ position:relative; z-index:1; width:100%; max-width:480px; height:auto; display:block; border-radius:16px; filter:drop-shadow(0 26px 50px rgba(57,70,78,.18)); }
.showcase-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);}
.showcase-text .row-eyebrow::before{ content:""; width:50px; height:16px; background:url("assets/eyebrow-rule.svg") no-repeat left center / contain; display:block; flex:none;}
.showcase-text h3{ font-size:30px; line-height:1.18; font-weight:700; color:var(--ink); margin:0 0 14px; letter-spacing:-.01em; text-wrap:balance;}
.showcase-text p{ font-size:17px; line-height:1.65; color:var(--ink-2); margin:0 0 20px; max-width:520px; text-wrap:pretty;}
.showcase-text .mini{ display:flex; flex-wrap:wrap; gap:10px;}
.showcase-text .mini span{ font-size:13px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--hairline); border-radius:999px; padding:8px 15px;}

/* ===== VANTAGGI ===== */
.benefits{ background:#f7fbfa; 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(4,1fr); gap:20px; margin-top:56px; position:relative; z-index:1;}
.benefit{ background:#fff; border-radius:15px; padding:30px 26px; 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 h4{ font-size:19px; 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;}

/* ===== INTEGRAZIONI ===== */
.integrations{ background:#fff;}
.integ-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.integ-list{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px;}
.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:grid; grid-template-columns: repeat(3, 1fr); gap:28px 20px; align-items:center; justify-items:center; }
.erp-logo{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:96px; padding:12px 16px; }
.erp-logo img{ max-height:44px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; opacity:.78; transition:opacity .2s ease;}
.integ-systems-row .erp-logo:nth-child(-n+3) img{ max-height:82px; }
.integ-systems-row .erp-logo:nth-child(5) img{ max-height:72px; }
.erp-logo:hover img{ opacity:1; }

/* ===== FINAL CTA ===== */
.final-cta{ padding:0 0 96px;}
.final-cta-inner{ background:linear-gradient(120deg,#3f5a5c 0%,#557375 100%); color:#fff; border-radius:24px; padding:60px 64px; position:relative; overflow:hidden; display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center;}
.final-cta-inner::before{ content:""; position:absolute; right:-220px; top:-180px; width:460px; height:460px; border-radius:50%; background:var(--color-grad); opacity:.24; 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:.16; filter:blur(40px);}
.final-cta-text{ position:relative; z-index:2; max-width:760px;}
.final-cta-img{ position:relative; z-index:2; width:100%; height:auto; border-radius:14px; }
.final-cta-inner h2{ font-size:46px; font-weight:700; line-height:1.06; color:#fff; margin:0 0 22px; text-wrap:balance;}
.final-cta-inner h2 .em{ background:#dddc01; padding:2px 12px 4px; color:var(--ink); border-radius:4px;}
.final-cta-inner p{ font-size:18px; line-height:1.65; color:rgba(255,255,255,.85); max-width:640px; margin:0 0 36px;}
.final-cta-inner .ctas{ 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);}

/* ===== FAQ ===== */
.faq-list{ margin-top:48px; max-width:900px; border-top:1px solid var(--hairline);}
.faq-item{ border-bottom:1px solid var(--hairline);}
.faq-item summary{ cursor:pointer; list-style:none; padding:26px 0; font-size:20px; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; gap:28px; align-items:center; text-wrap:balance;}
.faq-item summary::-webkit-details-marker{ display:none;}
.faq-item summary::marker{ content:"";}
.faq-item .chev{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--color-grad); display:flex; align-items:center; justify-content:center; transition:transform .25s ease;}
.faq-item .chev::before{ content:""; width:10px; height:10px; border-right:2.4px solid var(--ink); border-bottom:2.4px solid var(--ink); transform:rotate(45deg); margin-top:-3px;}
.faq-item[open] .chev{ transform:rotate(180deg);}
.faq-item .ans{ padding:0 0 28px; font-size:16px; line-height:1.7; color:var(--ink-2); max-width:820px; text-wrap:pretty;}
.faq-item .ans strong{ color:var(--ink); font-weight:700;}

/* ===== 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:42px; width:auto; margin-bottom:20px;}
.footer-brand p{ font-size:15px; color:var(--ink-2); line-height:1.65; max-width:340px;}
.powered-by{ display:flex; align-items:center; gap:12px; margin-top:22px;}
.powered-by span{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2);}
.powered-by img{ height:22px; width:auto; display:block; margin:0;}
.footer-col h6{ 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;}

/* ===== HERO — overlay animato (flussi dati + icone medicali) ===== */
.hero-illu{ overflow:visible; }
.hero-fx{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Flussi di dati: scie di punti che convergono verso il pin centrale */
.fx-stream{ position:absolute; left:50%; top:46%; width:0; height:0; }
.fx-stream i{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:#dddc01; box-shadow:0 0 0 4px rgba(221,220,1,.16);
  opacity:0; transform:translate(var(--fx,0px), var(--fy,0px)) scale(.4);
  animation:fxFlow 3.4s cubic-bezier(.45,.02,.5,1) infinite;
}
.fx-stream i:nth-child(2){ animation-delay:1.13s; }
.fx-stream i:nth-child(3){ animation-delay:2.26s; }
/* quattro direttrici isometriche (start = bordo, end = centro 0,0) */
.fx-stream.s1{ --fx:-230px; --fy:-150px; }
.fx-stream.s2{ --fx: 250px; --fy:-110px; }
.fx-stream.s3{ --fx:-210px; --fy: 140px; }
.fx-stream.s4{ --fx: 240px; --fy: 120px; --c:#3f8f8f; }
.fx-stream.s4 i{ background:#3f8f8f; box-shadow:0 0 0 4px rgba(63,143,143,.16); animation-duration:3.8s; }
@keyframes fxFlow{
  0%   { opacity:0; transform:translate(var(--fx),var(--fy)) scale(.4); }
  14%  { opacity:1; }
  78%  { opacity:1; }
  100% { opacity:0; transform:translate(0,0) scale(1); }
}

/* Chip icone medicali galleggianti */
.fx-chip{
  position:absolute; width:50px; height:50px; border-radius:14px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 28px -14px rgba(57,70,78,.42); border:1px solid rgba(57,70,78,.06);
  animation:fxBob 5.2s ease-in-out infinite; animation-delay:var(--d,0s);
}
.fx-chip svg{ width:25px; height:25px; fill:none; stroke:#3f8f8f; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.fx-chip.c-pulse  svg{ stroke:#3f8f8f; }
.fx-chip.c-cross{ background:linear-gradient(165deg,#f1ef85 0%,#dddc01 100%); }
.fx-chip.c-cross svg{ stroke:var(--ink); stroke-width:2.4; }
.fx-chip.c-pulse  { top:4%;  left:0%;  }
.fx-chip.c-cross  { top:30%; right:-3%; width:44px; height:44px; }
.fx-chip.c-pill   { top:60%; right:6%;  }
.fx-chip.c-stetho { bottom:24%; left:-3%; }
@keyframes fxBob{
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-12px) rotate(-2deg); }
}

@media (prefers-reduced-motion:reduce){
  .fx-stream i{ animation:none; opacity:0; }
  .fx-chip{ animation:none; }
}
@media (max-width:1100px){
  .fx-chip.c-pulse{ left:-2%; } .fx-chip.c-stetho{ left:-5%; }
}
@media (max-width:600px){
  .hero-fx{ display:none; }
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr; gap:48px;}
  .hero h1{ font-size:46px;}
  .hero-illu{ max-width:520px; margin:0 auto;}
  .usecases-grid{ grid-template-columns:1fr;}
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .integ-grid{ grid-template-columns:1fr; gap:36px;}
  .showcase-row, .showcase-row.reverse{ grid-template-columns:1fr; gap:32px; padding:26px 0;}
  .showcase-row.reverse .showcase-text{ order:0;}
  .footer-top{ grid-template-columns:1fr 1fr;}
  .final-cta-inner{ padding:44px; grid-template-columns:1fr; gap:32px;}
  .final-cta-img{ max-width:460px;}
  .final-cta-inner h2{ font-size:34px;}
  .nav-links{ display:none;}
  .h-title{ font-size:34px;}
}

/* ===========================================================
   Contact section — Cosmobile design system
   Self-contained: depends only on global tokens in
   colors_and_type.css (--ink, --accent, --hairline, --paper-2,
   --font-sans, --r-pill, --h2-*). Brand-neutral, identical
   across every product site (matches the Visiq contact form).
   =========================================================== */
.contact{ background: var(--paper-2); padding: 96px 0; position:relative; scroll-margin-top: 100px; }
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:start; }
.contact-intro .eyebrow{ margin-bottom: 14px; }
.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; text-wrap:pretty; }
.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); background: var(--ink); color:#fff; border-radius: var(--r-pill); padding: 18px 36px; font-weight:700; font-size:16px; letter-spacing:.032em; display:inline-flex; align-items:center; gap:10px; transition: background .2s ease; }
.contact-submit:hover{ background:#2c3940; }

@media (max-width: 900px){
  .contact{ padding: 72px 0; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .contact-form{ padding:28px; }
}

html{ scroll-behavior:smooth; }
  .a-chi-serve, .funzionalita, .showcase, .vantaggi, .integrazioni, .faq, .final-cta{ scroll-margin-top:100px; }
  #top{ scroll-margin-top:0; }

  /* ===== Classi sostitutive degli stili inline ===== */
  .band-promo-text{ text-align:center; }
  .band-promo .tag-ink{ background:var(--ink); color:#fff; margin-right:14px; padding:7px 12px 6px; gap:6px; }
  .band-promo strong{ letter-spacing:0; line-height:1.4; }
  .fx-chip.c-pulse { animation-delay:0s; }
  .fx-chip.c-cross { animation-delay:1.1s; }
  .fx-chip.c-pill  { animation-delay:.6s; }
  .fx-chip.c-stetho{ animation-delay:1.6s; }
  .footer-col-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin:0 0 18px; }
  .footer-legal{ display:flex; gap:20px; }
  .footer-legal a{ color:var(--ink-3); text-decoration:none; padding:6px 0; }
  .footer-legal a:hover{ color:var(--ink); }

  /* ===== Honeypot (invisibile ma non display:none) ===== */
  .hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

  /* ===== Messaggio di errore form ===== */
  .form-error{ margin:0 0 18px; padding:12px 16px; border-radius:10px; background:#fdecec; border:1px solid #f3c9c9; color:#8d2f2f; font-size:14px; line-height:1.5; }
  .form-error[hidden]{ display:none; }
  .contact-submit[disabled]{ opacity:.7; cursor:default; }

  /* ===== Modale di conferma ===== */
  .modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(57,70,78,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:modalFade .2s ease; }
  .modal-overlay[hidden]{ display:none; }
  body.modal-open{ overflow:hidden; }
  .modal-box{ background:#fff; border-radius:24px; padding:44px 40px 36px; max-width:460px; width:100%; text-align:center; box-shadow:0 40px 80px -30px rgba(57,70,78,.5); animation:modalPop .25s cubic-bezier(.2,.9,.3,1.2); }
  .modal-ico{ width:66px; height:66px; margin:0 auto 22px; border-radius:50%; background:var(--color-grad); display:flex; align-items:center; justify-content:center; }
  .modal-ico svg{ width:30px; height:30px; stroke:var(--ink); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .modal-title{ font-size:26px; line-height:1.2; font-weight:700; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em; }
  .modal-text{ font-size:16px; line-height:1.6; color:var(--ink-2); margin:0 0 28px; }
  .modal-close{ min-height:48px; }
  @keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes modalPop{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

  /* ===== Touch target ≥44px =====
     (i link inline dentro un testo corrente — es. "informativa privacy" nella
     riga di consenso — sono esclusi dal requisito, cfr. WCAG 2.5.8 inline
     exception, perché non separabili dal flusso del paragrafo) */
  .nav-links a{ display:inline-block; padding:11px 0; }
  .nav-cta .btn{ min-height:44px; }
  .btn, .btn-on-dark, .btn-ghost-on-dark, .contact-submit{ min-height:44px; }
  .nav-inner > a[href="#top"]{ display:inline-flex; align-items:center; min-height:44px; }
  .band-promo .cta-arrow{ min-height:44px; align-items:center; padding:6px 0; }
  .hero .ctas .text-link{ min-height:44px; }
  .consent{ padding:6px 0; min-height:44px; }
  .consent input{ width:22px; height:22px; }
  .faq-item summary{ min-height:44px; }
  .contact-form input, .contact-form textarea{ font-size:16px; min-height:48px; }
  /* liste di link: area estesa su dispositivi touch (su desktop resta compatta) */
  @media (pointer:coarse), (max-width:900px){
    .footer-col a{ display:inline-flex; align-items:center; min-height:44px; padding:5px 0; }
    .contact-meta a{ min-height:44px; }
    .powered-by a{ display:inline-flex; align-items:center; min-height:44px; }
    .footer-legal a{ min-height:44px; }
  }

  /* ===== Immagini: gli attributi width/height danno solo l'aspect-ratio =====
     (senza queste coppie il valore dell'attributo diventa la dimensione usata
     e l'immagine si deforma quando il CSS fissa solo l'altra dimensione) ===== */
  .nav-logo, .footer-brand img, .powered-by img{ width:auto; }
  .final-cta-img, .hero-illu img, .showcase-art img{ height:auto; }

  /* ===== Nessun overflow orizzontale ===== */
  html, body{ max-width:100%; overflow-x:hidden; }
  img, svg, video{ max-width:100%; }

  /* ===== Tablet / laptop stretti ===== */
  @media (max-width:1100px){
    .band-promo{ margin:16px 20px 0; padding:16px 24px; flex-direction:column; gap:14px; text-align:center; }
    .final-cta-img{ display:none; }
    .hero .dot-bg, .benefits .blob-b{ display:none; }
    .contact-grid{ gap:44px; }
  }

  /* ===== Contatti / form ===== */
  @media (max-width:900px){
    .integ-systems-row{ grid-template-columns:repeat(3,1fr); gap:20px 14px; }
    .nav-inner{ padding:0 20px; height:72px; }
  }

  /* ===== Mobile ===== */
  @media (max-width:640px){
    .wrap{ padding:0 20px; }
    section{ padding:64px 0; }
    .hero{ padding-top:48px; padding-bottom:64px; }
    .hero h1{ font-size:36px; }
    .hero .lead{ font-size:17px; margin-bottom:28px; }
    .hero .ctas{ gap:14px; }
    .hero .ctas .btn{ width:100%; }
    .h-title{ font-size:28px; }
    .h-sub{ font-size:16px; }
    .features-grid, .benefits-grid, .usecases-grid{ grid-template-columns:1fr; }
    .integ-systems-row{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
    .erp-logo{ height:72px; }
    .showcase-row, .showcase-row.reverse{ gap:24px; }
    .final-cta{ padding-bottom:64px; }
    .final-cta-inner{ padding:32px 24px; border-radius:18px; }
    .final-cta-inner h2{ font-size:28px; }
    .final-cta-inner p{ font-size:16px; margin-bottom:28px; }
    .final-cta-inner .ctas .btn-on-dark{ width:100%; justify-content:center; }
    .faq-item summary{ font-size:17px; gap:16px; padding:20px 0; }
    .contact{ padding:64px 0; }
    .contact-intro h2, .contact-intro .h2{ font-size:28px; }
    .contact-form{ padding:22px 18px; border-radius:18px; }
    .contact-submit{ width:100%; justify-content:center; }
    .footer{ padding:48px 0 24px; }
    .footer-top{ grid-template-columns:1fr; gap:32px; padding-bottom:32px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
    .modal-box{ padding:32px 22px 26px; border-radius:18px; }
    .modal-title{ font-size:22px; }
  }

  /* ===== Motion ridotto ===== */
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .showcase-row{ opacity:1 !important; transform:none !important; transition:none !important; }
    .modal-overlay, .modal-box{ animation:none !important; }
    .usecase:hover, .benefit:hover, .btn-primary:hover, .btn-on-dark:hover{ transform:none; }
    *{ scroll-behavior:auto !important; }
  }