/* Eikonia — concept site. Reference frame: 1440px (Figma). */
/* IBM Plex Sans 400, self-hosted (SIL OFL, see fonts/IBMPlexSans-OFL.txt); subsets and ranges as served by Google Fonts */
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-400-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/WixMadeforText-VariableFont_wght.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --ink: #000;
  --muted: #7a7a7a;
  --line: #b9b9b9;
  --blue: #0f6fa8;       /* link accent on light backgrounds (AA on white) */
  --blue-light: #6cc4f0; /* same accent on dark backgrounds */
  --gutter: clamp(20px, 8.5vw, 122px);
  --text: "Wix Madefor Text", system-ui, sans-serif;
  --plex: "IBM Plex Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; } /* no rubber-band bounce past the top/bottom */
body { margin: 0; background: #fff; color: var(--ink); font: 400 18px/1.4 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--text); font-weight: 600; letter-spacing: -0.01em; line-height: 1.02; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Nav ---------- */
/* At the top the header scrolls away with the page. Past the hand-off point site.js adds .is-compact: the same bar turns
   fixed and morphs into a floating glass card — narrower (--w, measured in site.js), shorter, lower, logo reduced to its
   mark. site.js also slides it from where it was on screen (FLIP on transform), so switching position never jumps. */
.nav { --ease: cubic-bezier(.22,1,.36,1); --dur: .75s; position: absolute; inset: 0 0 auto; z-index: 30; pointer-events: none; transition: transform var(--dur) var(--ease); }
.nav.is-compact { position: fixed; }
.nav .wrap { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0; height: 140px; margin-top: 0; padding-inline: clamp(20px, 4.4vw, 64px); border: 1px solid transparent; border-radius: 0; background-color: transparent; box-shadow: 0 8px 30px transparent;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease), margin-top var(--dur) var(--ease), padding var(--dur) var(--ease), column-gap var(--dur) var(--ease), border-radius var(--dur) var(--ease), background-color .5s ease, border-color .5s ease, box-shadow .5s ease, -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease; }
.nav__logo { width: 226px; overflow: hidden; transition: width var(--dur) var(--ease); }
.nav__logo svg { display: block; width: auto; height: 23.07px; transition: height var(--dur) var(--ease); } /* height drives the wordmark's size; the link's width crops it */
.nav__links { display: flex; gap: 62px; font: 400 16px var(--text); white-space: nowrap; transition: gap var(--dur) var(--ease), font-size var(--dur) var(--ease); }
.nav__links a[aria-current] { font-weight: 700; }
.nav__links a:hover { opacity: .6; }
.nav--light { color: #fff; }
.nav--light .nav__links a:not([aria-current]) { opacity: .6; }
.nav--light .nav__cta { color: var(--blue-light); }
.nav--light .nav__links a:hover { opacity: 1; }
.nav--light.nav--bright .nav__links a { opacity: 1; }
.nav__cta { justify-self: end; color: var(--blue); font: 400 16px var(--text); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: opacity .2s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1), font-size var(--dur) var(--ease); }
.nav__cta:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .nav__cta:hover { opacity: .6; } }
/* compact state */
.nav.is-compact .wrap { width: var(--w); height: 52px; margin-top: 16px; padding-inline: 20px 24px; column-gap: 30px; border-color: rgba(0,0,0,.08); border-radius: 14px; background-color: rgba(255,255,255,.8); box-shadow: 0 8px 30px rgba(0,0,0,.08); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.nav.is-compact .nav__logo { width: 22px; }
.nav.is-compact .nav__logo svg { height: 15.87px; }
/* the letters fade out early (and back in a beat late), so the crop never shows a sliver of the wordmark */
.nav__logo-word { transition: opacity .9s ease .2s; }
.nav.is-compact .nav__logo-word { opacity: 0; transition: opacity .2s ease; }
.nav.is-compact .nav__links { gap: 26px; font-size: 14px; }
.nav.is-compact .nav__cta { font-size: 14px; }
.nav--light.is-compact { color: #000; }
.nav--light.is-compact .nav__links a { opacity: 1; }
.nav--light.is-compact .nav__cta { color: var(--blue); }
.dark .nav.is-compact { color: #fff; }
.dark .nav.is-compact .wrap { border-color: rgba(255,255,255,.12); background-color: rgba(18,18,18,.72); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.dark .nav.is-compact .nav__cta { color: var(--blue-light); }
/* off-screen copy used by site.js to measure the compact width */
.nav--probe { visibility: hidden; }
.nav.is-compact.nav--probe .wrap { width: max-content; }

/* ---------- Footer ---------- */
.footer { position: relative; font-family: var(--plex); color: #6f6f6f; background: url(img/footer-bg.webp) center 60% / cover no-repeat; }
.footer .wrap { padding-top: 110px; padding-bottom: 60px; }
.footer__top { display: grid; grid-template-columns: 1fr auto; gap: 60px; }
.footer__logo { display: block; width: 220px; color: #000; }
.footer__social { display: flex; gap: 14px; margin-top: 88px; color: #000; }
.footer__social svg { width: 19px; height: 19px; display: block; }
.footer__cols { display: flex; gap: 60px; font-size: 14px; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 7px; }
.footer__cols li:first-child { color: #000; }
.footer__cols a:hover { color: #000; }
.footer__bottom { display: flex; justify-content: space-between; gap: 40px; margin-top: 140px; padding-bottom: 20px; font-size: 14px; }
.footer__bottom a:hover { color: #000; }

/* GradualBlur (React Bits) — usage-example props: bottom, 6rem, strength 2, divCount 5, bezier, exponential, opacity 1 — applied only to the home banner card.
   The layers live inside the card (they scroll with it, masked by the card image = rounded glass shape); only the 6rem band mask is held
   on the viewport's bottom edge by a scroll-driven animation, computed in the same frame as the scroll, so it never lags or spills. */
.gradual-blur { display: none; }
@supports (animation-timeline: view()) {
  .gradual-blur { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* above the headline, so it blurs too */
  .gradual-blur i { position: absolute; inset: 0; -webkit-mask-size: 100% 100%, 100% 6rem; mask-size: 100% 100%, 100% 6rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect;
    animation: edge-band linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .gradual-blur i:nth-child(1) { -webkit-backdrop-filter: blur(0.167rem); backdrop-filter: blur(0.167rem); -webkit-mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%); mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%); }
  .gradual-blur i:nth-child(2) { -webkit-backdrop-filter: blur(0.332rem); backdrop-filter: blur(0.332rem); -webkit-mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%); mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%); }
  .gradual-blur i:nth-child(3) { -webkit-backdrop-filter: blur(0.754rem); backdrop-filter: blur(0.754rem); -webkit-mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%); mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%); }
  .gradual-blur i:nth-child(4) { -webkit-backdrop-filter: blur(1.499rem); backdrop-filter: blur(1.499rem); -webkit-mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 60%, black 80%, black 100%); mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 60%, black 80%, black 100%); }
  .gradual-blur i:nth-child(5) { -webkit-backdrop-filter: blur(2.000rem); backdrop-filter: blur(2.000rem); -webkit-mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 80%, black 100%); mask-image: url(img/home-banner.webp), linear-gradient(to bottom, transparent 80%, black 100%); }
}
/* band top = viewport bottom − 6rem, in card coordinates: −6rem when the card top meets the viewport bottom, 100vh + card height − 6rem when it has left at the top
   (a % here is card height − 6rem, so calc(100vh + 100%) is exactly that) */
@keyframes edge-band { from { -webkit-mask-position: 0 0, 0 -6rem; mask-position: 0 0, 0 -6rem; } to { -webkit-mask-position: 0 0, 0 calc(100vh + 100%); mask-position: 0 0, 0 calc(100vh + 100%); } }

/* ---------- Home ---------- */
.hero { position: relative; min-height: 800px; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero__bg { position: absolute; inset: -40px -40px 0; background: url(img/home-hero-bg.webp) center bottom / cover no-repeat; filter: blur(10px) saturate(1.15); }
/* on scroll the background lags behind the text, blurs out and fades to white — CSS only, static where unsupported */
.hero__bg::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(28px); opacity: 0; }
@supports (animation-timeline: scroll()) {
  .hero__bg, .hero__bg::before { animation: linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .hero__bg { animation-name: hero-drift; }
  .hero__bg::before { animation-name: hero-soften; }
}
@keyframes hero-drift { to { transform: translateY(35%); opacity: .2; } }
@keyframes hero-soften { to { opacity: 1; } }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; pointer-events: none; background: linear-gradient(rgba(255,255,255,0), #fff); }
.hero__inner { position: relative; padding-top: 110px; }
.hero h1 { font-size: 80px; line-height: .9; font-weight: 600; }
.hero h1 { position: relative; }
/* TextType (React Bits) — an invisible copy of the headline keeps the layout still while the live copy types over it */
.tt-ghost { visibility: hidden; }
.tt-ghost > span { display: block; }
.tt-live { position: absolute; inset: 0; white-space: pre-wrap; }
.tt-cursor { display: inline-block; margin-left: .25rem; animation: tt-blink 1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } /* gsap yoyo power2.inOut; 1s per fade (component default .5s, slowed) */
@keyframes tt-blink { to { opacity: 0; } }
.js .hero h1:not(.is-split) { opacity: 0; }
/* subtitle = the command's output: appears once the headline is typed (site.js adds .is-shown); scrolling fades it via inline opacity */
.js .hero p:not(.is-shown) { opacity: 0; }
.hero p.is-shown { animation: hero-text-fade 400ms ease-out backwards; }
.hero p { margin-top: 44px; color: var(--muted); font: 400 19px/1.35 var(--plex); }

.split { display: grid; grid-template-columns: 485px 1fr; gap: 0; }
.problem { padding: 70px 0 110px; }
.problem h2 { font-size: 48px; line-height: 1.2; font-weight: 500; }
.problem p { color: var(--muted); font-size: 19px; line-height: 1.3; }

.banner { position: relative; width: min(958px, 100%); margin: 0 auto; }
.banner img { display: block; width: 100%; filter: drop-shadow(0 40px 45px rgba(0,0,0,.18)); }
.banner p { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; font: 400 clamp(22px, 3.1vw, 45px)/.93 var(--text); text-shadow: 0 1px 12px rgba(80,60,120,.18); }
.banner p { background: radial-gradient(ellipse 42% 38% at 50% 50%, rgba(16,24,72,.35), rgba(16,24,72,0) 100%); } /* soft navy halo behind the headline for contrast */

.markets { margin-top: 110px; position: relative; color: #fff; background: linear-gradient(rgba(10,15,24,.45), rgba(10,15,24,.45)), #0a0f18 url(img/home-mercati.webp) center / cover; padding: 100px 0 150px; }
.markets__head { text-align: center; }
.markets__head h2 { font-size: 52px; font-weight: 500; }
.markets__head p { max-width: 820px; margin: 26px auto 0; font-size: 18px; color: rgba(255,255,255,.85); line-height: 1.3; }
.markets__head p + p { margin-top: 16px; }
.markets__row { display: grid; grid-template-columns: 375px 1fr; margin: 100px auto 0; max-width: 960px; }
.markets__row + .markets__row { margin-top: 110px; }
.markets__row h3 { font-size: 48px; line-height: .93; font-weight: 500; }
.markets__row p { font-size: 18px; color: rgba(255,255,255,.85); line-height: 1.35; }

.areas { padding: 110px 0; }
.areas__head h2 { font-size: 52px; font-weight: 500; }
.areas__head p { max-width: 730px; margin: 24px auto 0; font-size: 18px; color: #333; line-height: 1.35; }
.areas__grid { display: grid; grid-template-columns: 735px 1fr; grid-template-rows: repeat(3, 214px); column-gap: 57px; row-gap: 30px; margin-top: 72px; }
.area { position: relative; overflow: hidden; border-radius: 50px; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 34px; isolation: isolate; cursor: pointer; transition: opacity .35s ease; }
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.area h3 { font-size: 22px; line-height: 1.1; font-weight: 600; }
.area p { margin-top: 26px; font-size: 14px; line-height: 1.15; max-width: 340px; }
.area__more, .area__star { display: none; }
.area.is-main { grid-row: 1 / -1; grid-column: 1; border-radius: 60px; padding: 0 42px; cursor: default; }
.area.is-main h3 { font-size: 45px; line-height: 1.05; }
.area.is-main p { font-size: 18px; max-width: 580px; margin-top: 56px; }
.area.is-main .area__star { display: grid; position: absolute; top: 77px; left: 36px; width: 36px; height: 36px; }
.area.is-main .area__star svg { display: block; width: 100%; height: 100%; fill: #fff; }
.area.is-main .area__more { display: block; position: absolute; top: 76px; right: 68px; font-size: 18px; }
.area:not(.is-main) { grid-column: 2; }
.area:not(.is-main):hover { opacity: .85; }
/* the Figma renders these bitmaps with color adjustments */
.area--ia img { filter: hue-rotate(60deg) saturate(1.6) blur(6px); transform: scale(1.08); }
.area--ia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#ffb0c8, #f0a0b0); mix-blend-mode: multiply; }
.area--avatar img { filter: brightness(.55); }
.area--erp img { filter: hue-rotate(-18deg) saturate(1.7) brightness(.72); }
.area--finanza img { object-position: 70% 50%; }
.area--finanza.is-main img { object-position: center; }
.area--ia { view-transition-name: area-ia; } .area--avatar { view-transition-name: area-avatar; } .area--erp { view-transition-name: area-erp; } .area--finanza { view-transition-name: area-finanza; }
.area { view-transition-class: area; }
.area.is-main { view-transition-class: area main; }
/* During the morph the group clips the corners (radius of the card's destination); the cards themselves go square
   (.vt-areas, set by site.js) so the stretched snapshots don't bring their own, distorted, rounded corners. */
:root.vt-areas .area { border-radius: 0; } /* :root beats the mobile .area.is-main radius */
::view-transition-group(*.area) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22,1,.36,1); overflow: hidden; border-radius: 50px; }
::view-transition-group(*.main) { border-radius: 60px; }
::view-transition-old(*.area), ::view-transition-new(*.area) { height: 100%; object-fit: cover; object-position: left center; mix-blend-mode: normal; } /* text is left-aligned: crop from the right */
/* new state fades in quickly over the old one (no dip to transparent; a long overlap of two text sizes reads as ghosting) */
::view-transition-old(*.area) { animation: none; }
::view-transition-new(*.area) { animation: area-in .25s ease-out both; }
@keyframes area-in { from { opacity: 0; } }
/* Snapshots paint above the page, so the compact nav is captured too and drawn on top. A snapshot has no backdrop:
   the group re-applies the glass blur over the cards moving underneath. */
.nav.is-compact .wrap { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; border-radius: 14px; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
::view-transition-old(site-nav) { display: none; } /* old + new are blended additively: two 80% whites read as opaque */
::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; }
/* ---------- Mobile menu ---------- */
/* On mobile the compact bar's E opens it (site.js): a native <dialog> over the whole screen holding a panel that slides in
   from the right, and a copy of the E placed exactly over the bar's one that morphs into the closing X (.is-x). */
.mmenu { margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; background: none; color: #000; overflow: visible; }
.mmenu::backdrop { background: rgba(10,15,24,.35); animation: mmenu-fade .45s ease; }
.mmenu__panel { position: absolute; inset: 0 0 0 auto; width: min(80vw, 360px); display: flex; flex-direction: column; padding: 100px 28px 40px; background: #fff; box-shadow: -20px 0 60px rgba(0,0,0,.15); animation: mmenu-in .45s cubic-bezier(.22,1,.36,1); }
@keyframes mmenu-in { from { transform: translateX(100%); } }
@keyframes mmenu-fade { from { opacity: 0; } }
.mmenu__links { display: flex; flex-direction: column; gap: 22px; font: 500 28px/1.1 var(--text); }
.mmenu__links a[aria-current] { font-weight: 700; }
.mmenu__cta { margin-top: auto; color: var(--blue); font: 400 20px var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mmenu__toggle { position: fixed; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; padding: 0; background: none; color: var(--e-color, #000); cursor: pointer; transition: color .45s ease; } /* left/top: the bar's E centre, set by site.js */
.mmenu__toggle svg { display: block; width: 22px; overflow: visible; fill: currentColor; }
.mmenu__toggle svg > * { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
/* E → X: the outer strokes meet at the centre (6.65 in the 13.3-high mark) and cross; the middle one shrinks away */
.mmenu.is-x .mmenu__toggle { color: #000; }
.mmenu.is-x .mmenu__e-top { transform: translateY(4.36px) rotate(45deg); }
.mmenu.is-x .mmenu__e-bot { transform: translateY(-4.29px) rotate(-45deg); }
.mmenu.is-x .mmenu__e-mid { transform: scaleX(0); opacity: 0; }
html:has(.mmenu[open]) { overflow: hidden; } /* no page scroll behind the open menu */
.mmenu.is-closing .mmenu__panel { animation: mmenu-out .3s cubic-bezier(.4,0,1,1) forwards; } /* site.js closes the dialog when it ends */
.mmenu.is-closing::backdrop { animation: mmenu-fade-out .3s ease forwards; }
@keyframes mmenu-out { to { transform: translateX(100%); } }
@keyframes mmenu-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mmenu__panel, .mmenu::backdrop, .mmenu.is-closing .mmenu__panel, .mmenu.is-closing::backdrop { animation: none; } .mmenu__toggle, .mmenu__toggle svg > * { transition: none; } }

.dots { display: flex; justify-content: center; gap: 20px; margin-top: 38px; }
.dots button { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; background: #d9d9d9; cursor: pointer; transition: background .2s; }
.dots button[aria-selected="true"] { background: #000; }

/* ---------- Metodo ---------- */
.m-hero { position: relative; padding-top: 316px; text-align: center; overflow: hidden; }
.m-hero__glow { position: absolute; top: 110px; width: 700px; pointer-events: none; opacity: .75; filter: blur(8px); }
.m-hero__glow--l { left: -250px; }
.m-hero__glow--r { right: -250px; transform: scaleX(-1); }
.m-hero h1 { position: relative; font-size: 52px; }
.m-hero > p { position: relative; margin-top: 30px; color: var(--muted); font-size: 18px; line-height: 1.4; }
.linea { position: relative; display: flex; gap: 32px; height: 374px; margin-top: 94px; }
.step { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 25px; background: rgba(236,236,236,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 28px 30px 42px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: flex-grow .55s cubic-bezier(.22,1,.36,1), background-color .3s; isolation: isolate; text-align: left; font: inherit; border: 0; color: #111; }
.step__bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; filter: blur(22px); opacity: 0; transition: opacity .45s ease; }
.step__num { align-self: flex-start; height: 40px; width: auto; filter: blur(1.4px); opacity: .85; transition: height .45s cubic-bezier(.22,1,.36,1), filter .3s; }
.step h3 { font-size: 22px; line-height: .95; font-weight: 700; filter: blur(1.4px); opacity: .7; transition: font-size .35s, filter .3s, opacity .3s; }
.step p { font-size: 18px; line-height: 1.4; color: rgba(255,255,255,.85); max-height: 0; opacity: 0; overflow: hidden; transition: opacity .3s; margin-top: 0; min-width: 380px; }
.step.is-active { flex-grow: 2.4; color: #fff; background: transparent; }
.step.is-active .step__bg { opacity: 1; }
.step.is-active .step__num { height: 75px; filter: none; opacity: 1; }
.step.is-active h3 { font-size: 32px; font-weight: 500; filter: none; opacity: 1; }
.step.is-active p { max-height: 6em; opacity: 1; margin-top: 34px; transition-delay: .2s; }
.step:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.facts { margin-block: 110px; }
.fact__body strong { color: var(--ink); font-weight: 600; }
.fact { display: grid; grid-template-columns: 1fr 485px; align-items: end; padding: 115px 0 50px; border-bottom: 1px solid var(--line); }
.fact:first-child { padding-top: 0; }
.fact h2 { font-size: 44px; line-height: 1.15; }
.fact__body { color: var(--muted); font-size: 18px; line-height: 1.4; }
.fact__body p + p { margin-top: 25px; }
.fact__body .dash { margin: 0; }

/* ---------- Soluzioni ---------- */
.dark { background: #000; color: #fff; }
.s-hero { padding: 316px 0 0; text-align: center; background: #0e0e0e; }
.s-hero h1 { font-size: 52px; }
.s-hero p { margin-top: 38px; font-size: 18px; line-height: 1.4; color: #8a8a8a; }
.sol { position: relative; background: #000 center / cover no-repeat; }
.sol .wrap { display: grid; grid-template-columns: 485px 1fr; align-items: start; padding-left: 238px; padding-right: 160px; }
.sol__mark { width: 32px; margin-bottom: 42px; opacity: .8; }
.sol h2 { font-size: 48px; line-height: 1.02; font-weight: 700; }
.sol__num { display: block; margin-bottom: 14px; font: 400 16px var(--plex); opacity: .6; }
.sol__body { font-size: 16px; line-height: 1.4; max-width: 560px; padding-top: 44px; }
.sol__body strong { font-weight: 700; }
.sol__body p + p { margin-top: 1em; }
.sol--ia { background-color: #0e0e0e; background-image: linear-gradient(#0e0e0e, rgba(14,14,14,.75) 14%, rgba(0,0,0,0) 34%), linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(img/sol-ia.webp); aspect-ratio: 16 / 10; background-size: cover; background-position: center top, center, center 60%; display: flex; align-items: center; padding-bottom: 6%; }
.sol--erp { aspect-ratio: 16 / 9; background-image: linear-gradient(rgba(30,40,70,.35), rgba(30,40,70,.35)), url(img/area-erp.webp); display: flex; align-items: center; }
.sol--erp img { display: none; }
.sol--erp::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(1.3) brightness(.62) hue-rotate(-8deg); }
.sol--erp .wrap { position: relative; }
.sol--avatar { padding: 290px 0 280px; background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url(img/avatar-sintropico.webp); }
.sol--finanza { padding: 290px 0 280px; background-image: url(img/area-finanza.webp); background-size: 1440px auto; background-position: calc(50% + 350px) -335px; }
.sol--finanza h2 { font-size: 48px; }

.guar { background: #000; padding: 0 0 160px; overflow: hidden; }
.guar .wrap { width: fit-content; max-width: 100%; }
.guar__title { font: 600 150px/1 var(--text); color: #222; letter-spacing: -.01em; margin-left: 5px; }
.guar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); grid-template-rows: 240px 68px 68px; column-gap: 31px; row-gap: 41px; margin-top: 22px; }
.gcard { position: relative; border-radius: 24px; overflow: hidden; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; background: center / cover no-repeat; }
.gcard h3 { font-size: 15px; font-weight: 700; line-height: 1.05; }
.gcard p { font-size: 15px; line-height: 1.05; }
.gcard--1 { background-image: url(img/gar-1.webp); grid-row: 1; }
.gcard--1 p { padding-bottom: 10px; }
.gcard--2 { background-image: url(img/gar-2.webp); grid-column: 2; grid-row: 1 / span 2; padding-bottom: 50px; }
.gcard--3 { background-image: url(img/gar-3.webp); grid-column: 3; grid-row: 1 / span 3; padding-bottom: 45px; }
.gpill { border-radius: 24px; }
.gpill--a { grid-column: 1; grid-row: 2; background: linear-gradient(90deg, #dcee88, #a8cff9 70%, #a4cbff); }
.gpill--b { grid-column: 1 / span 2; grid-row: 3; background: linear-gradient(90deg, #c186ee, #fb8e8e 90%); margin-top: 0; }

/* ---------- Contatti ---------- */
.contact { padding: 230px 0 140px; }
.contact__head { text-align: center; }
.contact__head h1 { font-size: 52px; }
.contact__head p { max-width: 760px; margin: 28px auto 0; color: var(--muted); font-size: 18px; line-height: 1.4; }
.contact__grid { display: grid; grid-template-columns: 1fr 300px; gap: 96px; margin-top: 100px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; align-content: start; }
.field { display: grid; gap: 8px; }
.field--wide, .consent, .form button, .form__status { grid-column: 1 / -1; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 400 18px/1.4 var(--text); transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field select { appearance: none; padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; cursor: pointer; }
.field textarea { resize: vertical; min-height: 110px; }
.field textarea::placeholder { color: #b0b0b0; }
.form__trap { position: absolute; left: -9999px; }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #333; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #000; flex: none; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.form button { justify-self: start; height: 52px; padding: 0 36px; border: 0; border-radius: 999px; background: #000; color: #fff; font: 400 17px var(--plex); cursor: pointer; transition: opacity .15s, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.form button:hover { opacity: .85; }
.form button:active { transform: scale(.96); }
.form button:disabled { opacity: .45; cursor: wait; }
.form__status { font-size: 15px; color: #b42318; }
.form__status:empty { display: none; }
.contact__sent { grid-column: 1 / -1; text-align: center; }
.contact__anim { aspect-ratio: 284.4 / 160; max-width: 640px; margin: 0 auto -18%; } /* scene below the logo is empty */
.contact__done { font: 500 28px/1.3 var(--text); outline: none; }
.contact__anim:not(:empty) + .contact__done { animation: contact-done .8s 4.3s both; } /* once the logo has recomposed */
@keyframes contact-done { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .contact__anim:not(:empty) + .contact__done { animation: none; } }
.contact__aside h2 { font-size: 22px; }
.contact__aside ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; color: var(--muted); font-size: 17px; }
.contact__aside a:hover { color: var(--ink); }

/* ---------- Legal pages ---------- */
.legal { padding: 230px 0 160px; }
.legal h1 { font-size: 52px; }
.legal__body { max-width: 760px; margin-top: 56px; font-size: 17px; line-height: 1.6; }
.legal__body h2 { margin: 48px 0 14px; font-size: 24px; }
.legal__body p + p, .legal__body ul { margin-top: 12px; }
.legal__body ul { padding-left: 20px; }
.legal__body a { color: var(--blue); text-decoration: underline; }
.legal__updated { color: var(--muted); }

/* ---------- Copy-email toast ---------- */
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 20; padding: 12px 20px; border-radius: 999px; background: #000; color: #fff; font: 400 15px var(--plex); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }

/* ---------- About ---------- */
.about { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #1a1f6b; padding: 232px 0 120px; }
/* source bitmap is 1672x941, stretched ~1.8x here: a light blur hides the upscale artifacts;
   140% width left-anchored reproduces the Figma crop (peach area off-canvas) */
.about::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: url(img/about-bg.webp) left top / 140% 100% no-repeat; filter: blur(10px); }
.about__logo { color: #fff; margin-top: 180px; }
.about__logo svg { width: 100%; height: auto; display: block; }
.about__intro { display: grid; grid-template-columns: 1fr 560px; margin-top: 160px; }
.about__intro h1 { font-size: 52px; font-weight: 500; color: #e3dcf0; }
.about__copy { display: grid; gap: 25px; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.4; }
.matrix { position: relative; aspect-ratio: 16 / 9; max-height: 900px; width: 100%; background: #000 center / cover no-repeat; display: flex; align-items: center; }
.matrix .wrap { padding-left: 155px; }
.matrix__label { display: flex; align-items: center; gap: 30px; font: 600 32px var(--text); color: #e6e6e6; }
.matrix__label::before { content: ""; width: 53px; height: 1px; background: currentColor; }
.matrix p { margin-top: 28px; font-size: 20px; line-height: 1.45; color: rgba(235,235,235,.85); max-width: 480px; }
.matrix p + p { margin-top: 16px; }
.matrix--impresa { background-image: url(img/about-impresa.webp); }
.partners { padding: 110px 0 0; }
.partners h2, .team h2 { font-size: 52px; font-weight: 500; }
.team { padding: 110px 0; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 72px; }
.member__blob { --mo-track-travel: 3px; cursor: pointer; display: grid; place-items: center; aspect-ratio: 1; }
.member__blob svg { width: 62%; height: 62%; }
.member h3 { margin-top: 24px; font-size: 22px; }
.member p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.4; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .areas__grid { grid-template-columns: 1.8fr 1fr; column-gap: 32px; }
  .markets__row { margin-left: 0; }
  .sol .wrap { padding-left: var(--gutter); padding-right: var(--gutter); grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer__top { grid-template-columns: 260px 1fr; }
}
@media (max-width: 960px) {
  body { font-size: 16px; }
  .nav .wrap { grid-template-columns: 1fr auto; height: auto; padding-top: 28px; row-gap: 28px; }
  .nav__logo { grid-area: 1 / 1; width: 160px; }
  .nav__logo svg { height: 16.33px; }
  .nav.is-compact .wrap { height: 52px; padding-top: 0; }
  .nav.is-compact .nav__links { display: none; }
  .nav__cta { grid-area: 1 / 2; font-size: 15px; }
  .nav__links { grid-column: 1 / -1; grid-row: 2; gap: 28px; overflow-x: auto; font-size: 15px; scrollbar-width: none; } /* no scrollbar: it flashed as a line while the bar widens back (the links overflow for a few frames) */
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links > :first-child { margin-left: auto; } .nav__links > :last-child { margin-right: auto; } /* centred; unlike justify-content: center, still scrolls to the first link if they overflow */
  .hero { min-height: 640px; }
  .hero h1 { font-size: clamp(42px, 10vw, 72px); }
  .split, .fact, .sol .wrap, .about__intro, .markets__row { grid-template-columns: 1fr; gap: 24px; }
  .problem h2, .fact h2, .sol h2, .markets__row h3 { font-size: 36px; }
  .markets__head h2, .areas__head h2, .m-hero h1, .s-hero h1, .about__intro h1, .partners h2, .team h2 { font-size: 38px; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  /* Aree: a row to swipe (scroll-snap), page order, every card in full; the dots follow the scroll (site.js) */
  .areas__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .areas__grid::-webkit-scrollbar { display: none; }
  .areas__grid .area { flex: 0 0 calc(100% - 28px); min-height: 460px; padding: 0 24px; border-radius: 36px; scroll-snap-align: start; cursor: default; opacity: 1; }
  .areas__grid .area h3 { font-size: clamp(24px, 7.2vw, 34px); line-height: 1.05; } /* "Implementazione" must fit on a phone */
  .areas__grid .area p { font-size: 16px; line-height: 1.3; max-width: none; margin-top: 32px; }
  .areas__grid .area .area__star { display: grid; position: absolute; top: 36px; left: 24px; width: 32px; height: 32px; }
  .areas__grid .area .area__star svg { display: block; width: 100%; height: 100%; fill: #fff; }
  .areas__grid .area .area__more { display: block; position: absolute; top: 38px; right: 24px; font-size: 16px; }
  /* Nav: the compact bar sits on the right; its E opens the menu (site.js) */
  .nav.is-compact .wrap { margin-left: auto; margin-right: 16px; padding-inline: 15px; column-gap: 0; } /* 22px E + 2×15 = a 52px square; no gap for the hidden Contattaci column */
  .nav.is-compact .nav__cta { display: none; } /* just the E: Contattaci is in the menu */
  .m-hero, .s-hero { padding-top: 170px; }
  .linea { flex-direction: column; height: auto; gap: 14px; }
  .step { flex: none; min-height: 92px; transition: none; }
  .step.is-active { min-height: 300px; }
  .step p { min-width: 0; }
  .fact { padding: 70px 0 36px; }
  .sol--ia { aspect-ratio: auto; padding: 240px 0 90px; background-size: cover, cover, cover; background-position: center, center, center; }
  .sol--erp { aspect-ratio: auto; padding: 120px 0; }
  .sol--avatar { padding: 160px 0; }
  .sol--finanza { padding: 160px 0; background-size: cover; background-position: center; }
  .guar__title { font-size: 72px; }
  .guar .wrap { width: auto; }
  .guar__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .gcard, .gcard--1, .gcard--2, .gcard--3, .gpill--a, .gpill--b { grid-column: 1; grid-row: auto; min-height: 240px; margin: 0; }
  .gpill--a, .gpill--b { min-height: 68px; }
  .about { padding-top: 150px; }
  .about__logo { margin-top: 60px; }
  .about__intro { margin-top: 100px; }
  .matrix { aspect-ratio: auto; min-height: 560px; padding: 60px 0; }
  .matrix .wrap { padding-left: var(--gutter); }
  .matrix p { font-size: 24px; }
  .legal { padding: 170px 0 110px; }
  .legal h1 { font-size: 38px; }
  .contact { padding: 170px 0 90px; }
  .contact__head h1 { font-size: 38px; }
  .contact__grid { grid-template-columns: 1fr; gap: 64px; margin-top: 64px; }
  .form { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__social { margin-top: 30px; }
  .footer__cols { flex-wrap: wrap; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; margin-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation-name: hero-fade; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}
@keyframes hero-fade { to { opacity: .2; } }
@keyframes hero-text-fade { from { opacity: 0; } }