:root {
    --black: #0B0B0B;
    --white: #FFFFFF;
    --paper: #F2F1EE;
    --red: #FF1E0A;          /* rosso fuoco */
    --line: rgba(11,11,11,.14);
    --gutter: clamp(16px, 2.2vw, 32px);
    --pad: clamp(16px, 4vw, 64px);
    --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font);
    background: var(--white);
    color: var(--black);
    -webkit-font-smoothing: antialiased;
    
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--red); color: var(--white); }

  /* ---------- 12-col grid ---------- */
  .wrap { padding-inline: var(--pad); }
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .label {
    font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .num { font-variant-numeric: tabular-nums; }

  /* ---------- Menu: monogramma P&P a sinistra, hamburger a destra; il menu si apre a tutta pagina con le voci grandi (niente barra) ---------- */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; color: var(--black); }
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 112px; opacity: 0; transition: opacity .3s; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%); }   /* dopo lo scroll: una sfumatura, non una barra */
  .nav.stuck::before { opacity: 1; }
  .nav.light::before, .nav.open::before { opacity: 0; }
  .nav .grid { align-items: start; padding-top: clamp(14px, 2vw, 26px); }
  .nav-logo, .nav-burger { position: relative; z-index: 2; pointer-events: auto; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
  .nav-logo { grid-column: 1 / 4; justify-self: start; display: block; }
  /* marchio in Helvetica: P sopra, "&P" sotto (la & fa l'angolo). La & è leggera e rossa e ruota mentre si scorre la pagina */
  .nav-logo { font-family: var(--font); font-size: clamp(24px, 2.25vw, 33px); line-height: .8; font-weight: 700; letter-spacing: -.05em; text-align: left; }
  .nav-logo .ml-p, .nav-logo .ml-row { display: block; white-space: nowrap; }
  .nav-logo .ml-amp { display: inline-block; font-weight: 300; color: var(--red); transform: rotate(var(--amp, 0deg)); transform-origin: 50% 56%; margin-right: .05em; translate: calc(var(--k, 0) * -.09em) 0; transition: color .3s, scale .5s cubic-bezier(.2,.8,.2,1); }
  .nav-logo:hover .ml-amp { scale: 1.18; }
  .nav-burger { grid-column: 10 / 13; justify-self: end; width: 44px; height: 44px; margin: -6px -8px 0 0; display: grid; place-content: center; gap: 7px; }
  .nav-burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .25s, background .3s; }
  .nav-burger:hover span:nth-child(2) { transform: scaleX(.6); transform-origin: right; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .nav-list { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, 1vw, 12px); padding: 90px var(--pad) 40px;
    background: var(--white); color: var(--black); opacity: 0; visibility: hidden; pointer-events: auto; transition: opacity .35s, visibility 0s .35s; }
  .nav.open .nav-list { opacity: 1; visibility: visible; transition: opacity .35s; }
  .nav-list a { align-self: flex-start; font-weight: 500; font-size: clamp(44px, 9vw, 132px); line-height: 1; letter-spacing: -.05em;
    opacity: 0; transform: translateY(28px); transition: color .2s, translate .35s cubic-bezier(.2,.8,.2,1), opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
  .nav.open .nav-list a { opacity: 1; transform: none; }
  .nav.open .nav-list a:nth-child(2) { transition-delay: 0s, 0s, .05s, .05s; } .nav.open .nav-list a:nth-child(3) { transition-delay: 0s, 0s, .1s, .1s; }
  .nav.open .nav-list a:nth-child(4) { transition-delay: 0s, 0s, .15s, .15s; } .nav.open .nav-list a:nth-child(5) { transition-delay: 0s, 0s, .2s, .2s; }
  .nav-list a:hover { color: var(--red); translate: .12em 0; }
  .nav-list .arrow { display: inline-block; margin-left: .18em; font-weight: 400; transition: transform .3s; }
  .nav-list a:hover .arrow { transform: translateX(.12em); }
  /* sopra le sezioni scure e sul rosso monogramma e hamburger diventano bianchi (a menu aperto tornano neri) */
  .nav.light { color: var(--white); }
  .nav.light .ml-amp { color: var(--white); }
  .nav.open, .nav.open.light { color: var(--black); }
  .nav.open.light .ml-amp { color: var(--red); }

  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    font-weight: 500; font-size: 14px;
    padding: 14px 22px; background: var(--black); color: var(--white);
    border-radius: 999px; transition: background .2s, translate .25s cubic-bezier(.2,.8,.2,1);
  }
  .btn:hover { background: var(--red); }
  .btn .arrow { transition: transform .2s; }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn.ghost { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); }
  .btn.ghost:hover { background: var(--black); color: var(--white); }

  /* ---------- Hero: paesaggio a matita, vetta rossa ---------- */
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: max(112vh, 760px);
    display: flex; flex-direction: column;
    background: var(--white);
  }
  /* grana di carta: appena percettibile, dà tatto al disegno */
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .hero-stage { position: relative; flex: 1; min-height: 480px; user-select: none; -webkit-user-select: none; }
  .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
  .hero-canvas:active { cursor: grabbing; }
  .hero-center { position: absolute; left: 50%; top: 50vh;   /* al centro della prima schermata */ z-index: 2; width: max-content; max-width: calc(100% - 2 * var(--pad));
    text-align: center; pointer-events: none; transform: translate(-50%, -50%); }
  .hero-logo { display: block; width: max-content; margin-inline: auto; font-weight: 700; font-size: clamp(38px, min(5.6vw, 9.4vh), 100px);
    line-height: .9; letter-spacing: -.05em; padding-bottom: .06em;
    background: linear-gradient(100deg, var(--black) 0%, var(--black) 45%, var(--red) 75%, #FF6A4D 100%);   /* la sfumatura del footer: il rosso è quello della vetta */
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0; animation: fadeUp .9s .5s cubic-bezier(.2,.8,.2,1) forwards; }
  .hero-logo em, .foot-giant em { font-style: normal; font-weight: 300; }
  .hero-sub { margin: clamp(10px, 1.1vw, 18px) auto 0; max-width: 30ch; text-wrap: balance;
    font-size: clamp(15px, min(1.3vw, 2.4vh), 20px); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; color: rgba(11,11,11,.7);
    opacity: 0; animation: fadeUp .9s .75s cubic-bezier(.2,.8,.2,1) forwards; }
  .foot-giant span { display: block; white-space: nowrap; width: max-content; line-height: .8; font-weight: 700;
    font-size: 14vw; letter-spacing: -.05em; padding-bottom: .06em;
    background: linear-gradient(100deg, var(--black) 0%, var(--black) 45%, var(--red) 75%, #FF6A4D 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  @media (max-width: 640px) { .hero-center { top: 47vh; } }

  /* ---------- Section heads ---------- */
  section { position: relative; }
  .sec { padding-block: clamp(80px, 12vw, 180px); }
  .sec-head { margin-bottom: clamp(48px, 7vw, 112px); align-items: start; row-gap: 24px; }
  .sec-title {
    grid-column: 1 / 11;
    font-weight: 500; font-size: clamp(40px, 6.4vw, 112px);
    line-height: .92; letter-spacing: -.045em;
  }
  .sec-title .muted { color: rgba(11,11,11,.28); }

  /* ---------- Servizi ---------- */
  .services { border-top: 1px solid var(--black); }
  .service {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    padding-block: 32px; border-bottom: 1px solid var(--black);
    align-items: center; position: relative; cursor: pointer;
    transition: color .3s, padding .3s;
  }
  .service:hover h3 { color: var(--red); }
  .service h3 { transition: color .25s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .service .s-num { grid-column: 1 / 3; font-weight: 500; font-size: 16px; }
  .service h3 {
    grid-column: 3 / 8; font-weight: 500; font-size: clamp(32px, 4.6vw, 80px);
    letter-spacing: -.045em; line-height: .95;
  }
  .service p { grid-column: 8 / 12; font-size: 16px; line-height: 1.45; opacity: .75; }
  .service .s-arrow {
    grid-column: 12 / 13; justify-self: end;
    width: 56px; height: 56px; border-radius: 50%;
    border: 1.5px solid currentColor; display: grid; place-items: center;
    font-size: 22px; transition: background .3s, border-color .3s, transform .3s;
  }
  .service:hover .s-arrow { background: var(--red); border-color: var(--red); transform: rotate(-45deg); }

  /* ---------- Manifesto (nero) ---------- */
  .manifesto {
    color: var(--white); overflow: hidden;
    background:
      radial-gradient(60% 70% at 100% 100%, rgba(255,30,10,.55) 0%, rgba(255,30,10,0) 70%),
      radial-gradient(40% 50% at 0% 0%, rgba(255,30,10,.18) 0%, rgba(255,30,10,0) 70%),
      var(--black);
  }
  .manifesto-text {
    grid-column: 1 / 13;
    font-weight: 500; font-size: clamp(40px, 7.4vw, 136px);
    line-height: .95; letter-spacing: -.04em;
  }
  .manifesto-text .r { color: var(--red); }

  /* ---------- Prodotti ---------- */
  .products { row-gap: var(--gutter); }
  .prod { position: relative; border-radius: 20px; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
  .prod-main { grid-column: 1 / 9; grid-row: span 2; min-height: 640px; color: var(--white); }
  .prod-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.8); transition: filter .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .prod-main:hover img { filter: grayscale(0); transform: scale(1.03); }
  .prod-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.45) 0%, rgba(11,11,11,0) 28%, rgba(11,11,11,.25) 50%, rgba(11,11,11,.92) 100%); }
  .prod > * { position: relative; z-index: 2; }
  .prod-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); }
  .pill.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2BE36B; box-shadow: 0 0 0 0 rgba(43,227,107,.6); animation: ping 2s infinite; }
  @keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(43,227,107,0); } 100% { box-shadow: 0 0 0 0 rgba(43,227,107,0); } }
  .prod h3 { font-weight: 500; font-size: clamp(40px, 5.4vw, 96px); line-height: .92; letter-spacing: -.045em; }
  .prod-main p { font-size: 17px; line-height: 1.4; max-width: 44ch; opacity: .85; margin-top: 16px; }
  .prod-side { grid-column: 9 / 13; }
  .prod-tall { grid-row: span 2; }
  @media (max-width: 1024px) { .prod-tall { grid-row: auto; } }
  .prod-stealth { color: var(--white);
    background: radial-gradient(45% 45% at 50% 50%, rgba(255,30,10,.8) 0%, rgba(255,30,10,0) 100%) 0% 0% / 200% 200% no-repeat, var(--black);
    animation: stealth 9s ease-in-out infinite alternate; }
  @keyframes stealth { 0% { background-position: 100% 0%, 0 0; } 50% { background-position: 60% 80%, 0 0; } 100% { background-position: 10% 100%, 0 0; } }
  .prod-stealth h3 { font-size: clamp(32px, 3vw, 48px); }
  .prod-stealth .blur { filter: blur(7px); user-select: none; }
  .prod-stealth p { font-size: 15px; line-height: 1.45; opacity: .75; margin-top: 10px; max-width: 32ch; }

  /* ---------- Investitori ---------- */
  .investors { background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); overflow: hidden; }
  .inv-grid { row-gap: var(--gutter); align-items: stretch; }
  .inv-photo { grid-column: 1 / 6; min-height: 520px; aspect-ratio: 3 / 4; }   /* altezza fissa: con la foto lazy che si carica la sezione non si allunga più (spostava tutto ciò che sta sotto) */
  .inv-photo img { position: absolute; inset: 0; filter: grayscale(1) contrast(1.02) brightness(1.05); }
  [data-drift] { scale: 1.16; will-change: translate; }

  .inv-body { grid-column: 7 / 13; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
  .inv-facts { border-top: 1px solid var(--black); }
  .inv-facts > div { display: grid; grid-template-columns: minmax(110px, 1fr) 3fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
  .inv-facts dt { font-size: 14px; color: rgba(11,11,11,.5); }
  .inv-facts dd { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; letter-spacing: -.01em; }
  .inv-facts a { border-bottom: 1px solid currentColor; }
  .inv-facts a:hover { color: var(--red); }
  .inv-cta { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

  @media (max-width: 1024px) {
    .prod-main, .prod-side { grid-column: 1 / 13; }
    .prod-main { min-height: 520px; grid-row: auto; }
    .prod-side { grid-column: span 6; }
    .inv-photo, .inv-body { grid-column: 1 / 13; }
    .prod-vert { display: none; }
    .inv-photo { min-height: 360px; aspect-ratio: 4 / 3; }
  }
  @media (max-width: 640px) { .prod-side { grid-column: 1 / 13; } }

  /* ---------- CTA ---------- */
  .cta {
    overflow: hidden;
    background:
      radial-gradient(70% 90% at 90% 0%, #FF6A4D 0%, rgba(255,106,77,0) 60%),
      linear-gradient(160deg, var(--red) 0%, #D81405 100%);
  }
  .cta-title {
    grid-column: 1 / 13;
    font-weight: 700; font-size: clamp(40px, 12vw, 220px);
    line-height: .84; letter-spacing: -.045em;
  }
  .cta-title .w { color: var(--white); }
  .cta-row { margin-top: clamp(48px, 6vw, 96px); padding-top: 28px; border-top: 1.5px solid var(--black); row-gap: 32px; align-items: end; }
  .cta-row .col { grid-column: span 3; }
  .cta-row .col a { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; display: block; margin-top: 10px; }
  .cta-row .col a:hover { color: var(--white); }
  .cta-row .col.act { grid-column: 10 / 13; justify-self: end; }


  .cta-lead { grid-column: 1 / 8; margin-top: 32px; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
  .cta-row .col.act.signup { grid-column: 7 / 13; justify-self: stretch; display: flex; flex-wrap: wrap; }
  .signup input {
    flex: 1; min-width: 200px; font: inherit; font-size: 16px; font-weight: 500;
    padding: 14px 20px; border: 0; background: var(--white); color: var(--black); border-radius: 999px; margin-right: 8px;
  }
  .signup input:focus { outline: 2px solid var(--black); outline-offset: 2px; }
  .signup .btn { border: 0; cursor: pointer; font-family: inherit; }
  .signup .thanks { display: none; width: 100%; padding-top: 12px; }
  .signup.sent input, .signup.sent .btn { display: none; }
  .signup.sent .thanks { display: block; }
  @media (max-width: 1024px) { .cta-lead { grid-column: 1 / 13; } .cta-row .col.act.signup { grid-column: 1 / 13; } }

  /* ---------- Footer ---------- */
  footer { background: var(--white); color: var(--black); padding-top: clamp(64px, 9vw, 128px); overflow: hidden; }
  .foot-top { row-gap: 48px; align-items: start; }
  .foot-intro { grid-column: 1 / 6; }
  .foot-intro .foot-mail { display: inline-block; }
  .foot-intro h3 { font-weight: 500; font-size: clamp(32px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; margin-bottom: 28px; }
  .foot-mail { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em;
    background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; padding-bottom: 4px; transition: background-size .4s, color .3s; }
  .foot-mail:hover { background-size: 100% 2px; color: var(--red); }

  .foot-meta { margin-top: clamp(56px, 7vw, 96px); padding-block: 20px; border-top: 1px solid var(--line); align-items: center; row-gap: 12px; font-size: 13px; }
  .foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
  .foot-meta .clock { display: inline-flex; align-items: center; gap: 8px; }
  .foot-meta .clock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2s infinite; }
  @keyframes pulse { 50% { opacity: .25; } }
  .foot-meta .legal { display: flex; gap: 16px; }
  .to-top { width: 48px; flex: none; height: 48px; border-radius: 50%; border: 1.5px solid var(--black);
    display: grid; place-items: center; font-size: 18px; transition: background .25s, color .25s, border-color .25s, transform .25s; }
  .to-top:hover { background: var(--red); border-color: var(--red); color: var(--white); transform: translateY(-4px); }

  .foot-giant { padding: 8px var(--pad) clamp(16px, 2vw, 32px); overflow: hidden; }


  /* ---------- Immagini ---------- */
  .ph { position: relative; overflow: hidden; border-radius: 20px; background: var(--paper); }
  .ph img { width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.05); transition: filter .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .ph:hover img { filter: grayscale(0); transform: scale(1.03); }

  .band { position: relative; height: clamp(360px, 78vh, 820px); overflow: hidden; }
  .band img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: grayscale(1) contrast(1.1); will-change: transform; }
  .band::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,243,241,1) 0%, rgba(255,243,241,0) 22%, rgba(11,11,11,0) 45%, rgba(11,11,11,.55) 80%, rgba(255,30,10,.55) 100%); }
  .band-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: var(--white); padding-block: 40px; align-items: end; row-gap: 16px; }
  .band-caption h2 { grid-column: 1 / 9; font-weight: 500; font-size: clamp(36px, 5.6vw, 96px); line-height: .95; letter-spacing: -.04em; }
  .band-caption .label { grid-column: 10 / 13; justify-self: end; text-align: right; }

  /* anteprima immagine che segue il cursore (servizi) */

  .manifesto-img { grid-column: 1 / 13; aspect-ratio: 21 / 9; margin-top: clamp(48px, 7vw, 96px); background: #000; }
  .manifesto-img img { filter: none; }


  @media (max-width: 1024px) {
    .band-caption h2, .band-caption .label { grid-column: 1 / 13; justify-self: start; text-align: left; }
  }
  @media (hover: none), (max-width: 1024px) {
  }


  /* ---------- Scritte verticali ---------- */
  .prod-vert { position: absolute !important; right: 22px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); opacity: .8; }

  /* ---------- Titoli: righe che salgono ---------- */
  .sec-head.reveal { opacity: 1; transform: none; }
  .sec-title .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
  .sec-title .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
  .sec-title .ln:nth-child(2) > span { transition-delay: .12s; }
  .sec-head.in .sec-title .ln > span { transform: none; }

  /* ---------- Manifesto: parole che si accendono con lo scroll ---------- */
  .manifesto-text .w { opacity: .18; transition: opacity .35s; }
  .manifesto-text .w.on { opacity: 1; }

  /* ---------- Investor: righe a cascata ---------- */
  .inv-facts > div { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
  .inv-body.in .inv-facts > div { opacity: 1; transform: none; }
  .inv-body.in .inv-facts > div:nth-child(2) { transition-delay: .08s; }
  .inv-body.in .inv-facts > div:nth-child(3) { transition-delay: .16s; }
  .inv-body.in .inv-facts > div:nth-child(4) { transition-delay: .24s; }
  .inv-body.in .inv-facts > div:nth-child(5) { transition-delay: .32s; }

  @media (prefers-reduced-motion: reduce) {
    .sec-title .ln > span { transform: none; }
    .manifesto-text .w { opacity: 1; }
    .inv-facts > div { opacity: 1; transform: none; }
  }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-logo, .hero-sub { opacity: 1; }
    .reveal { opacity: 1; transform: none; }
  }


  /* ---------- Animazioni ---------- */

  /* luce che segue il cursore (manifesto, CTA) */
  .spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(255,255,255,.11), transparent 60%); }
  .cta.spot::after { background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(255,255,255,.28), transparent 60%); mix-blend-mode: soft-light; }
  .spot:hover::after { opacity: 1; }

  /* card prodotto: tilt 3D + riflesso */
  .prod::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.2), transparent 60%); }
  .prod.tilting::before { opacity: 1; }
  .prod.tilt.in { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .prod.tilt.tilting { transition: opacity .8s, transform .12s linear; }

  /* servizi: il titolo scivola all'hover */
  @media (hover: hover) { .service:hover h3 { transform: translateX(18px); } }

  /* cursore ad anello */
  /* cursore: disco tondo con il gradiente di "Partner" (bordeaux → rosso → corallo), morbido ai bordi; sopra link e bottoni si allarga e si ammorbidisce */
  .cursor { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; z-index: 60; opacity: 0;
    background: radial-gradient(circle at 30% 28%, #FF6A4D 0%, #FF1E0A 46%, #6B0A02 100%); box-shadow: 0 0 14px rgba(255,30,10,.4);
    transition: opacity .25s, width .3s, height .3s, margin .3s, box-shadow .3s, background .3s; }
  .cursor.on { opacity: 1; }
  .cursor.big { width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: .82; box-shadow: 0 0 30px rgba(255,30,10,.45); }
  .cursor.light { background: radial-gradient(circle at 30% 28%, #FFB19F 0%, #FF3A22 50%, #C8160A 100%); }   /* sul nero: senza il bordeaux, che sparirebbe */
  .cursor.onred { background: radial-gradient(circle at 30% 28%, #FFFFFF 0%, #FFD9D2 55%, #FF8F7C 100%); box-shadow: 0 0 14px rgba(255,255,255,.5); }   /* sul rosso: chiaro */
  @media (hover: none), (pointer: coarse) { .cursor { display: none; } }

  /* ============ DESIGN: tutto in stile incisione ============
     Un solo linguaggio: carta con grana, china (26,26,32), rosso della vetta come unico accento, filetti da 1 px, angoli vivi.
     Le foto diventano tavole a tratteggio (stesso tratto della hero); niente dietro ai testi, niente sovrapposizioni. */
  :root { --hair: rgba(26,26,32,.55); }
  #servizi::after, #prodotti::after, .investors::after, footer::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  footer { position: relative; }

  .btn { border-radius: 0; }
  .signup input { border-radius: 0; }
  .to-top { border-radius: 0; }

  /* tavole */
  .ph { border-radius: 0; background: transparent; }
  .ph img { filter: none; transition: none; }
  .ph:hover img { filter: none; transform: none; }

  /* servizi: elenco a solo testo, freccia quadrata */
  .service .s-arrow { display: none; }
  @media (min-width: 1025px) { .service p { grid-column: 8 / 13; } }
  #servizi { padding-bottom: clamp(40px, 5vw, 72px); }
  #prodotti { padding-top: clamp(40px, 5vw, 72px); }

  /* sfumatura tra servizi e prodotti: tratteggio a incisione che si infittisce e si spegne, con un velo di rosso */
  .fade-band { position: relative; height: clamp(360px, 44vw, 700px); }
  .fb { position: absolute; inset: 0; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,30,10,0) 0%, rgba(255,30,10,.08) 30%, rgba(255,30,10,.24) 62%, rgba(255,30,10,0) 100%); }
  .fb::before, .fb::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .fb::before { background: repeating-linear-gradient(-58deg, rgba(26,26,32,.72) 0 1px, transparent 1px 6px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 64%, transparent 100%); }
  .fb::after { background: repeating-linear-gradient(58deg, rgba(26,26,32,.55) 0 1px, transparent 1px 9px);
    -webkit-mask-image: linear-gradient(180deg, transparent 22%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 22%, #000 66%, transparent 100%); }
  .fade-band i { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* prodotti: righe come i servizi, titoli grandi e filetti neri (lo stesso mood di contatto e footer), niente card né pillole */
  .prod-list { border-top: 1px solid var(--black); }
  .prod-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-block: clamp(28px, 4vw, 64px); border-bottom: 1px solid var(--black); }
  .prod-hero { align-items: start; row-gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px); }
  .prod-row.prod-hero h3 { grid-column: 1 / 13; font-size: clamp(56px, 10.5vw, 192px); line-height: .88; }
  .pr-text { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 22px; }
  .pr-art { grid-column: 5 / 13; aspect-ratio: 16 / 10; }
  .pr-art img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
  .prod-row h3 { font-weight: 500; font-size: clamp(40px, 5.4vw, 96px); line-height: .92; letter-spacing: -.045em; transition: color .25s, transform .5s cubic-bezier(.2,.8,.2,1); }
  a.prod-row:hover h3 { color: var(--red); transform: translateX(14px); }
  .pr-status { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
  .pr-status .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pingR 2s infinite; }
  .pr-lead { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25; font-weight: 500; letter-spacing: -.02em; }
  .pr-more { align-self: flex-start; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.02em; padding-bottom: 4px;
    background: linear-gradient(var(--black), var(--black)) 0 100% / 100% 2px no-repeat; transition: background-size .4s, color .3s; }
  .pr-more .arrow { display: inline-block; transition: transform .3s; }
  a.prod-row:hover .pr-more { color: var(--red); background-image: linear-gradient(var(--red), var(--red)); }
  a.prod-row:hover .pr-more .arrow { transform: translateX(6px); }
  /* le tre righe che spiegano il prodotto: come i servizi (numero, titolo, testo), senza link */
  .pfeat { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-block: clamp(24px, 3vw, 44px); }
  .pfeat .s-num { grid-column: 1 / 2; font-weight: 500; font-size: 16px; }
  .pfeat h4 { grid-column: 2 / 8; font-weight: 500; font-size: clamp(26px, 3.2vw, 54px); line-height: .98; letter-spacing: -.04em; }
  .pfeat p { grid-column: 8 / 13; font-size: 16px; line-height: 1.45; opacity: .75; }
  @keyframes pingR { 70% { box-shadow: 0 0 0 10px rgba(255,30,10,0); } 100% { box-shadow: 0 0 0 0 rgba(255,30,10,0); } }
  @media (max-width: 1024px) { .pr-text, .pr-art { grid-column: 1 / 13; } .prod-hero { row-gap: 24px; }
    .pfeat h4 { grid-column: 2 / 13; } .pfeat p { grid-column: 2 / 13; margin-top: 12px; } }
  @media (max-width: 640px) { .pfeat .s-num { grid-column: 1 / 13; margin-bottom: 8px; } .pfeat h4, .pfeat p { grid-column: 1 / 13; } }

  /* manifesto: piano nero piatto, tavola a gesso */
  .manifesto { background: var(--black); }
  .manifesto-img { border: 0; background: transparent; }

  /* investor */
  .investors { background: var(--white); }
  .inv-photo { border: 0; background: transparent; aspect-ratio: 3 / 4; }
  .inv-photo img { position: absolute; inset: 0; filter: none; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  @media (max-width: 1024px) { .inv-photo { aspect-ratio: 4 / 3; } }

  /* contatto: piano rosso piatto */
  .cta { background: var(--red); }

  /* ============ ANIMAZIONI IMMERSIVE ============
     Tutto in transform/opacity/mask (niente layout); con movimento ridotto tutto compare subito. */
  /* hero: scorrendo la vetta si avvicina (camera che avanza) e il titolo sale dissolvendosi */
  .hero-canvas { transform-origin: 68% 66%; will-change: transform; }
  .hero-center { will-change: transform, opacity; }

  /* filetti che si tracciano da sinistra a destra, uno dopo l'altro */
  .services, .prod-list { border-top: 0; position: relative; }
  .service, .prod-row { border-bottom: 0; }
  .prod-row { position: relative; }
  .services::before, .prod-list::before, .service::after, .prod-row::after, .pfeat::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--black);
    transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  .services::before, .prod-list::before { top: 0; }
  .service::after, .prod-row::after, .pfeat::after { bottom: 0; }
  .services.in::before, .prod-list.in::before, .service.in::after, .prod-row.in::after, .pfeat.in::after { transform: none; }
  .service:nth-child(2).in::after { transition-delay: .1s; } .service:nth-child(3).in::after { transition-delay: .2s; } .service:nth-child(4).in::after { transition-delay: .3s; }
  .pfeat:nth-child(2).in::after { transition-delay: .1s; } .pfeat:nth-child(3).in::after { transition-delay: .2s; } .pfeat:nth-child(4).in::after { transition-delay: .3s; }

  /* tavole: si disegnano dall'alto (o da sinistra, sul nero) mentre entrano; poi fluttuano piano con lo scroll */
  .pr-art img, .inv-photo img, .manifesto-img img { will-change: translate;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect;
    -webkit-mask-size: 100% 100%, 100% 300%; mask-size: 100% 100%, 100% 300%; -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    transition: -webkit-mask-position 2.4s cubic-bezier(.3,.1,.2,1), mask-position 2.4s cubic-bezier(.3,.1,.2,1); }
  .pr-art img, .inv-photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(180deg, #000 0, #000 33%, transparent 44%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(180deg, #000 0, #000 33%, transparent 44%, transparent 100%); }
  .manifesto-img img { -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 0, #000 33%, transparent 44%, transparent 100%); mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 0, #000 33%, transparent 44%, transparent 100%);
    -webkit-mask-size: 100% 100%, 300% 100%; mask-size: 100% 100%, 300% 100%; -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; }
  .prod-row.in .pr-art img, .inv-photo.in img { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  .manifesto-img.in img { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }

  /* sfumatura tra servizi e prodotti: compare piano e il tratteggio scorre con lo scroll (i due strati in verso opposto) */
  .fade-band { opacity: 0; transition: opacity 1.6s; }
  .fb { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
  .fade-band.in { opacity: 1; }
  .fb::before, .fb::after { inset: -110px 0; will-change: transform; }
  .fb::before { transform: translate3d(0, calc((var(--fb, .5) - .5) * 150px), 0); }
  .fb::after { transform: translate3d(0, calc((.5 - var(--fb, .5)) * 110px), 0); }


  /* ============ Selezione del testo: il gradiente di "Partner" ============
     ::selection non accetta gradienti: il JS disegna un livello dietro al testo (una barra per riga) che prende il gradiente,
     mappato sulla larghezza della pagina come nel titolo (nero → rosso → corallo). Senza JS resta la selezione rossa piena. */
  section:not(.band), footer { isolation: isolate; }
  .sel-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    --sel-bg: linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 45%, #FF1E0A 75%, #FF6A4D 100%); }
  .sel-layer i { position: absolute; background-image: var(--sel-bg); background-repeat: no-repeat; }
  .manifesto { --sel-fg: #0B0B0B; }   /* sul nero il gradiente parte dal bianco, altrimenti la selezione sparirebbe */
  .manifesto .sel-layer { --sel-bg: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 45%, #FF1E0A 75%, #FF6A4D 100%); }
  .cta .sel-layer { --sel-bg: linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 55%, #5C0A02 100%); }   /* sul rosso: nero che si scalda */
  html.sel-js ::selection { background: transparent; color: var(--sel-fg, #FFFFFF); }
  html.sel-js .band ::selection, html.sel-js .nav ::selection, html.sel-js input::selection { background: var(--black); color: var(--white); }

  @media (prefers-reduced-motion: reduce) {
    .hero-canvas { will-change: auto; }
    .fade-band { opacity: 1; }
    .fb::before, .fb::after { transform: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .service p { grid-column: 3 / 12; margin-top: 12px; }
    .service h3 { grid-column: 3 / 12; }
    .service .s-arrow { grid-row: 1; grid-column: 12 / 13; }
    .cta-row .col { grid-column: span 6; }
    .cta-row .col.act { grid-column: 1 / 13; justify-self: start; }
    .foot-intro { grid-column: 1 / 13; }
  }
  @media (max-width: 640px) {
    .sec-title { grid-column: 1 / 13; }
    .service .s-num { grid-column: 1 / 13; margin-bottom: 8px; }
    .service h3 { grid-column: 1 / 11; }
    .service p { grid-column: 1 / 13; }
    .service .s-arrow { grid-row: 2; width: 44px; height: 44px; }
    .cta-row .col { grid-column: 1 / 13; }
  }

/* ---------- Pagina contatti ---------- */
.contact-hero { padding-top: clamp(140px, 16vw, 240px); }
.contact-hero .cta-title { font-size: clamp(64px, 17vw, 300px); }
.contact-find { margin-top: clamp(56px, 7vw, 112px); }
.contact-facts { grid-column: 1 / 9; }
@media (max-width: 1024px) { .contact-facts { grid-column: 1 / 13; } }
.nav-list a[aria-current="page"] { color: var(--red); }