/* ===================================================================
   DAVIDE VICENZI — DESIGN SYSTEM
   Palette: verde scuro / petrolio (ingegneristico) + accento ottone
   Type: IBM Plex Serif (display) / IBM Plex Sans (body) / IBM Plex Mono (dati)
   =================================================================== */

:root{
  --font-display:'IBM Plex Serif', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  /* light theme */
  --bg:#F6F5F0;
  --surface:#FFFFFF;
  --surface-alt:#EFEEE6;
  --ink:#14201C;
  --ink-muted:#566962;
  --primary:#0E3F35;
  --primary-strong:#0A2E27;
  --primary-tint:#E2E9E4;
  --accent:#B4823C;
  --line:#DCDACF;
  --btn-primary-bg:#0E3F35;
  --btn-primary-text:#F6F5F0;
  --shadow:0 12px 32px -16px rgba(14,40,30,0.18);

  --maxw:1200px;
  --radius:2px;
}

[data-theme="dark"]{
  --bg:#0C1411;
  --surface:#121C18;
  --surface-alt:#162420;
  --ink:#EAEEEA;
  --ink-muted:#9AACA3;
  --primary:#56B498;
  --primary-strong:#7CC9AF;
  --primary-tint:#16302A;
  --accent:#DBA862;
  --line:#22332D;
  --btn-primary-bg:#56B498;
  --btn-primary-text:#0B1714;
  --shadow:0 16px 40px -18px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:500;
  letter-spacing:-.01em;
}

h1{font-size:clamp(2.4rem,6vw,4.1rem); line-height:1.05;}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem); line-height:1.15;}
h3.subhead{
  font-size:1.05rem;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-muted);
  margin:3rem 0 1.4rem;
  font-weight:500;
}
h4{font-size:1.12rem; margin-bottom:.4em;}

p{margin:0 0 1em;}
a{color:inherit;}

img,svg{display:block; max-width:100%;}

ul{margin:0; padding:0;}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--primary); color:#fff; padding:.6em 1em; z-index:200;
}
.skip-link:focus{left:1rem; top:1rem;}

:focus-visible{outline:2px solid var(--primary); outline-offset:3px;}

/* ============ INLINE LINK (testo corpo) ============ */
.inline-link{
  color:var(--primary);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  transition:border-color .2s;
}
.inline-link:hover{border-color:var(--primary);}
[data-theme="dark"] .inline-link{color:var(--primary-strong);}

/* ============ CLIENT NAME LINK ============ */
.client-name-link{
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--line);
  transition:border-color .2s, color .2s;
}
.client-name-link:hover{color:var(--primary); border-color:var(--primary);}

/* ============ LAYOUT HELPERS ============ */
.section-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.6rem;
}
.section{padding:6.5rem 0; scroll-margin-top:74px;}
.section-narrow .section-inner{max-width:880px;}

.two-col{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:3.5rem;
  align-items:start;
}

.prose{max-width:42em;}
.prose p{font-size:1.04rem;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--primary);
  display:flex; align-items:center; gap:.6em;
  margin:0 0 1em;
}
[data-theme="dark"] .eyebrow{color:var(--primary-strong);}

.eyebrow-num{
  font-weight:500;
  border:1px solid var(--line);
  padding:.15em .5em;
  border-radius:var(--radius);
  color:var(--ink-muted);
}

.section-head{margin-bottom:2.6rem; max-width:46em;}
.section-lead{color:var(--ink-muted); font-size:1.05rem; max-width:42em;}

.muted-note{color:var(--ink-muted); font-size:.95rem; max-width:46em; margin-top:-.6rem; margin-bottom:1.8rem;}

.tag-mono{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-muted);
  display:inline-block;
  margin:.2em 0 .8em;
}

/* ============ HEADER / NAV ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.6rem;
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo + nav-avatar pill */
.logo-area{
  display:flex; align-items:center; gap:.55rem;
}
.logo{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:1.05rem;
  text-decoration:none;
  letter-spacing:.02em;
}
.logo-dot{color:var(--accent);}

/* Avatar miniatura nella nav (nascosto di default, appare dopo hero) */
.nav-avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--surface-alt);
  border:1.5px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  opacity:0;
  transform:scale(0.6);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.nav-avatar.is-visible{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.nav-avatar img{
  width:100%; height:100%; object-fit:cover;
}
.nav-avatar-initials{
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:500;
  color:var(--ink-muted);
  letter-spacing:.04em;
}

.main-nav{display:flex; gap:1.9rem;}
.main-nav a{
  font-size:.92rem;
  text-decoration:none;
  color:var(--ink-muted);
  position:relative;
  padding:.3em 0;
}
.main-nav a:hover, .main-nav a.active{color:var(--ink);}
.main-nav a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--primary);
}

.nav-actions{display:flex; align-items:center; gap:.4rem;}

/* Bottone "Contattami" nella nav (visibile su desktop, hidden su mobile < 680) */
.btn-nav-cta{
  font-size:.82rem;
  padding:.55em 1em;
}

.icon-btn{
  background:none; border:none; cursor:pointer;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); border-radius:var(--radius);
}
.icon-btn:hover{background:var(--surface-alt);}
.icon{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

.icon-moon{display:none;}
[data-theme="dark"] .icon-sun{display:none;}
[data-theme="dark"] .icon-moon{display:block;}

.icon-close{display:none;}
.nav-toggle{display:none;}
.nav-toggle.is-open .icon-menu{display:none;}
.nav-toggle.is-open .icon-close{display:block;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body);
  font-size:.96rem; font-weight:500;
  padding:.85em 1.5em;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--btn-primary-bg); color:var(--btn-primary-text);}
.btn-primary:hover{background:var(--primary-strong); color:var(--btn-primary-text);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--surface-alt);}
.btn-sm{padding:.5em 1em; font-size:.86rem;}
.icon-arrow{width:16px; height:16px;}

/* ============ HERO ============ */
.hero{
  padding:9.5rem 0 5rem;
  min-height:88vh;
  display:flex; align-items:center;
  scroll-margin-top:66px;
}
.hero-grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.6rem;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2rem;
  align-items:center;
}
.hero-lead{font-size:1.15rem; color:var(--ink-muted); max-width:36em; margin:1.3rem 0 2.2rem;}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap;}

/* Avatar placeholder nella Hero */
.hero-avatar-wrap{
  margin-bottom:1.6rem;
}
.hero-avatar{
  width:120px; height:120px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--line);
}
.hero-avatar img{
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
}

.hero-diagram{display:flex; justify-content:center;}
.diagram-svg{width:100%; max-width:340px;}
.diagram-lines path{
  fill:none; stroke:var(--primary); stroke-width:1.4; opacity:.35;
}
.diagram-nodes circle{fill:var(--primary); opacity:.55;}
.diagram-box{
  fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.65;
}

/* ============ INGRESSO HERO ============ */
.reveal{opacity:1; transform:none;}

@media (prefers-reduced-motion:no-preference){
  .hero-content{animation:heroIn .7s ease both;}
  .hero-diagram{animation:heroIn .9s ease .12s both;}
}
@keyframes heroIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

/* ============ CHI SONO / SPEC SHEET ============ */
.spec-sheet{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.spec-sheet-head{
  background:var(--primary-strong);
  color:#F2F4F1;
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.8em 1.1em;
}
.fact-list{margin:0;}
.fact-row{
  display:grid; grid-template-columns:34% 66%;
  gap:1em;
  padding:.85em 1.1em;
  border-bottom:1px solid var(--line);
}
.fact-row:last-child{border-bottom:none;}
.fact-row dt{
  font-family:var(--font-mono);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-muted);
}
.fact-row dd{margin:0; font-size:.94rem;}

/* ============ STUDI: EDU + CERT CARDS ============ */
.edu-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
  margin-bottom:1rem;
}
.edu-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem;
}
.edu-card-top{display:flex; justify-content:space-between; align-items:baseline; gap:1em;}
.edu-card-org{
  font-family:var(--font-mono); font-size:.85rem; color:var(--primary);
  margin-bottom:1em; text-transform:uppercase; letter-spacing:.04em;
}

.cert-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.cert-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  display:flex; flex-direction:column;
}
.cert-card-head{display:flex; align-items:flex-start; gap:.7em; margin-bottom:.2em;}
.cert-card-head .icon{flex-shrink:0; margin-top:.2em; color:var(--primary); width:20px; height:20px;}
.cert-card h4{font-size:1rem; margin-bottom:0;}
.cert-card ul{margin:.4em 0 1em; padding-left:1.1em;}
.cert-card li{font-size:.92rem; margin-bottom:.35em; color:var(--ink);}
.cert-value{
  margin-top:auto;
  font-size:.88rem;
  color:var(--ink-muted);
  border-top:1px solid var(--line);
  padding-top:.8em;
}

/* ============ TIMELINE ============ */
.timeline{
  position:relative;
  padding-left:2.2rem;
  border-left:2px solid var(--line);
  margin-bottom:1rem;
}
.timeline-item{position:relative; padding-bottom:2.1rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:'';
  position:absolute; left:-2.55rem; top:.35rem;
  width:10px; height:10px;
  background:var(--bg);
  border:2px solid var(--primary);
  border-radius:50%;
}
.timeline-item h4{font-size:1.03rem;}
.timeline-item p{color:var(--ink-muted); max-width:42em; font-size:.96rem;}

/* ============ AREE CONSULENZIALI: CASE CARDS ============ */
.case-grid{display:grid; gap:1.6rem;}
.case-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.case-card-featured{border-color:var(--accent);}
.case-card-head{display:flex; gap:.85em; align-items:flex-start; margin-bottom:1.1rem;}
.case-card-head .icon{color:var(--primary); width:22px; height:22px; flex-shrink:0; margin-top:.25em;}
.case-tag{display:flex; align-items:center; gap:.6em; margin:0 0 .3em; flex-wrap:wrap;}
.case-tag-num{
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent);
}
.case-badge{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  background:var(--primary-tint); color:var(--primary-strong);
  border:1px solid var(--line); border-radius:999px; padding:.2em .6em;
}
.case-card-head h4{margin-bottom:0;}
.case-promise{
  font-size:1.05rem; font-weight:500; color:var(--ink); line-height:1.5;
  margin:0 0 1.4rem; padding-left:.9em; border-left:3px solid var(--accent);
}
.fact-list-case .fact-row{grid-template-columns:22% 78%;}
.fact-list dd a{color:var(--primary); text-decoration:none; border-bottom:1px solid var(--line);}
.fact-list dd a:hover{border-color:var(--primary);}

/* ============ CON CHI LAVORO: CLIENT CARDS ============ */
.client-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;}
.client-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem;
}
.client-card-top{display:flex; gap:1em; align-items:flex-start; margin-bottom:1.3rem;}
.client-mark{
  font-family:var(--font-mono); font-weight:500; font-size:.85rem;
  background:var(--primary-tint); color:var(--primary-strong);
  width:46px; height:46px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
}
[data-theme="dark"] .client-mark{color:var(--primary-strong);}
.client-mark-alt{background:var(--surface-alt); color:var(--ink-muted);}
.client-sector{font-size:.9rem; color:var(--ink-muted); margin:0;}
.client-note{font-size:.85rem; color:var(--ink-muted); font-style:italic; margin:1em 0 0;}

/* ============ CONTATTI: MODULO FORMSPREE ============ */
.contact-form{display:flex; flex-direction:column; gap:1.1rem; max-width:38em;}
.form-row-2col{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.form-field{display:flex; flex-direction:column; gap:.4em;}
.form-field label{
  font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-muted);
}
.form-field input, .form-field textarea{
  font-family:var(--font-body); font-size:.97rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.75em .9em; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{
  outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);
}
.contact-form .btn{align-self:flex-start; margin-top:.3rem;}
.contact-form .btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.form-note{font-size:.85rem; color:var(--ink-muted); margin:.6rem 0 0; max-width:34em;}

/* Feedback invio form */
.form-feedback{
  font-size:.92rem;
  padding:.7em 1em;
  border-radius:var(--radius);
  display:none;
}
.form-feedback.success{
  display:block;
  background:var(--primary-tint);
  color:var(--primary-strong);
  border:1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.form-feedback.error{
  display:block;
  background:#FFF0F0;
  color:#8B2020;
  border:1px solid #F5C6C6;
}
[data-theme="dark"] .form-feedback.error{
  background:#2C1010;
  color:#F5A0A0;
  border-color:#5C2020;
}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--line); padding:2.2rem 0;}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--ink-muted);
}
.footer-inner a{text-decoration:none; color:var(--ink-muted);}
.footer-inner a:hover{color:var(--ink);}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .two-col{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-diagram{order:-1; max-width:220px; margin:0 auto 1rem;}
  .cert-grid{grid-template-columns:1fr 1fr;}
  .client-grid{grid-template-columns:1fr;}
}

@media (max-width:680px){
  /* Nascondi il bottone "Contattami" nella nav su mobile (c'è già nel menu) */
  .btn-nav-cta{display:none;}

  .main-nav{
    position:absolute; top:66px; left:0; right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.is-open{max-height:440px;}
  .main-nav a{padding:1em 1.6rem; border-bottom:1px solid var(--line); width:100%;}

  /* Link "Contatti" evidenziato nel menu mobile */
  .main-nav a[href="#contatti"]{
    color:var(--primary);
    font-weight:500;
  }
  [data-theme="dark"] .main-nav a[href="#contatti"]{
    color:var(--primary-strong);
  }

  .nav-toggle{display:flex;}
  .nav-toggle .icon{width:21px; height:21px;}

  .section{padding:4.5rem 0;}
  .hero{padding:8rem 0 3.5rem; min-height:auto;}
  .hero-avatar{width:96px; height:96px;}
  .hero-avatar-initials{font-size:1.7rem;}
  .edu-grid{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:1fr;}
  .fact-row{grid-template-columns:1fr; gap:.2em;}
  .fact-list-case .fact-row{grid-template-columns:1fr;}
  .form-row-2col{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column; gap:.6rem; text-align:center;}
}