/* Omura — Business Process Innovation · foglio di stile v3
   Palette di marca: blu #0c2a3c · blu quasi nero #06141c · celeste #18a8e1 · giallo #fbbe06
                     celeste chiaro #ccebf4 · giallo chiaro #f4efcd
   Impianto: un'azienda tecnologica che lavora "a reticolo". La pagina è un progetto tecnico:
   griglia fissa con fili sottili, crocini agli incroci, sezioni numerate, dati in monospazio,
   oggetti 3D in fil di ferro; la balena è la protagonista della home. */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --abyss: #06141c;
  --deep: #02080d;
  --navy: #0c2a3c;
  --celeste: #18a8e1;
  --wire: #5fcdf5;
  --giallo: #fbbe06;
  --celeste-chiaro: #ccebf4;
  --text: #eaf5f9;
  --muted: #86a7b6;
  --dim: #5d7d8c;
  --line: rgba(95, 205, 245, 0.13);
  --line-2: rgba(95, 205, 245, 0.28);
  --glass: linear-gradient(160deg, rgba(14, 46, 66, 0.55), rgba(4, 14, 20, 0.55));
  --grad: linear-gradient(90deg, var(--celeste), #7cc6a0 55%, var(--giallo));
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --wrap: 1280px;
  --gut: clamp(20px, 4.5vw, 56px);
  --edge: max(var(--gut), calc((100vw - var(--wrap)) / 2));   /* bordo del contenuto: lì corrono i fili della griglia */
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; background: var(--deep); }
body {
  margin: 0; background: transparent; color: var(--text);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--giallo); color: var(--abyss); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.04; letter-spacing: -0.035em; font-weight: 520; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15; font-weight: 560; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); position: relative; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--giallo); color: var(--abyss); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wire); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 3px rgba(24, 168, 225, 0.25), 0 0 14px 3px rgba(24, 168, 225, 0.8); }

/* intestazione di sezione: numero, titolo, filo, nota — come le tavole di un progetto */
.idx { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.idx__n { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--giallo); }
.idx__t { color: var(--celeste-chiaro); white-space: nowrap; }
.idx__l { flex: 1; height: 1px; min-width: 30px; background: linear-gradient(90deg, var(--line-2), transparent); position: relative; }
.idx__l::after { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 10px var(--wire); animation: travel 5s var(--ease) infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.idx__r { white-space: nowrap; color: var(--dim); }

/* ---------- fondale, griglia tecnica, avanzamento ---------- */
.ocean { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 55% at 85% 10%, rgba(15, 58, 85, 0.55) 0%, transparent 70%),
    radial-gradient(60% 50% at 0% 85%, rgba(12, 42, 60, 0.7) 0%, transparent 70%),
    linear-gradient(180deg, #04101a 0%, var(--deep) 100%); }
.ocean canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s linear; }
.gridlines { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.gridlines__in { position: absolute; top: 0; bottom: 0; left: var(--edge); right: var(--edge); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.gridlines__in i { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(95, 205, 245, 0.06) 20%, rgba(95, 205, 245, 0.06) 80%, transparent); }
.gridlines__in i:nth-child(1) { left: 25%; } .gridlines__in i:nth-child(2) { left: 50%; } .gridlines__in i:nth-child(3) { left: 75%; }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: var(--grad); box-shadow: 0 0 12px rgba(24, 168, 225, 0.8); }
.sonar { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; height: 38vh; width: 60px; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); opacity: 0; transition: opacity 0.5s; }
.sonar.is-on { opacity: 1; }
.sonar__rail { position: relative; flex: 1; width: 1px; margin-right: 3px; background: repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 12px); }
.sonar__dot { position: absolute; left: -3.5px; top: calc(var(--sp, 0) * 100%); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(251, 190, 6, 0.25), 0 0 16px 4px rgba(251, 190, 6, 0.7); }
.sonar__val { margin-top: 10px; color: var(--celeste-chiaro); white-space: nowrap; }

/* ---------- pulsanti ---------- */
.btn {
  --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fbbe06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 7px 7px 7px 24px; min-height: 50px; border-radius: 12px; border: 1px solid transparent;
  background: var(--giallo); color: var(--abyss);
  font: inherit; font-weight: 600; font-size: 0.96rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), background 0.3s, border-color 0.3s;
}
.btn::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--abyss) var(--arr) center / 16px no-repeat; transition: transform 0.4s var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease); }
.btn:hover { box-shadow: 0 14px 40px -12px rgba(251, 190, 6, 0.75); }
.btn:hover::after { transform: translateX(3px); }
.btn:hover::before { transform: translateX(120%); }
.btn--ghost { background: rgba(2, 8, 13, 0.6); color: var(--text); border-color: var(--line-2);
  --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306141c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.btn--ghost::after { background-color: var(--wire); }
.btn--ghost::before { background: linear-gradient(110deg, transparent 30%, rgba(95, 205, 245, 0.25) 50%, transparent 70%); }
.btn--ghost:hover { border-color: var(--wire); box-shadow: 0 14px 40px -14px rgba(24, 168, 225, 0.8), inset 0 0 20px rgba(24, 168, 225, 0.12); }
.btn--sm { min-height: 0; padding: 9px 18px; font-size: 0.88rem; border-radius: 10px; }
.btn--sm::after { display: none; }
.btn--xl { min-height: 62px; padding-left: 32px; font-size: 1.06rem; }
.btn--xl::after { width: 46px; height: 46px; }

/* ---------- navigazione ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: transform 0.45s var(--ease), background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.is-stuck { background: rgba(2, 8, 13, 0.9); border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__in { display: flex; align-items: center; gap: 24px; height: 72px; }
.nav__logo img { width: 140px; }
.nav__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.nav__status i { width: 6px; height: 6px; border-radius: 50%; background: #4ee39b; box-shadow: 0 0 8px #4ee39b; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__menu a:not(.btn) { position: relative; text-decoration: none; font-size: 0.92rem; color: var(--celeste-chiaro); padding: 8px 14px; border-radius: 10px; transition: color 0.2s, background 0.25s; }
.nav__menu a:not(.btn):hover { color: #fff; background: rgba(95, 205, 245, 0.08); }
.nav__menu a[aria-current="page"]:not(.btn) { color: #fff; }
.nav__menu a[aria-current="page"]:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--giallo); box-shadow: 0 0 8px var(--giallo); }
.nav__menu .btn { margin-left: 10px; }
.nav__toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0; position: relative; margin-left: auto; }
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ---------- hero della home: la balena è la protagonista ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 100px 0 clamp(58px, 7vh, 74px);      /* in basso c'è la barra dati */
  /* dietro la balena il mare è quasi nero, come nella foto; il blu resta ai bordi */
  background:
    radial-gradient(55% 48% at 52% 38%, rgba(2, 8, 13, 0.95) 0%, rgba(2, 8, 13, 0.6) 50%, transparent 82%),
    radial-gradient(120% 80% at 70% 25%, #0f3a55 0%, rgba(12, 42, 60, 0.6) 38%, transparent 70%),
    linear-gradient(180deg, #071b27 0%, var(--deep) 100%);
  overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);
}
/* raggi di luce che scendono nell'acqua: danno profondità alla scena (sessione balena) */
.hero::before { content: ""; position: absolute; inset: -10% -20% 30% -10%; z-index: -3; pointer-events: none; opacity: 0.55;
  background:
    linear-gradient(104deg, transparent 18%, rgba(120, 200, 235, 0.07) 22%, transparent 27%),
    linear-gradient(98deg, transparent 38%, rgba(120, 200, 235, 0.05) 41%, transparent 47%),
    linear-gradient(110deg, transparent 55%, rgba(120, 200, 235, 0.06) 58%, transparent 63%),
    linear-gradient(102deg, transparent 70%, rgba(120, 200, 235, 0.045) 74%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  }
/* griglia da carta nautica dietro la balena, appena visibile */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background-image: linear-gradient(rgba(95, 205, 245, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 205, 245, 0.05) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center center;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 75%); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.2s ease; }
.hero__canvas.is-ready { opacity: 1; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 13, 0) 62%, rgba(2, 8, 13, 0.85) 100%); }
.hero__in { position: relative; display: grid; grid-template-columns: 1.75fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: end; }
.hero h1 { font-size: clamp(2.3rem, 4vw, 3.9rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; }
.hero .eyebrow { margin-bottom: 16px; }
.hero__lead { font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--celeste-chiaro); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* letture dal vivo: una barra dati in cima alla fascia di testo. La balena misura il proprio spazio fino a qui,
   quindi barra e balena non si sovrappongono mai, qualunque sia lo schermo (prima stavano in alto a sinistra e la
   coda alzata ci passava sopra) */
/* sta nel margine inferiore dell'hero, sotto i pulsanti: non toglie spazio alla balena */
.hud-wrap { position: absolute; left: 0; right: 0; bottom: 0; }
.hud-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 0 11px;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hud-bar__id { color: var(--celeste-chiaro); white-space: nowrap; }
.hud-bar dl { display: flex; gap: clamp(16px, 2.6vw, 40px); }
.hud-bar dl div { display: flex; gap: 10px; white-space: nowrap; }
.hud-bar dd { color: var(--celeste-chiaro); font-variant-numeric: tabular-nums; min-width: 7ch; }
/* didascalie tecniche agganciate alla balena */
.callouts { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease 1.5s; }
.callouts.is-on { opacity: 1; }
.callouts__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts__svg path { fill: none; stroke: rgba(150, 225, 250, 0.85); stroke-width: 1; stroke-dasharray: 4 3; }
.co { position: absolute; left: 0; top: 0; will-change: transform; }
.co__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--giallo); }
.co__dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 10px var(--giallo); }
.co__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(251, 190, 6, 0.5); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.co__lbl { position: absolute; left: var(--lx, 0); top: var(--ly, 0); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(2, 8, 13, 0.78);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; transform: translate(-50%, -50%); }
.co__lbl b { color: var(--giallo); font-weight: 500; }
.co__lbl small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: none; }

/* parole che emergono */
.js [data-split] .w { display: inline-block; }
.js [data-split="rise"] .w { opacity: 0; transform: translateY(0.5em); animation: rise 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .hero__lead, .js .hero__cta, .js .hero .eyebrow, .js .page-hero__lead, .js .page-hero .eyebrow, .js .hud-bar { animation: fadein 1s var(--ease-out) both; }
.js .hero__lead, .js .page-hero__lead { animation-delay: 0.55s; }
.js .hero__cta { animation-delay: 0.75s; }
.js .hud-bar { animation-delay: 1s; }
@keyframes fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- nastro di dati ---------- */
.ticker { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(2, 8, 13, 0.75); padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 12px; padding: 0 30px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--celeste-chiaro); white-space: nowrap; }
.ticker__track b { color: var(--giallo); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sezioni ---------- */
.sec { padding: clamp(80px, 10vw, 140px) 0; position: relative; border-top: 1px solid var(--line); }
/* crocini dove i fili della griglia incontrano il bordo della sezione */
.sec::before, .sec::after, .manifesto::before, .manifesto::after { content: "+"; position: absolute; top: -0.62em; font-family: var(--mono); font-size: 15px; line-height: 1; color: var(--line-2); pointer-events: none; }
.sec::before, .manifesto::before { left: calc(var(--edge) - 0.3em); }
.sec::after, .manifesto::after { right: calc(var(--edge) - 0.3em); }
.sec--deep { background: linear-gradient(180deg, rgba(10, 34, 50, 0.6) 0%, rgba(2, 8, 13, 0.4) 100%); }
.sec--grid { isolation: isolate; }
.sec--grid > .wrap::before { content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(95, 205, 245, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 205, 245, 0.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000 10%, transparent 75%); }
.sec__head { max-width: 900px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec__head--row { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 64px; align-items: end; }
.sec__lead { margin-top: 20px; font-size: 1.08rem; color: var(--muted); max-width: 42em; }
.sec__head--row .sec__lead { margin-top: 0; }

.glass { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass); isolation: isolate; overflow: hidden; }
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(24, 168, 225, 0.16), transparent 60%); }
.spot:hover::before { opacity: 1; }
/* bordo luminoso che gira attorno alla scheda al passaggio del puntatore */
.bento__card::after, .tiles article::after, .value::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, var(--wire) 78%, var(--giallo) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.4s; animation: spinb 3.2s linear infinite paused; }
.bento__card:hover::after, .tiles article:hover::after, .value:hover::after { opacity: 1; animation-play-state: running; }
@keyframes spinb { to { --ang: 360deg; } }

/* icone a reticolo */
.wi { width: 52px; height: 52px; flex: none; color: var(--wire); overflow: visible; }
.wi path, .wi polyline, .wi line, .wi polygon { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.wi circle { fill: #e8f8ff; stroke: none; filter: drop-shadow(0 0 3px rgba(24, 168, 225, 0.95)); }
.wi .f { fill: rgba(24, 168, 225, 0.14); stroke: none; }

/* ---------- manifesto ---------- */
.manifesto { padding: clamp(90px, 13vw, 170px) 0; position: relative; }
.manifesto__q { font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 480; max-width: 21em; }
.js .manifesto__q .w { opacity: 0.14; transition: opacity 0.35s; }
.js .manifesto__q .w.is-lit { opacity: 1; }

/* ---------- home: i quattro pilastri come schede con oggetti 3D ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bento__card { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 210px 1fr; padding: 20px 22px 24px; min-height: 470px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass); text-decoration: none; overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, background 0.4s; }
.bento__card:hover { transform: translateY(-4px); border-color: transparent; background: linear-gradient(160deg, rgba(20, 64, 90, 0.6), rgba(4, 14, 20, 0.6)); }
.bento__n { position: absolute; left: 22px; top: 20px; font-family: var(--mono); font-size: 0.72rem; color: var(--giallo); letter-spacing: 0.1em; }
.bento__tag { justify-self: end; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bento__obj { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; }
.bento__obj.is-ready { opacity: 1; }
.bento__body { display: flex; flex-direction: column; gap: 10px; align-self: stretch; padding-top: 18px; }      /* i titoli partono tutti alla stessa altezza */
.bento__t { font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 520; letter-spacing: -0.035em; line-height: 1; }
.bento__d { color: var(--muted); font-size: 0.95rem; }
.bento__more { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wire); }
.bento__more::after { content: " \2192"; transition: margin 0.3s; }
.bento__card:hover .bento__more::after { margin-left: 6px; }

/* ---------- home: chi siamo e cruscotto ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.link { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--giallo); }
.link::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width 0.4s var(--ease-out); }
.link:hover::after { width: 52px; }
.dash { padding: 0; }
.dash__top, .form__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dash__live { display: inline-flex; align-items: center; gap: 8px; color: #4ee39b; }
.dash__live i { width: 6px; height: 6px; border-radius: 50%; background: #4ee39b; box-shadow: 0 0 8px #4ee39b; animation: blink 2.4s ease-in-out infinite; }
.stats li { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "s n" "d n"; align-items: center; column-gap: 24px; padding: 22px 22px 26px; }
.stats li + li { border-top: 1px solid var(--line); }
.stats small, .facts small { grid-area: s; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wire); }
.stats span { grid-area: d; color: var(--muted); font-size: 0.98rem; }
.stats strong, .facts strong { grid-area: n; font-size: clamp(3rem, 6vw, 4.8rem); line-height: 0.9; font-weight: 500; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 10%, var(--wire) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bar { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 2px; background: var(--line); overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--grad); transition: transform 1.6s var(--ease-out) 0.3s; }
.is-in .bar::after { transform: scaleX(var(--v)); }

/* ---------- risultati ---------- */
.rows { border-top: 1px solid var(--line); }
.rows li { position: relative; display: grid; grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1fr) 40px; align-items: center; gap: 24px; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.rows li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24, 168, 225, 0.16), rgba(251, 190, 6, 0.05) 60%, transparent); transform: translateX(-101%); transition: transform 0.6s var(--ease-out); }
.rows li:hover::before { transform: none; }
.rows__n { font-family: var(--mono); font-size: 0.76rem; color: var(--wire); letter-spacing: 0.1em; padding-left: 8px; }
.rows__t { font-size: clamp(1.7rem, 3.8vw, 3.1rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; transition: transform 0.5s var(--ease-out); }
.rows li:hover .rows__t { transform: translateX(10px); }
.rows__d { color: var(--muted); font-size: 1.04rem; }
.rows__dot { justify-self: end; margin-right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); transition: background 0.3s, box-shadow 0.3s; }
.rows li:hover .rows__dot { background: #fff; box-shadow: 0 0 0 4px rgba(251, 190, 6, 0.25), 0 0 18px 4px rgba(251, 190, 6, 0.7); }

.banner { margin-top: clamp(56px, 8vw, 96px); padding: clamp(30px, 5vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; min-height: 300px;
  background: linear-gradient(120deg, rgba(24, 168, 225, 0.18), rgba(2, 8, 13, 0.5) 55%, rgba(251, 190, 6, 0.08)); }
.banner > div { position: relative; max-width: 36em; }
.banner h3 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); margin-bottom: 14px; letter-spacing: -0.045em; font-weight: 500; }
.banner p:not(.eyebrow) { color: var(--celeste-chiaro); max-width: 30em; }
.banner canvas { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.banner canvas.is-ready { opacity: 1; }

/* ---------- testata delle pagine interne ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(150px, 18vw, 220px) 0 clamp(64px, 8vw, 110px); border-bottom: 1px solid var(--line);
  background: radial-gradient(110% 90% at 82% 20%, #0f3a55 0%, rgba(12, 42, 60, 0.55) 40%, transparent 72%), linear-gradient(180deg, #071b27 0%, var(--deep) 100%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(95, 205, 245, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 205, 245, 0.05) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 80% at 75% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 80% at 75% 30%, #000 10%, transparent 75%); }
.page-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  }
.page-hero__canvas.is-ready { opacity: 1; }
.page-hero h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); max-width: 14em; letter-spacing: -0.05em; font-weight: 500; line-height: 1.01; }
.page-hero__lead { margin-top: 26px; max-width: 38em; font-size: clamp(1.04rem, 1.4vw, 1.18rem); color: var(--celeste-chiaro); }
.crumbs { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; display: flex; gap: 10px; align-items: center; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: #fff; }
.crumbs span { color: var(--line-2); }
.crumbs .crumbs__code { margin-left: 10px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--giallo); }

/* ---------- chi siamo ---------- */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.duo__card { padding: clamp(30px, 4vw, 52px); }
.duo__card h2 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--giallo); margin-bottom: 28px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.duo__card h2 .wi { width: 46px; height: 46px; }
.duo__card p:first-of-type { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 18px; color: #fff; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.facts li { padding: 24px clamp(22px, 3vw, 30px); display: grid; grid-template-areas: "s" "n" "d"; gap: 10px; }
.facts span { grid-area: d; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: tl; }
.tiles article { counter-increment: tl; position: relative; isolation: isolate; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass); min-height: 220px; display: flex; flex-direction: column; transition: transform 0.5s var(--ease-out), border-color 0.4s; }
.tiles article:hover { transform: translateY(-4px); border-color: transparent; }
.tiles article > h3::before { content: counter(tl, decimal-leading-zero); position: absolute; right: 22px; top: 22px; font-family: var(--mono); font-size: 0.7rem; color: var(--dim); letter-spacing: 0.1em; }
.tiles h3 { font-size: 1.25rem; margin: auto 0 10px; padding-top: 44px; }
.tiles .wi { position: absolute; left: clamp(24px, 2.6vw, 32px); top: clamp(24px, 2.6vw, 32px); width: 36px; height: 36px; }
.tiles p { font-size: 0.96rem; color: var(--muted); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.value { padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; transition: transform 0.5s var(--ease-out), border-color 0.4s; }
.value:hover { transform: translateY(-6px); border-color: transparent; }
.value__obj { width: 100%; height: 170px; margin: -6px 0 6px; opacity: 0; transition: opacity 1s; }
.value__obj.is-ready { opacity: 1; }
.value__k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--giallo); }
.value h3 { font-size: 1.5rem; }
.value p { color: var(--muted); font-size: 0.97rem; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 5px 10px; border-radius: 6px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; background: rgba(24, 168, 225, 0.08); color: var(--celeste-chiaro); border: 1px solid rgba(24, 168, 225, 0.25); }

/* ---------- metodo ---------- */
.pillars { scroll-margin-top: 104px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pillar { text-align: left; font: inherit; color: var(--text); cursor: pointer; isolation: isolate; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s; }
.pillar .wi { width: 34px; height: 34px; margin-bottom: 18px; transition: color 0.3s; }
.pillar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.pillar:hover { transform: translateY(-3px); border-color: var(--line-2); }
.pillar.is-active { background: linear-gradient(155deg, rgba(24, 168, 225, 0.24), rgba(4, 14, 20, 0.7)); border-color: rgba(95, 205, 245, 0.5); box-shadow: 0 24px 60px -30px rgba(24, 168, 225, 0.9); }
.pillar.is-active::after { transform: scaleX(1); }
.pillar.is-active .wi { color: var(--giallo); }
.pillar__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--dim); position: absolute; right: 18px; top: 18px; }
.pillar.is-active .pillar__n { color: var(--giallo); }
.pillar__t { font-size: clamp(1.25rem, 1.9vw, 1.55rem); font-weight: 540; letter-spacing: -0.03em; }
.pillar__s { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }
.panels { margin-top: 12px; padding: clamp(26px, 4vw, 52px); }
.panel { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; animation: panelin 0.6s var(--ease-out); }
.panel[hidden] { display: none; }
.panel__code { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--giallo); margin-bottom: 16px; }
.panel h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 16px; }
.panel p:not(.panel__code) { color: var(--celeste-chiaro); font-size: 1.04rem; max-width: 40em; }
.panel__obj { width: 100%; height: 300px; opacity: 0; transition: opacity 1s; }
.panel__obj.is-ready { opacity: 1; }
@keyframes panelin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin-top: 26px; }
.ticks li { position: relative; padding: 13px 0 13px 26px; font-weight: 500; font-size: 0.96rem; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(24, 168, 225, 0.25), 0 0 12px 2px rgba(24, 168, 225, 0.8); }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.why article { padding: 26px 24px 0 0; }
.why article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.why__k { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--giallo); margin-bottom: 14px; }
.why h3 { margin-bottom: 10px; font-size: 1.12rem; }
.why p { font-size: 0.95rem; color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; --p: 0; }
.steps::before, .steps::after { content: ""; position: absolute; left: 23px; right: 23px; top: 23px; height: 1px; }
.steps::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.steps::after { height: 2px; top: 22px; background: var(--grad); transform-origin: left; transform: scaleX(var(--p)); box-shadow: 0 0 14px rgba(24, 168, 225, 0.8); }
.steps li { position: relative; padding-right: 26px; }
.steps__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--deep); border: 1px solid var(--line-2); color: var(--muted); font-family: var(--mono); font-size: 0.82rem; position: relative; z-index: 1; transition: border-color 0.4s, color 0.4s, box-shadow 0.4s, background 0.4s; }
.steps li.is-on .steps__n { border-color: var(--wire); color: #fff; background: #082333; box-shadow: 0 0 0 6px rgba(24, 168, 225, 0.1), 0 0 26px rgba(24, 168, 225, 0.65); }
.steps li.is-on:last-child .steps__n { border-color: var(--giallo); box-shadow: 0 0 0 6px rgba(251, 190, 6, 0.1), 0 0 26px rgba(251, 190, 6, 0.55); }
.steps h3 { font-size: 1.18rem; margin: 26px 0 10px; }
.steps p { font-size: 0.94rem; color: var(--muted); }
.principles { margin-top: clamp(56px, 8vw, 96px); padding: clamp(26px, 3.6vw, 44px); display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; }
.principles h3 { font-size: 1.35rem; }
.principles ul { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: p; }
.principles li { counter-increment: p; padding: 9px 16px 9px 9px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(2, 8, 13, 0.5); font-size: 0.94rem; display: flex; gap: 12px; align-items: center; transition: border-color 0.3s, background 0.3s; }
.principles li:hover { border-color: var(--giallo); background: rgba(251, 190, 6, 0.08); }
.principles li::before { content: counter(p, decimal-leading-zero); display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px; background: var(--giallo); color: var(--abyss); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; }

/* ---------- competenze ---------- */
.prose { display: grid; gap: 20px; font-size: 1.12rem; color: var(--celeste-chiaro); }
.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 80px); counter-reset: sk; }
.skills li { counter-increment: sk; position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 6px 10px; padding: 26px 0; border-top: 1px solid var(--line); }
.skills li::before { content: counter(sk, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--giallo); padding-top: 6px; }
.skills li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.skills li:hover::after { transform: scaleX(1); }
.skills h3 { font-size: 1.28rem; }
.skills p { color: var(--muted); font-size: 0.97rem; }

/* ---------- contatti ---------- */
.contact__in { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.contact__in h2 { font-size: clamp(2rem, 4vw, 3rem); }
.contact__list { margin-top: 36px; display: grid; }
.contact__list > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.contact__list > div:last-child { border-bottom: 1px solid var(--line); }
.contact__list dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wire); padding-top: 5px; }
.contact__list dd { font-size: 1.05rem; }
.contact__list dd small { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--dim); margin-top: 4px; }
.contact__list a { text-decoration: none; border-bottom: 1px solid rgba(251, 190, 6, 0.6); }
.contact__list a:hover { color: var(--giallo); }
.form { display: grid; gap: 18px; padding: 0 0 clamp(24px, 3vw, 36px); }
.form > :not(.form__head) { margin: 0 clamp(24px, 3vw, 36px); }
.form label { display: grid; gap: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wire); }
.form input, .form textarea { font: inherit; font-family: "Inter", system-ui, sans-serif; font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: #fff; background: rgba(2, 8, 13, 0.6); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 15px; width: 100%; resize: vertical; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--wire); background: rgba(24, 168, 225, 0.08); box-shadow: 0 0 0 4px rgba(24, 168, 225, 0.15); }
.form .is-invalid { border-color: #ff8a7a; }
.form .btn { justify-self: start; margin-top: 4px; }
.form__note { font-size: 0.84rem; color: var(--muted); }

/* ---------- invito finale ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 15vw, 200px) 0; text-align: center; border-top: 1px solid var(--line);
  background: radial-gradient(60% 70% at 50% 100%, rgba(24, 168, 225, 0.2), transparent 70%), radial-gradient(40% 50% at 50% 0%, rgba(251, 190, 6, 0.05), transparent 70%); }
.cta canvas { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 85%); }
.cta canvas.is-ready { opacity: 1; }
.cta__in { display: flex; flex-direction: column; align-items: center; }
.cta__prompt { font-family: var(--mono); font-size: 0.86rem; color: var(--wire); margin-bottom: 26px; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(2, 8, 13, 0.7); }
.cta__prompt i { width: 8px; height: 1.1em; margin-left: 4px; background: var(--giallo); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; }
.js .typed { width: 0; }
.js .is-in .typed { animation: type 1.6s steps(var(--n)) 0.3s forwards; }
@keyframes type { to { width: calc(var(--n) * 1ch); } }
.cta h2 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); max-width: 12em; letter-spacing: -0.055em; line-height: 0.98; font-weight: 500; }
.cta p:not(.cta__prompt) { margin: 26px auto 40px; color: var(--celeste-chiaro); max-width: 34em; font-size: 1.1rem; }

/* ---------- footer ---------- */
.footer { position: relative; padding: clamp(70px, 9vw, 110px) 0 28px; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--muted); background: rgba(2, 6, 10, 0.92); }
.footer__claim { font-size: clamp(2rem, 5vw, 4rem); font-weight: 480; letter-spacing: -0.045em; line-height: 1.04; color: #fff; max-width: 14em; margin-bottom: clamp(48px, 7vw, 88px); }
.footer__in { display: grid; grid-template-columns: 1.4fr 0.6fr 1.2fr; gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.footer__brand img { width: 150px; margin-bottom: 18px; }
.footer__brand p { max-width: 24em; }
.footer__h { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wire); margin-bottom: 14px; }
.footer__nav { display: grid; gap: 9px; align-content: start; }
.footer a { text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: #fff; }
.footer__addr { font-style: normal; line-height: 1.85; }
.footer__addr a { color: var(--celeste-chiaro); }
.footer__legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__coord { color: var(--dim); }
.footer__top { color: var(--celeste-chiaro); }

/* comparsa allo scroll */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card { min-height: 420px; grid-template-rows: auto 180px 1fr; }
  .sonar { display: none; }
}
@media (max-width: 980px) {
  .pillars, .why { grid-template-columns: repeat(2, 1fr); }
  .why article:nth-child(3) { border-left: 0; padding-left: 0; }
  .why article:nth-child(n+3) { margin-top: 24px; }
  .values, .split, .contact__in, .panel, .footer__in, .hero__in, .sec__head--row { grid-template-columns: 1fr; }
  .panel__obj { height: 220px; order: -1; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .rows li { grid-template-columns: 50px 1fr 24px; }
  .rows__d { grid-column: 2; }
  .rows__dot { grid-row: 1; grid-column: 3; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before, .steps::after { left: 23px; right: auto; top: 23px; bottom: 23px; width: 1px; height: auto; }
  .steps::before { background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .steps::after { width: 2px; left: 22px; transform-origin: top; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--celeste), var(--giallo)); }
  .steps li { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding-right: 0; }
  .steps h3 { margin-top: 8px; }
  .principles { grid-template-columns: 1fr; }
  .hud-bar__id { display: none; }
}
@media (max-width: 820px) {
  .nav__toggle { display: block; }
  .nav__status { display: none; }
  .nav__menu { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 28px; background: rgba(2, 8, 13, 0.97); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s; }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__menu a:not(.btn) { width: 100%; padding: 16px 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__menu a:not(.btn):hover { background: none; }
  .nav__menu a[aria-current="page"]:not(.btn)::after { left: auto; right: 4px; bottom: 50%; width: 6px; height: 6px; border-radius: 50%; margin-bottom: -3px; }
  .nav__menu .btn { margin: 20px 0 0; align-self: flex-start; }
  .nav.is-open { background: rgba(2, 8, 13, 0.97); }
  .hud-bar, .callouts { display: none; }
  .hero__shade { background: linear-gradient(180deg, rgba(2, 8, 13, 0) 30%, rgba(2, 8, 13, 0.92) 62%); }
  .gridlines__in i { display: none; }
  .idx__r { display: none; }
  .idx__t { white-space: normal; min-width: 0; }      /* i titoli lunghi vanno a capo invece di spingere il filo fuori dallo schermo */
  .idx__l { min-width: 16px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .duo, .facts, .pillars, .why, .tiles, .skills, .bento, .ticks { grid-template-columns: 1fr; }
  .bento__card { min-height: 0; grid-template-rows: auto 170px auto; }
  .why article, .why article + article { padding: 22px 0 0; border-left: 0; margin-top: 0; }
  .why article + article { border-top: 1px solid var(--line); margin-top: 22px; }
  .pillar { padding: 16px; }
  .pillar .wi { margin-bottom: 8px; }
  .tiles article { min-height: 0; }
  .rows li { grid-template-columns: 1fr 20px; gap: 8px 16px; }
  .rows__n { grid-column: 1 / -1; padding-left: 0; }
  .rows__t, .rows__d { grid-column: 1; }
  .rows__dot { grid-row: 2; grid-column: 2; }
  .contact__list > div { grid-template-columns: 1fr; gap: 2px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .stats strong { font-size: 2.8rem; }
}

/* schermi bassi: testo più compatto, così alla balena resta spazio */
@media (max-height: 780px) and (min-width: 821px) {
  .hero h1 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
  .hero__cta { margin-top: 16px; }
  .hero { padding-bottom: 54px; }
}

/* ==========================================================================
   v3.1 — dettagli da sito tecnologico
   ========================================================================== */

/* fondale a reticolo: una griglia in prospettiva sotto la balena che scorre verso chi guarda.
   Si muove con una traslazione (composta dalla scheda video, nessun ridisegno) */
.hero__floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 44%; z-index: -3; pointer-events: none; overflow: hidden; perspective: 380px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%), radial-gradient(60% 100% at 50% 100%, #000 30%, transparent 80%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%), radial-gradient(60% 100% at 50% 100%, #000 30%, transparent 80%); mask-composite: intersect; opacity: 0.7; }
.hero__floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260%; transform-origin: 50% 0; transform: rotateX(74deg) translateY(-72px);
  background-image: linear-gradient(rgba(95, 205, 245, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 205, 245, 0.28) 1px, transparent 1px); background-size: 72px 72px;
  animation: floor 7s linear infinite; }
@keyframes floor { to { transform: rotateX(74deg) translateY(0); } }

/* mirino che segue il puntatore: coordinate in monospazio, si apre sui link e sulle schede */
.reticle { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0;
  border: 1px solid rgba(95, 205, 245, 0.5); transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), border-color 0.3s, border-radius 0.35s, opacity 0.3s;
  background:
    linear-gradient(var(--wire), var(--wire)) 50% -1px / 1px 6px no-repeat, linear-gradient(var(--wire), var(--wire)) 50% calc(100% + 1px) / 1px 6px no-repeat,
    linear-gradient(var(--wire), var(--wire)) -1px 50% / 6px 1px no-repeat, linear-gradient(var(--wire), var(--wire)) calc(100% + 1px) 50% / 6px 1px no-repeat; }
.reticle.is-on { opacity: 1; }
.reticle i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 8px var(--giallo); }
.reticle__xy { position: absolute; left: calc(100% + 10px); top: calc(100% + 2px); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; transition: opacity 0.3s; }
.reticle.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(251, 190, 6, 0.8); border-radius: 12px; }
.reticle.is-link .reticle__xy { opacity: 0; }
@media (pointer: coarse), (hover: none) { .reticle { display: none; } }

/* titoli che si svelano con un taglio da sinistra a destra (margini negativi: non tagliano gli ascendenti) */
.js .reveal h2, .js .reveal.sec__head h2, .js .banner.reveal h3 { clip-path: inset(-0.25em 100% -0.3em -0.1em); transition: clip-path 1.2s var(--ease-out) 0.1s; }
.js .reveal.is-in h2, .js .reveal.is-in h3, .js .is-in .sec__head h2 { clip-path: inset(-0.25em -0.1em -0.3em -0.1em); }

/* schede che si inclinano seguendo il puntatore (l'inclinazione la scrive main.js) */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt.is-tilting { transition: transform 0.12s linear, border-color 0.4s, background 0.4s; }

/* grafico dal vivo del cruscotto */
.spark { flex: 1; height: 22px; margin: 0 14px; min-width: 60px; }
.spark polyline { fill: none; stroke: var(--wire); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(24, 168, 225, 0.8)); }

/* passaggio tra le pagine: il contenuto sfuma, la barra di navigazione resta ferma */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: vt-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.55s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* qualità ridotta (decisa da js/perf.js su computer che faticano): si fermano le animazioni continue */
[data-perf="low"] .ticker__track, [data-perf="low"] .hero__floor::before, [data-perf="low"] .idx__l::after, [data-perf="low"] .co__dot::before, [data-perf="low"] .nav__status i, [data-perf="low"] .dash__live i { animation: none; }
[data-perf="low"] .spot::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js [data-split="rise"] .w { opacity: 1; transform: none; }
  .js .manifesto__q .w { opacity: 1; }
  .js .typed { width: auto; }
  .reticle { display: none; }
  .js .reveal h2, .js .reveal h3 { clip-path: none; }
}

/* ==========================================================================
   v3.2 — copertina delle pagine interne: impaginazione editoriale
   Numero di capitolo in contorno sullo sfondo, oggetto 3D come immagine della pagina,
   titolo grande, indice delle sezioni, etichetta verticale e metadati in fondo.
   ========================================================================== */
.page-hero { min-height: min(94svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(120px, 14vh, 170px) 0 0; }
.page-hero__in { position: relative; z-index: 1; max-width: calc(var(--wrap) + var(--gut) * 2); }
.page-hero__in > * { max-width: min(54%, 760px); }      /* metà sinistra: la destra è della balena */
.page-hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.9rem); max-width: min(11.5em, 54%);      /* non passa sopra l'oggetto 3D */
  letter-spacing: -0.055em; line-height: 0.98; }
.page-hero__lead { max-width: 34em; }

/* numero di capitolo: enorme, solo contorno, tagliato dal bordo destro */
.page-hero__num { position: absolute; right: -0.06em; bottom: 0.02em; z-index: -1; pointer-events: none; user-select: none;
  font-size: clamp(14rem, 34vw, 40rem); font-weight: 600; line-height: 0.74; letter-spacing: -0.08em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(95, 205, 245, 0.2);
  background: linear-gradient(180deg, rgba(95, 205, 245, 0.07), transparent 70%); -webkit-background-clip: text; background-clip: text; }

/* oggetto 3D: l'immagine della pagina, davanti al numero, con un alone */
.page-hero__vis { position: absolute; z-index: 0; right: calc(var(--edge) - 40px); bottom: clamp(90px, 12vh, 150px); width: clamp(240px, 26vw, 460px); aspect-ratio: 1; }
.page-hero__vis::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(24, 168, 225, 0.22), rgba(24, 168, 225, 0.05) 45%, transparent 70%); }
.page-hero__vis::after { content: ""; position: absolute; inset: -2%; border-radius: 50%; border: 1px dashed rgba(95, 205, 245, 0.18); animation: spin 90s linear infinite; }
.page-hero__obj { position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s; }
.page-hero__obj.is-ready { opacity: 1; }

/* etichetta verticale lungo il bordo sinistro */
.page-hero__side { position: absolute; left: calc(var(--edge) - 30px); bottom: clamp(120px, 16vh, 200px); writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }

/* indice delle sezioni */
.toc { display: flex; flex-wrap: wrap; margin-top: clamp(32px, 5vh, 52px); border-top: 1px solid var(--line); }
.toc a { position: relative; display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 30px 4px 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--celeste-chiaro); text-decoration: none; transition: color 0.25s; }
.toc a b { color: var(--giallo); font-weight: 500; }
.toc a::after { content: "\2193"; color: var(--wire); opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.3s var(--ease-out); }
.toc a::before { content: ""; position: absolute; left: 0; right: 30px; top: -1px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.toc a:hover { color: #fff; }
.toc a:hover::after { opacity: 1; transform: none; }
.toc a:hover::before { transform: scaleX(1); }

/* metadati in fondo alla copertina */
.page-hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(44px, 7vh, 88px); padding: 12px 0 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page-hero__meta span:first-child { color: var(--celeste-chiaro); }

@media (max-width: 820px) {
  .page-hero__in > * { max-width: 100%; }
  .page-hero h1 { max-width: 100%; }
  .page-hero { padding-top: 220px; }
}
@media (max-width: 980px) {
  .page-hero__vis { width: clamp(180px, 34vw, 280px); bottom: auto; top: 96px; right: var(--gut); opacity: 0.85; }
  .page-hero__num { font-size: 46vw; bottom: auto; top: 70px; }
  .page-hero__side { display: none; }
}
@media (max-width: 640px) {
  .page-hero { min-height: 0; padding-top: 220px; }
  .page-hero__vis { display: none; }      /* sul telefono basta la balena: insieme si sovrapponevano */
  .page-hero__meta span:nth-child(n+3) { display: none; }
  .toc a { padding-right: 18px; }
}
[data-perf="low"] .page-hero__vis::after { animation: none; }

/* ---------- responsive: correzioni dal controllo a 11 larghezze ---------- */
/* tablet in orizzontale e portatili piccoli: l'hero della home su una colonna, pulsanti affiancati sotto il testo */
@media (min-width: 821px) and (max-width: 1180px) {
  .hero__in { grid-template-columns: 1fr; gap: 18px; }
  .hero__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .hero__cta { margin-top: 0; flex-wrap: nowrap; }
}
/* telefoni: i pulsanti con testo lungo vanno a capo invece di essere tagliati */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: left; line-height: 1.25; }
  .banner .btn { width: 100%; justify-content: space-between; }
}