/* ========================================
   DUE BYTES - Foglio di stile
   ========================================

   Design system "Due stati":
   - Palette: carta (porcellana calda) + inchiostro + arancio internazionale
   - Tipografia: Bricolage Grotesque (display), Instrument Sans (testo),
     JetBrains Mono (dati, etichette, bit)
   - Firma: bit-strip 01000100 01000010 (le iniziali D e B = due byte)
   - Le bande scure ridefiniscono le variabili di contesto (--fg, --line, ...)
     così i componenti si adattano da soli al contesto chiaro/scuro.

   @author Due Bytes
   @version 2.0
======================================== */

/* ----------------------------------------
   TOKEN DI DESIGN
---------------------------------------- */
:root {
    /* Colori base */
    --carta: #f7f6f2;        /* fondo principale, porcellana calda */
    --carta-tint: #efede5;   /* banda chiara alternativa */
    --bianco: #fffefb;       /* superficie card */
    --inchiostro: #191a17;   /* testo principale */
    --inchiostro-2: #5b5d56; /* testo secondario su chiaro */
    --linea: #dcdacf;        /* filetti su chiaro */
    --accento: #ff4d00;      /* arancio internazionale */
    --accento-scuro: #e04400;

    /* Banda scura */
    --notte: #171814;        /* fondo bande scure */
    --notte-2: #101110;      /* footer */
    --latte: #f2f1ea;        /* testo su scuro */
    --latte-2: #a3a49a;      /* testo secondario su scuro */
    --linea-notte: #33342e;  /* filetti su scuro */

    /* Variabili di contesto (default: banda chiara) */
    --bg: var(--carta);
    --fg: var(--inchiostro);
    --fg-2: var(--inchiostro-2);
    --line: var(--linea);

    /* Tipografia */
    --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
    --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-h: 68px;
}

/* ----------------------------------------
   RESET E BASE
---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* Ancore gestite in modo nativo: offset per l'header fisso + scroll fluido */
    scroll-padding-top: calc(var(--header-h) + 12px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

p { margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

::selection { background: var(--accento); color: var(--carta); }

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

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Link "salta al contenuto" per tastiera/screen reader */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--inchiostro);
    color: var(--carta);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------
   COMPONENTI CONDIVISI
---------------------------------------- */

/* Occhiello mono con indirizzo binario */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-2);
    margin: 0 0 1.1rem;
}
.eyebrow .addr {
    color: var(--accento);
    font-weight: 700;
    margin-right: 0.9rem;
}

/* Bottoni */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent {
    background: var(--accento);
    color: var(--inchiostro);
}
.btn-accent:hover { background: var(--accento-scuro); color: var(--carta); }

.btn-ink {
    background: var(--inchiostro);
    color: var(--carta);
}
.btn-ink:hover { background: var(--accento); color: var(--inchiostro); }

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

/* Link con freccia */
.link-arrow {
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.9rem;
}
.link-arrow::after {
    content: "\2192";
    font-family: var(--font-mono);
    transition: transform 0.25s ease;
}
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Elenchi con spunta */
.checks li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--fg-2);
}
.checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accento);
    font-weight: 700;
}

/* ----------------------------------------
   HEADER / NAVIGAZIONE
---------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--carta) 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.site-header.scrolled {
    border-bottom-color: var(--linea);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand-logo {
    height: 24px;
    width: auto;
    /* Logo sempre nero su fondo carta (il PNG di partenza è blu) */
    filter: brightness(0);
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--inchiostro-2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-link:hover { color: var(--inchiostro); }
.nav-link.active {
    color: var(--inchiostro);
    text-decoration: underline;
    text-decoration-color: var(--accento);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.nav-cta {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
}

/* Hamburger (visibile solo su schermi stretti) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--inchiostro);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
body.nav-open .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ----------------------------------------
   HERO
---------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* Campo di bit animato (canvas, disegnato da main.js) */
.bit-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem));
    padding-bottom: clamp(3rem, 7vh, 5rem);
    margin-block: auto;
}

.hero-title {
    font-size: clamp(2.9rem, 7.4vw, 6.2rem);
    font-weight: 750;
    letter-spacing: -0.028em;
    line-height: 1.02;
    margin: 0 0 1.8rem;
}
/* Ogni riga è una maschera: il testo emerge dal basso.
   Il padding extra evita che overflow:hidden tagli le discendenti. */
.hero-line {
    display: block;
    overflow: hidden;
    padding-block: 0.1em;
    margin-block: -0.1em;
}
.hero-line-inner {
    display: block;
    transform: translateY(115%);
    animation: line-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-line:nth-child(1) .hero-line-inner { animation-delay: 0.1s; }
.hero-line:nth-child(2) .hero-line-inner { animation-delay: 0.24s; }
@keyframes line-rise {
    to { transform: none; }
}
.hero-accent {
    font-style: normal;
    color: var(--accento);
}

.hero-sub {
    max-width: 44rem;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--inchiostro-2);
    margin-bottom: 2.2rem;
}

.hero-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-bottom: clamp(3rem, 7vh, 4.5rem);
}

/* Animazione di ingresso della hero */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
.hero-eyebrow,
.hero-sub,
.hero-cta {
    animation: rise-in 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero-sub { animation-delay: 0.45s; }
.hero-cta { animation-delay: 0.55s; }

/* ----------------------------------------
   MARQUEE DOMINI CLIENTI
---------------------------------------- */
.marquee {
    position: relative;
    z-index: 1;
    background: var(--carta);
    border-top: 1px solid var(--linea);
    overflow: hidden;
    padding-block: 1rem;
}
.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
    width: max-content;
    animation: marquee 70s linear infinite;
}
.marquee-item {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--inchiostro-2);
}
.marquee-sep { color: var(--accento); font-size: 0.6rem; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ----------------------------------------
   SEZIONI: STRUTTURA COMUNE
---------------------------------------- */
.section {
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
    background: var(--bg);
    color: var(--fg);
}

/* Banda chiara alternativa */
.band-tint {
    --bg: var(--carta-tint);
}

/* Banda scura: ridefinisce le variabili di contesto */
.band-dark {
    --bg: var(--notte);
    --fg: var(--latte);
    --fg-2: var(--latte-2);
    --line: var(--linea-notte);
}

.sec-head {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-title {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.4rem;
}
.sec-head .sec-title:last-child { margin-bottom: 0; }
.sec-desc {
    max-width: 46rem;
}
.sec-desc p {
    color: var(--fg-2);
    font-size: 1.02rem;
}

.lead {
    font-size: 1.15rem;
    font-weight: 500;
}

/* Reveal on scroll (gestito da main.js via IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}
/* Leggero sfalsamento nelle griglie */
.tri-grid .reveal:nth-child(2),
.steps .reveal:nth-child(2) { transition-delay: 0.1s; }
.tri-grid .reveal:nth-child(3),
.steps .reveal:nth-child(3) { transition-delay: 0.2s; }
.steps .reveal:nth-child(4) { transition-delay: 0.3s; }

/* ----------------------------------------
   SERVIZI: INDICE A RIGHE
---------------------------------------- */
.svc-row {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 2rem 3rem;
    padding-block: 2.6rem;
    border-top: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }

.svc-head {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}
.svc-bit {
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--fg-2);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.svc-bit::before { content: "0"; }
.svc-row:hover .svc-bit {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--inchiostro);
}
.svc-row:hover .svc-bit::before { content: "1"; }

.svc-row h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.svc-body p {
    color: var(--fg-2);
    max-width: 40rem;
}

.svc-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin: 1.4rem 0 1.2rem;
}
.svc-checks li {
    position: relative;
    padding-left: 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-2);
}
.svc-checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accento);
    font-weight: 700;
}

.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.svc-tags li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg-2);
    white-space: nowrap;
}

/* ----------------------------------------
   GRIGLIE A TRE COLONNE (Formazione, Perché noi)
---------------------------------------- */
.tri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.tri-item {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
}
.tri-item h3 {
    font-size: 1.35rem;
    font-weight: 650;
    margin-bottom: 0.85rem;
}
.tri-item p {
    color: var(--fg-2);
    font-size: 0.98rem;
}
.tri-item .checks { margin-top: 1.1rem; }

/* ----------------------------------------
   PER CHI
---------------------------------------- */
.perchi-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}
.perchi-text .sec-title { margin-bottom: 1.2rem; }
.perchi-text p { color: var(--fg-2); }
.perchi-text .lead { color: var(--fg); }
.benefits { margin-top: 1.6rem; }

.target-list li {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    padding-block: 1.15rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    transition: transform 0.3s ease;
}
.target-list li:last-child { border-bottom: 1px solid var(--line); }
.target-list li::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: var(--accento);
    border-radius: 2px;
}
.target-list li:hover { transform: translateX(8px); }

/* ----------------------------------------
   METODO: TIMELINE SCROLL-DRIVEN
   La linea centrale si riempie con --steps-progress
   (impostata da main.js in base allo scroll); sul tratto
   percorso scorre un flusso di "dati" animato.
---------------------------------------- */
.steps-wrap {
    --steps-progress: 0;
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    padding-block: 0.5rem;
}

.steps-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--line);
    border-radius: 2px;
}
.steps-line-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--steps-progress) * 100%);
    background: var(--accento);
    overflow: hidden;
}
.steps-line-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg,
        rgba(255, 255, 255, 0.85) 0 5px,
        transparent 5px 14px);
    animation: data-flow 1.1s linear infinite;
}
@keyframes data-flow {
    from { background-position: 0 0; }
    to   { background-position: 0 14px; }
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.step {
    display: grid;
    grid-template-columns: 1fr 92px 1fr;
    align-items: center;
}

.step-node {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--fg-2);
    position: relative;
    z-index: 1;
    transition: background-color 0.4s ease, border-color 0.4s ease,
                color 0.4s ease, box-shadow 0.4s ease;
}

.step-card {
    grid-row: 1;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 1.6rem 1.7rem;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.step:nth-child(odd) .step-card {
    grid-column: 1;
    transform: translate(-30px, 16px);
}
.step:nth-child(even) .step-card {
    grid-column: 3;
    transform: translate(30px, 16px);
}

.step.active .step-card {
    opacity: 1;
    transform: none;
}
.step.active .step-node {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--inchiostro);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accento) 16%, transparent);
}

.step-card h3 {
    font-size: 1.3rem;
    font-weight: 650;
    margin-bottom: 0.7rem;
}
.step-card p {
    color: var(--fg-2);
    font-size: 0.98rem;
    margin: 0;
}

/* ----------------------------------------
   PORTFOLIO: NUVOLA DI CARD FLOTTANTI
   Le card sono sparse (rotazioni e sfalsamenti con pattern
   deterministico su nth-child), "galleggiano" con un moto
   continuo e derivano in parallasse durante lo scroll
   (variabile --par impostata da main.js → initFloatingCards).
   Struttura: .float-wrap (parallasse) > .float-rot (rotazione,
   si raddrizza al hover) > .float-bob (moto continuo) > .work
---------------------------------------- */
.work-cloud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.8rem 2.2rem;
    padding-block: 1rem 3rem;
    /* Ogni card tiene la sua altezza naturale: le differenze
       contribuiscono al disordine voluto della nuvola */
    align-items: start;
}

.float-wrap {
    transform: translateY(var(--par, 0px));
    will-change: transform;
}
.float-wrap:hover {
    position: relative;
    z-index: 5;
}

.float-rot {
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
    height: 100%;
}
.float-wrap:hover .float-rot { transform: rotate(0deg); }

.float-bob {
    animation: bob var(--bob-dur, 6s) ease-in-out var(--bob-delay, 0s) infinite;
    height: 100%;
}
@keyframes bob {
    50% { transform: translateY(-9px); }
}

/* Pattern di "disordine": rotazioni e quote diverse per posizione */
.float-wrap:nth-child(6n+1) { --rot: -2.4deg; margin-top: 0.5rem; --bob-dur: 5.4s; }
.float-wrap:nth-child(6n+2) { --rot: 1.8deg;  margin-top: 3.5rem; --bob-dur: 7.1s; --bob-delay: -2.1s; }
.float-wrap:nth-child(6n+3) { --rot: -1.3deg; margin-top: 1.6rem; --bob-dur: 6.3s; --bob-delay: -4s; }
.float-wrap:nth-child(6n+4) { --rot: 2.6deg;  margin-top: 2.6rem; --bob-dur: 5.9s; --bob-delay: -1.2s; }
.float-wrap:nth-child(6n+5) { --rot: -2.9deg; margin-top: 0; --bob-dur: 6.8s; --bob-delay: -3.2s; }
.float-wrap:nth-child(6n+6) { --rot: 1.4deg;  margin-top: 4.2rem; --bob-dur: 5.6s; --bob-delay: -0.6s; }

/* Ombra morbida: le card devono sembrare sollevate dal foglio */
.work-cloud .work {
    box-shadow: 0 26px 48px -32px rgba(25, 26, 23, 0.4);
}
.work-cloud a.work:hover {
    box-shadow: 0 34px 60px -34px rgba(25, 26, 23, 0.5);
}

.work {
    display: flex;
    flex-direction: column;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
a.work:hover {
    transform: translateY(-5px);
    border-color: var(--inchiostro);
    box-shadow: 0 14px 30px -18px rgba(25, 26, 23, 0.35);
}

.work-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--linea);
}
.work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}
a.work:hover .work-media img { transform: scale(1.035); }

.work-body {
    padding: 1.35rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.work-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.work-idx {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accento);
}
.work-domain {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--inchiostro-2);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.work-domain::after {
    content: "\2197";
    color: var(--accento);
    font-size: 0.8rem;
}
.work h3 {
    font-size: 1.22rem;
    font-weight: 650;
}
.work p {
    font-size: 0.92rem;
    color: var(--inchiostro-2);
    margin: 0;
}

/* Progetto senza pagina pubblica: scheda scura "in sviluppo" */
.work-dev {
    background: var(--notte);
    border-color: var(--notte);
    color: var(--latte);
}
.work-dev .work-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accento);
    border: 1px solid var(--linea-notte);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
}
.work-dev p { color: var(--latte-2); }

.portfolio-empty {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--fg-2);
    padding-inline: var(--gutter);
}

/* ----------------------------------------
   CHI SIAMO
---------------------------------------- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat-item {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.stat-value {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--fg);
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
}

/* ----------------------------------------
   CONTATTI
---------------------------------------- */
.contact {
    position: relative;
    overflow: hidden;
}
.contact .container {
    position: relative;
    z-index: 1;
}
.contact-inner {
    max-width: 52rem;
}
.contact-title {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    margin-bottom: 1.6rem;
}
.contact-sub {
    color: var(--fg-2);
    font-size: 1.08rem;
    max-width: 42rem;
    margin-bottom: 2.4rem;
}
.contact-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.8rem;
}
.contact-mail {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--latte);
    text-decoration: underline;
    text-decoration-color: var(--linea-notte);
    text-underline-offset: 6px;
    transition: text-decoration-color 0.25s ease;
}
.contact-mail:hover { text-decoration-color: var(--accento); }

/* ----------------------------------------
   FOOTER
---------------------------------------- */
.footer {
    --bg: var(--notte-2);
    --fg: var(--latte);
    --fg-2: var(--latte-2);
    --line: var(--linea-notte);
    background: var(--bg);
    color: var(--fg-2);
    padding-block: 3rem 2rem;
    font-size: 0.9rem;
}


.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.footer-logo { height: 34px; width: auto; margin-bottom: 1rem; }
.footer-brand p { margin: 0; line-height: 1.6; }

.footer-data p { margin: 0 0 0.35rem; }
.footer-name { color: var(--latte); font-weight: 600; }
.footer-data a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--linea-notte);
}
.footer-data a:hover { color: var(--latte); text-decoration-color: var(--accento); }

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-self: end;
    text-align: right;
}
.footer-nav a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--latte); }

.footer-copy {
    margin: 2.5rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linea-notte);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* ----------------------------------------
   HUD DI NAVIGAZIONE BINARIO (solo desktop)
---------------------------------------- */
.section-hud {
    position: fixed;
    left: 1.1rem;
    bottom: 1.1rem;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: color-mix(in srgb, var(--carta) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inchiostro-2);
}
.hud-addr {
    color: var(--accento);
    font-weight: 700;
}
.section-hud.tick { animation: hud-tick 0.35s ease; }
@keyframes hud-tick {
    30% { transform: scale(1.08); }
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */

@media (max-width: 1024px) {
    /* Menu a pannello pieno */
    .nav-toggle { display: flex; }

    /* Nota: l'header ha un backdrop-filter, quindi diventa containing
       block dei discendenti fixed: servono dimensioni esplicite
       (top/left + width/height), non inset: 0 */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        z-index: -1;
        background: var(--carta);
        padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        overflow-y: auto;
    }
    body.nav-open .site-nav {
        opacity: 1;
        visibility: visible;
    }
    body.nav-open { overflow: hidden; }
    body.nav-open .site-header { background: var(--carta); }

    .site-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .nav-link {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 650;
        color: var(--inchiostro);
        padding-block: 0.35rem;
        text-decoration: none;
    }
    .nav-link.active { text-decoration: none; color: var(--accento); }
    .nav-cta-item { margin-top: 1.5rem; }
    .nav-cta { font-size: 1rem; padding: 0.9rem 1.7rem; }
}

@media (max-width: 1024px) {
    .section-hud { display: none; }
}

@media (max-width: 900px) {
    .svc-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .perchi-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr; }

    /* Nuvola: due colonne, disordine più contenuto */
    .work-cloud { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.6rem; }
    .float-wrap:nth-child(6n+2) { margin-top: 2.2rem; }
    .float-wrap:nth-child(6n+6) { margin-top: 2.6rem; }

    /* Timeline: linea a sinistra, card a destra */
    .steps-line {
        left: 23px;
        transform: none;
    }
    .step {
        grid-template-columns: 46px 1fr;
        gap: 1.1rem;
        align-items: start;
    }
    .step-node { grid-column: 1; }
    .step:nth-child(odd) .step-card,
    .step:nth-child(even) .step-card {
        grid-column: 2;
        transform: translateY(18px);
    }
    .step.active .step-card { transform: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-nav {
        justify-self: start;
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.2rem;
    }
}

@media (max-width: 640px) {
    .tri-grid { grid-template-columns: 1fr; }
    .hero-cta { gap: 1.2rem; }
    .step-card { padding: 1.25rem 1.3rem; }

    /* Campo di bit più tenue: su schermo stretto il testo
       occupa tutta la larghezza e serve più contrasto */
    .bit-field { opacity: 0.45; }

    /* Nuvola: colonna singola, rotazioni leggere */
    .work-cloud { grid-template-columns: 1fr; gap: 1.8rem; }
    .float-wrap:nth-child(6n+1) { --rot: -1.2deg; margin-top: 0; }
    .float-wrap:nth-child(6n+2) { --rot: 0.9deg;  margin-top: 0; }
    .float-wrap:nth-child(6n+3) { --rot: -0.8deg; margin-top: 0; }
    .float-wrap:nth-child(6n+4) { --rot: 1.2deg;  margin-top: 0; }
    .float-wrap:nth-child(6n+5) { --rot: -1.4deg; margin-top: 0; }
    .float-wrap:nth-child(6n+6) { --rot: 0.8deg;  margin-top: 0; }
}

/* ----------------------------------------
   APP: IPHONE CHE EMERGE DALLA CARD
   Lo "stage" taglia il telefono a metà: si vede solo la
   parte alta. L'isola dinamica usa unità cqw della schermata,
   così resta proporzionata a ogni larghezza.
---------------------------------------- */
.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}
.app-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.app-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.app-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.app-stage {
    position: relative;
    height: clamp(300px, 27vw, 370px);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklab, var(--fg) 4%, transparent);
}

.phone {
    position: absolute;
    top: 2.2rem;
    left: 50%;
    width: min(70%, 250px);
    padding: 9px;
    background: var(--notte-2);
    border: 1px solid color-mix(in oklab, var(--fg) 24%, transparent);
    border-radius: 44px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
    transform: translateX(-50%);
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.app-card:hover .phone { transform: translateX(-50%) translateY(-10px); }

.phone-screen {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1320 / 2868;
    background: var(--notte-2);
    border-radius: 35px;
    overflow: hidden;
}
.phone-screen::before {
    content: "";
    position: absolute;
    top: 2.6cqw;
    left: 50%;
    width: 28.5cqw;
    height: 8.4cqw;
    transform: translateX(-50%);
    background: var(--notte-2);
    border-radius: 999px;
}
.phone-screen img { width: 100%; height: auto; }

.app-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    padding: 1.5rem 1.5rem 1.6rem;
}
.app-id {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}
.app-icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
}
.app-id h3 {
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.app-kind {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--fg-2);
    margin: 0.25rem 0 0;
}
.app-body > p {
    color: var(--fg-2);
    font-size: 0.96rem;
    margin: 0;
}
.app-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.3rem;
    margin-top: auto;
    padding-top: 0.4rem;
}
.app-store { padding: 0.7rem 1.3rem; font-size: 0.9rem; }
.app-store::after {
    content: "\2197";
    color: var(--accento);
}
.app-links .link-arrow { padding-block: 0.7rem; font-size: 0.9rem; }
.app-soon {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-2);
}

/* Tablet: una card per riga, telefono a sinistra e testo a destra */
@media (max-width: 1024px) {
    .app-grid { grid-template-columns: 1fr; }
    .app-card { flex-direction: row; }
    .app-stage {
        flex: 0 0 40%;
        height: auto;
        min-height: 340px;
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }
    .phone { width: min(72%, 230px); }
}
@media (max-width: 700px) {
    .app-grid { max-width: 30rem; margin-inline: auto; }
    .app-card { flex-direction: column; }
    .app-stage {
        flex: none;
        height: 330px;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* ----------------------------------------
   BANNER CONSENSO COOKIE (GDPR)
---------------------------------------- */
.cookie-banner {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    padding: 1rem 1.5rem;
    background: var(--bg);
    color: var(--fg);
    border-top: 1px solid var(--line);
}
.cookie-banner.show { display: flex; }
.cookie-banner-text p {
    margin: 0;
    max-width: 640px;
    font-size: 0.9rem;
    color: var(--fg-2);
}
.cookie-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
}
@media (max-width: 576px) {
    .cookie-banner { justify-content: flex-start; text-align: left; }
}

/* ----------------------------------------
   RIDUZIONE DEL MOVIMENTO
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .marquee-track { animation: none; }
    .bit-field { display: none; }
    .steps-wrap { --steps-progress: 1; }
    .steps-line-progress::after { animation: none; }
    .step .step-card { opacity: 1; transform: none; }
    .float-bob { animation: none; }
    .float-wrap { transform: none; }
}