/* Creative Studio Lab — monochrome editorial theme with isometric 3D */
:root {
  --ground: #ffffff;
  --paper: #f6f6f3;
  --ink: #000000;
  --ink-dim: #555555;
  --rule: rgba(0,0,0,0.9);
  --hairline: rgba(0,0,0,0.14);
  --ink-body: #2a2a2a;
  --on-ink: #ffffff;          /* testo sopra le superfici color inchiostro (bottoni pieni, fascia) */
  --surface: #ffffff;         /* campi, opzioni, banner cookie */
  --nav-bg: rgba(255,255,255,0.92);
  --logo-filter: brightness(0);
  color-scheme: light;
  --sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --navh: 4.5rem;
}

* { box-sizing: border-box; }
/* Safari su iPhone ingrandisce da solo il testo nei blocchi larghi (es. la fascia che scorre): disattivato */
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { background: var(--ground); color: var(--ink); }
body { margin: 0; font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--ink); }
img { max-width: 100%; display: block; }
.wrap { padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-dim); }
.light { font-weight: 300; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; background: var(--nav-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  height: var(--navh);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.02em;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a, .uline {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.nav-links a:hover, .uline:hover, .nav-links a.active { background-size: 100% 1px; }
.nav-links .lang { color: var(--ink-dim); }
.nav-links a.btn { background-image: none; padding: 0.55rem 1.1rem; color: var(--on-ink); }
/* pulsante menu: due linee sottili, senza bordo, che si incrociano in una ✕ */
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; padding: 0.35rem; margin-inline-end: -0.45rem; border: 0; background: none; cursor: pointer; color: var(--ink); flex: none; }
.menu-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.menu-icon path { transition: transform 0.3s ease; transform-origin: 12px 12px; }
.nav.open .menu-icon .l1 { transform: translateY(3px) rotate(45deg); }
.nav.open .menu-icon .l2 { transform: translateY(-3px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-icon path { transition: none; } }
@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 1.1rem;
    background: var(--ground); padding: 1.5rem var(--gutter) 2rem; border-bottom: 1px solid var(--rule);
  }
  .nav.open .nav-links { display: flex; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem); }
h1 {
  margin: 0; font-weight: 500;
  font-size: clamp(2.6rem, 10.5vw, 10rem);
  line-height: 0.92; letter-spacing: -0.045em;
}
h1 .lead { white-space: nowrap; }
.tagline {
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 0; max-width: 34ch;
  font-weight: 300; font-size: clamp(1.125rem, 1.9vw, 1.75rem);
  line-height: 1.35; letter-spacing: -0.005em; text-wrap: balance;
}
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.hero-ctas { display: flex; gap: 0.75rem; margin-top: clamp(1.25rem, 3vw, 2.25rem); flex-wrap: wrap; }
.hero-meta { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim); letter-spacing: 0.04em; line-height: 1.8; text-align: end; }
@media (max-width: 720px) { .hero-meta { text-align: start; } }

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.02em;
  padding: 0.8rem 1.6rem; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--ground); text-decoration: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { opacity: 0.82; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { opacity: 0.6; }
.btn[disabled] { opacity: 0.3; cursor: not-allowed; }

/* ---------- anatomy (isometric 3D, scroll driven) ----------
   solo il modello: i testi dei livelli sono nella sezione Servizi. Una barra continua mostra
   quanto manca alla fine, così si capisce che scorrendo si va avanti (e "Salta" porta oltre). */
#anatomy { position: relative; height: 190vh; border-top: 1px solid var(--hairline); }
#anatomy .sticky { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh)); overflow: hidden; background: var(--paper); transition: background 0.4s; }
#anatomy .head { position: absolute; z-index: 3; top: clamp(1.5rem, 5vh, 3rem); left: var(--gutter); max-width: 30rem; pointer-events: none; }
#anatomy .head h2 { margin-bottom: 0.6rem; }
#anatomy .head p { margin: 0; font-weight: 300; color: var(--ink-dim); font-size: 1.05rem; line-height: 1.45; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; } /* livello proprio: ridisegnarlo non tocca il resto */
.cap {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim);
}
.prog { position: relative; flex: 0 0 clamp(6rem, 18vw, 14rem); height: 3px; background: var(--hairline); overflow: hidden; }
.prog i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
#ctext { flex: 1; min-width: 0; }
/* finché non si inizia a scorrere, la freccia invita a farlo */
#anatomy:not(.moving):not(.dark) #ctext { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.cap .skip { color: var(--ink); white-space: nowrap; }
#anatomy.dark .sticky { background: #0b0b0b; color: #fff; }
#anatomy.dark .head p, #anatomy.dark .cap { color: rgba(255,255,255,0.6); }
#anatomy.dark .prog { background: rgba(255,255,255,0.18); }
#anatomy.dark .prog i { background: #fff; }
#anatomy.dark .cap .skip { color: #fff; }
[dir="rtl"] .prog i { transform-origin: right; }
@media (max-width: 760px) {
  #anatomy { height: 175vh; }
  #anatomy .sticky { display: flex; flex-direction: column; }
  #anatomy .head { position: static; max-width: none; padding: 1.1rem var(--gutter) 0; }
  #anatomy .head .kicker { margin-bottom: 0.5rem; }
  #anatomy .head h2 { font-size: 1.9rem; margin-bottom: 0.4rem; }
  #anatomy .head p { font-size: 0.9rem; line-height: 1.4; }
  #anatomy .head p .hint { display: none; }
  #scene { position: relative; inset: auto; flex: 1; min-height: 0; }
  .cap { position: static; padding: 0.9rem var(--gutter) 1.1rem; gap: 0.8rem; }
  .prog { flex-basis: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { #anatomy #ctext { animation: none; } }

/* ---------- stats ---------- */
.stats-caption { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-dim); padding-top: 1.4rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 1.4rem 2.2rem; gap: 2rem; border-bottom: 1px solid var(--hairline); }
.stat .num { font-weight: 500; font-size: clamp(2.2rem, 4.5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; }
.stat .label { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim); margin-top: 0.6rem; letter-spacing: 0.02em; }
@media (max-width: 720px) { .stats-grid { gap: 1rem; } .stat .num { font-size: 2.1rem; } .stat .label { font-size: 0.72rem; line-height: 1.4; letter-spacing: 0; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.kicker { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-dim); margin-bottom: 1.1rem; }
h2 { margin: 0 0 1rem; font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.section-sub { font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.4; max-width: 46ch; color: var(--ink-dim); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.section-sub em { font-style: normal; color: var(--ink); font-weight: 400; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
.feature { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.5rem); position: relative; transition: background 0.25s; }
.feature:hover { background: var(--paper); }
.feature h3 { margin: 0 0 0.6rem; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.015em; }
.feature p { margin: 0; font-weight: 300; color: var(--ink-dim); font-size: 1.05rem; line-height: 1.45; }
.feature .tag { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.06em; display: block; }
.feature .iso { width: 150px; height: 112px; margin: 1rem 0 1rem -10px; }
.feature .iso svg { width: 100%; height: 100%; overflow: visible; }
.feature.cta { display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--on-ink); }
.feature.cta p { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }
.feature.cta .tag { color: color-mix(in srgb, var(--on-ink) 55%, transparent); }
.feature.cta .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); align-self: flex-start; margin-top: 1.5rem; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.step { padding-block: 2rem 2.5rem; padding-inline: 0 2rem; border-bottom: 1px solid var(--rule); }
.step .n { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim); letter-spacing: 0.06em; margin-bottom: 1.4rem; }
.step h3 { margin: 0 0 0.5rem; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.015em; }
.step p { margin: 0; font-weight: 300; color: var(--ink-dim); font-size: 1.05rem; line-height: 1.45; max-width: 32ch; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } .step { padding-inline-end: 0; } }

/* ---------- projects ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.chip { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--hairline); background: none; color: var(--ink); cursor: pointer; transition: all 0.15s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.rail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.rail-nav { display: flex; gap: 0.5rem; }
.arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--ink); background: none; color: var(--ink); font-size: 1.05rem; cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s; }
.arrow:hover:not([disabled]) { background: var(--ink); color: var(--on-ink); }
.arrow[disabled] { opacity: 0.25; cursor: default; }
.work-grid {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); scrollbar-width: none;
  margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scroll-padding-left: 0;
}
.work-grid::-webkit-scrollbar { display: none; }
.work-grid:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.work { flex: 0 0 calc((100% - var(--gutter)) / 3.3); scroll-snap-align: start; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.1rem 1.1rem 1.5rem; }
.rail-bar { height: 2px; background: var(--hairline); margin-top: 1.25rem; position: relative; overflow: hidden; }
.rail-bar i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); transition: width 0.2s, left 0.2s; }
.work .img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); margin-bottom: 1.1rem; }
.work img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.01); transition: filter 0.5s, transform 0.6s; }
.work:hover img { filter: none; transform: scale(1.05); }
.work .tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-dim); }
.work h3 { margin: 0.5rem 0 0.35rem; font-weight: 500; font-size: 1.2rem; letter-spacing: -0.015em; }
.work p { margin: 0; font-weight: 300; color: var(--ink-dim); line-height: 1.45; }
.work.hide { display: none; }
@media (max-width: 980px) { .work { flex-basis: calc((100% - var(--gutter)) / 2.3); } }
@media (max-width: 600px) { .work { flex-basis: 82%; } .work p { font-size: 0.95rem; } }

/* ---------- clients ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hairline); border-inline-start: 1px solid var(--hairline); }
.logo-grid div { border-inline-end: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 1.25rem; }
.logo-grid img { max-height: 46px; width: auto; filter: var(--logo-filter); opacity: 0.75; transition: opacity 0.2s; }
.logo-grid div:hover img { opacity: 1; }
.logo-grid .you { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); text-align: center; text-decoration: none; }
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid div { aspect-ratio: 2 / 1; padding: 0.9rem 1.1rem; }
  .logo-grid img { max-height: 44px; max-width: 100%; opacity: 0.85; }
}

/* ---------- tech ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--hairline); }
.tech { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; padding: 1.1rem 1.25rem 1.3rem; border-inline-end: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); transition: background 0.2s; }
.tech:hover { background: var(--paper); }
.tech b { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tech span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech { padding: 0.9rem 1rem 1.1rem; } .tech b { font-size: 1.05rem; } }

/* ---------- products ---------- */
.products { border-top: 1px solid var(--rule); }
.product { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.product .info { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; padding-inline-end: 1rem; }
.product .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.product h3 { margin: 0.5rem 0 0; font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 2.1rem); letter-spacing: -0.025em; }
.product p { margin: 0.45rem 0 0.9rem; font-weight: 300; color: var(--ink-dim); line-height: 1.45; max-width: 52ch; }
.product .go { font-family: var(--mono); font-size: 0.875rem; white-space: nowrap; }
/* anteprima del sito: sfuma verso il testo (a sinistra) e un po' in basso */
.product .shot { display: block; position: relative; aspect-ratio: 2 / 1; overflow: hidden;
  --fade: linear-gradient(to left, #000 45%, transparent 100%);
  -webkit-mask-image: var(--fade), linear-gradient(to top, transparent 0, #000 22%); mask-image: var(--fade), linear-gradient(to top, transparent 0, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.product .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); opacity: 0.8; transform: scale(1); transform-origin: right top; transition: filter 0.5s, transform 0.8s ease, opacity 0.5s; }
.product:hover .shot img { filter: none; opacity: 1; transform: scale(1.04); }
[dir="rtl"] .product .shot { --fade: linear-gradient(to right, #000 45%, transparent 100%); }
[dir="rtl"] .product .shot img { transform-origin: left top; }
@media (max-width: 640px) {
  .product { grid-template-columns: 1fr; }
  .product .info { padding-inline-end: 0; }
  .product p { font-size: 0.92rem; }
  .product .shot { order: -1; margin-bottom: 0.25rem; --fade: linear-gradient(to top, transparent 0, #000 55%); -webkit-mask-image: var(--fade); mask-image: var(--fade); }
}

/* ---------- team: ritratti a schizzo ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
.member { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1rem, 1.8vw, 1.5rem); display: flex; flex-direction: column; }
.member .pic { background: var(--paper); border: 1px solid var(--hairline); margin-bottom: 1rem; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; }
.member .sketch { width: 100%; height: 100%; color: var(--ink); }
.member .tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-dim); }
.member h3 { margin: 0.6rem 0 0.15rem; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; }
.member .role { font-weight: 400; font-size: 0.95rem; margin-bottom: 0.6rem; }
.member p { margin: 0 0 0.9rem; font-weight: 300; color: var(--ink-dim); font-size: 0.93rem; line-height: 1.4; flex: 1; }
.member .skills { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-dim); border-top: 1px solid var(--hairline); padding-top: 0.6rem; }
.member.net h3 { font-weight: 300; }
/* i tratti si disegnano quando la scheda entra in vista: prima il contorno, poi la ripassata, poi ombre e scarabocchi */
.member .sketch path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .2, 1); }
.member .sketch .s2 path { transition-delay: 0.5s; }
.member .sketch .s3 path { transition-duration: 1s; transition-delay: 1s; }
.member .sketch path:not([pathLength]) { opacity: 0; transition: opacity 0.8s 1.4s; }
.member.in .sketch path[pathLength] { stroke-dashoffset: 0; }
.member.in .sketch path:not([pathLength]) { opacity: 1; }
.member .pic svg { transition: transform 0.5s ease; }
.member:hover .pic svg { transform: rotate(-1.2deg) scale(1.02); }
/* tablet e mobile: ogni persona è una riga, disegno piccolo a lato di nome e ruolo */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .member { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; align-items: start; }
  .member .pic { grid-row: 1 / 4; aspect-ratio: 1; margin: 0; background-size: 14px 14px; }
  .member .tag { grid-column: 2; }
  .member h3 { grid-column: 2; margin-top: 0.3rem; font-size: 1.25rem; }
  .member .role { grid-column: 2; margin: 0; font-size: 0.9rem; }
  .member p { grid-column: 1 / -1; margin: 0.8rem 0 0.7rem; }
  .member .skills { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .member { grid-template-columns: 5.5rem minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .member .sketch path[pathLength], .member .sketch path:not([pathLength]) { stroke-dashoffset: 0; opacity: 1; transition: none; }
  .member:hover .pic svg { transform: none; }
}

/* ---------- quote wizard ---------- */
.quote { display: grid; grid-template-columns: 1fr 1.4fr; border: 1px solid var(--rule); }
.quote-side { padding: clamp(1.5rem, 3vw, 2.5rem); border-inline-end: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.quote-side ol { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; }
/* three columns shared by every row (label · answer · tick) so the answers line up */
.quote-side ol { display: grid; grid-template-columns: max-content minmax(0, 1fr) 1em; column-gap: 1rem; }
.quote-side li { grid-column: 1 / -1; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); color: var(--ink-dim); display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 1em; grid-template-columns: subgrid; column-gap: 1rem; align-items: baseline; }
.quote-side li > span:first-child { grid-column: 1; white-space: nowrap; }
.quote-side li.cur { color: var(--ink); font-weight: 500; }
.quote-side li.done::after { content: "✓"; grid-column: 3; text-align: end; }
.quote-side li .v { grid-column: 2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-main { padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 30rem; display: flex; flex-direction: column; }
.qstep { display: none; flex: 1; }
.qstep.on { display: block; animation: fade 0.35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.qstep h3 { margin: 0 0 1.4rem; font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.opt { text-align: start; font: inherit; font-weight: 300; font-size: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); cursor: pointer; border-radius: 4px; transition: border-color 0.15s, background 0.15s; }
.opt:hover { border-color: var(--ink); }
.opt.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.fields label { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.fields .full { grid-column: 1 / -1; }
.fields input, .fields textarea { font: inherit; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 0.75rem 0.9rem; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); }
.fields input:focus, .fields textarea:focus { outline: none; border-color: var(--ink); }
.fields textarea { min-height: 7rem; resize: vertical; }
.qnav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.qnav .count { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-dim); }
.review { margin: 0 0 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; border-top: 1px solid var(--hairline); padding-top: 1rem; font-size: 0.95rem; }
.review dt { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.review dd { margin: 0; font-weight: 300; }
.qmsg { font-weight: 300; color: var(--ink-dim); line-height: 1.5; max-width: 46ch; }
/* attesa della generazione del preventivo */
.gen-bar { position: relative; height: 3px; background: var(--hairline); overflow: hidden; margin-top: 0.5rem; }
.gen-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .gen-bar i { transform-origin: right; }
.gen-pct { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-dim); margin-top: 0.6rem; text-align: end; }
.gen-steps { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; font-family: var(--mono); font-size: 0.85rem; }
.gen-steps li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--hairline); color: var(--ink-dim); opacity: 0.55; transition: opacity 0.3s, color 0.3s; }
.gen-steps li::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border: 1px solid currentColor; }
.gen-steps li.cur { color: var(--ink); opacity: 1; }
.gen-steps li.cur::before { animation: logo-blink 1s steps(1) infinite; background: currentColor; }
.gen-steps li.done { color: var(--ink); opacity: 1; }
.gen-steps li.done::before { background: currentColor; }
.gen-steps li.done::after { content: "✓"; margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) { .gen-steps li.cur::before { animation: none; } }
@media (max-width: 860px) { .quote { grid-template-columns: 1fr; } .quote-side { border-inline-end: 0; border-bottom: 1px solid var(--rule); } .quote-side ol { display: none; } }
@media (max-width: 520px) { .opts, .fields { grid-template-columns: 1fr; } }

/* ---------- band / contact ---------- */
.band { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--hairline); }
.band h2 { font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 1.5rem; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); margin-top: 2rem; }
.contact { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(0.9rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.5rem); display: block; text-decoration: none; }
.contact .label { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.06em; display: block; margin-bottom: 0.7rem; }
.contact .value { font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.015em; line-height: 1.3; word-break: break-word; }
a.contact:hover .value { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
/* il footer resta nero in entrambi i temi */
footer { background: #000; color: #fff; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
footer a { color: #fff; }
.foot-big { font-weight: 500; font-size: clamp(3rem, 15vw, 14rem); letter-spacing: -0.06em; line-height: 0.85; margin: 0 0 clamp(2rem, 5vw, 4rem); white-space: nowrap; }
.foot-big .light { opacity: 0.45; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.foot-head { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); display: block; margin-bottom: 1.2rem; }
.foot-col a, .foot-col span:not(.foot-head) { display: block; color: #fff; text-decoration: none; font-weight: 300; font-size: 0.95rem; margin-bottom: 0.7rem; }
.foot-col a.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.foot-col a.brand span { margin-bottom: 0; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-col p { font-weight: 300; color: rgba(255,255,255,0.7); max-width: 30ch; line-height: 1.45; margin: 1rem 0 0; }
.foot-copy { font-family: var(--mono); font-size: 0.75rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- hero scritto come da tastiera ----------
   html.tw viene messa nell'<head> (se l'utente non ha ridotto le animazioni) e nasconde i testi
   finché main.js non li prepara; se lo script non parte, dopo 4s ricompaiono comunque. */
html.tw .hero [data-type] { visibility: hidden; animation: tw-failsafe 0s 4s forwards; }
@keyframes tw-failsafe { to { visibility: visible; } }
.tw-off { visibility: hidden; }
/* il cursore non occupa spazio e non crea punti in cui andare a capo: la barretta è disegnata sopra il testo,
   così una parola a metà non salta sulla riga dopo mentre si scrive */
.tw-caret { position: relative; display: inline; animation: logo-blink 1s steps(1) infinite; }
.tw-caret::after { content: ""; position: absolute; inset-inline-start: 0.03em; top: 0.12em; width: 0.08em; min-width: 2px; height: 0.86em; background: currentColor; }
.tw-caret.typing { animation: none; }
.tw-caret.gone { opacity: 0; transition: opacity 0.6s; animation: none; }

/* nav in home: il nome accanto a csl. entra solo quando il titolo grande è uscito dallo schermo */
.nav.compact .brand { gap: 0; }
.nav.compact .brand span { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transform: translateY(0.4em);
  transition: max-width 0.5s ease, opacity 0.35s ease, transform 0.35s ease, margin 0.5s ease; }
.nav.compact.named .brand span { max-width: 12em; opacity: 1; transform: none; margin-inline-start: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .nav.compact .brand span { transition: none; } }

/* ---------- personalità ---------- */
/* il quadratino del logo (csl.) davanti a ogni sezione */
.kicker::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; background: currentColor; margin-inline-end: 0.6em; vertical-align: 0.05em; }

/* carta quadrettata leggera dietro l'intestazione, come negli schizzi del team */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse at 85% 30%, #000 0, transparent 70%); mask-image: radial-gradient(ellipse at 85% 30%, #000 0, transparent 70%); }

/* fascia nera con le parole chiave che scorre in continuo */
.ticker { background: var(--ink); color: var(--on-ink); overflow: hidden; direction: ltr; border-block: 1px solid var(--ink); }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker-run { display: flex; align-items: center; flex: none; }
.ticker span { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.95rem 1.4rem; white-space: nowrap; }
.ticker i { display: block; flex: none; width: 0.4rem; height: 0.4rem; background: currentColor; opacity: 0.45; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* numeri del percorso grandi e solo contorno.
   Il font ha forme sovrapposte (es. dove si incrociano le curve del 3): il riempimento color sfondo
   disegnato sopra al contorno (paint-order) copre le linee interne e lascia solo il bordo esterno */
.step .n { font-family: var(--sans); font-weight: 500; font-size: clamp(3rem, 7vw, 5rem); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--ground); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; margin-bottom: 1rem; }

@media (max-width: 720px) {
  /* titolo a tutta larghezza, una parola per riga */
  .hero h1 { font-size: 20.5vw; line-height: 0.86; }
  .hero h1 .lead { white-space: normal; }
  .hero .tagline { font-size: 1.2rem; }
  .hero::before { -webkit-mask-image: radial-gradient(ellipse at 90% 10%, #000 0, transparent 75%); mask-image: radial-gradient(ellipse at 90% 10%, #000 0, transparent 75%); }
  .stat .num { font-size: 2.6rem; }
  /* percorso: ogni passo è una riga compatta, numero a sinistra e testo accanto */
  .step { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1.1rem; padding-block: 1.7rem; }
  .step .n { grid-row: 1 / 3; margin: 0; font-size: 2.8rem; }
  .step h3 { grid-column: 2; font-size: 1.2rem; margin-bottom: 0.45rem; }
  .step p { grid-column: 2; font-size: 0.95rem; }
  /* servizi più compatti: icona a lato invece che in mezzo alla scheda */
  .feature:not(.cta) { display: grid; grid-template-columns: 1fr 92px; column-gap: 1rem; align-items: start; padding: 1.25rem; }
  .feature:not(.cta) .tag { grid-column: 1 / -1; margin-bottom: 0.6rem; }
  .feature:not(.cta) .iso { grid-column: 2; grid-row: 2 / 4; width: 92px; height: 70px; margin: 0; }
  .feature:not(.cta) h3 { grid-column: 1; grid-row: 2; font-size: 1.2rem; }
  .feature:not(.cta) p { grid-column: 1; grid-row: 3; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .nav-links a, .uline { transition: none; }
}

/* touch screens: colour the item in focus instead of on hover */
@media (hover: none) {
  .work.lit img, .product.lit .shot img { filter: none; opacity: 1; }
}

/* ---------- cookie consent ---------- */
.foot-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
footer .foot-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cookie {
  position: fixed; z-index: 100; inset-inline-start: var(--gutter); bottom: clamp(1rem, 3vw, 2rem);
  width: min(26rem, calc(100% - 2 * var(--gutter)));
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  padding: 1.25rem 1.4rem 1.4rem; box-shadow: 0 18px 50px -20px rgba(0,0,0,0.35);
  animation: cookie-in 0.45s ease both;
}
.cookie[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
.cookie-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding-bottom: 0.75rem; }
.cookie h3 { margin: 1rem 0 0.4rem; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; }
.cookie p { margin: 0; font-weight: 300; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.45; }
.cookie-prefs { margin-top: 1rem; border-top: 1px solid var(--hairline); }
.pref { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.pref b { display: block; font-weight: 500; font-size: 0.95rem; }
.pref small { display: block; font-weight: 300; color: var(--ink-dim); font-size: 0.82rem; margin-top: 0.15rem; }
.pref input { position: absolute; opacity: 0; pointer-events: none; }
.pref i { flex: 0 0 auto; width: 2.4rem; height: 1.35rem; border-radius: 999px; border: 1px solid var(--ink); position: relative; transition: background 0.2s; }
.pref i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: var(--ink); transition: transform 0.2s, background 0.2s; }
.pref input:checked + i { background: var(--ink); }
.pref input:checked + i::after { transform: translateX(1.05rem); background: var(--on-ink); }
.pref input:disabled + i { opacity: 0.45; }
.pref input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-top: 1.25rem; }
.cookie-actions .btn { padding: 0.7rem 1.2rem; }
.cookie-actions .foot-link { font-family: var(--mono); font-size: 0.85rem; margin-inline-start: 0.25rem; }
@media (max-width: 520px) {
  .cookie { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; padding: 1.1rem 1.1rem 1.2rem; }
  .cookie-actions .btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

/* ---------- language switch ---------- */
/* selettore lingua unico: una piccola icona a forma di mondo che apre un menu leggero */
.langs { position: relative; }
.langs summary { list-style: none; display: grid; place-items: center; width: 2rem; height: 2rem; cursor: pointer; color: var(--ink); user-select: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform 0.4s ease; }
.langs summary:hover svg, .langs[open] summary svg { transform: rotate(-20deg); }
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 0.6rem); inset-inline-end: -0.4rem; min-width: 8.5rem; background: var(--ground); border: 1px solid var(--hairline); box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 0.3rem 0; display: flex; flex-direction: column; }
.nav-links .lang-menu a.lang { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.9rem; font-size: 0.8125rem; color: var(--ink-dim); background-image: none; }
.nav-links .lang-menu a.lang:hover { color: var(--ink); background: var(--paper); }
.nav-links .lang-menu a.lang.on { color: var(--ink); }
/* l'arabo non va spaziato né scritto in monospazio, altrimenti le lettere si staccano */
.nav-links .lang-menu a.lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: 0; }
.nav-links .lang-menu a.lang.on::after { content: ""; width: 0.45em; height: 0.45em; background: currentColor; align-self: center; }
@media (max-width: 980px) {
  .lang-menu { position: static; border: 0; box-shadow: none; border-inline-start: 1px solid var(--hairline); margin-top: 0.4rem; padding: 0; min-width: 0; }
  .langs summary { width: auto; justify-content: start; }
  .nav-links .lang-menu a.lang { padding: 0.45rem 1rem; }
}
.foot-social a { text-decoration: none; }
.foot-social a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-col .foot-link { display: block; text-align: start; font-weight: 300; font-size: 0.95rem; margin-bottom: 0.7rem; }

/* ---------- legal page ---------- */
.legal-hero { border-bottom: 1px solid var(--hairline); }
.legal-title { font-size: clamp(2.6rem, 8vw, 7rem); }
.legal { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.legal-toc { position: sticky; top: calc(var(--navh) + 1.5rem); align-self: start; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: toc; }
.legal-toc li { counter-increment: toc; border-bottom: 1px solid var(--hairline); }
.legal-toc a { display: flex; gap: 0.75rem; padding: 0.55rem 0; font-size: 0.9rem; font-weight: 300; text-decoration: none; color: var(--ink-dim); transition: color 0.15s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 0.75rem; padding-top: 0.15rem; }
.legal-toc a:hover, .legal-toc a.on { color: var(--ink); }
.legal-body { max-width: 46rem; }
.legal-sec { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--hairline); scroll-margin-top: calc(var(--navh) + 1rem); }
.legal-sec:last-child { border-bottom: 0; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 1rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.legal-sec h2 .n { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--ink-dim); letter-spacing: 0.06em; }
.legal-sec h3 { font-weight: 500; font-size: 1.1rem; margin: 1.75rem 0 0.5rem; letter-spacing: -0.01em; }
.legal-sec p, .legal-sec li { font-weight: 300; font-size: 1.05rem; line-height: 1.6; color: var(--ink-body); }
.legal-sec p { margin: 0 0 1rem; }
.legal-sec ul { margin: 0 0 1rem; padding-inline-start: 1.2rem; }
.legal-sec li { margin-bottom: 0.4rem; }
.legal-sec li::marker { color: var(--ink-dim); }
.legal-sec strong { font-weight: 500; color: var(--ink); }
.legal-sec a { text-underline-offset: 3px; }
.legal-sec code { font-family: var(--mono); font-size: 0.85em; background: var(--paper); padding: 0.1em 0.35em; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 0.95rem; }
.legal-table th { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); text-align: start; padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.legal-table td { font-weight: 300; line-height: 1.5; vertical-align: top; text-align: start; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--hairline); }
.inline-link { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}
@media (max-width: 600px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { border-bottom: 1px solid var(--hairline); padding: 0.5rem 0; }
  .legal-table td { border: 0; padding: 0.2rem 0; }
  .legal-table td:first-child { font-weight: 500; }
}

/* ---------- Arabic / RTL ---------- */
[dir="rtl"] {
  --sans: "IBM Plex Sans Arabic", "Roboto", system-ui, sans-serif;
  --mono: "IBM Plex Sans Arabic", "Roboto Mono", ui-monospace, monospace;
}
/* letter-spacing breaks the joining of Arabic letters */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
[dir="rtl"] h1[dir="ltr"], [dir="rtl"] .foot-big { font-family: "Roboto", system-ui, sans-serif; letter-spacing: -0.045em !important; }
[dir="rtl"] h1[dir="ltr"] { text-align: right; }
[dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }
[dir="rtl"] .legal-sec p, [dir="rtl"] .legal-sec li { line-height: 1.85; }
/* the 3D stage keeps its left-to-right geometry; only its texts are RTL */
[dir="rtl"] #anatomy .sticky { direction: ltr; }
[dir="rtl"] #anatomy .head, [dir="rtl"] #anatomy .cap { direction: rtl; }
[dir="rtl"] #anatomy .head { text-align: right; }
/* project rail scrolls left-to-right; cards read RTL */
[dir="rtl"] .work-grid { direction: ltr; }
[dir="rtl"] .work { direction: rtl; }
[dir="rtl"] .pref i { direction: ltr; }

/* ---------- logo "csl." with blinking dot ---------- */
.brand { gap: 0.7rem; }
.brand .logo { height: 1.15em; width: auto; flex: none; overflow: visible; }
.logo-dot { animation: logo-blink 1.2s steps(1) infinite; }
@keyframes logo-blink { 50% { opacity: 0; } }
footer .brand .logo { height: 1.3em; }
[dir="rtl"] .brand { direction: ltr; }
@media (prefers-reduced-motion: reduce) { .logo-dot { animation: none; } }

/* ---------- brand kit page ---------- */
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bk-tile { margin: 0; border: 1px solid var(--rule); background: #fff; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; min-width: 0; }
.bk-tile.dark { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.bk-tile.dark figcaption span { color: rgba(255,255,255,.6); }
.bk-tile.dark .bk-dl a { color: #fff; border-color: rgba(255,255,255,.4); }
.bk-stage { min-height: 13rem; display: grid; place-items: center; padding: 1.5rem; }
.bk-mark { width: min(11rem, 60%); height: auto; }
.bk-lock { width: min(22rem, 90%); height: auto; }
.bk-tile figcaption { display: flex; flex-direction: column; gap: 0.3rem; border-top: 1px solid var(--hairline); padding-top: 0.9rem; }
.bk-tile.dark figcaption { border-color: rgba(255,255,255,.18); }
.bk-tile figcaption b { font-weight: 500; }
.bk-tile figcaption span { font-weight: 300; color: var(--ink-dim); font-size: 0.95rem; }
.bk-dl { display: flex !important; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.bk-dl a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.35rem 0.75rem; color: var(--ink); transition: background .15s, color .15s; }
.bk-dl a::before { content: "↓ "; }
.bk-dl a:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.bk-tile.dark .bk-dl a:hover { background: #fff; color: #000; }
.bk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.bk-big .bk-stage { min-height: 18rem; }
.bk-big .logo { width: min(16rem, 70%); height: auto; }
.bk-specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; border-top: 1px solid var(--rule); }
.bk-specs dt, .bk-specs dd { padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.bk-specs dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-dim); padding-inline-end: 1.5rem; }
.bk-specs dd { font-weight: 300; }
.bk-specs-wide { margin-top: 1.5rem; }
.bk-space { position: relative; padding: 2.4rem; outline: 1px dashed rgba(0,0,0,.35); outline-offset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 6px, transparent 6px 12px); }
.bk-space .bk-mark { display: block; width: 10rem; background: #fff; outline: 1px solid rgba(0,0,0,.12); }
.bk-space .x { position: absolute; font-family: var(--mono); font-style: normal; font-size: 0.75rem; color: var(--ink-dim); }
.bk-space .x.t { top: 0.7rem; left: 50%; } .bk-space .x.b { bottom: 0.7rem; left: 50%; }
.bk-space .x.l { left: 0.9rem; top: 50%; } .bk-space .x.r { right: 0.9rem; top: 50%; }
.bk-sizes { display: flex; align-items: flex-end; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.bk-sizes figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.bk-sizes figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); }
.bk-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); }
.bk-swatch { font: inherit; text-align: start; border: 0; border-inline-end: 1px solid var(--rule); min-height: 11rem; padding: 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; cursor: pointer; }
.bk-swatch:last-child { border-inline-end: 0; }
.bk-swatch b { font-weight: 500; font-size: 1.05rem; }
.bk-swatch span { font-family: var(--mono); font-size: 0.72rem; opacity: .75; }
.bk-swatch em { font-style: normal; font-family: var(--mono); font-size: 0.72rem; opacity: 0; transition: opacity .15s; }
.bk-swatch:hover em, .bk-swatch:focus-visible em, .bk-swatch.done em { opacity: 1; }
.bk-type { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bk-specimen { margin: 0.5rem 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.bk-mono { font-family: "Roboto Mono", monospace; font-weight: 400; letter-spacing: 0; }
.bk-dont { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bk-dont figure { margin: 0; }
.bk-dont figure > div { aspect-ratio: 4 / 3; border: 1px solid var(--hairline); display: grid; place-items: center; overflow: hidden; background: #fff; position: relative; }
.bk-dont figure > div img { width: 45%; }
.bk-dont figure:not(.ok) > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(200,0,0,.55) 50%, transparent calc(50% + 1px)); }
.bk-dont figcaption { font-size: 0.92rem; font-weight: 400; margin-top: 0.6rem; }
.bk-dont figure.ok figcaption { font-weight: 500; }
.bk-photo { background: radial-gradient(120% 120% at 30% 20%, #3a3a3a, #0b0b0b) !important; }
.bk-busy { background: repeating-linear-gradient(135deg, #e44 0 14px, #fc3 14px 28px, #39f 28px 42px) !important; }
.bk-fake { font-weight: 500; font-size: 2.4rem; letter-spacing: -0.05em; }
.bk-fake b { font-size: 0.8em; }
.bk-icons { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-end; border-top: 1px solid var(--rule); padding-top: 2rem; }
.bk-icons figure { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.bk-icons figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); display: flex; flex-direction: column; gap: 0.2rem; }
.bk-code { border: 1px solid var(--rule); margin-bottom: 1rem; }
.bk-code-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hairline); background: var(--paper); }
.bk-code pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; background: #0b0b0b; color: #f2f2ee; font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; text-align: left; }
.bk-terms { max-width: 62ch; }
.bk-terms p { font-weight: 300; font-size: 1.1rem; line-height: 1.6; margin: 0 0 1rem; }
.bk-terms strong { font-weight: 500; }
@media (max-width: 900px) {
  .bk-grid, .bk-split, .bk-type { grid-template-columns: 1fr; }
  .bk-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-swatch:nth-child(2) { border-inline-end: 0; }
  .bk-swatch:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .bk-dont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-stage { min-height: 10rem; }
}

/* ---------- tema scuro ----------
   data-theme sull'<html> lo imposta lo script nell'<head> (scelta salvata o preferenza del sistema).
   Tutto il sito usa i token qui sotto, quindi basta ridefinirli; i ritratti del team sono disegnati
   con currentColor e seguono l'inchiostro da soli. */
:root[data-theme="dark"] {
  --ground: #0c0c0c;
  --paper: #161616;
  --ink: #f2f2ee;
  --ink-dim: #a3a39e;
  --ink-body: #d4d4cf;
  --rule: rgba(255,255,255,0.72);
  --hairline: rgba(255,255,255,0.14);
  --on-ink: #0c0c0c;
  --surface: #121212;
  --nav-bg: rgba(12,12,12,0.88);
  --logo-filter: brightness(0) invert(1);
  color-scheme: dark;
}
[data-theme="dark"] footer { border-top: 1px solid var(--hairline); }
/* "Hai un'idea?": invece del blocco bianco, una superficie appena più chiara del fondo con il bottone chiaro */
[data-theme="dark"] .feature.cta { background: #1a1a19; color: var(--ink); }
[data-theme="dark"] .feature.cta p, [data-theme="dark"] .feature.cta .tag { color: var(--ink-dim); }
[data-theme="dark"] .feature.cta .btn { background: var(--ink); color: var(--ground); border-color: var(--ink); }
[data-theme="dark"] .feature.cta:hover { background: #20201f; }
/* le tavolette isometriche delle schede: stessa palette in negativo (contorni chiari su fondo scuro) */
[data-theme="dark"] .feature .iso svg { filter: invert(1); }
[data-theme="dark"] .cookie { box-shadow: 0 18px 50px -20px rgba(0,0,0,0.8); }
[data-theme="dark"] .lang-menu { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
/* brand kit: le tavole "su chiaro" restano chiare, sono campioni del logo */
[data-theme="dark"] .bk-tile:not(.dark), [data-theme="dark"] .bk-dont figure > div, [data-theme="dark"] .bk-space {
  --ink: #000; --ink-dim: #555; --rule: rgba(0,0,0,0.9); --hairline: rgba(0,0,0,0.14); --on-ink: #fff; color: var(--ink); }
[data-theme="dark"] .bk-space { background-color: #f6f6f3; }
/* passaggio morbido tra i due temi (solo durante il cambio) */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease !important; }

/* strumenti nel menu: bacchetta magica, chiaro/scuro e lingua, sempre affiancati */
.nav-tools { display: flex; align-items: center; gap: 0.35rem; }
.tool-toggle { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; }
.tool-toggle svg { width: 1.15rem; height: 1.15rem; transition: transform 0.5s cubic-bezier(.5, 0, .2, 1); }
/* chiaro / scuro: un cerchio diviso a metà che ruota */
.theme-toggle circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.theme-toggle path { fill: currentColor; }
.theme-toggle:hover svg { transform: rotate(-20deg); }
[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
[data-theme="dark"] .theme-toggle:hover svg { transform: rotate(160deg); }
/* bacchetta magica: stesso tratto del mondo; accesa, la punta si riempie e le scintille brillano */
.magic-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; overflow: visible; }
.magic-toggle .tip { stroke-width: 2.4; }
.magic-toggle .spark { transform-box: fill-box; transform-origin: center; transition: opacity 0.3s, transform 0.3s; opacity: 0.55; }
.magic-toggle:hover svg { transform: rotate(-12deg); }
.magic-toggle[aria-pressed="true"] .spark { opacity: 1; animation: spark 1.4s ease-in-out infinite; }
.magic-toggle[aria-pressed="true"] .s2 { animation-delay: 0.45s; }
.magic-toggle[aria-pressed="true"] .s3 { animation-delay: 0.9s; }
@keyframes spark { 50% { transform: scale(0.4) rotate(45deg); opacity: 0.4; } }
@media (max-width: 980px) {
  .nav-tools { align-items: flex-start; gap: 0.6rem; margin-inline-start: -0.4rem; }
  .nav-tools .langs summary { width: 2rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tool-toggle svg { transition: none; } .magic-toggle[aria-pressed="true"] .spark { animation: none; } }

/* ---------- magia: acquerello ----------
   la bacchetta mette data-magic sull'<html> (sempre con il tema chiaro). Sotto la pagina scorrono macchie
   d'acquerello (.aqua, create da main.js). Una sola famiglia di colori, "acqua": azzurri, blu, ottanio e un
   tocco d'indaco; gli inchiostri sono profondi, così i testi restano leggibili sulla carta. */
:root[data-magic] {
  --ground: #f7f8f6;
  --paper: rgba(255,255,255,0.42);
  --ink: #141a33;
  --ink-dim: #3a4260;
  --ink-body: #232a45;
  --rule: rgba(30,40,90,0.55);
  --hairline: rgba(30,40,90,0.14);
  --on-ink: #ffffff;
  --surface: rgba(255,255,255,0.72);
  --nav-bg: rgba(247,248,246,0.9);
  --logo-filter: brightness(0) invert(14%) sepia(45%) saturate(2200%) hue-rotate(205deg);
  /* tavolozza: velature (--w1…--w7, chiare, per fondo e livelli 3D) e inchiostri (--k1…--k5, profondi,
     per titoli, bottoni e superfici scure). main.js legge le velature da qui per il cosmo 3D e le icone */
  --w1: #b7d3f0; --w2: #c5cbf0; --w3: #b7e0e4; --w4: #cfe2f5; --w5: #d2cdf0; --w6: #c3e6dc; --w7: #a9c7ea;
  --k1: #2c2f7a; --k2: #22478d; --k3: #1a5a85; --k4: #145c63; --k5: #3b3483;
  --dot: #1a6f86;
  /* team: velatura e inchiostro di ogni persona */
  --t1: #b7d3f0; --tk1: #22478d; --t2: #bcd6ec; --tk2: #1a5a85; --t3: #b7e0e4; --tk3: #145c63; --t4: #cbcaee; --tk4: #3b3483;
  /* inchiostro per titoli, bottoni e fascia (contrasto almeno 6:1 sulla carta) */
  --aqua-ink: linear-gradient(105deg, var(--k1) 0%, var(--k2) 35%, var(--k3) 60%, var(--k4) 82%, var(--k1) 100%);
  --aqua-wash: linear-gradient(100deg, #dbe8f3, var(--w1) 30%, var(--w3) 60%, var(--w2) 90%);
}
[data-magic] body { background: transparent; }
/* menu pieno: senza sfocatura (pesante sopra le macchie in movimento) la trasparenza lascerebbe vedere la pagina sotto */
[data-magic] .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ground); }
/* riquadri come fogli di carta appoggiati sull'acquerello: il testo sta sopra al colore, non dentro */
[data-magic] .feature:not(.cta), [data-magic] .tech, [data-magic] .logo-grid div, [data-magic] .member, [data-magic] .contact,
[data-magic] .quote-side, [data-magic] .quote-main { background: rgba(255,255,255,0.58); }
[data-magic] .feature:not(.cta):hover, [data-magic] .tech:hover { background: rgba(255,255,255,0.8); }
[data-magic] .member .pic { background-color: #fff; }
/* loghi pieni, color inchiostro (nella versione normale sono semitrasparenti) */
[data-magic] .logo-grid img, [data-magic] .logo-grid div:hover img { opacity: 1; }
/* numeri del percorso: contorno d'inchiostro su carta bianca */
[data-magic] .step .n { color: #fff; }
/* leggibilità: un velo di carta sopra le macchie e un alone chiaro attorno ai testi semplici
   (non ai titoli a gradiente, dove l'alone sporcherebbe il colore) */
.aqua::after { content: ""; position: absolute; inset: 0; background: rgba(247,248,246,0.12); }
[data-magic] p, [data-magic] li, [data-magic] dd, [data-magic] dt, [data-magic] label, [data-magic] small,
[data-magic] .mono, [data-magic] .kicker, [data-magic] .tag, [data-magic] .meta, [data-magic] .label, [data-magic] .tagline,
[data-magic] .hero-meta, [data-magic] .section-sub, [data-magic] .stats-caption, [data-magic] .role, [data-magic] .skills, [data-magic] .quote-side li,
[data-magic] .count, [data-magic] .product .go, [data-magic] .cap, [data-magic] .nav-links a, [data-magic] .member h3 {
  text-shadow: 0 0 6px rgba(247,248,246,0.95); }
[data-magic] .feature.cta p, [data-magic] .feature.cta .tag, [data-magic] .nav-links a.btn, [data-magic] footer p, [data-magic] .cookie p { text-shadow: none; }
[data-magic] .kicker { font-weight: 500; }

/* il fondo: carta, macchie che si spostano lentissime e si sovrappongono come pigmenti */
.aqua { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--ground); }
[data-magic] .aqua { display: block; }
.aqua i { position: absolute; width: 58vmax; height: 50vmax; left: var(--x); top: var(--y); opacity: 0.8;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  /* centro più chiaro e bordo più carico: il pigmento si raccoglie sul bordo, come nell'acquerello vero.
     Niente filter: blur né mix-blend-mode: la sfumatura sta già nel gradiente e l'animazione è solo transform,
     così il compositore la muove senza ridisegnare nulla mentre si scorre */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent) 0 40%, color-mix(in srgb, var(--c) 90%, transparent) 72%, color-mix(in srgb, var(--c) 35%, transparent) 88%, transparent 100%);
  will-change: transform; animation: aqua-drift var(--d) ease-in-out infinite alternate; }
.aqua i:nth-child(1) { --c: var(--w1); --x: -14vmax; --y: -12vmax; --d: 110s; --tx: 6vmax; --ty: 4vmax; --r: 10deg; }
.aqua i:nth-child(2) { --c: var(--w2); --x: 52vw; --y: -18vmax; --d: 135s; --tx: -5vmax; --ty: 7vmax; --r: -12deg; }
.aqua i:nth-child(3) { --c: var(--w3); --x: 60vw; --y: 45vh; --d: 120s; --tx: -8vmax; --ty: -5vmax; --r: 14deg; }
.aqua i:nth-child(4) { --c: var(--w4); --x: -18vmax; --y: 55vh; --d: 150s; --tx: 7vmax; --ty: -6vmax; --r: -8deg; }
.aqua i:nth-child(5) { --c: var(--w5); --x: 22vw; --y: 20vh; --d: 165s; --tx: 5vmax; --ty: 6vmax; --r: 18deg; width: 44vmax; height: 40vmax; opacity: 0.5; }
.aqua i:nth-child(6) { --c: var(--w6); --x: 70vw; --y: 80vh; --d: 125s; --tx: -7vmax; --ty: -8vmax; --r: -15deg; width: 40vmax; height: 36vmax; }
.aqua i:nth-child(7) { --c: var(--w7); --x: 30vw; --y: 85vh; --d: 145s; --tx: 4vmax; --ty: -9vmax; --r: 12deg; width: 46vmax; height: 38vmax; opacity: 0.55; }
@keyframes aqua-drift { to { transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1.08); } }
/* grana della carta */
.aqua b { position: absolute; inset: 0; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .32 0 0 0 0 .42 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .aqua i { animation: none; } }

/* scintille (canvas di main.js) */
.sparkles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* il nuovo tema si allarga a cerchio dal pulsante (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* titoli: inchiostro dall'indaco all'ottanio */
[data-magic] h1, [data-magic] h2, [data-magic] .stat .num, [data-magic] .product h3, [data-magic] .legal-title {
  background: var(--aqua-ink); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; background-position: 20% 50%; }
/* il titolo grande cambia piano tinta: un filtro animato lo muove la scheda grafica, senza ridisegnare il testo a ogni frame */
[data-magic] .hero h1 { will-change: filter; animation: aqua-hue 24s ease-in-out infinite alternate; }
@keyframes aqua-hue { from { filter: hue-rotate(-8deg); } to { filter: hue-rotate(10deg); } }
[data-magic] .tw-caret::after { background: var(--k2); }
[data-magic] .section-sub em { color: var(--k2); }
[data-magic] .kicker { color: #24346f; }
[data-magic] .kicker::before { background: linear-gradient(135deg, var(--k3), var(--k1)); transform: rotate(45deg) scale(0.85); }
[data-magic] .logo-dot { fill: var(--dot); }
[data-magic] a.uline:hover, [data-magic] .nav-links a.active { color: var(--k2); }

/* bottoni: pieni d'inchiostro che si muove quando ci passi sopra */
[data-magic] .btn:not(.ghost) { background: linear-gradient(110deg, var(--k1), var(--k2) 50%, var(--k4)); background-size: 200% 100%; background-position: 0% 50%;
  border-color: transparent; color: #fff; transition: background-position 0.6s ease, opacity 0.15s; }
[data-magic] .btn:not(.ghost):hover { background-position: 100% 50%; opacity: 1; }
[data-magic] .btn.ghost { background: rgba(255,255,255,0.45); }
[data-magic] .nav-links a.btn { background-image: linear-gradient(110deg, var(--k1), var(--k2) 50%, var(--k4)); }
[data-magic] .chip.on, [data-magic] .opt.on, [data-magic] .arrow:hover:not([disabled]) { background: linear-gradient(110deg, var(--k1), var(--k2)); border-color: transparent; color: #fff; }

/* fascia che scorre: un nastro d'inchiostro blu */
[data-magic] .ticker { background: var(--aqua-ink); color: #fff; border-color: transparent; }

/* "Hai un'idea?": una pozza d'acquerello notturno */
[data-magic] .feature.cta { color: #fff;
  background: radial-gradient(70% 60% at 15% 15%, color-mix(in srgb, var(--k2) 85%, transparent), transparent 70%), radial-gradient(60% 70% at 90% 90%, color-mix(in srgb, var(--k4) 85%, transparent), transparent 70%),
    radial-gradient(50% 50% at 80% 10%, color-mix(in srgb, var(--w1) 35%, transparent), transparent 70%), #1f2766; }
[data-magic] .feature.cta p { color: rgba(255,255,255,0.82); }
[data-magic] .feature.cta .tag { color: rgba(255,255,255,0.62); }
[data-magic] .feature.cta .btn { background: #fff; color: #141a33; }

/* numeri del percorso: contorno colorato, uno per passo */
[data-magic] .step .n { -webkit-text-stroke-color: var(--k2); }
[data-magic] .step:nth-child(1) .n { -webkit-text-stroke-color: var(--k1); }
[data-magic] .step:nth-child(3) .n { -webkit-text-stroke-color: var(--k4); }

/* foto dei progetti e anteprime dei prodotti: a colori */
[data-magic] .work img { filter: saturate(0.9); }
[data-magic] .product .shot img { filter: saturate(0.9); opacity: 0.95; }

/* team: ogni ritratto ha il suo inchiostro; la velatura sale dal basso come acqua colorata
   e si ferma sotto le spalle, così il viso resta pulito sulla carta */
[data-magic] .member { --tint: var(--t1); --tink: var(--tk1); }
[data-magic] .member:nth-child(2) { --tint: var(--t2); --tink: var(--tk2); }
[data-magic] .member:nth-child(3) { --tint: var(--t3); --tink: var(--tk3); }
[data-magic] .member:nth-child(4) { --tint: var(--t4); --tink: var(--tk4); }
[data-magic] .member .sketch { color: var(--tink);
  background: linear-gradient(to top, color-mix(in srgb, var(--tint) 95%, transparent) 0, color-mix(in srgb, var(--tint) 55%, transparent) 14%, transparent 34%); }
[data-magic] .member h3, [data-magic] .member .tag { color: var(--tink); }

/* il cosmo 3D: livelli acquerellati su carta; alla fine, una notte d'inchiostro */
/* fondo proprio, fermo e coprente: la scena si ridisegna a ogni frame e così non deve ricomporsi con le macchie in movimento */
[data-magic] #anatomy .sticky { background: radial-gradient(45% 55% at 12% 30%, color-mix(in srgb, var(--w1) 80%, transparent), transparent 70%), radial-gradient(40% 50% at 88% 25%, color-mix(in srgb, var(--w2) 75%, transparent), transparent 70%),
  radial-gradient(45% 50% at 75% 90%, color-mix(in srgb, var(--w3) 80%, transparent), transparent 70%), radial-gradient(40% 45% at 25% 95%, color-mix(in srgb, var(--w4) 80%, transparent), transparent 70%), #f2f5f6; }
[data-magic] #anatomy.dark .sticky { background: radial-gradient(60% 60% at 20% 20%, color-mix(in srgb, var(--k2) 60%, transparent), transparent 70%), radial-gradient(60% 60% at 85% 80%, color-mix(in srgb, var(--k4) 60%, transparent), transparent 70%), #121836; }

/* footer: cielo notturno ad acquerello, la scritta grande in azzurri */
[data-magic] footer { background: radial-gradient(60% 80% at 8% 0%, color-mix(in srgb, var(--k2) 65%, transparent), transparent 70%), radial-gradient(50% 70% at 92% 15%, color-mix(in srgb, var(--k4) 60%, transparent), transparent 70%),
  radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--k5) 45%, transparent), transparent 70%), #10162e; }
[data-magic] .foot-big { background: var(--aqua-wash); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
[data-magic] .foot-big .light { opacity: 1; }

/* brand kit: i campioni restano neutri */
[data-magic] .bk-tile:not(.dark), [data-magic] .bk-dont figure > div { --ink: #000; --ink-dim: #555; --rule: rgba(0,0,0,0.9); --hairline: rgba(0,0,0,0.14); }

@media (prefers-reduced-motion: reduce) {
  [data-magic] .hero h1 { animation: none; }
}

/* la bacchetta accesa prende il colore dell'inchiostro */
[data-magic] .magic-toggle { color: var(--k2); }

/* ---------- suggerimento bacchetta (prima visita) ---------- */
.nav-tools { position: relative; }
.magic-hint { position: absolute; z-index: 70; top: calc(100% + 0.9rem); inset-inline-end: 4.55rem; width: max-content; max-width: min(17rem, calc(100vw - 2 * var(--gutter)));
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.8rem 0.8rem 1rem;
  background: var(--ink); color: var(--on-ink); border-radius: 6px; box-shadow: 0 14px 36px -14px rgba(0,0,0,0.45);
  font-family: var(--sans); font-weight: 300; font-size: 0.92rem; line-height: 1.4; letter-spacing: 0; text-transform: none;
  animation: hint-in 0.45s cubic-bezier(.2, .8, .2, 1) both; }
/* la punta del fumetto, sotto la bacchetta */
.magic-hint::before { content: ""; position: absolute; top: -5px; inset-inline-end: 0.85rem; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.magic-hint button { flex: none; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer; font: inherit; font-size: 0.8rem; padding: 0.1rem 0.15rem; line-height: 1; }
.magic-hint button:hover { opacity: 1; }
.magic-hint.out { animation: hint-out 0.25s ease both; }
@keyframes hint-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes hint-out { to { opacity: 0; transform: translateY(-4px); } }
/* la bacchetta "respira" due volte per farsi notare */
.magic-toggle.hint svg { animation: wand-breathe 1.6s ease-in-out 2; }
.magic-toggle.hint .spark { opacity: 1; animation: spark 1.4s ease-in-out infinite; }
.magic-toggle.hint .s2 { animation-delay: 0.45s; }
.magic-toggle.hint .s3 { animation-delay: 0.9s; }
@keyframes wand-breathe { 50% { transform: rotate(-14deg) scale(1.22); } }
/* su mobile: pallino sul pulsante del menu */
.menu-toggle { position: relative; }
.menu-toggle.hint::after { content: ""; position: absolute; top: 0.45rem; inset-inline-end: 0.35rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--ground); animation: hint-dot 1.6s ease-in-out infinite; }
@keyframes hint-dot { 50% { transform: scale(1.35); } }
@media (max-width: 980px) {
  .magic-hint { inset-inline-end: auto; inset-inline-start: 0; top: calc(100% + 0.7rem); }
  .magic-hint::before { inset-inline-end: auto; inset-inline-start: 0.85rem; }
}
[data-magic] .magic-hint { background: linear-gradient(110deg, var(--k1), var(--k2)); }
@media (prefers-reduced-motion: reduce) {
  .magic-hint, .magic-hint.out { animation: none; }
  .magic-toggle.hint svg, .magic-toggle.hint .spark, .menu-toggle.hint::after { animation: none; }
}

/* ---------- area clienti (login verso Gestio) ---------- */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 6vw, 6rem); align-items: center;
  min-height: calc(100svh - var(--navh) - 4rem); padding-block: clamp(2.5rem, 6vw, 5rem); }
.login-secure { margin-top: 1.75rem; max-width: 40ch; line-height: 1.6; }
.login-card { border: 1px solid var(--rule); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.25rem; }
.login-card h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.login-card .fields { gap: 1.1rem; }
.login-card input { width: 100%; }
.login-pass { position: relative; display: block; }
.login-pass input { padding-inline-end: 6rem; }
.login-show { position: absolute; inset-block: 0; inset-inline-end: 0; padding: 0 0.9rem; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.login-show:hover { color: var(--ink); }
.login-submit { align-self: stretch; text-align: center; padding-block: 0.95rem; }
.login-error { margin: 0; padding: 0.75rem 0.9rem; border: 1px solid currentColor; border-radius: 4px; color: #b42318; background: color-mix(in srgb, #b42318 7%, transparent); font-size: 0.95rem; line-height: 1.45; }
.login-help { margin: 0; font-weight: 300; font-size: 0.92rem; color: var(--ink-dim); }
.login-help a { color: var(--ink); font-weight: 400; }
[data-theme="dark"] .login-error { color: #ff8a80; }
[data-magic] .login-card { background: rgba(255,255,255,0.72); }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; min-height: 0; align-items: start; }
}