/* ================================================================
   KRISEIDES — Site Styles
   Palette: Cyber-Acciaio (dark base + cyan accent)
   Tono:    Polo B — Megacorp aulico, cyberpunk-tech
   ================================================================ */

/* ==================== TOKENS ==================== */

:root {
  /* Background hierarchy */
  --c-void:        #050709;
  --c-bg:          #0A0E13;
  --c-surface:     #11161E;
  --c-surface-2:   #1A222D;
  /* Bordi: i primi due sono decorativi (separatori sezioni/card),
     border-strong è per UI INTERATTIVA (form input, focus) che richiede 3:1 WCAG SC 1.4.11 */
  --c-border:      #1F2A36;
  --c-border-2:    #2A3744;
  --c-border-3:    #3B4A5C;
  --c-border-strong: #6B7B8E;  /* >= 3:1 su c-bg per UI interattiva (WCAG AA) */

  /* Cyan accent family */
  --c-accent:      #4DE5F0;
  --c-accent-2:    #88EEFA;
  --c-accent-deep: #1C9AAB;
  --c-accent-soft: rgba(77, 229, 240, 0.10);
  --c-accent-glow: rgba(77, 229, 240, 0.28);

  /* Text hierarchy */
  --c-text:        #EAF0F4;
  --c-text-muted:  #8FA0B0;
  --c-text-dim:    #5E6E7E;

  /* Status */
  --c-success:     #4DE5A0;
  --c-error:       #F04D6E;

  /* Typography — system-font stack per privacy GDPR
     (TODO: self-host Rajdhani woff2 in produzione) */
  --font-display:  "Eurostile Extended", "Bahnschrift Condensed",
                   "Bahnschrift", "Trebuchet MS", "Segoe UI Variable",
                   "Segoe UI", system-ui, sans-serif;
  --font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
                   "Segoe UI", system-ui, ui-sans-serif, Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
                   Consolas, "Courier New", monospace;

  /* Spacing scale */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  72px;
  --space-2xl: 120px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Layout */
  --header-h:  72px;
  --max-w:     1200px;

  /* Easing */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ==================== RESET / BASE ==================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
img, svg { max-width: 100%; display: block; }
p { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Skip link a11y: invisibile finché non riceve focus da Tab.
   Quando un utente da tastiera/screen reader preme Tab come prima cosa
   sulla pagina, vede questa scorciatoia per saltare la navigazione
   e andare direttamente al main. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top 0.18s var(--ease);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--c-bg);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-text);
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ==================== ATMOSFERA — Grid background ==================== */

/* ==================== HEADER ==================== */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}

.header.scrolled {
  background: rgba(10, 14, 19, 0.78);
  border-bottom-color: var(--c-border);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* Logo wordmark SVG: glifi KRSEDS da Nimbus Sans Bold + crisalide custom
   (la "I" centrale è una colonna di 5 segmenti stilizzata).
   Frozen come paths SVG → rendering identico cross-browser/OS, niente
   dipendenze da font installati. */
.logo__wordmark {
  display: block;
  fill: var(--c-text);
  width: auto;
  transition: fill .2s var(--ease);
}

.logo .logo__wordmark        { height: 22px; }
.footer__logo .logo__wordmark { height: 18px; }

/* Logo wordmark resta bianco anche al hover (no color shift) */
.logo:hover .logo__wordmark,
.footer__logo:hover .logo__wordmark {
  fill: var(--c-text);
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  padding: 12px 14px;  /* touch target 44px+ */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease);
}

.nav__link:hover { color: var(--c-text); }

.nav__link.is-active { color: var(--c-accent); }

.nav__cta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding: 10px 18px;
  border: 1px solid var(--c-accent-deep);
  border-radius: var(--radius-sm);
  margin-left: 8px;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.nav__cta:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

.nav-toggle {
  display: none;                       /* nascosto su desktop */
  flex-direction: column;              /* le 3 linee vanno impilate verticalmente */
  justify-content: center;             /* centrate verticalmente */
  align-items: stretch;                /* span larghi quanto il container */
  gap: 5px;                            /* spazio tra le 3 linee */
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 10px;
  color: var(--c-text);
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: all .25s var(--ease);
}

/* ==================== HERO ==================== */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;     /* centra orizzontalmente il container, esplicito */
  overflow: hidden;
}

/* In flex layout, .container come flex-item deve avere width esplicita
   per ricevere la max-width e centrarsi come nelle altre sezioni
   (allineamento con .header__inner su qualsiasi viewport) */
.hero > .container {
  width: 100%;
}

.hero__content {
  max-width: 920px;
  position: relative;
  z-index: 2;
}

/* Hero visual: farfalla come background allineato a destra DENTRO il container
   (bound dal max-width 1200, non sfora mai oltre i limiti del sito).
   Va sotto il testo (z-index 1) con opacity 50% per non disturbare la
   leggibilità anche quando il testo la sovrappone. */
.hero > .container {
  position: relative;
}

.hero__visual {
  position: absolute;
  top: 0;
  right: 24px;
  width: 40%;
  max-width: 680px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
  pointer-events: none;
}

.hero__butterfly {
  width: 100%;
  max-width: 680px;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  object-position: right center;
  opacity: 0.5;
  /* lighten: il bg scuro dell'immagine si fonde col bg sito */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 30px var(--c-accent-glow));
  animation: butterflyFloat 8s ease-in-out infinite;
  will-change: transform;
}

@keyframes butterflyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__butterfly { animation: none; }
}

/* Responsive: su tablet riduco un po' la presenza, su mobile la nascondo */
@media (max-width: 980px) {
  .hero__visual    { width: 55%; max-width: 500px; right: 16px; }
  .hero__butterfly { max-width: 500px; opacity: 0.35; }
}

@media (max-width: 700px) {
  .hero__visual { display: none; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--c-border-2);
  border-radius: 100px;
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 32px;
}

.hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
}

.hero__title .accent {
  color: var(--c-accent);
  white-space: nowrap;
}

.hero__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 640px;
  margin-bottom: 48px;
}

.hero__lead strong { color: var(--c-text); font-weight: 500; }

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

/* Meta footer del hero — strip orizzontale con stato e info, spezza il vuoto */

/* Scroll cue in basso al hero — anchor "Scorri" con freccia animata */
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: color .2s var(--ease);
  z-index: 3;
}

.hero__scroll:hover { color: var(--c-accent); }
.hero__scroll:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

.hero__scroll svg {
  width: 18px;
  height: 18px;
  animation: scrollBounce 2.2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 28px;
}

.hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 760px;
  margin-bottom: 40px;
}
.hero__lead strong {
  color: var(--c-text);
  font-weight: 600;
}

.accent { color: var(--c-accent); }

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==================== BUTTONS ==================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .22s var(--ease);
  min-height: 44px;
}
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: var(--c-accent);
  color: var(--c-bg);
  box-shadow: 0 0 18px var(--c-accent-glow);
}
.btn--primary:hover {
  background: var(--c-accent-2);
  box-shadow: 0 0 22px var(--c-accent-glow);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn:focus-visible {
  outline: 2px solid var(--c-accent-2);
  outline-offset: 3px;
}

/* ==================== SECTION ==================== */

.section {
  padding: 100px 0;
  position: relative;
}
.section--alt { background: rgba(255, 255, 255, 0.012); }

.section__head {
  margin-bottom: 56px;
  max-width: 820px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--c-accent);
  flex-shrink: 0;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  color: var(--c-text);
}

.section__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text-muted);
  max-width: 720px;
}
.section__lead strong { color: var(--c-text); font-weight: 600; }

/* ==================== CHI SIAMO ==================== */

.about__block {
  margin-bottom: 64px;
}
.about__block:last-of-type { margin-bottom: 48px; }

.about__block-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}

/* Tre fasi orizzontali */
.about__phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about__phase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.about__phase:hover {
  border-color: var(--c-accent-deep);
  transform: translateY(-2px);
}

.about__phase-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-accent);
}

.about__phase-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-muted);
}
.about__phase-body strong {
  color: var(--c-text);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* Stats band */
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 32px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-top: 8px;
}
.stat {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--c-border);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.stat__lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ==================== APPROCCIO ==================== */

.approccio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* desktop: 2x2 (4 box su 2 colonne) */
  gap: 24px;
}

@media (max-width: 700px) {
  .approccio__grid { grid-template-columns: 1fr; }  /* mobile: 1x4 stack verticale */
}

.principle {
  padding: 32px 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.principle:hover {
  border-color: var(--c-accent-deep);
  transform: translateY(-3px);
}

.principle__number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.principle__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--c-text);
}

.principle__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* ==================== SERVIZI ==================== */

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service {
  padding: 36px 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  display: flex;
  flex-direction: column;
}
.service:hover {
  border-color: var(--c-accent-deep);
  transform: translateY(-3px);
}

.service__icon {
  width: 56px; height: 56px;
  margin-bottom: 24px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.service__icon svg { width: 100%; height: 100%; }

.service__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 14px;
  color: var(--c-text);
}

.service__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-muted);
  margin-bottom: 20px;
  flex: 1;
}

.service__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service__features li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--c-text);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.service__features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}

/* ==================== METODO ==================== */

.metodo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.stage {
  padding: 28px 24px;
  border-right: 1px solid var(--c-border);
}
.stage:last-child { border-right: none; }

.stage__number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: 14px;
}

.stage__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--c-text);
}

.stage__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-text-muted);
}

/* ==================== PRODOTTI ==================== */

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.product {
  padding: 40px 36px;
  background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
}

.product__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.product__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product__status--active {
  background: rgba(77, 229, 160, 0.12);
  color: #4DE5A0;
  border: 1px solid rgba(77, 229, 160, 0.3);
}
.product__status--active::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #4DE5A0;
  box-shadow: 0 0 0 3px rgba(77, 229, 160, 0.18);
}
.product__status--dev {
  background: rgba(255, 196, 0, 0.10);
  color: #FFC400;
  border: 1px solid rgba(255, 196, 0, 0.3);
}
.product__status--dev::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFC400;
}

.product__category {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Logo prodotto (sostituisce il nome testuale). Limita altezza per coerenza
   con la gerarchia tipografica dei box. SVG con fill bianco e accent originale
   per mantenere riconoscibilità del brand di prodotto. */
.product__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  margin: 0 0 14px;
  object-fit: contain;
  object-position: left;
}
/* Manteniamo l'h3 con il nome testuale come fallback accessibile/SEO:
   visualmente nascosto ma letto da screen reader e indicizzato. */
.product__name--sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.product__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
}

.product__tagline {
  color: var(--c-accent);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

.product__text {
  color: var(--c-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.product__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 8px;
}
.product__features li {
  position: relative;
  padding-left: 22px;
  color: var(--c-text);
  font-size: 14px;
}
.product__features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

.product__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s var(--ease);
}
.product__link svg { width: 16px; height: 16px; }
.product__link:hover { gap: 12px; color: var(--c-accent-2); }

/* ==================== CARRIERE ==================== */

.careers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.career {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all .25s var(--ease);
}
.career:hover {
  border-color: var(--c-accent);
  background: var(--c-surface-2);
  transform: translateY(-2px);
}
.career:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}

.career__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.career__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
}

.career__text {
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.career__stack {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.career__stack li {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.career__stack li strong { color: var(--c-text); font-weight: 500; }

/* Perk tag (es. Full-remote): outline cyan invece di filled, per distinguerlo
   visivamente dai tag dello stack tecnico. */
.career__stack li.career__stack-perk {
  background: transparent;
  border-color: var(--c-accent);
  /* Forza il tag perk (Full-remote) sempre su nuova riga: occupando tutto
     lo spazio disponibile, gli altri elementi flex restano nelle righe sopra. */
  flex-basis: 100%;
  margin-top: 4px;
  /* L'inline-block + width auto al figlio rende il chip non a tutta larghezza */
  text-align: left;
  border: none;
  padding: 0;
  background: transparent;
}
.career__stack li.career__stack-perk strong {
  color: var(--c-accent);
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
}

.career__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 600;
}
.career__cta svg {
  width: 14px; height: 14px;
  transition: transform .2s var(--ease);
}
.career:hover .career__cta svg { transform: translateX(4px); }

/* ==================== CONTATTI ==================== */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.contact__form-wrap {
  background: var(--c-surface);
  padding: 36px 32px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.form__label [aria-hidden="true"] { color: var(--c-accent); margin-left: 2px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form textarea {
  resize: vertical;
  min-height: 100px;
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.form input:user-invalid,
.form textarea:user-invalid {
  border-color: #FF6B6B;
}

.form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__actions { display: flex; gap: 12px; margin-top: 8px; }

.form__status {
  font-size: 14px;
  min-height: 22px;
}
.form__status.is-ok {
  color: #4DE5A0;
  padding: 12px 16px;
  background: rgba(77, 229, 160, 0.08);
  border: 1px solid rgba(77, 229, 160, 0.3);
  border-radius: var(--radius-sm);
}
.form__status.is-error {
  color: #FF8888;
  padding: 12px 16px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
}

.form__privacy {
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 0;
}
.form__privacy a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-deep);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__block {
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.contact__block-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.contact__block p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.contact__block a { color: var(--c-text); text-decoration: none; }
.contact__block a:hover { color: var(--c-accent); }
/* PEC/riga secondaria dentro un contact block: font più piccolo + spaziatura ridotta */
.contact__block-note {
  margin-top: 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
}

/* ==================== FOOTER ==================== */

.footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding: 56px 0 28px;
  margin-top: 80px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
}

.footer__tagline {
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 14px;
}

.footer__col a {
  display: block;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--c-accent); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}

.footer__legal {
  font-size: 12px;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.footer__cookie-link {
  background: transparent;
  border: 1px solid var(--c-border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.footer__cookie-link:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* ==================== DIALOG (candidature) ==================== */

.dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 720px;
  width: 92%;
  color: var(--c-text);
}
.dialog::backdrop {
  background: rgba(10, 14, 19, 0.78);
  backdrop-filter: blur(6px);
}

.dialog__inner {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 40px 36px 32px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent-deep) transparent;
}
.dialog__inner::-webkit-scrollbar { width: 6px; }
.dialog__inner::-webkit-scrollbar-track { background: transparent; }
.dialog__inner::-webkit-scrollbar-thumb {
  background: var(--c-accent-deep);
  border-radius: 3px;
}
.dialog__inner::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

.dialog__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.dialog__close svg { width: 18px; height: 18px; }
.dialog__close:hover {
  border-color: var(--c-border);
  color: var(--c-accent);
  background: var(--c-surface-2);
}
.dialog__close:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.dialog__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
}

.dialog__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px;
  padding-right: 40px;
}

.dialog__section { margin-bottom: 24px; }

.dialog__section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 10px;
}

.dialog__section p {
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.6;
  font-size: 15px;
}

.dialog__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dialog__list li {
  position: relative;
  padding-left: 22px;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.dialog__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}

.dialog__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.dialog__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog__field { display: flex; flex-direction: column; gap: 6px; }

.dialog__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.dialog__label [aria-hidden="true"] { color: var(--c-accent); margin-left: 2px; }

.hint { color: var(--c-text-muted); font-weight: 400; }
.dialog__label .hint {
  text-transform: none;
  letter-spacing: 0;
}

.dialog__form input[type="text"],
.dialog__form input[type="email"],
.dialog__form input[type="url"],
.dialog__form textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dialog__form textarea { resize: vertical; min-height: 100px; }
.dialog__form input:focus,
.dialog__form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.dialog__form input:user-invalid,
.dialog__form textarea:user-invalid {
  border-color: #FF6B6B;
}

.dialog__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ==================== DROPZONE CV ==================== */

.dropzone {
  position: relative;
  padding: 20px 18px;
  background: var(--c-bg);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-sm);
  transition: all .2s var(--ease);
  cursor: pointer;
}
.dropzone:hover {
  border-color: var(--c-accent);
  background: var(--c-surface);
}
.dropzone.is-dragover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  border-style: solid;
}
.dropzone.has-file { cursor: default; }
.dropzone.has-file:hover { border-color: var(--c-border); background: var(--c-bg); }

.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.dropzone.has-file .dropzone__input { display: none; }

.dropzone__placeholder {
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: none;
  width: 100%;
}
.dropzone__placeholder[hidden],
.dropzone__file[hidden] {
  display: none !important;
}

.dropzone__icon {
  width: 36px; height: 36px;
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.dropzone__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.dropzone__text strong {
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.dropzone__text span {
  color: var(--c-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.dropzone__file {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.dropzone__file-icon {
  width: 32px; height: 32px;
  color: var(--c-accent);
  flex-shrink: 0;
}
.dropzone__file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dropzone__file-name {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropzone__file-size {
  color: var(--c-text-muted);
  font-size: 12px;
  font-family: var(--font-mono);
}
.dropzone__remove {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.dropzone__remove svg { width: 14px; height: 14px; }
.dropzone__remove:hover {
  border-color: #FF8888;
  color: #FF8888;
}

.dropzone__error {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
  color: #FF8888;
  font-size: 13px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 980px) {
  .about__phases  { grid-template-columns: 1fr; gap: 16px; }
  .about__stats   { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .services__grid { grid-template-columns: 1fr; gap: 20px; }
  .metodo__grid   { grid-template-columns: repeat(2, 1fr); }
  .products__grid { grid-template-columns: 1fr; gap: 20px; }
  .careers__grid  { grid-template-columns: repeat(2, 1fr); }
  .contact__grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid   { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stage          { border-right: none; border-bottom: 1px solid var(--c-border); padding-bottom: 24px; margin-bottom: 24px; }
  .stage:nth-child(2) { border-right: none; }
}

@media (max-width: 700px) {
  .hero__title   { font-size: clamp(32px, 8vw, 48px); }
  .hero__lead    { font-size: 16px; }
  .nav           { display: none; }
  .nav.is-open   {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-surface);
    padding: 20px;
    border-bottom: 1px solid var(--c-border);
    gap: 16px;
  }
  .nav-toggle    { display: flex; }
  .about__stats  { grid-template-columns: 1fr 1fr; }
  .metodo__grid  { grid-template-columns: 1fr; }
  .careers__grid { grid-template-columns: 1fr; }
  .about__beliefs { grid-template-columns: 1fr; }
  .form__row     { grid-template-columns: 1fr; }
  .dialog__row   { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .section       { padding: 60px 0; }
  .hero          { padding: 100px 0 80px; }
  .dialog__inner { padding: 32px 22px 24px; }
  .hero__scroll  { display: none; }
}

@media (max-width: 480px) {
  .dropzone__text strong,
  .dropzone__text span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg     { animation: none; }
  .about__phase:hover   { transform: none; }
  .principle:hover      { transform: none; }
  .service:hover        { transform: none; }
  .career:hover         { transform: none; }
}

/* Belief grid: 2x2 di card con topic-label + statement */
.about__beliefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.belief {
  padding: 26px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.belief:hover {
  border-color: var(--c-accent-deep);
  transform: translateY(-2px);
}

.belief__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}

.belief__statement {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text);
  margin: 0;
}