/* ==========================================================
   Giovanni Viani — giovanniviani.it
   Design: da sketch Claude Design ("Landing 1b")
   Dark navy + blu elettrico + verde. Font: Space Grotesk
   (self-hosted, estratto dal file di design — zero richieste esterne)
   ========================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fondo: #0a0e1a;
  --card: #111a2e;
  --blu: #2e6bff;
  --blu-chiaro: #5b8dff;
  --verde: #8fd14f;
  --testo: #eef2f9;
  --testo-70: rgba(238,242,249,.7);
  --testo-65: rgba(238,242,249,.65);
  --bordo: rgba(238,242,249,.1);
  --bordo-25: rgba(238,242,249,.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fondo);
  color: var(--testo);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--blu-chiaro); }
a:hover { color: #8fb0ff; }
a:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; }

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 52px;
  border-bottom: 1px solid var(--bordo);
  flex-wrap: wrap;
  gap: 14px;
}
.logo { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.logo-mark { color: var(--blu); }
.nav nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 500; flex-wrap: wrap; }
.nav nav a { text-decoration: none; color: rgba(238,242,249,.75); }
.nav nav a:hover { color: var(--testo); }

.btn { text-decoration: none; border-radius: 10px; font-weight: 600; display: inline-block; }
.btn-nav { background: var(--blu); color: #fff !important; padding: 11px 22px; border-radius: 8px; }
.btn-nav:hover { background: #2458d6; }
.btn-primario { background: var(--blu); color: #fff; padding: 17px 32px; font-weight: 700; font-size: 17px; }
.btn-primario:hover { background: #2458d6; color: #fff; }
.btn-secondario { border: 1px solid var(--bordo-25); color: var(--testo); padding: 17px 32px; font-size: 17px; }
.btn-secondario:hover { border-color: var(--testo-70); color: var(--testo); }
.btn-scuro { background: var(--fondo); color: #fff; padding: 15px 30px; font-weight: 700; font-size: 16px; }
.btn-scuro:hover { background: #050810; color: #fff; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 76px 52px 72px;
  position: relative;
}
h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.accent { color: var(--blu); }
.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--testo-70);
  margin-bottom: 36px;
  max-width: 50ch;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual { position: relative; justify-self: start; min-height: 440px; width: 100%; max-width: 440px; }
.barre {
  position: absolute; right: -28px; bottom: -20px;
  display: flex; align-items: flex-end; gap: 12px; opacity: .35;
}
.barra { width: 38px; border-radius: 5px 5px 0 0; background: var(--blu); }
.b1 { height: 100px; } .b2 { height: 160px; }
.b3 { height: 125px; background: var(--blu-chiaro); }
.b4 { height: 215px; background: var(--verde); }
.quadro {
  position: absolute; left: 20px; top: 20px;
  width: 400px; height: 400px; max-width: 100%;
  background: var(--blu); border-radius: 18px; opacity: .55;
}
.hero-foto {
  width: 400px; height: 400px; max-width: 100%;
  position: relative; display: block; object-fit: cover;
  background: #fff; border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  outline: 1px solid rgba(238,242,249,.15); outline-offset: -1px;
}
.badge {
  position: absolute; left: -24px; bottom: 28px;
  background: var(--card); border: 1px solid rgba(238,242,249,.12);
  border-radius: 12px; padding: 16px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.badge-nome { font-size: 17px; font-weight: 700; }
.badge-sub { font-size: 13.5px; color: rgba(238,242,249,.6); }

/* ---------- Sezioni ---------- */
.sezione { padding: 80px 52px; scroll-margin-top: 24px; }
.sezione-scura { background: var(--card); }
.sezione-scura .card { background: var(--fondo); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde); margin-bottom: 14px;
}
h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 48px; max-width: 22ch;
}
h3 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }

/* ---------- Cards ---------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 32px 28px;
}
.card p { font-size: 15px; line-height: 1.6; color: var(--testo-70); }
.card p + p { margin-top: 12px; }

.card-caso { padding: 0; overflow: hidden; }
.card-caso img { width: 100%; height: 220px; object-fit: cover; display: block; background: #1a2540; }
.card-corpo { padding: 20px 22px; }
.card-caso h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.card-caso p { font-size: 14px; line-height: 1.5; color: var(--testo-65); }

/* ---------- Processo ---------- */
#processo { padding-bottom: 0; }
.processo-griglia {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}
.passo { padding: 34px 26px; border-right: 1px solid var(--bordo); }
.passo:last-child { border-right: none; }
.passo-num { font-size: 13px; color: var(--verde); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.passo p:not(.passo-num) { font-size: 15px; line-height: 1.5; color: rgba(238,242,249,.75); }

/* ---------- Settori ---------- */
.settori-lista {
  font-size: 16px;
  line-height: 2;
  color: var(--testo-70);
  max-width: 75ch;
}

/* ---------- Chi sono ---------- */
.chi-sono {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.chi-sono-foto {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 16px;
}
.chi-sono-foto img {
  width: 100%; height: 320px; object-fit: cover;
  display: block; border-radius: 12px; background: #1a2540;
}
.chi-sono h2 { margin-bottom: 22px; }
.chi-sono-testo {
  font-size: 17px; line-height: 1.65;
  color: rgba(238,242,249,.75);
  margin-bottom: 32px; max-width: 52ch;
}
.chi-sono-contatti { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.chi-sono-contatti a { text-decoration: none; }
.sep { color: rgba(238,242,249,.3); }

/* ---------- FAQ ---------- */
details {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  margin-bottom: 12px;
}
summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 15.5px;
  list-style-position: inside;
}
summary:hover { color: var(--blu-chiaro); }
details p { padding: 0 22px 18px; color: var(--testo-70); font-size: 15px; line-height: 1.6; }

/* ---------- CTA finale ---------- */
.cta-banda {
  display: flex; align-items: center; justify-content: space-between;
  padding: 44px 52px; background: var(--blu);
  flex-wrap: wrap; gap: 20px;
}
.cta-testo { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 34px 52px;
  border-top: 1px solid var(--bordo);
  font-size: 13.5px;
  color: rgba(238,242,249,.55);
}
.site-footer a { color: rgba(238,242,249,.75); }
.footer-note { margin-top: 6px; color: rgba(238,242,249,.4); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .processo-griglia { grid-template-columns: repeat(2, 1fr); }
  .passo { border-bottom: 1px solid var(--bordo); }
  .cards-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav, .sezione, .hero, .cta-banda, .site-footer { padding-left: 22px; padding-right: 22px; }
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .hero-visual { justify-self: center; min-height: auto; margin-top: 20px; }
  .barre { display: none; }
  .badge { left: 8px; }
  .cards-3 { grid-template-columns: 1fr; }
  .processo-griglia { grid-template-columns: 1fr; }
  .passo { border-right: none; }
  .chi-sono { grid-template-columns: 1fr; }
}