/* ═══════════════════════════════════════
   sections.css — About, Services,
   Process, Manifesto, Contact
   Not Visual
═══════════════════════════════════════ */

/* ══════════════════════════════
   ABOUT — Values list
══════════════════════════════ */
:root{
    --nv-black: #050706;
    --nv-panel: #0a0d0c;
    --nv-titlebar: #0f1312;
    --nv-line: rgba(255,255,255,.08);
    --nv-line-strong: rgba(255,255,255,.16);
    --nv-text: rgba(255,255,255,.92);
    --nv-text-dim: rgba(255,255,255,.46);
    --nv-comment: rgba(255,255,255,.34);
    --nv-green: #00ff00;
    --nv-green-soft: rgba(0,255,0,.10);
    --nv-green-dim: rgba(0,255,0,.45);
    --nv-key: #7dd3fc;
    --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
 
  /* ---------------------------------------------------------------
     Tutto ciò che prima era globale (*, body, .row, .col-*, ecc.)
     ora è scoperto sotto #about: non tocca più il resto della pagina,
     quindi non può più interferire con la griglia del portfolio.
     --------------------------------------------------------------- */
  #about, #about *{ box-sizing:border-box; }
  #about :focus-visible{ outline:2px solid var(--nv-green); outline-offset:3px; border-radius:2px; }
 
  #about .container-fluid{ width:100%; max-width:1600px; margin:0 auto; }
  #about .px-4{ padding-left:1.5rem; padding-right:1.5rem; }
  @media (min-width:992px){ #about .px-lg-5{ padding-left:3rem; padding-right:3rem; } }
 
  /* minimal grid fallback, ora attivo SOLO dentro #about */
  #about .row{ display:flex; flex-wrap:wrap; }
  #about .row.g-5{ gap:3rem; }
  #about .col-12{ flex:0 0 100%; max-width:100%; }
  #about .list-unstyled{ list-style:none; margin:0; padding:0; }
  @media (min-width:992px){
    #about .col-lg-6{ flex:0 0 calc(50% - 1.5rem); max-width:calc(50% - 1.5rem); }
    #about .pt-lg-5{ padding-top:3rem; }
    #about .mt-lg-4{ margin-top:1.5rem; }
  }
  #about .align-items-start{ align-items:flex-start; }
 
  .ab-section{
    position:relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:var(--nv-black);
    color:var(--nv-text);
    font-family:var(--font-display);
  }
 
  .ab-terminal-line{
    display:flex; align-items:center; gap:.55rem;
    font-family:var(--font-mono);
    font-size:.8rem;
    color: var(--nv-text-dim);
    margin:0 0 1.5rem;
  }
  .ab-prompt{ color:var(--nv-green); font-weight:600; }
  .ab-cmd{ color:var(--nv-text); }
  .ab-path{ color:var(--nv-key); }
  .ab-caret{
    display:inline-block;
    width:7px; height:1em;
    background:var(--nv-green);
    margin-left:.1rem;
    animation: nv-blink 1.05s steps(1) infinite;
    vertical-align:text-bottom;
  }
 
  .ab-section-title{
    font-size:clamp(2rem, 3.6vw, 3.1rem);
    font-weight:800;
    line-height:1.14;
    letter-spacing:-.015em;
    margin:0 0 1.6rem;
  }
  .ab-green{ color:var(--nv-green); }
 
  .ab-body-text{
    color:var(--nv-text-dim);
    font-size:1.02rem;
    line-height:1.75;
    max-width:46ch;
    margin:0 0 1.1rem;
  }
 
  .ab-section-label{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--nv-text-dim);
    margin:0 0 1.1rem;
    min-height:1em;
  }
  .ab-section-label::before{
    content:""; width:18px; height:1px; background:var(--nv-green);
  }
 
  /* =========================================================
     STATUS PANEL  — signature element for this section
     ========================================================= */
  .ab-status-panel{
    border:1px solid var(--nv-line-strong);
    border-radius:10px;
    background:var(--nv-panel);
    overflow:hidden;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  }
  .ab-panel-header{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.85rem 1.1rem;
    background:var(--nv-titlebar);
    border-bottom:1px solid var(--nv-line);
    font-family:var(--font-mono);
    font-size:.72rem;
  }
  .ab-panel-status{ display:flex; align-items:center; gap:.5rem; color:var(--nv-green); }
  .ab-pulse-dot{
    width:7px; height:7px; border-radius:50%; background:var(--nv-green);
    box-shadow:0 0 0 0 rgba(0,255,0,.6);
    animation: nv-pulse 1.8s ease-out infinite;
  }
  .ab-panel-service{ color:var(--nv-text-dim); }
 
  .ab-value-rows{ }
  .ab-value-row{ border-bottom:1px solid var(--nv-line); }
  .ab-value-row:last-child{ border-bottom:none; }
 
  .ab-value-toggle{
    all:unset;
    box-sizing:border-box;
    display:flex; align-items:center; gap:1rem;
    width:100%;
    padding:1.05rem 1.1rem;
    cursor:pointer;
    font-family:var(--font-mono);
  }
  .ab-value-toggle:hover{ background:rgba(255,255,255,.03); }
  .ab-value-num{
    font-size:.72rem; color:var(--nv-comment); min-width:1.6em;
    transition:color .2s ease;
  }
  .ab-value-name{
    flex:1;
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.02rem;
    color:var(--nv-text);
    text-align:left;
  }
  .ab-value-chevron{
    font-size:.9rem;
    color:var(--nv-text-dim);
    transition:transform .3s ease, color .2s ease;
    line-height:1;
  }
  .ab-value-toggle[aria-expanded="true"] .ab-value-chevron{ transform:rotate(45deg); color:var(--nv-green); }
  .ab-value-toggle[aria-expanded="true"] .ab-value-num{ color:var(--nv-green); }
 
  .ab-value-desc{
    display:grid;
    grid-template-rows: 0fr;
    opacity:0;
    transition: grid-template-rows .32s ease, opacity .32s ease;
  }
  .ab-value-desc.is-open{ grid-template-rows:1fr; opacity:1; }
  .ab-value-desc > div{ overflow:hidden; }
  .ab-value-desc p{
    margin:0;
    padding:0 1.1rem 1.15rem 2.6rem;
    color:var(--nv-text-dim);
    font-size:.92rem;
    line-height:1.6;
    max-width:44ch;
  }
 
  /* ---------------------------------------------------------------
     Blocco valori alternativo (nv-values-list) — unificato qui,
     scoperto sotto #about e con variabili locali (fallback a
     --nv-line-strong / --nv-green già definite sopra), così non
     dipende né tocca variabili o classi esterne al blocco.
     --------------------------------------------------------------- */
  #about .nv-values-list {
    --values-border: var(--nv-line-strong, #232326);
    --values-green: var(--nv-green, #00ff00);
    border-top: 1px solid var(--values-border);
  }
  #about .nv-values-list .nv-value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--values-border);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: default;
    transition: color 0.3s ease-in-out, padding-left 0.3s ease-in-out;
  }
  #about .nv-values-list .nv-value-item:hover {
    color: var(--values-green);
    padding-left: 8px;
    transition: color 0.3s ease-out, padding-left 0.3s ease-out;
  }
  #about .nv-values-list .nv-val-num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--values-green);
    opacity: 0.7;
  }
 
  @keyframes nv-pulse{
    0%{ box-shadow:0 0 0 0 rgba(0,255,0,.55); }
    70%{ box-shadow:0 0 0 7px rgba(0,255,0,0); }
    100%{ box-shadow:0 0 0 0 rgba(0,255,0,0); }
  }
  @keyframes nv-blink{ 50%{ opacity:0; } }
 
  .ab-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .ab-reveal.is-visible{ opacity:1; transform:translateY(0); }
  .ab-reveal-d1.is-visible{ transition-delay:.08s; }
  .ab-reveal-d2.is-visible{ transition-delay:.16s; }
  .ab-reveal-d3.is-visible{ transition-delay:.24s; }
  .ab-reveal-d4.is-visible{ transition-delay:.32s; }
  .ab-reveal-d5.is-visible{ transition-delay:.4s; }
 
  @media (prefers-reduced-motion: reduce){
    .ab-caret{ animation:none; opacity:1; }
    .ab-pulse-dot{ animation:none; box-shadow:none; }
    .ab-reveal{ transition:none; opacity:1; transform:none; }
  }
/* ══════════════════════════════
   SERVICES — Cards grid
══════════════════════════════ */
:root{
    --nv-black: #050706;
    --nv-panel: #0a0d0c;
    --nv-titlebar: #0f1312;
    --nv-tabs-bg: #0c0f0e;
    --nv-line: rgba(255,255,255,.08);
    --nv-line-strong: rgba(255,255,255,.16);
    --nv-text: rgba(255,255,255,.92);
    --nv-text-dim: rgba(255,255,255,.46);
    --nv-comment: rgba(255,255,255,.34);
    --nv-green: #00ff00;
    --nv-green-soft: rgba(0,255,0,.10);
    --nv-green-dim: rgba(0,255,0,.45);
    --nv-key: #00ff00;
    --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--nv-black);color:var(--nv-text);font-family:var(--font-display);}
  .container-fluid{width:100%;max-width:1600px;margin:0 auto;}
  .px-4{padding-left:1.5rem;padding-right:1.5rem;}
  @media (min-width:992px){ .px-lg-5{padding-left:3rem;padding-right:3rem;} }
  :focus-visible{ outline:2px solid var(--nv-green); outline-offset:3px; border-radius:2px; }
 
  /* =========================================================
     SERVICES
     ========================================================= */
  .nv-services{
    position:relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:var(--nv-black);
  }
 
  /* ---- terminal prompt eyebrow ---- */
  .nv-terminal-line{
    display:flex; align-items:center; gap:.55rem;
    font-family:var(--font-mono);
    font-size:.8rem;
    color: var(--nv-text-dim);
    margin:0 0 1.75rem;
  }
  .nv-prompt{ color:var(--nv-green); font-weight:600; }
  .nv-cmd{ color:var(--nv-text); }
  .nv-path{ color:var(--nv-key); }
  .nv-caret{
    display:inline-block;
    width:7px; height:1em;
    background:var(--nv-green);
    margin-left:.1rem;
    animation: nv-blink 1.05s steps(1) infinite;
    vertical-align:text-bottom;
  }
 
  .nv-head-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:2.5rem;
    flex-wrap:wrap;
    padding-bottom: 2.75rem;
    border-bottom:1px solid var(--nv-line);
    margin-bottom: 3rem;
  }
  .nv-section-title{
    font-size:clamp(2.6rem, 5.4vw, 4.6rem);
    font-weight:800;
    line-height:.96;
    letter-spacing:-.02em;
    margin:0;
  }
  .nv-head-meta{
    max-width:380px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .nv-file-count{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--nv-text-dim);
    letter-spacing:.06em;
    border:1px solid var(--nv-line-strong);
    border-radius:3px;
    padding:.3rem .55rem;
  }
  .nv-file-count b{ color:var(--nv-green); font-weight:600; }
  .nv-services-sub{
    margin:0;
    color:var(--nv-text-dim);
    font-size:1rem;
    line-height:1.6;
    text-align:left;
  }
 
  /* =========================================================
     EDITOR MOCKUP
     ========================================================= */
  .nv-editor{
    max-width:1180px;
    border:1px solid var(--nv-line-strong);
    border-radius:10px;
    background:var(--nv-panel);
    overflow:hidden;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  }
 
  .nv-editor-titlebar{
    display:flex; align-items:center; gap:1rem;
    padding:.7rem 1rem;
    background:var(--nv-titlebar);
    border-bottom:1px solid var(--nv-line);
  }
  .nv-dots{ display:flex; gap:.4rem; flex:0 0 auto; }
  .nv-dots span{
    width:9px; height:9px; border-radius:50%;
    background: rgba(255,255,255,.14);
  }
  .nv-breadcrumb{
    flex:1;
    font-family:var(--font-mono);
    font-size:.74rem;
    color:var(--nv-text-dim);
    letter-spacing:.02em;
    text-align:center;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .nv-breadcrumb .sep{ margin:0 .35rem; color:var(--nv-line-strong); }
  .nv-breadcrumb #nvActiveFile{ color:var(--nv-text); }
  .nv-git{
    flex:0 0 auto;
    display:flex; align-items:center; gap:.35rem;
    font-family:var(--font-mono);
    font-size:.7rem;
    color:var(--nv-text-dim);
  }
  .nv-git svg{ width:12px; height:12px; stroke:var(--nv-green); }
 
  .nv-editor-body{
    display:flex;
    min-height:420px;
  }
 
  /* ---- tabs (sidebar on desktop, horizontal strip on mobile) ---- */
  .nv-tabs{
    flex:0 0 240px;
    background:var(--nv-tabs-bg);
    border-right:1px solid var(--nv-line);
    padding:.5rem;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .nv-tab{
    all:unset;
    cursor:pointer;
    display:flex; align-items:center; gap:.7rem;
    padding:.65rem .7rem;
    border-radius:5px;
    border-left:2px solid transparent;
    font-family:var(--font-mono);
    color:var(--nv-text-dim);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .nv-tab:hover{ background:rgba(255,255,255,.035); color:var(--nv-text); }
  .nv-tab.is-active{
    background:var(--nv-green-soft);
    border-left-color:var(--nv-green);
    color:var(--nv-text);
  }
  .nv-tab-num{
    font-size:.68rem;
    color:var(--nv-comment);
    min-width:1.4em;
  }
  .nv-tab.is-active .nv-tab-num{ color:var(--nv-green); }
  .nv-tab-name{ font-size:.8rem; }
  .nv-tab-dot{
    margin-left:auto;
    width:5px; height:5px; border-radius:50%;
    background: var(--nv-green);
    opacity:0;
    transition:opacity .2s ease;
  }
  .nv-tab.is-active .nv-tab-dot{ opacity:1; }
 
  /* ---- code pane ---- */
  .nv-pane{
    flex:1;
    padding: 1.6rem 1.7rem;
    overflow:auto;
    font-family:var(--font-mono);
    font-size:.86rem;
    line-height:1.85;
  }
  .nv-line{
    display:flex;
    align-items:flex-start;
    gap:1.1rem;
    opacity:0;
    transform:translateY(4px);
    transition: opacity .32s ease, transform .32s ease;
  }
  .nv-line.in{ opacity:1; transform:translateY(0); }
  .nv-line-num{
    flex:0 0 1.4em;
    text-align:right;
    color: rgba(255,255,255,.2);
    user-select:none;
  }
  .nv-line-content{ white-space:pre-wrap; word-break:break-word; }
 
  .tok-comment{ color:var(--nv-comment); font-style:italic; }
  .tok-kw{ color:var(--nv-text); }
  .tok-punc{ color:rgba(255,255,255,.4); }
  .tok-key{ color:var(--nv-key); }
  .tok-str{ color:var(--nv-green); }
 
  .nv-endcaret{
    display:inline-block;
    width:7px; height:1.1em;
    background:var(--nv-green);
    vertical-align:text-bottom;
    animation: nv-blink 1.05s steps(1) infinite;
  }
 
  /* ---- status bar ---- */
  .nv-statusbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:.5rem 1rem;
    background:var(--nv-titlebar);
    border-top:1px solid var(--nv-line);
    font-family:var(--font-mono);
    font-size:.68rem;
    color:var(--nv-text-dim);
  }
  .nv-status-left, .nv-status-right{ display:flex; align-items:center; gap:1.1rem; }
  .nv-status-clean{ color:var(--nv-green); }
 
  @keyframes nv-blink{ 50%{ opacity:0; } }
 
  /* reveal-on-scroll stub */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
 
  /* ---- responsive ---- */
  @media (max-width: 860px){
    .nv-editor-body{ flex-direction:column; }
    .nv-tabs{
      flex-direction:row;
      overflow-x:auto;
      border-right:none;
      border-bottom:1px solid var(--nv-line);
      flex:0 0 auto;
    }
    .nv-tab{ flex:0 0 auto; border-left:none; border-bottom:2px solid transparent; }
    .nv-tab.is-active{ border-bottom-color:var(--nv-green); }
    .nv-tab-dot{ display:none; }
    .nv-breadcrumb{ display:none; }
  }
  @media (max-width: 480px){
    .nv-pane{ padding:1.2rem 1rem; font-size:.78rem; }
    .nv-tab-name{ font-size:.72rem; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .nv-caret, .nv-endcaret{ animation:none; opacity:1; }
    .nv-line{ transition:none; opacity:1; transform:none; }
    .reveal{ transition:none; opacity:1; transform:none; }
  }

/* Green underline slide-in */
.nv-service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--nv-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--nv-ease);
}
.nv-service-card:hover::after { transform: scaleX(1); }
.nv-service-card:hover {
  background: #0d0d0d;
  border-color: var(--nv-border-hover);
}

.nv-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  white-space: nowrap;
  transition: color var(--nv-ease-std), border-color var(--nv-ease-std);
}
.nv-service-card:hover .nv-tag {
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.2);
}

/* ══════════════════════════════
   PORTFOLIO — Project cards
══════════════════════════════ */
.nv-portfolio-card {
  display: block;
  text-decoration: none;
  color: var(--nv-white);
  background: var(--nv-gray-1);
  border: 1px solid var(--nv-border);
  overflow: hidden;
  transition: border-color var(--nv-ease-std);
}
.nv-portfolio-card:hover {
  border-color: var(--nv-border-hover);
  color: var(--nv-white);
}

.nv-portfolio-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--nv-gray-2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.nv-portfolio-media::before {
  /* Placeholder texture — remove once a real image is set above */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -20px 0/40px 40px;
}

.nv-portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity var(--nv-ease-std);
}
.nv-portfolio-card:hover .nv-portfolio-overlay {
  opacity: 1;
}
.nv-portfolio-view {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nv-green);
}
.nv-portfolio-card:hover .nv-portfolio-view .nv-arrow {
  transform: translateX(4px);
}

.nv-portfolio-info {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nv-portfolio-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

@media (max-width: 575px) {
  .nv-portfolio-info { padding: 20px 22px; flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ══════════════════════════════
   PROCESS — Step grid
══════════════════════════════ */
:root{
    --nv-bg: #060607;
    --nv-grid: rgba(255,255,255,0.045);
    --nv-line: #232326;
    --nv-green: #00ff00;
    --nv-text: #f3f3f0;
    --nv-muted: #8c8c88;
    --nv-muted-2: #504f4a;
    --nv-border: #1d1d1f;
    --nv-mono: 'JetBrains Mono', ui-monospace, monospace;
    --nv-display: 'Space Grotesk', system-ui, sans-serif;
    --nv-sans: 'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--nv-bg); color:var(--nv-text); font-family:var(--nv-sans);}
 
  .nv-section-process{
    position:relative;
    padding:7rem 0 8rem;
    background-image:
      radial-gradient(circle at 1px 1px, var(--nv-grid) 1px, transparent 0);
    background-size: 34px 34px;
  }
  .container-fluid-process{max-width: 98%; margin:0 auto; padding:0 2rem;}
 
  .nv-section-title{
    font-family:var(--nv-display);
    font-weight:700;
    font-size:clamp(2.4rem, 5vw, 4.2rem);
    line-height:0.98;
    letter-spacing:-0.01em;
    margin:0 0 5rem;
    color:#fbfbf9;
  }
 
  /* ---- stepper / signal line ---- */
  .nv-stepper-process{
    display:flex;
    align-items:flex-start;
    gap:0;
    margin:0 0 3.5rem;
  }
  .nv-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.85rem;
    flex-shrink:0;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    color:inherit;
    font-family:var(--nv-sans);
  }
  .nv-node:focus-visible .nv-node-circle{outline:2px solid var(--nv-green); outline-offset:3px;}
 
  .nv-node-circle{
    width:2.9rem; height:2.9rem;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--nv-display);
    font-weight:600;
    font-size:0.95rem;
    color:var(--nv-muted-2);
    background:var(--nv-bg);
    border:1.5px solid var(--nv-line);
    transition:border-color .25s, color .25s, background .25s, box-shadow .25s;
  }
  .nv-node.is-done .nv-node-circle{
    border-color:var(--nv-green);
    color:var(--nv-green);
  }
  .nv-node.is-active .nv-node-circle{
    background:var(--nv-green);
    border-color:var(--nv-green);
    color:#04140a;
    box-shadow:0 0 0 5px rgba(0,255,0,0.12), 0 0 16px rgba(0,255,0,0.4);
  }
  .nv-node-label{
    font-size:0.78rem;
    color:var(--nv-muted);
    letter-spacing:0.01em;
    white-space:nowrap;
    transition:color .25s;
  }
  .nv-node.is-active .nv-node-label{color:var(--nv-text);}
 
  .nv-connector{
    flex:1;
    height:1.5px;
    background:var(--nv-line);
    margin:1.45rem 0.6rem 0;
    position:relative;
    overflow:hidden;
    border-radius:1px;
    min-width:0.75rem;
  }
  .nv-connector-fill{
    position:absolute; inset:0 100% 0 0;
    background:var(--nv-green);
    box-shadow:0 0 8px rgba(0,255,0,0.55);
    transition:right .6s cubic-bezier(.4,0,.2,1);
  }
  .nv-connector.is-filled .nv-connector-fill{right:0;}
 
  /* ---- detail panel ---- */
  .nv-detail-process{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:2.75rem;
    align-items:start;
    padding-top:2.75rem;
    border-top:1px solid var(--nv-border);
    min-height:14rem;
  }
  .nv-detail-process .nv-detail-index{
    font-family:var(--nv-display);
    font-weight:700;
    font-size:6.5rem;
    line-height:0.85;
    color:transparent;
    -webkit-text-stroke:1.5px var(--nv-green);
    letter-spacing:-0.02em;
  }
  .nv-detail-process .nv-detail-body{display:none;}
  .nv-detail-process .nv-detail-body.is-visible{display:block; animation:nv-rise .45s ease both;}
  @keyframes nv-rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
 
  .nv-detail-coord{
    font-family:var(--nv-mono);
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--nv-muted);
    margin:0 0 0.6rem;
  }
  .nv-detail-desc{
    font-size:1.02rem;
    line-height:1.65;
    color:#c9c9c4;
    max-width:32rem;
    margin:0 0 1.5rem;
  }
  .nv-detail-output{
    display:flex;
    align-items:baseline;
    gap:0.6rem;
    font-size:0.85rem;
    color:var(--nv-muted);
  }
  .nv-detail-output b{
    font-family:var(--nv-mono);
    font-weight:500;
    color:var(--nv-green);
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.72rem;
  }
 
  .nv-detail-nav{
    display:flex;
    gap:0.5rem;
    margin-top:1.75rem;
  }
  .nv-detail-nav button{
    font-family:var(--nv-mono);
    font-size:0.75rem;
    color:var(--nv-muted);
    background:transparent;
    border:1px solid var(--nv-border);
    padding:0.5rem 0.85rem;
    border-radius:999px;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .nv-detail-process button:hover,
  .nv-detail-process button:focus-visible{border-color:var(--nv-green); color:var(--nv-green); outline:none;}
  .nv-detail-process button:disabled{opacity:0.3; cursor:default;}
 
  @media (max-width: 820px){
    .nv-stepper-process{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      row-gap:2rem;
      column-gap:0.5rem;
    }
    .nv-connector{display:none;}
    .nv-detail-process{grid-template-columns:1fr; gap:1.25rem;}
    .nv-detail-index{font-size:4rem;}
  }
 
  @media (prefers-reduced-motion: reduce){
    .nv-detail-body.is-visible{animation:none;}
    .nv-connector-fill{transition:none;}
  }

/* ══════════════════════════════
   MANIFESTO — Green section
══════════════════════════════ */
.nv-manifesto {
  background: var(--nv-green);
  padding: 140px 0;
}
.nv-manifesto-text {
  font-size: clamp(26px, 4.5vw, 64px);
  font-weight: 800;
  color: var(--nv-black);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 880px;
  margin: 0 auto 36px;
}
.nv-manifesto-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin: 0;
}

/* ══════════════════════════════
   CONTACT
══════════════════════════════ */
.nv-contact-title {
  font-size: clamp(44px, 7.5vw, 110px);
  font-weight: 800;
  line-height: 0.90;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}

.nv-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nv-white);
  text-decoration: none;
  border-bottom: 2px solid var(--nv-green);
  padding-bottom: 6px;
  margin-bottom: 40px;
  transition: color var(--nv-ease-std), gap var(--nv-ease-std);
}
.nv-contact-email:hover {
  color: var(--nv-green);
  gap: 18px;
}

.nv-info-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 6px;
}
.nv-info-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--nv-white);
}

/* ── Tablet (768–991px): es. iPad portrait/landscape ──
   Tra il layout mobile impilato e quello desktop pieno,
   card e step restano leggibili ma con meno respiro. */
@media (min-width: 768px) and (max-width: 991px) {
  .nv-service-card { padding: 36px 28px; }
  .nv-process-step { padding: 32px 22px; }
  .nv-portfolio-info { padding: 22px 24px; }
  .nv-contact-title { font-size: clamp(38px, 8vw, 80px); }
}

/* ── Responsive adjustments (mobile) ── */
@media (max-width: 767px) {
  .nv-service-card { padding: 32px 24px; }
  .nv-manifesto    { padding: 100px 0px; }
  .nv-manifesto{
   height: 400px;
   align-items: center;
  }
  .nv-manifesto-wrapper{
   height: 250px;
  }
  .nv-process-step { padding: 28px 20px; }
}

/* ── Schermi molto grandi (monitor esterni 1920px+) ──
   Il manifesto e le card dei servizi guadagnano più
   respiro senza però superare dimensioni leggibili
   (i clamp() sui font restano invariati). */
@media (min-width: 1920px) {
  .nv-manifesto { padding: 180px 0; }
  .nv-service-card { padding: 56px 44px; }
  .nv-process-step { padding: 52px 36px; }
}