/* ==========================================================================
   Novametris — Main stylesheet
   ========================================================================== */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.container { width: var(--container); margin-inline: auto; position: relative; z-index: 1; }
.container--wide { width: var(--container-wide); margin-inline: auto; position: relative; z-index: 1; }

.skip-link {
  position: absolute; top: -60px; left: 1rem;
  padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; border-radius: var(--radius-sm); z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-size: .88rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: .8rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px rgba(222, 255, 0, .35);
}
.btn--primary:hover { box-shadow: 0 10px 26px rgba(222, 255, 0, .45); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn--dark {
  background: var(--ink);
  color: var(--bg);
}
[data-theme="blueprint"] .btn--dark { background: var(--surface-2); color: var(--ink); }

.btn .btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 0;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: padding var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  padding: .55rem 0;
  border-bottom-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
@media (max-width: 1023px) {
  .site-header__inner { gap: 1rem; }
  .brand svg { height: 32px; }
  .nav { gap: 1rem; }
  .nav__actions { gap: .5rem; }
}
.brand {
  display: inline-flex; align-items: center;
  color: var(--ink);
}
.brand svg { height: 38px; width: auto; }

.nav {
  display: flex; align-items: center; gap: 2rem;
}
.nav__list {
  display: flex; align-items: center; gap: 1.8rem;
  margin: 0; padding: 0; list-style: none;
}
.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .92rem;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ── Servizi dropdown ── */
.nav__item { list-style: none; }
.nav__item--has-drop { position: relative; }

.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  /* Extra vertical padding enlarges the hover hit-box toward the dropdown */
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.nav__link--drop::after { bottom: 2px; }

.nav__chevron {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: center;
}
.nav__item--has-drop:hover .nav__chevron,
.nav__item--has-drop:focus-within .nav__chevron { transform: rotate(180deg); }

.nav__drop {
  position: absolute;
  /* sit flush under the li — padding-top creates the visual gap
     while keeping the hover target continuous (no dead zone) */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  margin: 0;
  /* top padding = visual gap + arrow height; left/right padding for breathing room */
  padding: 20px .4rem .4rem;
  list-style: none;
  background: transparent; /* background on inner ::after card */
  border: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out),
              transform .18s var(--ease-out);
  z-index: 300;
}
/* Suppress list bullets */
.nav__drop > li { list-style: none; }

/* The real card sits INSIDE the padding area */
.nav__drop::after {
  content: '';
  position: absolute;
  top: 14px; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
  z-index: -1;
}
/* Arrow caret */
.nav__drop::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  translate: -50% 0;
  width: 10px; height: 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
  z-index: 1;
}
.nav__item--has-drop:hover .nav__drop,
.nav__item--has-drop:focus-within .nav__drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__drop-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav__drop-item svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__drop-item:hover {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.nav__drop-item:hover svg { color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: .75rem; }

.theme-toggle {
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--ink); transform: rotate(15deg); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="blueprint"] .theme-toggle .icon-sun { display: none; }
[data-theme="blueprint"] .theme-toggle .icon-moon { display: block; }

/* ── Hamburger toggle button ── */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--accent); }
/* Animated SVG lines */
.nav-toggle .nt-l1,
.nav-toggle .nt-l2,
.nav-toggle .nt-l3 {
  transform-origin: center;
  transition: transform .3s cubic-bezier(.76,0,.24,1),
              opacity    .2s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nt-l1 { transform: translateY(5px)  rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-l2 { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nt-l3 { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   MOBILE FULL-SCREEN OVERLAY MENU
   ============================================================ */

/* Hidden on desktop — entire element removed from layout */
.mob-menu { display: none; }

@media (max-width: 1023px) {

  /* Overlay base — always rendered, invisible until .is-open */
  .mob-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg);
    /* Circular reveal expanding from the hamburger button (top-right) */
    clip-path: circle(0% at calc(100% - 28px) 36px);
    transition: clip-path .65s cubic-bezier(.76,0,.24,1);
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
  }
  .mob-menu.is-open {
    clip-path: circle(170% at calc(100% - 28px) 36px);
    pointer-events: auto;
    visibility: visible;
  }

  /* Inner scroll container */
  .mob-menu__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem 6vw 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
  }

  /* ── Top bar ── */
  .mob-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .mob-menu__brand svg { height: 30px; width: auto; }

  /* Close button */
  .mob-menu__close {
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform .3s var(--ease-out);
  }
  .mob-menu__close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: rotate(90deg);
  }

  /* ── Nav list ── */
  .mob-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
  }
  .mob-menu__item {
    border-bottom: 1px solid var(--border-soft);
    /* Staggered slide-up reveal */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s var(--ease-out),
                transform .45s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 65ms + 200ms);
  }
  .mob-menu.is-open .mob-menu__item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Main link / accordion button */
  .mob-menu__link {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: 1.05rem 0;
    font-family: var(--font-head);
    font-size: clamp(1.45rem, 6.5vw, 2rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.025em;
    line-height: 1;
    text-align: left;
    background: none;
    border: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mob-menu__link:hover          { color: var(--accent); }
  .mob-menu__link[aria-current]  { color: var(--accent); }

  /* Small ordinal numbers */
  .mob-menu__num {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--ink-soft);
    font-family: var(--font-head);
    min-width: 1.8rem;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mob-menu__link:hover .mob-menu__num { color: var(--accent); }

  /* Chevron (accordion) */
  .mob-menu__chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.76,0,.24,1);
  }
  .mob-menu__item--acc.is-open .mob-menu__chevron { transform: rotate(180deg); }

  /* Services accordion sub-list */
  .mob-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: height .4s cubic-bezier(.4,0,.2,1);
  }
  .mob-menu__sub-link {
    display: block;
    padding: .6rem 0 .6rem 2.7rem;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--border-soft);
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
  }
  .mob-menu__sub-link:last-child { border-bottom: none; }
  .mob-menu__sub-link:hover,
  .mob-menu__sub-link[aria-current] {
    color: var(--accent);
    padding-left: 3.1rem;
  }
  /* Accent bar left of open accordion */
  .mob-menu__item--acc.is-open > .mob-menu__acc-btn { color: var(--accent); }
  .mob-menu__item--acc.is-open > .mob-menu__acc-btn .mob-menu__num { color: var(--accent); }

  /* ── Footer ── */
  .mob-menu__foot {
    flex-shrink: 0;
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s var(--ease-out) .55s,
                transform .45s var(--ease-out) .55s;
  }
  .mob-menu.is-open .mob-menu__foot { opacity: 1; transform: translateY(0); }
  .mob-menu__cta { justify-content: center; }

  .mob-menu__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
  }
  .mob-menu__contact a {
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mob-menu__contact a:hover { color: var(--accent); }

  /* ── Decorative geometry (brand motif, bottom-right) ── */
  .mob-menu__deco {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: clamp(90px, 28vw, 160px);
    height: clamp(90px, 28vw, 160px);
    fill: var(--accent);
    opacity: .1;
    pointer-events: none;
    transform: rotate(12deg);
    z-index: 0;
  }
  .mob-menu.is-open .mob-menu__deco { opacity: .13; }

  /* Scroll-lock body */
  body.mob-menu-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 10rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__canvas canvas { display: block; width: 100%; height: 100%; }
.hero__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, var(--accent-soft), transparent 55%),
    radial-gradient(ellipse at 20% 80%, color-mix(in oklab, var(--bg-alt) 65%, transparent), transparent 60%);
  z-index: -2;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 80%);
  opacity: .6;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 3rem;
  align-items: center;
}
.hero__content { max-width: 720px; }
.hero__title {
  font-size: var(--step-6);
  line-height: .95;
  letter-spacing: -.025em;
  margin-bottom: 1.6rem;
}
.hero__title .accent {
  position: relative; display: inline-block; color: var(--ink);
}
.hero__title .accent::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .08em; height: .3em;
  background: var(--accent); z-index: -1; transform: skewX(-8deg);
  opacity: .9;
}
.hero__subtitle {
  font-size: var(--step-2);
  color: var(--ink-soft);
  max-width: 620px;
  margin-bottom: 2.2rem;
}
.hero__ctas { display: flex; gap: .9rem; flex-wrap: wrap; }

.hero__badges {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem;
  padding-top: 2rem; border-top: 1px solid var(--border-soft);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.hero__badge::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: 50%;
}

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.stat {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.stat:last-child { border-bottom: 0; }
.stat__value {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.3rem);
  font-weight: 700; line-height: 1;
  color: var(--ink);
  letter-spacing: -.03em;
}
.stat__value .unit { color: var(--accent-text); font-size: .6em; margin-left: .1em; }
.stat__label {
  font-size: .82rem; color: var(--ink-soft);
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Section base ---------- */
.section {
  padding: clamp(4rem, 2rem + 6vw, 8rem) 0;
  position: relative;
}
.section--alt { background: var(--bg-alt); }
[data-theme="blueprint"] .section--alt { background: var(--bg-alt); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);
}
.section__title {
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 0.5rem;
}
/* Standalone section__title (direct child of container, no section__head wrapper) */
.container > .section__title,
.container > .eyebrow + .section__title {
  margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

/* Servizi pages: trailing dot after every section title, plus extra breathing room */
body[data-nav="servizi"] .section__title:not(.no-dot)::after {
  content: ".";
  color: var(--ink);
  margin-left: .02em;
}
body[data-nav="servizi"] .section__title {
  margin-bottom: clamp(1.75rem, 1rem + 1.5vw, 2.75rem);
}
body[data-nav="servizi"] .container > .section__title,
body[data-nav="servizi"] .container > .eyebrow + .section__title {
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}
.section__lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Brand story (homepage) — one section, two chapters ---------- */
.brand-story .section__head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.brand-story__chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 1.5rem + 5vw, 6.5rem);
  position: relative;
}

.brand-chapter {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}
.brand-chapter--reverse { grid-template-columns: 1.05fr 1fr; }
.brand-chapter--reverse .brand-chapter__media { order: 2; }

.brand-chapter__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.brand-chapter__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.brand-chapter__media--stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, .5rem + 2vw, 2.5rem);
}

.brand-chapter__index {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}
.brand-chapter__index::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--accent);
}
.brand-chapter__title {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}

.brand-chapter__body p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 56ch;
}
.brand-chapter__body p + p { margin-top: 1rem; }
.brand-chapter__body strong { color: var(--ink); font-weight: 700; }
.brand-chapter__body em { font-style: italic; color: var(--ink); }
.brand-chapter__body p a {
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.brand-chapter__body p a:hover { border-bottom-color: var(--accent); }

@media (max-width: 1023px) {
  .brand-chapter,
  .brand-chapter--reverse { gap: 2rem; }
}
@media (max-width: 767px) {
  .brand-chapter,
  .brand-chapter--reverse { grid-template-columns: 1fr; gap: 1.75rem; }
  .brand-chapter--reverse .brand-chapter__media { order: 0; }
  .brand-chapter__media:not(.brand-chapter__media--stage) { aspect-ratio: 16 / 10; }
}

/* ---------- Logo origin (Anatomia del marchio) ---------- */
.logo-origin .section__head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.logo-origin__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}
.logo-origin__stage {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, .5rem + 2vw, 2.5rem);
}
.logo-origin__svg { width: 100%; height: 100%; color: var(--ink); }
.logo-origin__svg .lo-anim { opacity: 0; }
[data-logo-origin].is-built .logo-origin__svg .lo-anim { opacity: 1; }
.logo-origin__svg .lo-square,
.logo-origin__svg .lo-refring { transform-box: fill-box; transform-origin: center; }

.lo-grid-line { stroke: currentColor; stroke-width: 1; opacity: .14; }
.lo-square    { fill: var(--accent); }
.lo-target    { stroke: currentColor; stroke-width: 1.5; opacity: .55; fill: none;
                stroke-linecap: round; }
.lo-dim       { stroke: currentColor; stroke-width: 1.5; opacity: .5; fill: none;
                stroke-linejoin: round; }
.lo-dim-label { fill: var(--ink-soft); font-family: var(--font-head);
                font-size: 17px; font-weight: 600; }
.lo-wordmark  { fill: var(--ink); font-family: var(--font-body); font-weight: 800; }
.lo-refdot    { fill: var(--accent); }
.lo-refring   { stroke: var(--accent); fill: none; stroke-width: 2.5; }

.logo-origin__text .eyebrow { display: inline-block; margin-bottom: 1rem; }
.logo-origin__text .section__title { margin-bottom: 1.25rem; }
.logo-origin__text p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 56ch;
}
.logo-origin__text p + p { margin-top: 1rem; }
.logo-origin__text strong { color: var(--ink); font-weight: 700; }
.logo-origin__text em { font-style: italic; color: var(--ink); }
.logo-origin__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: gap var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.logo-origin__link:hover { gap: .7rem; color: var(--accent-text); }

.logo-origin__legend {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.logo-origin__note {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.logo-origin__note-key {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.logo-origin__note h3 { font-size: 1.05rem; margin: .55rem 0 .4rem; }
.logo-origin__note p { font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .logo-origin__svg .lo-anim { opacity: 1; }
}
@media (max-width: 1023px) {
  .logo-origin__inner { gap: 2rem; }
}
@media (max-width: 767px) {
  .logo-origin__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .logo-origin__legend { grid-template-columns: 1fr; }
}

/* ---------- Zigzag divider (between marchio and servizi) ---------- */
.section-divider {
  line-height: 0;
  margin: 0;
}
.section-divider__zig {
  display: block;
  width: 100%;
  height: clamp(28px, 2.4vw, 44px);
}
.section-divider__zig path { fill: var(--bg-alt); }
.section__lead--prominent {
  font-size: var(--step-2);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55;
  max-width: 56ch;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
}

/* ---------- About (Chi Sono) ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}
.about__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about__media::before {
  content: ""; position: absolute;
  inset: -24px -24px auto auto; width: 65%; height: 65%;
  background: var(--accent);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about__media img {
  width: 100%;
  height: 125%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}
.about__body h2 { font-size: var(--step-4); margin-bottom: 1.2rem; }
.about__body p { font-size: var(--step-1); color: var(--ink-soft); margin-bottom: 1.2rem; }

.about__founder-meta {
  display: flex; flex-direction: column; gap: .25rem;
  margin-bottom: 1.4rem;
}
.about__founder-name {
  font-size: var(--step-2); font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.about__founder-roles {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.about__founder-tag {
  display: inline-block;
  padding: .25em .75em;
  background: var(--ink);
  color: var(--accent);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
}

.about__skills {
  list-style: none; padding: 0; margin: .4rem 0 1.8rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.about__skills li {
  font-size: .88rem; color: var(--ink-soft);
  padding-left: 1.1rem; position: relative;
}
.about__skills li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

.about__actions { margin-top: .4rem; }

.about__sig {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-head);
  color: var(--ink-soft);
  font-size: .92rem;
}
.about__sig strong { color: var(--ink); font-weight: 600; }

/* ---------- Services (Bento Hero+Grid — Opzione A) ---------- */
/*
  12 colonne, 2 fasce orizzontali. Ogni card auto-altezza in base al contenuto.
   Riga 1: 01 (6col) | 02 (3col) | 03 (3col)
   Riga 2: 04 (3col) | 05 (6col) | 06 (3col)
*/
.services__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.1rem;
}
.service-card--bento-1 { grid-column: span 6; }   /* hero */
.service-card--bento-2 { grid-column: span 3; }
.service-card--bento-3 { grid-column: span 3; }
.service-card--bento-4 { grid-column: span 3; }
.service-card--bento-5 { grid-column: span 6; }   /* hero bottom */
.service-card--bento-6 { grid-column: span 3; }

/* Hero cards — tipografia ingrandita */
.service-card--bento-1 h3,
.service-card--bento-5 h3 { font-size: var(--step-3); }
.service-card--bento-1 p,
.service-card--bento-5 p { font-size: 1.05rem; max-width: 56ch; }
.service-card--bento-1 .service-card__icon,
.service-card--bento-5 .service-card__icon {
  width: 60px; height: 60px; border-radius: 14px;
}
.service-card--bento-1 .service-card__icon svg,
.service-card--bento-5 .service-card__icon svg { width: 30px; height: 30px; }

/* Tablet — 2 colonne uniformi (hero card pareggiata alle altre) */
@media (min-width: 768px) and (max-width: 1023px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 1rem;
  }
  .service-card--bento-1,
  .service-card--bento-2,
  .service-card--bento-3,
  .service-card--bento-4,
  .service-card--bento-5,
  .service-card--bento-6 { grid-column: span 1; }
  .service-card--bento-1 h3,
  .service-card--bento-5 h3 { font-size: var(--step-2); }
  .service-card--bento-1 p,
  .service-card--bento-5 p { font-size: .95rem; max-width: none; }
  .service-card--bento-1 .service-card__icon,
  .service-card--bento-5 .service-card__icon {
    width: 46px; height: 46px; border-radius: 12px;
  }
  .service-card--bento-1 .service-card__icon svg,
  .service-card--bento-5 .service-card__icon svg { width: 24px; height: 24px; }
}
/* Phone — 1 colonna */
@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card--bento-1,
  .service-card--bento-2,
  .service-card--bento-3,
  .service-card--bento-4,
  .service-card--bento-5,
  .service-card--bento-6 { grid-column: 1 / -1; }
}
.service-card {
  position: relative;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  isolation: isolate;
}
.service-card::before {
  /* laser sweep line */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .9s var(--ease-in-out);
}
.service-card::after {
  /* soft yellow glow reveal */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.service-card:hover::before { transform: translateX(100%); }
.service-card:hover::after { opacity: 1; }

.service-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.service-card:hover .service-card__icon {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.service-card__icon svg { width: 26px; height: 26px; stroke-width: 1.6; }

.service-card h3 {
  font-size: var(--step-2);
  letter-spacing: -.01em;
}
.service-card p { color: var(--ink-soft); font-size: .95rem; }
.service-card__more {
  margin-top: auto;
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.service-card:hover .service-card__more { color: var(--ink); }

/* ---------- Technologies ---------- */
.tech {
  padding: 5rem 0;
  border-block: 1px solid var(--border-soft);
  overflow: hidden;
}
.tech__head {
  text-align: center;
  margin-bottom: 3rem;
}
.tech__head h2 {
  font-size: var(--step-3);
  letter-spacing: -.02em;
}
.tech__head p { color: var(--ink-soft); margin-top: .6rem; }
.tech__strip {
  position: relative;
  display: flex;
  gap: clamp(1rem, 2vw, 3rem);
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.tech__strip > .tech__item { flex: 1 1 0; min-width: 0; }
.tech__strip .tech__name { white-space: nowrap; }
.tech__strip .tech__item { font-size: clamp(.85rem, .7rem + .35vw, 1.1rem); }
.tech__strip .tech__mono { --mono-size: clamp(64px, 5.5vw, 92px); }
.tech__dots {
  display: none;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}
.tech__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tech__dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}
.tech__3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.tech__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  opacity: .55;
  padding: .6rem 1rem;
  border-bottom: 2px solid transparent;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tech__mono {
  --mono-size: 92px;
  position: relative;
  width: var(--mono-size);
  height: var(--mono-size);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.tech__mono__fallback {
  font-family: var(--font-head);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  transition: opacity var(--dur-med) var(--ease-out);
}
.tech__strip.is-3d .tech__mono__fallback { opacity: 0; }
.tech__mono__logo {
  width: 64%;
  height: 64%;
  object-fit: contain;
  display: block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tech__item:hover .tech__mono__logo { transform: scale(1.06); }
.tech__item:hover {
  opacity: 1;
  color: var(--ink);
  border-bottom-color: var(--accent);
  transform: translateY(-3px);
}
.tech__item:hover .tech__mono {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* ---------- Before / After slider ---------- */
.compare {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  user-select: none;
  touch-action: pan-y;
  isolation: isolate;
  background: var(--surface-2);
  --pos: 50%;
}
.compare__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.compare__img--top {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 22px var(--accent);
}
.compare__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--accent-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.compare:hover .compare__grip { transform: translate(-50%, -50%) scale(1.08); }
.compare__grip svg { width: 24px; height: 24px; }
.compare__label {
  position: absolute; top: 1rem;
  padding: .45rem .85rem;
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  background: rgba(48, 56, 65, .82);
  color: #fff;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
}
.compare__label--before { left: 1rem; }
.compare__label--after  { right: 1rem; background: var(--accent); color: var(--accent-ink); }
.compare__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0; padding: 0;
}

/* ---------- Quote wizard ---------- */
.quote {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: start;
}
.quote__intro h2 {
  font-size: var(--step-4);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.quote__intro p { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: 1.5rem; }
.quote__perks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.quote__perks li {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .95rem;
}
.quote__perks svg {
  flex-shrink: 0; width: 22px; height: 22px; color: var(--accent);
  padding: 2px; background: var(--accent-soft); border-radius: 6px;
}
.quote__direct {
  padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: .9rem;
}
.quote__direct strong { display: block; color: var(--ink); font-family: var(--font-head); margin-bottom: .35rem; }
.quote__direct a { color: var(--ink); border-bottom: 1px dashed var(--border); transition: border-color var(--dur-fast); }
.quote__direct a:hover { border-bottom-color: var(--accent); }

.wizard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.wizard__progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.wizard__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.wizard__progress-fill {
  display: block; height: 100%;
  width: 33.33%;
  background: var(--accent);
  border-radius: 4px;
  transition: width var(--dur-med) var(--ease-out);
}
.wizard__progress-step {
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.wizard__step {
  display: none;
  animation: step-in .4s var(--ease-out);
}
.wizard__step.is-active { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.wizard__legend {
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .4rem;
  display: block;
}
.wizard__hint {
  font-size: .9rem; color: var(--ink-soft);
  margin-bottom: 1.4rem;
}

.service-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: .75rem;
}
.service-pick {
  position: relative;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.service-pick:hover { border-color: var(--ink); transform: translateY(-2px); }
.service-pick input { position: absolute; opacity: 0; pointer-events: none; }
.service-pick input:checked + .service-pick__body { color: var(--ink); }
.service-pick:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.service-pick__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface);
  border-radius: 10px;
  color: var(--ink);
}
.service-pick__icon svg { width: 20px; height: 20px; }
.service-pick:has(input:checked) .service-pick__icon { background: var(--accent); color: var(--accent-ink); }
.service-pick__label {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1.2;
}

.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.field label .req { color: var(--accent); margin-left: .15em; }
.field input:not([type="file"]):not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.field input[aria-invalid="true"] { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, .15); }

.field--file label.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: 1.4rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  text-align: center;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  font-family: var(--font-body); font-weight: 500;
}
.field--file label.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.field--file label.file-drop svg { width: 28px; height: 28px; color: var(--ink-soft); }
.field--file label.file-drop .hint { font-size: .8rem; color: var(--ink-soft); }
.field--file input[type="file"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.field__consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .88rem; color: var(--ink-soft);
  padding: .9rem; background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.field__consent input { margin-top: .2rem; accent-color: var(--accent); }
.field__consent a { text-decoration: underline; text-decoration-color: var(--accent); }

.field__error {
  display: none;
  font-size: .82rem;
  color: #c0392b;
  font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none;
}
.field.has-error .field__error { display: block; }
[data-theme="blueprint"] .field__error { color: #ff6b6b; }

.wizard__nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.wizard__nav .btn--ghost[disabled] { opacity: .4; pointer-events: none; }

.wizard__success {
  display: none;
  flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1rem 0;
}
.wizard.is-done .wizard__step,
.wizard.is-done .wizard__nav { display: none; }
.wizard.is-done .wizard__success { display: flex; }
.wizard.is-done .wizard__progress-fill { width: 100%; }
.wizard__success-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 50%;
}
.wizard__success h3 { font-size: var(--step-3); letter-spacing: -.01em; }
.wizard__success p { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: color-mix(in oklab, #fff 80%, var(--ink));
  padding: 5rem 0 2rem;
}
[data-theme="blueprint"] .site-footer { background: #0c1014; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}
.site-footer .brand { color: #fff; }
.site-footer__col h4 {
  font-size: .85rem; font-family: var(--font-head); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: color-mix(in oklab, #fff 75%, var(--ink)); transition: color var(--dur-fast); }
.site-footer a:hover { color: #fff; }
.site-footer__socials {
  display: flex; gap: .75rem; margin-top: 1.4rem;
}
.site-footer__socials a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: color-mix(in oklab, #fff 70%, var(--ink));
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.site-footer__socials a:hover {
  background: var(--accent); border-color: var(--accent); color: #000;
}
.site-footer__socials svg { width: 16px; height: 16px; }

.site-footer__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .82rem;
  color: color-mix(in oklab, #fff 55%, var(--ink));
}

/* ---------- Custom cursor ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cursor-ring.is-target {
  width: 62px; height: 62px;
  background: var(--accent-soft);
}
body.cursor-active,
body.cursor-active * { cursor: none !important; }

/* Hide custom cursor on touch/coarse pointers */
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.cursor-active, body.cursor-active * { cursor: auto !important; }
}

/* ---------- Reveal (GSAP-controlled, CSS fallback) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.no-gsap [data-reveal].is-inview,
[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__stats { max-width: 520px; }
  .section__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .section__title { margin-bottom: 1.5rem; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { 
    aspect-ratio: auto !important; 
    height: 0 !important; 
    padding-bottom: 75% !important; /* 4:3 aspect ratio */
    width: 100% !important; 
  }
  .about__media img { 
    position: absolute !important; 
    top: -10% !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 120% !important; 
    object-position: top center !important;
  }
  .quote { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  /* Show hamburger; hide the desktop nav list entirely (overlay menu takes over) */
  .nav-toggle { display: inline-grid; }
  .nav__list   { display: none !important; }
}
@media (max-width: 599px) {
  .nav__actions .btn { display: none; }
}
@media (max-width: 767px) {
  .hero { padding-top: 8rem; padding-bottom: 4rem; min-height: auto; }
  .hero__title { font-size: clamp(2.6rem, 7vw, 3.6rem); }
  .field__row { grid-template-columns: 1fr; }
  .wizard__nav { flex-direction: column-reverse; gap: .85rem; }
  .wizard__nav .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SECTION SEPARATORS — geometric SVG dividers between sections
   ========================================================================== */

.section-sep {
  display: block;
  position: absolute;
  bottom: -1px;   /* overlap 1px to prevent sub-pixel gaps */
  left: 0; right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.section-sep svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Fill helpers — reference CSS vars so light/blueprint themes both work */
.sep-fill--bg   { fill: var(--bg); }
.sep-fill--alt  { fill: var(--bg-alt); }
.sep-fill--accent { fill: var(--accent); opacity: .18; }

/* ==========================================================================
   HOME PAGE — MOBILE-FIRST RESPONSIVE (max-width: 767px additions)
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Hero ── */
  .hero {
    padding-top: 6.5rem;
    padding-bottom: 3.5rem;
    min-height: auto;
  }
  .hero__title {
    font-size: clamp(2rem, 9.5vw, 3rem);
    letter-spacing: -.02em;
    margin-bottom: 1.1rem;
  }
  .hero__subtitle {
    font-size: var(--step-0);
    margin-bottom: 1.6rem;
  }
  /* Full-width stacked CTAs */
  .hero__ctas {
    flex-direction: column;
    gap: .65rem;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Badges tighter */
  .hero__badges {
    gap: .6rem 1.2rem;
    margin-top: 1.8rem;
    padding-top: 1.4rem;
  }
  .hero__badge { font-size: .76rem; }

  /* Stats: horizontal strip instead of vertical card */
  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 1rem .75rem;
    border-radius: var(--radius);
  }
  .stat {
    padding: .6rem .5rem;
    border-bottom: none;
    border-right: 1px solid var(--border-soft);
    text-align: center;
    gap: .2rem;
  }
  .stat:last-child { border-right: none; }
  .stat__value {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    letter-spacing: -.02em;
  }
  .stat__label {
    font-size: .68rem;
    letter-spacing: .04em;
    line-height: 1.3;
  }

  /* ── Chi Sono ── */
  .about__grid { gap: 1.8rem; }
  .about__media {
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .about__media::before { display: none; } /* hide decorative offset border */
  .about__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  .about__body h2 { font-size: var(--step-3); }
  .about__body p  { font-size: var(--step-0); }
  .about__sig { flex-direction: column; align-items: flex-start; gap: .6rem; }

  /* ── Servizi (already handled at 560px — just reduce section padding) ── */
  #servizi { padding-top: 4rem; padding-bottom: 4rem; }

  /* ── Tecnologie — horizontal scroll strip ── */
  .tech__strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding: 0 1rem .5rem;
    scroll-padding-inline: 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }
  .tech__strip::-webkit-scrollbar { display: none; }
  .tech__strip > .tech__item {
    flex: 0 0 auto;
    width: 115px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .tech__strip .tech__mono { --mono-size: 80px; }
  .tech__strip .tech__name {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .tech__strip .tech__item { font-size: .85rem; }
  .tech__dots { display: flex; }

  /* ── Before / After slider ── */
  .compare {
    /* Break out of the container to go full viewport width */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 4 / 3;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
  }
  .compare__label {
    font-size: .8rem;
    padding: .5rem .9rem;
    letter-spacing: .1em;
    /* Stronger contrast on mobile */
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
  }
  .compare__label--after {
    background: var(--accent);
    color: var(--accent-ink);
  }
  /* Bigger touch target on the grip */
  .compare__grip {
    width: 48px;
    height: 48px;
  }

  /* ── Quote / Wizard ── */
  .quote__intro { padding-right: 0; }
  .quote__perks { display: none; } /* collapsed on mobile — shown in form steps instead */
  .quote__direct { font-size: .85rem; }
  .service-picker { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .service-pick {
    padding: .8rem .5rem;
    gap: .4rem;
  }
  .service-pick__icon { width: 36px; height: 36px; }
  .service-pick__icon svg { width: 18px; height: 18px; }
  .service-pick__label { font-size: .78rem; }
  .wizard__nav {
    flex-direction: row;
    gap: .5rem;
  }
  .wizard__nav .btn {
    flex: 1;
    justify-content: center;
  }
}

/* Extra-small phones */
@media (max-width: 400px) {
  .hero__title  { font-size: clamp(1.85rem, 10vw, 2.4rem); }
  .hero__stats  { grid-template-columns: repeat(3, 1fr); }
  .stat__value  { font-size: clamp(1.4rem, 8vw, 1.8rem); }
  .hero__ctas .btn { font-size: .875rem; padding: .75rem 1rem; }
  .service-picker { grid-template-columns: repeat(2, 1fr); }
  .tech__strip { gap: .75rem; }
  .tech__strip > .tech__item { width: 100px; }
  .tech__strip .tech__mono { --mono-size: 64px; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: 2.5rem; }
.breadcrumb ol {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .82rem; font-family: var(--font-head); font-weight: 500;
  letter-spacing: .04em; color: var(--ink-soft);
}
.breadcrumb li + li::before {
  content: "/"; opacity: .4; margin-right: .5rem;
}
.breadcrumb a { color: var(--ink-soft); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(8rem, 6rem + 4vw, 12rem) 0 clamp(4rem, 2rem + 3vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 80% 0%, var(--accent-soft), transparent 50%),
    radial-gradient(ellipse at 10% 100%, color-mix(in oklab, var(--bg-alt) 60%, transparent), transparent 55%);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
  grid-template-rows: auto auto;
  column-gap: 3rem;
  row-gap: 0;
}
.breadcrumb { grid-column: 1 / -1; }
.page-hero__content { grid-column: 1; align-self: end; padding-bottom: clamp(3rem, 2rem + 2vw, 5rem); }
.page-hero__content h1 {
  font-size: var(--step-5);
  line-height: .95;
  letter-spacing: -.025em;
  margin: 1rem 0 1.4rem;
}
.page-hero__accent {
  position: relative; display: inline;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-theme="blueprint"] .page-hero__accent { color: var(--accent); background: none; -webkit-background-clip: unset; }
.page-hero__sub {
  font-size: var(--step-1); color: var(--ink-soft);
  max-width: 56ch; line-height: 1.7;
}
.page-hero__stat-card {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 2rem;
  margin-bottom: clamp(3rem, 2rem + 2vw, 5rem);
}
.stat-card__row {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.stat-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.stat-card__row:first-child { padding-top: 0; }
.stat-card__value {
  font-family: var(--font-head); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
.stat-card__unit { font-size: .55em; color: var(--accent-text); margin-left: .1em; }
.stat-card__label { font-size: .78rem; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }

.page-hero__media {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 7;
  box-shadow: var(--shadow-lg);
}
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ---------- Manifesto ---------- */
.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.manifesto__card {
  position: relative;
  padding: 2.5rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon num"
    "title title"
    "desc  desc";
  column-gap: 1rem;
  row-gap: .9rem;
  align-items: center;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  overflow: hidden;
}
.manifesto__icon { grid-area: icon; }
.manifesto__num  { grid-area: num; justify-self: start; align-self: center; }
.manifesto__card h3 { grid-area: title; }
.manifesto__card p  { grid-area: desc; }
.manifesto__card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 65%);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
}
.manifesto__card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.manifesto__card:hover::before { opacity: 1; }
.manifesto__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; color: var(--ink);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.manifesto__card:hover .manifesto__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.manifesto__icon svg { width: 26px; height: 26px; }
.manifesto__num {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; color: var(--accent-text); text-transform: uppercase;
}
.manifesto__card h3 { font-size: var(--step-2); letter-spacing: -.01em; }
.manifesto__card p { font-size: .95rem; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Timeline ---------- */
.timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 2.2rem; left: 0; right: 0; height: 2px;
  background: var(--border);
}
.timeline__item {
  position: relative;
  padding-top: 5rem;
}
.timeline__item::before {
  content: "";
  position: absolute; top: 1.6rem; left: 0;
  width: 14px; height: 14px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: border-color var(--dur-med), background var(--dur-med);
  z-index: 1;
}
.timeline__item--now::before {
  width: 18px; height: 18px;
  background: var(--accent); border-color: var(--accent);
  top: 1.4rem;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.timeline__item--future::before {
  border-style: dashed;
  background: transparent;
}
.timeline__year {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase;
}
.timeline__item--now .timeline__year { color: var(--ink-soft); }
.timeline__item--future .timeline__year { opacity: .5; }
.timeline__body { padding-right: 1.5rem; }
.timeline__body h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.timeline__body p { font-size: .9rem; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Team ---------- */
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.team__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.team__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team__portrait {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.team__portrait img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  filter: grayscale(25%);
}
.team__card:hover .team__portrait img { transform: scale(1.04); filter: grayscale(0%); }
.team__info {
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.team__info h3 { font-size: var(--step-1); }
.team__role {
  font-size: .8rem; font-family: var(--font-head); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
.team__info p { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; margin-top: .4rem; }
.team__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-top: .6rem;
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--ink-soft);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.team__social:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.team__social svg { width: 16px; height: 16px; }

/* ---------- Founder card (editorial split layout) ---------- */
.founder__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3.5rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.founder__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
}
.founder__intro {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding-right: 2rem;
  border-right: 1px solid var(--border-soft);
}
.founder__bio {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding-top: .25rem;
}
.founder__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.founder__name {
  font-size: var(--step-3);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .5rem;
}
.founder__role {
  font-size: .8rem; font-family: var(--font-head); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
.founder__bio p {
  font-size: .95rem; color: var(--ink-soft); line-height: 1.7;
}
.founder__bio p:first-child::first-letter {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin: .15rem .55rem 0 0;
  color: var(--accent-text);
}
.founder__credentials {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .55rem;
}
.founder__credential {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--ink);
}
.founder__credential strong { font-weight: 600; }
.founder__credential-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--accent-text);
}

@media (max-width: 900px) {
  .founder__card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
  .founder__intro {
    padding-right: 0;
    padding-bottom: 2rem;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
}
@media (max-width: 560px) {
  .founder__card { padding: 1.5rem; }
  .founder__name { font-size: var(--step-2); }
  .founder__bio p:first-child::first-letter { font-size: 2.4rem; }
}

/* ---------- Process steps ---------- */
.process__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.process__step {
  display: grid;
  grid-template-columns: 4rem minmax(0,1fr) minmax(0,.9fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
  border-bottom: 1px solid var(--border-soft);
}
.process__step:last-child { border-bottom: 0; }
.process__num {
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700;
  color: var(--border); line-height: 1; letter-spacing: -.04em;
  transition: color var(--dur-med);
}
.process__step:hover .process__num { color: var(--accent); }
.process__body h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.process__body p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; max-width: 52ch; }
.process__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.process__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.process__step:hover .process__media img { transform: scale(1.04); }

/* ---------- Certifications ---------- */
.certs__strip {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}
.certs__item {
  flex: 1 1 160px;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.certs__item:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.certs__logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; color: var(--ink);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.certs__item:hover .certs__logo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.certs__logo svg { width: 24px; height: 24px; }
.certs__name { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.certs__detail { font-size: .8rem; color: var(--ink-soft); }

/* ---------- CTA Strip ---------- */
.cta-strip {
  background: var(--accent);
  padding: clamp(3.5rem, 2rem + 3vw, 6rem) 0;
}
.cta-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cta-strip__eyebrow { color: var(--accent-ink); opacity: .7; }
.cta-strip__eyebrow::before { background: var(--accent-ink); }
.cta-strip h2 { font-size: var(--step-4); color: var(--accent-ink); letter-spacing: -.02em; margin: .5rem 0 .4rem; }
.cta-strip p { color: var(--accent-ink); opacity: .75; font-size: var(--step-1); max-width: 52ch; }
.cta-strip__actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }
.cta-strip .btn--ghost { color: var(--accent-ink); border-color: rgba(0,0,0,.2); }
.cta-strip .btn--ghost:hover { border-color: var(--accent-ink); }
.cta-strip a:not(.btn) { color: var(--accent-ink); }

/* ---------- Inner-page responsive ---------- */
@media (max-width: 1023px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__stat-card { grid-column: 1; grid-row: auto; margin-bottom: 2rem; flex-direction: row; flex-wrap: wrap; }
  .stat-card__row { flex: 1 1 120px; border-bottom: 0; border-right: 1px solid var(--border-soft); padding: .75rem 1.5rem .75rem 0; }
  .stat-card__row:last-child { border-right: 0; }
  .page-hero__media { border-radius: var(--radius-lg); }
  .manifesto__grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
  .timeline::before { display: none; }
  .timeline__item { padding-top: 2.5rem; }
  .timeline__item::before { top: 0; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .process__step { grid-template-columns: 3rem 1fr; }
  .process__media { display: none; }
  .cta-strip__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .certs__strip { gap: 1rem; }
  .certs__item { flex: 1 1 130px; padding: 1.5rem 1rem; }
  .process__step { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
}

/* ============================================================
   CHI SIAMO — TABLET (max-width: 1023px) extra polish
   ============================================================ */
@media (max-width: 1023px) {
  .page-hero__content h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
  .page-hero__media { aspect-ratio: 16 / 7; }
}

/* ============================================================
   CHI SIAMO — MOBILE (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* ── Page Hero ── */
  .page-hero {
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }
  .page-hero__inner {
    row-gap: 1.5rem;
  }
  .page-hero__content {
    padding-bottom: 0;
  }
  .page-hero__content h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    letter-spacing: -.025em;
    margin: .75rem 0 1rem;
  }
  .page-hero__sub {
    font-size: var(--step-0);
    max-width: none;
  }
  /* Stat card: compact horizontal strip */
  .page-hero__stat-card {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: .85rem 1rem;
    gap: 0;
    margin-bottom: 0;
  }
  .stat-card__row {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--border-soft);
    border-bottom: none;
    padding: .4rem .6rem;
    gap: .15rem;
  }
  .stat-card__row:first-child { padding-left: .4rem; }
  .stat-card__row:last-child  { border-right: none; }
  .stat-card__value { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  .stat-card__label { font-size: .62rem; letter-spacing: .04em; }
  /* Hero image: proper mobile ratio */
  .page-hero__media { aspect-ratio: 16 / 9; }

  /* ── Section titles ── */
  .section__title { font-size: var(--step-4); line-height: 1.05; }
  .section__lead  { font-size: var(--step-0); }

  /* ── Manifesto ── */
  .manifesto__card {
    padding: 1.5rem 1.25rem;
    gap: .7rem;
  }
  .manifesto__card h3 { font-size: var(--step-1); }
  .manifesto__icon { width: 44px; height: 44px; }

  /* ── Timeline ── */
  .timeline__item {
    padding-top: 4.5rem; /* dot (14px) + gap → year → gap → body */
  }
  .timeline__item::before {
    top: 1rem; /* dot anchored near top */
  }
  .timeline__item--now::before {
    top: .9rem;
  }
  .timeline__year {
    font-size: .72rem;
    top: 2.4rem;      /* sits below the dot */
    line-height: 1.4;
  }
  .timeline__body h3 { font-size: var(--step-0); font-weight: 700; }
  .timeline__body p  { font-size: .85rem; }

  /* ── Founder card ── */
  .founder__name { font-size: var(--step-2); }
  .founder__body p { font-size: .9rem; }
  .founder__skills { gap: .35rem; }
  .founder__skills li { font-size: .72rem; }

  /* ── Process steps ── */
  .process__step { padding: 1.4rem 0; }
  .process__num  { font-size: 1.8rem; }
  .process__body h3 { font-size: var(--step-0); font-weight: 700; }
  .process__body p  { font-size: .88rem; }

  /* ── Certs ── */
  .certs__item { flex: 1 1 120px; padding: 1.25rem .75rem; gap: .6rem; }
  .certs__logo { width: 44px; height: 44px; }
  .certs__name { font-size: .88rem; }
  .certs__detail { font-size: .74rem; }

  /* ── CTA strip ── */
  .cta-strip h2 { font-size: var(--step-3); }
  .cta-strip p  { font-size: var(--step-0); }
  .cta-strip__actions {
    flex-direction: column;
    width: 100%;
  }
  .cta-strip__actions .btn {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* ============================================================
   CHI SIAMO — EXTRA SMALL (max-width: 400px)
   ============================================================ */
@media (max-width: 400px) {
  .page-hero__content h1 { font-size: clamp(1.75rem, 9.5vw, 2.2rem); }
  .manifesto__card h3    { font-size: var(--step-0); }
  .page-hero__stat-card  { padding: .6rem .75rem; }
  .stat-card__value      { font-size: clamp(1.1rem, 5vw, 1.4rem); }
}

/* ========================================================================
   SERVICES HUB + SERVICE PAGES
   ======================================================================== */

/* --- Hub hero variant --- */
.page-hero--hub { padding-bottom: clamp(3rem,2rem+2vw,5rem); }
.hub-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 2rem;
  padding-bottom: clamp(3rem,2rem+2vw,5rem);
}
.hub-hero__text h1 { font-size:var(--step-5); line-height:.95; letter-spacing:-.025em; margin:1rem 0 1.2rem; }
.hub-hero__text p  { font-size:var(--step-1); color:var(--ink-soft); max-width:56ch; }
.hub-hero__meta {
  display:flex; flex-direction:column; gap:.75rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:3.5rem 4rem;
  box-shadow:var(--shadow-md);
  min-width:360px;
}
.hub-meta__item { display:flex; flex-direction:column; padding:2rem 0; border-bottom:1px solid var(--border-soft); }
.hub-meta__item:last-child { border-bottom:0; padding-bottom:0; }
.hub-meta__item:first-child { padding-top:0; }
.hub-meta__val { font-family:var(--font-head); font-size:clamp(3.6rem,2.6rem+2.2vw,5rem); font-weight:700; line-height:1; letter-spacing:-.03em; }
.hub-meta__val small { font-size:.55em; color:var(--accent-text); margin-left:.1em; }
.hub-meta__lab { font-size:1.1rem; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; margin-top:.75rem; }

/* --- Filter bar --- */
.filter-bar {
  position:sticky; top:64px; z-index:50;
  background:color-mix(in oklab,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.filter-bar__inner { display:flex; gap:.5rem; padding:.75rem 0; overflow-x:auto; scrollbar-width:none; }
.filter-bar__inner::-webkit-scrollbar { display:none; }
.filter-btn {
  flex-shrink:0;
  padding:.45rem 1.1rem;
  font-family:var(--font-head); font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:99px;
  color:var(--ink-soft);
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);
}
.filter-btn:hover { border-color:var(--ink); color:var(--ink); }
.filter-btn.is-active { background:var(--ink); border-color:var(--ink); color:var(--bg); }
[data-theme="blueprint"] .filter-btn.is-active { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* --- Hub cards grid --- */
.hub-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:1fr;
  gap:1.1rem;
}
.hub-card--bento-1 { grid-column:span 6; }
.hub-card--bento-2 { grid-column:span 3; }
.hub-card--bento-3 { grid-column:span 3; }
.hub-card--bento-4 { grid-column:span 3; }
.hub-card--bento-5 { grid-column:span 6; }
.hub-card--bento-6 { grid-column:span 3; }
.hub-card {
  position:relative;
  display:flex; flex-direction:column; gap:1rem;
  padding:2rem 1.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out),border-color var(--dur-med),box-shadow var(--dur-med);
  isolation:isolate;
}
.hub-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:translateX(-100%); transition:transform .9s var(--ease-in-out);
}
.hub-card::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--accent-soft),transparent 65%);
  opacity:0; transition:opacity var(--dur-med); z-index:-1; pointer-events:none;
}
.hub-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.hub-card:hover::before { transform:translateX(100%); }
.hub-card:hover::after  { opacity:1; }
.hub-card--feature { grid-column:span 2; }
.hub-card__num {
  font-family:var(--font-mono); font-size:3.5rem; font-weight:700;
  line-height:1; letter-spacing:-.04em;
  color:var(--border); position:absolute; top:1.5rem; right:1.75rem;
  transition:color var(--dur-med);
}
.hub-card:hover .hub-card__num { color:var(--accent); }
.hub-card__icon {
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; color:var(--ink);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.hub-card:hover .hub-card__icon { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.hub-card__icon svg { width:26px; height:26px; }
.hub-card h2 { font-size:var(--step-2); letter-spacing:-.01em; padding-right:4rem; margin-bottom:.25rem; }
.hub-card--feature h2 { font-size:var(--step-3); }
.hub-card p  { font-size:.93rem; color:var(--ink-soft); line-height:1.65; flex:1; margin-top:.5rem; }
.hub-card__specs {
  display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--border-soft);
}
.hub-card__specs span {
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .65rem; background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--ink-soft);
}
.hub-card__cta {
  font-family:var(--font-head); font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  transition:color var(--dur-fast);
}
.hub-card:hover .hub-card__cta { color:var(--ink); }
/* Whole-card click target — CTA link covers the article */
.hub-card { cursor:pointer; }
.hub-card__cta::before {
  content:""; position:absolute; inset:0; z-index:1;
}
@media (pointer: coarse) {
  .hub-card__cta { color:var(--ink); }
}

/* --- Bundles --- */
.bundles__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.bundle__card {
  padding:2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:1rem;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast);
}
.bundle__card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.bundle__label {
  font-family:var(--font-head); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text);
}
.bundle__tags { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.bundle__tag {
  padding:.3rem .8rem; border:1px solid var(--border); border-radius:99px;
  font-family:var(--font-head); font-size:.78rem; font-weight:600;
  color:var(--ink); transition:border-color var(--dur-fast),background var(--dur-fast);
}
.bundle__tag:hover { border-color:var(--accent); background:var(--accent-soft); }
.bundle__plus { font-size:1rem; color:var(--ink-soft); font-weight:700; }
.bundle__card p { font-size:.9rem; color:var(--ink-soft); line-height:1.65; }

/* --- Service page hero --- */
.svc-hero {
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:clamp(7rem,5rem+4vw,11rem);
  padding-bottom:clamp(6rem, 4rem + 5vw, 10rem);
}
.svc-hero__bg {
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 80% 0%,var(--accent-soft),transparent 50%),
             radial-gradient(ellipse at 10% 100%,color-mix(in oklab,var(--bg-alt) 60%,transparent),transparent 55%);
}
.svc-hero__inner {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:2.5rem; align-items:start;
}
.breadcrumb { grid-column:1/-1; }
.svc-hero__content h1 { font-size:var(--step-5); line-height:.95; letter-spacing:-.025em; margin:1rem 0 1.2rem; }
.svc-hero__content h1 .accent-highlight::after { content:"."; }
.svc-hero__content p  { font-size:var(--step-1); color:var(--ink-soft); max-width:54ch; line-height:1.7; }

/* Spec card */
.spec-card {
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  border-radius:var(--radius-lg); padding:1.75rem 2rem;
  box-shadow:var(--shadow-md);
}
.spec-card__title {
  font-size:.78rem; font-family:var(--font-head); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text);
  margin-bottom:1.25rem;
}
.spec-card__list { margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.spec-card__list > div {
  display:grid; grid-template-columns:.9fr 1.1fr; gap:.5rem;
  padding:.7rem 0; border-bottom:1px solid var(--border-soft);
}
.spec-card__list > div:last-child { border-bottom:0; padding-bottom:0; }
.spec-card__list dt { font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; align-self:center; }
.spec-card__list dd { margin:0; font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--ink); }

/* Service hero media */
.svc-hero__media {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 7;
  box-shadow: var(--shadow-lg);
}
.svc-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* --- Scenario cards --- */
.scenario__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.scenario__card {
  padding:1.75rem 1.5rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:.75rem;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast);
}
.scenario__card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--accent); }
.scenario__icon {
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; color:var(--ink);
}
.scenario__icon svg { width:22px; height:22px; }
.scenario__card h3 { font-size:var(--step-1); }
.scenario__card p  { font-size:.88rem; color:var(--ink-soft); line-height:1.65; }

/* --- 3-column variant (e.g. monitoraggio 3 cards) --- */
.scenario__grid--trio {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px) {
  .scenario__grid--trio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:580px) {
  .scenario__grid--trio { grid-template-columns: 1fr; }
}

/* --- Monitoraggio split intro: text left / image right --- */
.mon-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.mon-intro__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mon-intro__text p {
  font-size: .97rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.mon-intro__text p strong { color: var(--ink); }
.mon-intro__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 9%, transparent);
}
.mon-intro__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width:860px) {
  .mon-intro {
    grid-template-columns: 1fr;
  }
}

/* --- Scenario bento (asymmetric grid) --- */
.scenario__grid--bento {
  grid-template-columns:repeat(3,1fr);
  grid-auto-flow:dense;
  gap:1.25rem;
}
.scenario__grid--bento .scenario__card { position:relative; overflow:hidden; }
.scenario__grid--bento .scenario__card--lg { grid-column:span 2; }
.scenario__grid--bento .scenario__card--feat {
  grid-column:span 2;
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--surface) 70%);
  border-color:transparent;
}
.scenario__grid--bento .scenario__card--feat .scenario__icon {
  background:var(--surface); border-color:transparent; color:var(--accent);
}
.scenario__grid--bento .scenario__card--feat h3 { font-size:var(--step-2); line-height:1.2; }
.scenario__grid--bento .scenario__card--feat p { font-size:.95rem; max-width:60ch; }
@media (max-width:900px) {
  .scenario__grid--bento { grid-template-columns:repeat(2,1fr); }
  .scenario__grid--bento .scenario__card--lg,
  .scenario__grid--bento .scenario__card--feat { grid-column:span 2; }
}
@media (max-width:560px) {
  .scenario__grid--bento { grid-template-columns:1fr; gap:1rem; }
  .scenario__grid--bento .scenario__card--lg,
  .scenario__grid--bento .scenario__card--feat { grid-column:span 1; }
}

/* --- Scenario duo (2 wide horizontal panels) --- */
.scenario__grid--duo {
  grid-template-columns:repeat(2,1fr);
  gap:1.75rem;
  max-width:1100px;
  margin-inline:auto;
}
.scenario__card--wide {
  flex-direction:row;
  align-items:flex-start;
  gap:1.5rem;
  padding:2.25rem 2.25rem;
}
.scenario__icon--lg {
  width:72px; height:72px;
  flex-shrink:0;
  border-radius:16px;
  background:var(--accent-soft);
  border-color:transparent;
  color:var(--ink);
}
.scenario__icon--lg svg { width:32px; height:32px; }
.scenario__body { display:flex; flex-direction:column; gap:.65rem; min-width:0; }
.scenario__card--wide h3 { font-size:var(--step-2); line-height:1.2; }
.scenario__card--wide p { font-size:.95rem; }
@media (max-width:768px) {
  .scenario__grid--duo { grid-template-columns:1fr; gap:1rem; }
  .scenario__card--wide { padding:1.5rem 1.25rem; gap:1rem; }
  .scenario__icon--lg { width:56px; height:56px; }
  .scenario__icon--lg svg { width:26px; height:26px; }
}

/* --- Service process list --- */
.svc-process {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.svc-process li {
  display:grid; grid-template-columns:3.5rem 1fr; gap:1.5rem;
  align-items:start; padding:1.75rem 0;
  border-bottom:1px solid var(--border-soft);
}
.svc-process li:last-child { border-bottom:0; }
.svc-process__n {
  font-family:var(--font-mono); font-size:2rem; font-weight:700;
  color:var(--border); line-height:1.1; letter-spacing:-.04em;
  transition:color var(--dur-med);
}
.svc-process li:hover .svc-process__n { color:var(--accent); }
.svc-process h3 { font-size:var(--step-2); margin-bottom:.5rem; }
.svc-process p  { font-size:.93rem; color:var(--ink-soft); line-height:1.7; max-width:60ch; }

/* --- Deliverable + FAQ — stacked full-width --- */
.svc-deliver {
  display:flex; flex-direction:column; gap:clamp(4.5rem,3rem+5vw,8rem);
}

/* Deliverable card grid */
.deliver__list {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem;
}
.deliver__list li {
  display:flex; align-items:flex-start; gap:.85rem;
  font-size:1rem; line-height:1.55;
  padding:1.15rem 1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.deliver__list li:hover {
  border-color:var(--accent);
  box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
}
.deliver__list li em { color:var(--ink-soft); font-style:normal; font-weight:500; }
.deliver__group-title {
  font-family:var(--font-head); font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:1.75rem 0 .85rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border-soft);
}
.deliver__group-title:first-of-type { margin-top:1.25rem; }
.faq__group-title {
  font-family:var(--font-head); font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:1.5rem 0 .25rem;
}
.faq__group-title:first-of-type { margin-top:.75rem; }
.deliver__list svg {
  flex-shrink:0; width:26px; height:26px; color:var(--accent);
  background:var(--accent-soft); border-radius:8px; padding:4px; margin-top:.1rem;
}

/* Gap after svc-deliver when sibling content follows in same container */
.svc-deliver + .scenario__grid {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.svc-deliver + .scenario__grid + .deliver__block,
.deliver__block {
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
}

/* FAQ accordion */
.svc-faq { display:flex; flex-direction:column; gap:.5rem; }
.svc-faq > .section__title { margin-bottom:.75rem; }
/* Reduce section__title margin inside svc-faq (overrides servizi-page rule) */
body[data-nav="servizi"] .svc-faq > .section__title {
  margin-bottom: .75rem;
}
.faq-item {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--surface);
}
.faq-item summary {
  list-style:none; padding:1rem 1.25rem;
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  transition:background var(--dur-fast);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"+"; font-size:1.4rem; font-weight:300; color:var(--ink-soft);
  flex-shrink:0; transition:transform var(--dur-med);
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { background:var(--bg); }
.faq-item[open] summary { background:var(--accent-soft); }
.faq-item p {
  padding:.75rem 1.25rem 1.25rem;
  font-size:.9rem; color:var(--ink-soft); line-height:1.7;
}

/* --- Cross-sell --- */
.crosssell__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.crosssell__card {
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  padding:2rem 1.75rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--dur-med),border-color var(--dur-med),box-shadow var(--dur-med);
}
.crosssell__card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.crosssell__num {
  font-family:var(--font-mono); font-size:2.5rem; font-weight:700;
  color:var(--border); line-height:1; position:absolute; top:1.5rem; right:1.75rem;
  transition:color var(--dur-med);
}
.crosssell__card:hover .crosssell__num { color:var(--accent); }
.crosssell__card h3 { font-size:var(--step-2); padding-right:3rem; }
.crosssell__card p  { font-size:.9rem; color:var(--ink-soft); line-height:1.65; }

/* --- Hub + service responsive --- */

/* Tablet (≤ 1023px) */
@media (max-width:1023px) {
  /* Hub */
  .hub-hero { grid-template-columns:1fr; }
  .hub-hero__meta { flex-direction:row; flex-wrap:wrap; }
  .hub-meta__item { flex:1 1 120px; border-bottom:0; border-right:1px solid var(--border-soft); padding:.75rem 1.5rem .75rem 0; }
  .hub-meta__item:last-child { border-right:0; }
  .hub-grid {
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:auto;
    gap:1rem;
  }
  .hub-card--feature { grid-column:1/-1; }
  .hub-card--bento-1,
  .hub-card--bento-2,
  .hub-card--bento-3,
  .hub-card--bento-4,
  .hub-card--bento-5,
  .hub-card--bento-6 { grid-column:span 1; }
  .hub-card { padding:1.75rem 1.5rem; }
  .hub-card h2 { font-size:var(--step-1); padding-right:3rem; }
  .hub-card--bento-1 h2,
  .hub-card--bento-5 h2 { font-size:var(--step-1); }
  .hub-card__num { font-size:2.4rem; top:1.25rem; right:1.25rem; }
  .hub-card__icon { width:46px; height:46px; }
  .hub-card__icon svg { width:24px; height:24px; }
  .hub-card__specs { gap:.4rem; }
  .hub-card__specs span { font-size:.68rem; padding:.2rem .5rem; }
  .filter-btn { font-size:.78rem; padding:.45rem 1rem; }
  .bundles__grid { grid-template-columns:1fr 1fr; }

  /* Service detail */
  .svc-hero__inner { grid-template-columns:1fr; }
  .spec-card { padding:1.5rem; margin-top:1.5rem; width:100%; }
  .svc-hero__media { aspect-ratio:16 / 9; }
  .scenario__grid { grid-template-columns:1fr 1fr; }
  .deliver__list { grid-template-columns:repeat(2, 1fr); }
  .crosssell__grid { grid-template-columns:1fr 1fr; }
}

/* Tablet portrait + large phone (≤ 767px) */
@media (max-width:767px) {
  /* Hub hero */
  .hub-hero { padding-bottom:clamp(2rem,1rem+2vw,3rem); }
  .hub-hero__text h1 { font-size:var(--step-4); }
  .hub-hero__meta { flex-direction:column; gap:0; padding:1.25rem 1.5rem; }
  .hub-meta__item { flex:none; border-right:0; border-bottom:1px solid var(--border-soft); padding:.65rem 0; }
  .hub-meta__item:last-child { border-bottom:0; }

  /* Hub grid */
  .hub-grid { grid-template-columns:1fr; grid-template-rows:none; gap:1rem; grid-auto-rows:auto; }
  .hub-card--feature { grid-column:1; }
  .hub-card--bento-1,
  .hub-card--bento-2,
  .hub-card--bento-3,
  .hub-card--bento-4,
  .hub-card--bento-5,
  .hub-card--bento-6 { grid-area:auto; }
  .hub-card { padding:1.75rem 1.5rem; }
  .hub-card h2 { font-size:var(--step-1); padding-right:3rem; }
  .hub-card--feature h2 { font-size:var(--step-2); }
  .hub-card__num { font-size:2.6rem; top:1.25rem; right:1.25rem; }
  .hub-card__specs { gap:.4rem; }
  .hub-card__specs span { font-size:.68rem; padding:.2rem .5rem; }

  /* Filter bar */
  .filter-btn { font-size:.76rem; padding:.4rem .9rem; }

  /* Bundles */
  .bundles__grid { grid-template-columns:1fr; gap:1rem; }
  .bundle__card { padding:1.5rem; }

  /* Service hero */
  .svc-hero { padding-top:clamp(5rem,4rem+3vw,8rem); padding-bottom:clamp(3rem,2rem+3vw,5rem); }
  .svc-hero__content h1 { font-size:clamp(3rem, 11vw, 4.2rem); line-height:.98; }
  .spec-card { padding:1.25rem 1.5rem; margin-top:1.25rem; }

  /* Hero media: portrait-friendlier ratio */
  .svc-hero__media { aspect-ratio:4 / 3; border-radius:var(--radius); }

  /* Scenario */
  .scenario__grid { grid-template-columns:1fr; gap:1rem; }
  .scenario__card { padding:1.5rem 1.25rem; }

  /* Process steps */
  .svc-process li { grid-template-columns:3rem 1fr; gap:1.25rem; padding:1.5rem 0; }
  .svc-process__n  { font-size:1.6rem; }
  .svc-process h3  { font-size:var(--step-2); }
  .svc-process p   { font-size:1rem; }

  /* Scenario cards */
  .scenario__card h3 { font-size:var(--step-1); }
  .scenario__card p  { font-size:.95rem; }

  /* Deliver + FAQ */
  .svc-deliver { gap:3.5rem; }
  .deliver__list { grid-template-columns:1fr; }
  .deliver__list li  { font-size:1rem; }
  .faq-item summary  { padding:.85rem 1rem; font-size:.95rem; }
  .faq-item p        { padding:.65rem 1rem 1rem; font-size:.95rem; }

  /* Hub cards */
  .hub-card p { font-size:1rem; }

  /* Cross-sell */
  .crosssell__grid { grid-template-columns:1fr; gap:1rem; }
  .crosssell__card { padding:1.75rem 1.5rem; }
  .crosssell__card p { font-size:.95rem; }
}

/* Small phone (≤ 540px) */
@media (max-width:540px) {
  .hub-card { padding:1.5rem 1.25rem; }
  .hub-card h2 { font-size:var(--step-0); padding-right:2.5rem; }
  .hub-card__num { font-size:2rem; }
  .hub-hero__text h1 { font-size:var(--step-3); }
  .hub-meta__val { font-size:clamp(1.4rem,1.2rem+1vw,1.8rem); }
  .spec-card__list > div { grid-template-columns:1fr; gap:.15rem; }
  .spec-card__list dt { font-size:.72rem; }
  .svc-process li { grid-template-columns:2.5rem 1fr; gap:1rem; }
  .svc-process__n { font-size:1.4rem; }
  .svc-hero__media { aspect-ratio:3 / 2; }
  .scenario__card { padding:1.25rem 1rem; }
  .crosssell__card { padding:1.5rem 1.25rem; }
}

/* ========================================================================
   CONTATTI PAGE
   ======================================================================== */

/* --- Hero split --- */
.cnt-hero {
  position: relative;
  padding: clamp(8rem, 6rem + 4vw, 12rem) 0 clamp(4rem, 2rem + 3vw, 6rem);
  overflow: hidden; isolation: isolate;
}
.cnt-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 90% 0%, var(--accent-soft), transparent 45%),
    radial-gradient(ellipse at 5% 100%, color-mix(in oklab, var(--bg-alt) 50%, transparent), transparent 50%);
}
.cnt-hero__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.7fr);
  grid-template-rows: auto auto;
  column-gap: 4rem;
  align-items: center;
}
.cnt-hero__inner .breadcrumb { grid-column: 1 / -1; }
.cnt-hero__text h1 {
  font-size: clamp(2.8rem, 2rem + 4vw, 5.5rem);
  line-height: .92; letter-spacing: -.03em; margin: 1rem 0 1.4rem;
}
.cnt-hero__text p { font-size: var(--step-1); color: var(--ink-soft); max-width: 48ch; }

/* Quick contact links */
.cnt-quick {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.cnt-quick__link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--ink);
  transition: color var(--dur-fast);
}
.cnt-quick__link svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.cnt-quick__link:hover { color: var(--accent); }

/* Italy map */
.cnt-hero__map {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  margin: 0;
}
.cnt-hero__map figcaption {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); font-weight: 600;
}
.italy-map { width: 100%; max-width: 260px; height: auto; }
.italy-map__land {
  fill: var(--surface-2, var(--bg-alt));
  stroke: var(--border);
  stroke-width: 1.5;
}
.italy-map__cover {
  fill: color-mix(in oklab, var(--accent) 12%, transparent);
  stroke: none;
}
.italy-map__dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}
.italy-map__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: .4;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { r: 12; opacity: .4; }
  100% { r: 22; opacity: 0; }
}
.italy-map__label {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  fill: var(--ink-soft); letter-spacing: .06em;
}

/* --- Channel cards --- */
.cnt-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.cnt-channel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  position: relative; overflow: hidden;
}
.cnt-channel:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cnt-channel.is-copied { border-color: var(--accent); background: var(--accent-soft); }
.cnt-channel__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  margin-bottom: 1.25rem;
  transition: background var(--dur-fast);
}
.cnt-channel:hover .cnt-channel__icon { background: var(--accent); }
.cnt-channel:hover .cnt-channel__icon svg { color: var(--accent-ink); }
.cnt-channel__icon svg { width: 20px; height: 20px; color: var(--ink-soft); transition: color var(--dur-fast); }
.cnt-channel__label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); font-weight: 700;
  margin-bottom: .3rem;
}
.cnt-channel__value {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  margin-bottom: .5rem;
}
.cnt-channel__hint {
  font-size: .78rem; color: var(--ink-soft);
  transition: color var(--dur-fast);
}
.cnt-channel.is-copied .cnt-channel__hint { color: var(--accent); font-weight: 600; }
.cnt-channel__body-wrap {
  display: flex; flex-direction: column;
}

/* --- Map + info layout --- */
.cnt-map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.cnt-map-wrap {
  position: relative;
  padding-bottom: 42%;   /* aspect ratio ~21:9 wide */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .cnt-map-wrap { padding-bottom: 75%; }
}
.cnt-map-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(20%);
  transition: filter .3s;
}
.cnt-map-wrap:hover iframe { filter: grayscale(0%); }

.cnt-map-side {
  display: flex; flex-direction: column; gap: 2.5rem;
}

.cnt-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .cnt-info-row { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- Info blocks (cards) --- */
.cnt-info-block {
  display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cnt-info-block .eyebrow { margin-bottom: 0; }
.cnt-info-block__title {
  font-size: clamp(1.2rem, .95rem + .9vw, 1.55rem);
  letter-spacing: -.02em; margin: .15rem 0 .75rem;
  font-family: var(--font-head); font-weight: 700;
}
.cnt-info-block__note { font-size: .88rem; color: var(--ink-soft); line-height: 1.65; }

/* Hours table */
.cnt-hours {
  border-collapse: collapse; width: 100%; font-size: .9rem;
}
.cnt-hours td {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.cnt-hours td:first-child { color: var(--ink-soft); width: 45%; }
.cnt-hours td:last-child { text-align: right; }

/* Response times list */
.cnt-response-times {
  list-style: none; padding: 0; margin: .75rem 0 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.cnt-response-times li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .88rem; color: var(--ink-soft);
}
.cnt-response-times li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

/* Fiscal data */
.cnt-fiscal {
  display: flex; flex-direction: column; gap: 0; margin: 0;
}
.cnt-fiscal > div {
  display: flex; flex-direction: column;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.cnt-fiscal > div:last-child { border-bottom: 0; }
.cnt-fiscal dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 700; margin-bottom: .15rem;
}
.cnt-fiscal dd {
  font-family: var(--font-mono, monospace); font-size: .88rem;
  font-weight: 600; margin: 0;
}

/* --- Contatti responsive --- */
@media (max-width: 1199px) {
  .cnt-channels { grid-template-columns: repeat(2, 1fr); }
  .cnt-map-layout { grid-template-columns: 1fr 320px; gap: 2rem; }
}
@media (max-width: 1023px) {
  .cnt-hero__inner { column-gap: 2.5rem; }
  .cnt-map-layout { grid-template-columns: 1fr; }
  .cnt-map-wrap { padding-bottom: 52%; }
  .cnt-map-side { flex-direction: row; gap: 2rem; }
  .cnt-map-side .cnt-info-block { flex: 1; }
}
@media (max-width: 767px) {
  .cnt-hero {
    padding-top: clamp(6rem, 4rem + 4vw, 9rem);
    padding-bottom: 3rem;
  }
  .cnt-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .cnt-hero__map { display: none; }
  .cnt-hero__text h1 { font-size: clamp(2.2rem, 1.5rem + 5vw, 3.6rem); }
  .cnt-hero__text p { font-size: var(--step-0); }
  .cnt-quick { margin-top: 1.5rem; gap: .8rem; }
  .cnt-quick__link { font-size: .9rem; }

  .cnt-channels {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
  .cnt-channel { padding: 1.5rem 1.25rem; }
  .cnt-channel__value { font-size: .88rem; word-break: break-all; }

  .cnt-map-wrap { padding-bottom: 65%; }
  .cnt-map-side { flex-direction: column; gap: 2.5rem; }
}
@media (max-width: 480px) {
  .cnt-channels { grid-template-columns: 1fr; gap: .85rem; }
  .cnt-channel {
    flex-direction: row; align-items: center; gap: 1rem;
    padding: 1.1rem 1.2rem;
  }
  .cnt-channel__icon { margin-bottom: 0; flex-shrink: 0; width: 38px; height: 38px; }
  .cnt-channel__body-wrap { display: flex; flex-direction: column; }
  .cnt-map-wrap { padding-bottom: 75%; }
}

/* ---------- Contact cards (contatti page) ---------- */
.contact-cards {
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: 2rem;
}
.contact-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  text-decoration: none;
}
.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.contact-card svg {
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--accent);
}
.contact-card__label {
  display: block;
  font-size: .75rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); font-weight: 600;
  line-height: 1;
  margin-bottom: .2rem;
}
.contact-card__value {
  display: block;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
}

/* ========================================================================
   TECNOLOGIE PAGE
   ======================================================================== */

/* --- Hero --- */
.page-hero--tec { padding-bottom: 0; }
.tec-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .4;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.tec-hero {
  padding-top: clamp(2.5rem, 1.5rem + 2vw, 4rem) !important;
  padding-bottom: clamp(4rem, 3rem + 3vw, 7rem) !important;
}
.tec-hero h1 {
  font-size: clamp(2.6rem, 2rem + 3vw, 5rem);
  line-height: .95; letter-spacing: -.025em;
  margin: 1rem 0 1.5rem;
}
.accent-highlight {
  color: inherit;
  background-image: linear-gradient(180deg, transparent 0 55%, var(--accent) 55% 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="blueprint"] .accent-highlight {
  color: var(--accent);
  background-image: none;
}
.tec-hero p { font-size: var(--step-1); color: var(--ink-soft); max-width: 54ch; }
.tec-hero__stats {
  display: flex; gap: 2.5rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--border-soft);
}
.tec-stat__v {
  display: block;
  font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--accent-text);
}
.tec-stat__l {
  display: block;
  font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); margin-top: .25rem;
}

/* --- Sticky tabs --- */
.tec-tabs {
  position: sticky; top: 64px; z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.tec-tabs__inner {
  display: flex; gap: .25rem;
  justify-content: center;
  padding: .6rem 0; overflow-x: auto; scrollbar-width: none;
}
@media (max-width: 767px) {
  .tec-tabs__inner { justify-content: flex-start; }
}
.tec-tabs__inner::-webkit-scrollbar { display: none; }
.tec-tab {
  flex-shrink: 0;
  padding: .5rem 1.1rem;
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 99px;
  color: var(--ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
}
.tec-tab:hover { color: var(--ink); background: var(--surface); }
.tec-tab.is-active { background: var(--ink); color: var(--bg); }
[data-theme="blueprint"] .tec-tab.is-active { background: var(--accent); color: var(--accent-ink); }

/* --- Hardware grid --- */
.hw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.hw-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.hw-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hw-card__image {
  display: flex; align-items: center; justify-content: center;
  height: 120px;
  background: color-mix(in oklab, var(--bg-alt) 60%, transparent);
  border-bottom: 1px solid var(--border-soft);
}
.hw-card__image svg { width: 52px; height: 52px; color: var(--ink-soft); }
.hw-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.hw-card__cat {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); font-weight: 600;
}
.hw-card__body h3 { font-size: var(--step-1); margin: 0; }
.hw-specs {
  display: grid; grid-template-columns: 1fr; gap: .35rem;
  margin: .5rem 0; padding: .75rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.hw-specs > div { display: flex; justify-content: space-between; align-items: baseline; }
.hw-specs dt { font-size: .78rem; color: var(--ink-soft); }
.hw-specs dd {
  font-family: var(--font-mono, monospace); font-size: .82rem;
  font-weight: 600; color: var(--ink); margin: 0;
}
.hw-card__link {
  font-size: .82rem; font-weight: 600;
  color: var(--accent-text); font-family: var(--font-head);
  letter-spacing: .04em; margin-top: auto;
  transition: opacity var(--dur-fast);
}
.hw-card__link:hover { opacity: .7; }

/* --- Software grid --- */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.sw-card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  position: relative;
  overflow: hidden;
}
.sw-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Background instrument image */
.sw-card__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .12;
  transition: opacity var(--dur-fast);
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}
.sw-card:hover .sw-card__bg { opacity: .20; }
/* Keep all direct children above the background */
.sw-card > *:not(.sw-card__bg) { position: relative; z-index: 1; }
/* Featured card (2×2): slightly more visible image */
#strumentazione .sw-card:nth-child(1) .sw-card__bg {
  opacity: .18;
  object-position: center center;
}
#strumentazione .sw-card:nth-child(1):hover .sw-card__bg { opacity: .28; }
/* Blueprint dark theme: images show a bit more against dark bg */
[data-theme="blueprint"] .sw-card__bg { opacity: .18; }
[data-theme="blueprint"] .sw-card:hover .sw-card__bg { opacity: .28; }
[data-theme="blueprint"] #strumentazione .sw-card:nth-child(1) .sw-card__bg { opacity: .24; }
[data-theme="blueprint"] #strumentazione .sw-card:nth-child(1):hover .sw-card__bg { opacity: .35; }
.sw-card__logo {
  height: 40px; display: flex; align-items: center;
  margin-bottom: .5rem;
}
.sw-card__logo img {
  height: 32px;
  max-height: 32px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter var(--dur-fast);
}
.sw-card:hover .sw-card__logo img { filter: none; }
.sw-card__logo--placeholder {
  font-family: var(--font-mono, monospace); font-weight: 700;
  font-size: 1rem; color: var(--ink-soft);
  background: var(--bg-alt); border-radius: var(--radius-sm);
  width: 48px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.sw-card h3 { font-size: .95rem; margin: 0; }
.sw-card__role {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-text); font-weight: 700;
}
.sw-card p { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }

/* --- Strumentazione: featured-hero layout (Option B) --- */
@media (min-width: 1024px) {
  #strumentazione .sw-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
  #strumentazione .sw-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    padding: 2rem;
    justify-content: flex-end;
  }
  #strumentazione .sw-card:nth-child(1) h3 { font-size: var(--step-2); }
  #strumentazione .sw-card:nth-child(1) .sw-card__role { font-size: .82rem; }
  #strumentazione .sw-card:nth-child(1) p {
    font-size: .98rem;
    line-height: 1.65;
    max-width: 48ch;
  }
}

/* --- Formati aperti grid --- */
.fmt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.fmt-card {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.fmt-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fmt-card__ext {
  display: inline-block;
  font-family: var(--font-mono, monospace); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent-text);
  margin-bottom: .75rem;
  line-height: 1;
}
.fmt-card h3 { font-size: .9rem; margin-bottom: .5rem; }
.fmt-card p { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }

/* --- Workflow chain --- */
.wf-chain {
  display: flex; gap: 0;
  list-style: none; padding: 0; margin: 3rem 0 0;
  position: relative;
}
.wf-chain::before {
  content: "";
  position: absolute; top: 2.1rem; left: 2.5rem; right: 2.5rem; height: 2px;
  background: var(--border);
  z-index: 0;
}
.wf-step {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 .75rem;
  position: relative; z-index: 1;
}
.wf-step__num {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.wf-step:hover .wf-step__num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.wf-step__title { font-family: var(--font-head); font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.wf-step__desc { font-size: .75rem; color: var(--ink-soft); line-height: 1.4; margin-bottom: .75rem; max-width: 16ch; }
.wf-step__tools {
  display: flex; flex-direction: column; gap: .25rem; align-items: center;
}
.wf-step__tools span {
  font-size: .68rem; font-family: var(--font-mono, monospace);
  padding: .15rem .55rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* --- QC grid --- */
.qc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.qc-item {
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.qc-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.qc-item__num {
  font-family: var(--font-mono, monospace); font-size: 3rem; font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  color: var(--border);
  display: block; margin-bottom: 1rem;
  transition: color var(--dur-fast);
}
.qc-item:hover .qc-item__num { color: var(--accent); }
.qc-item h3 { font-size: var(--step-0); margin-bottom: .6rem; }
.qc-item p { font-size: .85rem; color: var(--ink-soft); line-height: 1.65; }

/* --- Tecnologie responsive --- */
/* Tablet (≤ 1023px) */
@media (max-width: 1023px) {
  .hw-grid  { grid-template-columns: repeat(2, 1fr); }
  .sw-grid  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .fmt-grid { grid-template-columns: repeat(2, 1fr); }
  .qc-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Stats: allow wrap, tighten gap */
  .tec-hero__stats { flex-wrap: wrap; gap: 1.5rem 2rem; }

  /* Workflow → vertical timeline / stepper */
  .wf-chain {
    flex-direction: column;
    gap: 2rem;
    padding-left: 0;
  }
  /* Re-purpose horizontal connector as a vertical rail through the circles */
  .wf-chain::before {
    display: block;
    top: 1.5rem;          /* starts at center of first 3rem circle */
    bottom: 1.5rem;       /* ends at center of last 3rem circle */
    left: calc(1.5rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .wf-step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "num title"
      "num desc"
      "num tools";
    column-gap: 1.25rem;
    row-gap: .35rem;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .wf-step__num {
    grid-area: num;
    align-self: start;
    margin-bottom: 0;
    width: 3rem; height: 3rem;
    position: relative;
    z-index: 1;
    background: var(--surface);  /* opaque so it punches through the rail */
  }
  .wf-step:hover .wf-step__num {
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .wf-step__title {
    grid-area: title;
    font-size: var(--step-0);
    letter-spacing: -.01em;
    margin-bottom: 0;
    align-self: center;
    min-height: 3rem;
    display: flex;
    align-items: center;
  }
  .wf-step__desc {
    grid-area: desc;
    max-width: none;
    margin: 0;
  }
  .wf-step__tools {
    grid-area: tools;
    flex-direction: row; flex-wrap: wrap;
    justify-content: flex-start;
    gap: .35rem;
    margin-top: .35rem;
  }
  .wf-step__tools span { padding: .2rem .55rem; }
}

/* Tablet portrait + large phone (≤ 767px) */
@media (max-width: 767px) {
  .hw-grid  { grid-template-columns: 1fr; gap: 1rem; }
  .sw-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Stats: stack column */
  .tec-hero__stats { flex-direction: column; gap: 1rem; padding-top: 1.5rem; margin-top: 2rem; }

  /* Cards: lighter padding + smaller icons */
  .hw-card__image { height: 96px; }
  .hw-card__image svg { width: 44px; height: 44px; }
  .hw-card__body { padding: 1.25rem; }
  .sw-card  { padding: 1.25rem; }
  .fmt-card { padding: 1.5rem; }
  .qc-item  { padding: 1.5rem 1.25rem; }
  .qc-item__num { font-size: 2.4rem; margin-bottom: .75rem; }

  /* Hero typography breathes a bit more */
  .tec-hero h1 { margin: .75rem 0 1.25rem; }

  /* Sticky tabs: ensure horizontal scroll has padding */
  .tec-tabs__inner { padding-left: 4px; padding-right: 4px; }
}

/* Small phone (≤ 540px) */
@media (max-width: 540px) {
  .sw-grid  { grid-template-columns: 1fr; }
  .fmt-grid { grid-template-columns: 1fr; }
  .qc-grid  { grid-template-columns: 1fr; }

  .fmt-card__ext { font-size: 1.2rem; }
  .wf-chain { gap: 1.5rem; }
  .wf-chain::before {
    top: 1.3rem; bottom: 1.3rem;
    left: calc(1.3rem - 1px);
  }
  .wf-step {
    grid-template-columns: 2.6rem 1fr;
    column-gap: 1rem;
  }
  .wf-step__num { width: 2.6rem; height: 2.6rem; font-size: .8rem; }
  .wf-step__title { min-height: 2.6rem; font-size: .95rem; }
}

/* ========================================================================
   FAQ PAGE
   ======================================================================== */

/* --- Hero --- */
.page-hero--faq { padding-bottom: clamp(2rem, 1rem + 2vw, 3rem); }
.faq-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  gap: 3rem;
  align-items: end;
  padding: clamp(1rem, .5rem + 2vw, 3rem) 0 clamp(2rem, 1rem + 2vw, 4rem);
}
.faq-hero__text h1 {
  font-size: clamp(2.4rem, 1.8rem + 3vw, 4.5rem);
  line-height: .95; letter-spacing: -.025em; margin: 1rem 0 1.2rem;
}
.faq-hero__text p { font-size: var(--step-1); color: var(--ink-soft); max-width: 52ch; }
.faq-hero__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Search --- */
.faq-search { display: flex; flex-direction: column; gap: .75rem; }
.faq-search__wrap {
  position: relative;
  display: flex; align-items: center;
}
.faq-search__icon {
  position: absolute; left: 1rem;
  width: 18px; height: 18px; color: var(--ink-soft);
  pointer-events: none; flex-shrink: 0;
}
.faq-search__input {
  width: 100%;
  padding: 1rem 3rem 1rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
}
.faq-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.faq-search__input::placeholder { color: var(--ink-muted, var(--ink-soft)); }
.faq-search__input::-webkit-search-cancel-button { display: none; }
.faq-search__clear {
  position: absolute; right: .75rem;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.faq-search__clear:hover { background: var(--bg-alt); color: var(--ink); }
.faq-search__clear svg { width: 16px; height: 16px; }
.faq-search__status {
  font-size: .8rem; color: var(--ink-soft);
  min-height: 1.2em;
}

/* --- Category jump nav --- */
.faq-cats {
  position: sticky; top: 64px; z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.faq-cats__inner {
  display: flex; gap: .25rem;
  padding: .6rem 0; overflow-x: auto; scrollbar-width: none;
}
.faq-cats__inner::-webkit-scrollbar { display: none; }
.faq-cat {
  flex-shrink: 0;
  padding: .45rem 1rem;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px;
  color: var(--ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
  text-decoration: none; white-space: nowrap;
}
.faq-cat:hover { color: var(--ink); background: var(--surface); }
.faq-cat.is-active { background: var(--ink); color: var(--bg); }
[data-theme="blueprint"] .faq-cat.is-active { background: var(--accent); color: var(--accent-ink); }

/* --- Body layout --- */
.faq-container { max-width: 820px; }

.faq-section { padding: clamp(3rem, 2rem + 2vw, 5rem) 0; border-bottom: 1px solid var(--border-soft); }
.faq-section:last-of-type { border-bottom: 0; }
.faq-section__title {
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  letter-spacing: -.02em; margin-bottom: 1.5rem;
  color: var(--ink);
}
.faq-list { display: flex; flex-direction: column; gap: .5rem; }

/* No-results message */
.faq-noresults {
  padding: 3rem 0;
  font-size: var(--step-1); color: var(--ink-soft);
  text-align: center;
}
.faq-noresults a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- FAQ responsive --- */

/* Tablet (≤ 1023px) */
@media (max-width: 1023px) {
  .faq-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
    padding: clamp(1rem, .5rem + 1.5vw, 2rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  .faq-hero__text h1 {
    font-size: clamp(2.2rem, 1.4rem + 4vw, 3.2rem);
    line-height: 1; margin: .75rem 0 1rem;
  }
  .faq-hero__text p { max-width: none; }
  .faq-search { width: 100%; max-width: 560px; }
  .faq-cats { top: 56px; }
  .faq-cats__inner {
    gap: .15rem;
    padding: .55rem 0;
    /* allow edge-to-edge horizontal scroll without clipping inside container */
    margin: 0 calc(var(--container-pad, 1.25rem) * -1);
    padding-left: var(--container-pad, 1.25rem);
    padding-right: var(--container-pad, 1.25rem);
    scroll-padding: 0 var(--container-pad, 1.25rem);
    -webkit-overflow-scrolling: touch;
  }
  .faq-section { padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) 0; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .page-hero--faq { padding-bottom: clamp(1rem, .5rem + 2vw, 2rem); }
  .faq-hero {
    gap: 1.5rem;
    padding: .5rem 0 1.5rem;
  }
  .faq-hero__text h1 {
    font-size: clamp(2rem, 1.4rem + 4vw, 3rem);
    line-height: 1; margin: .75rem 0 .9rem;
  }
  .faq-hero__text p { font-size: 1rem; line-height: 1.55; }

  .faq-search { gap: .55rem; }
  .faq-search__input {
    padding: .85rem 2.75rem;
    font-size: 16px; /* prevent iOS zoom */
    border-radius: 12px;
  }
  .faq-search__icon { left: .9rem; width: 16px; height: 16px; }
  .faq-search__clear { right: .5rem; width: 32px; height: 32px; }
  .faq-search__status { font-size: .75rem; }

  .faq-cat {
    padding: .4rem .85rem;
    font-size: .72rem;
    letter-spacing: .04em;
  }
  .faq-cats__inner { padding-top: .5rem; padding-bottom: .5rem; }

  .faq-section { padding: 2rem 0; }
  .faq-section__title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .faq-list { gap: .45rem; }

  .faq-item summary {
    padding: .9rem 1rem;
    font-size: .92rem;
    gap: .75rem;
    line-height: 1.4;
  }
  .faq-item summary::after { font-size: 1.25rem; }
  .faq-item p {
    padding: .6rem 1rem 1rem;
    font-size: .9rem;
    line-height: 1.65;
  }

  .faq-noresults { padding: 2rem 0; font-size: 1rem; }
}

/* Small phones (≤ 420px) */
@media (max-width: 420px) {
  .faq-hero__text h1 { font-size: clamp(1.75rem, 1.2rem + 5vw, 2.4rem); }
  .faq-search__input { padding: .8rem 2.5rem; }
  .faq-cat { padding: .38rem .75rem; font-size: .7rem; }
  .faq-section__title { font-size: 1.15rem; }
  .faq-item summary { padding: .8rem .85rem; font-size: .88rem; }
  .faq-item p { padding: .55rem .85rem .9rem; font-size: .88rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .service-card::before { display: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
  body.cursor-active, body.cursor-active * { cursor: auto !important; }
}

/* Mobile hero titles — larger, consistent sizing across all pages */
@media (max-width: 767px) {
  .hero__title,
  .page-hero__content h1,
  .cnt-hero__text h1,
  .tec-hero h1,
  .faq-hero__text h1,
  .hub-hero__text h1 {
    font-size: clamp(3rem, 11vw, 4.2rem);
    line-height: .98;
    letter-spacing: -.025em;
  }
}
@media (max-width: 420px) {
  .hero__title,
  .page-hero__content h1,
  .cnt-hero__text h1,
  .tec-hero h1,
  .faq-hero__text h1,
  .hub-hero__text h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }
}