/* ============================================================
   InvestFood Tech — Componenti
   ============================================================ */

/* ---------- Bottoni ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--r-btn);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* L'unica campitura corretta per l'azione primaria */
.btn--primary {
  background: var(--voltage);
  color: #fff;
  box-shadow: var(--glow-signal);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 56px rgba(64, 91, 255, .48);
}

/* Azione secondaria: contorno che riprende l'accento del titolo */
.btn--ghost {
  border: 1px solid rgba(112, 132, 255, .55);
  color: var(--signal);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--signal);
  background: rgba(112, 132, 255, .1);
  transform: translateY(-2px);
}

.btn--sm { padding: 11px 20px; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Link con freccia */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding-block: 4px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--signal);
  transition: gap var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.arrow-link:hover { gap: 12px; color: #9aa8ff; }
.arrow-link svg { width: 14px; height: 14px; }

/* ---------- Tag -------------------------------------------- */

.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--hairline-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255, 255, 255, .04);
}

.tag--soon {
  border-color: rgba(112, 132, 255, .45);
  color: var(--signal);
  background: rgba(112, 132, 255, .1);
}

/* ---------- Card gestionale -------------------------------- */

/* Nastro a scorrimento continuo: le card sfilano invece di impilarsi */
.rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.rail__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  padding-inline: 24px;
}

.rail::-webkit-scrollbar { display: none; }

.rail.is-dragging { cursor: grabbing; }

/* Durante il trascinamento niente selezione di testo né drag delle immagini */
.rail.is-dragging { user-select: none; }
.rail img { -webkit-user-drag: none; user-select: none; }

.pcard {
  position: relative;
  transform: none;
  flex: 0 0 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-card);
  border: 1px solid transparent;
  /* Il prodotto è sempre bianco sul canvas notte */
  background: var(--paper);
  color: var(--carbon);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* L'elevazione è un alone, non un'ombra */
.pcard:hover { box-shadow: var(--glow-signal-lg); }

.pcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.pcard__logo { height: 28px; width: auto; }

.pcard__cat {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  text-align: right;
  line-height: 1.5;
  padding-top: 6px;
}

.pcard__desc {
  font-size: .95rem;
  color: var(--midnight);
  line-height: 1.6;
  margin-bottom: 24px;
}

.pcard__feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.pcard__feat {
  padding: 7px 14px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(14, 14, 14, .12);
  background: rgba(14, 14, 14, .04);
  font-size: .78rem;
  color: var(--midnight);
}

.pcard__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(25, 25, 25, .1);
}

/* Su pannello chiaro il testo di servizio scurisce */
.pcard .mono,
.prj .mono { color: var(--graphite); }

/* L'host è anche la scorciatoia al sito del gestionale */
.pcard__host {
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.pcard__host:hover { color: var(--voltage); text-decoration: underline; }

.prj .tag {
  border-color: rgba(14, 14, 14, .14);
  background: rgba(14, 14, 14, .04);
  color: var(--graphite);
}

.prj .arrow-link { color: var(--voltage); }
.prj .arrow-link:hover { color: #2c46e6; }

.pcard .tag--soon {
  border-color: rgba(64, 91, 255, .38);
  color: var(--voltage);
  background: rgba(64, 91, 255, .08);
}

.pcard .arrow-link { color: var(--voltage); }
.pcard .arrow-link:hover { color: #2c46e6; }

/* ---------- Marquee brand ---------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__item {
  --logo-h: 44px;
  flex: 0 0 auto;
  height: var(--logo-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Marchi partner: solo segni tipografici quieti, niente riquadri */
.marquee__item img {
  height: auto;
  max-height: var(--logo-h);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) sepia(.18) hue-rotate(190deg);
  opacity: .55;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.marquee__item:hover img { opacity: 1; transform: scale(1.06); }

/* ---------- Card progetto ---------------------------------- */

.grid-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.prj {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid transparent;
  /* Anche i progetti sono prodotto: pannello bianco sul canvas notte */
  background: var(--paper);
  color: var(--midnight);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

.prj:hover { box-shadow: var(--glow-signal-lg); }

.prj__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 14px 14px 0;
  border-radius: var(--r-panel);
}

.prj__media--purple { background: linear-gradient(140deg, #86409A 0%, #6F1287 100%); }
.prj__media--signal { background: var(--signal-grad); }

.prj__art { width: clamp(112px, 32%, 160px); border-radius: 20px; }

/* Logotipo esteso: niente riquadro, riempie il pannello in larghezza */
.prj__art--wide { width: clamp(180px, 64%, 340px); border-radius: 0; }

.prj__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; }

.prj__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.prj__desc { margin: 14px 0 22px; font-size: .95rem; color: var(--midnight); line-height: 1.6; }

.prj__list { display: grid; gap: 11px; margin-bottom: 28px; }

.prj__list li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  color: var(--midnight);
}

.prj__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .48em;
  width: 13px; height: 8px;
  border-left: 2px solid var(--voltage);
  border-bottom: 2px solid var(--voltage);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.prj__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Badge store */
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 15px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  background: var(--midnight);
  color: var(--paper);
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-out);
}

.store:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-signal);
}

.store svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

.store__txt { display: flex; flex-direction: column; line-height: 1.15; }
.store__txt small { font-size: .58rem; color: rgba(255, 255, 255, .72); letter-spacing: .03em; }
.store__txt strong { font-size: .87rem; font-weight: 700; letter-spacing: -.01em; }

/* ---------- FAQ -------------------------------------------- */

.faq { display: grid; gap: 12px; max-width: 860px; }

.faq__item {
  border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .03);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.faq__item[open] { border-color: rgba(112, 132, 255, .34); background: rgba(112, 132, 255, .05); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* Il segno più diventa meno quando la risposta è aperta */
.faq__q::after {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 2px 14px no-repeat;
  transition: rotate var(--dur) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--signal), var(--signal)) center / 14px 2px no-repeat;
  rotate: 180deg;
}

.faq__a {
  padding: 0 24px 22px;
  max-width: 68ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-2);
}