/* =====================================================================
   Fractional Manager Italia: landing
   Tokens → Reset → Primitives → Components → Sections → Responsive
   ===================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────── */
:root{
  --bg:        #FFFFFF;
  --bg-2:      #F6F7FA;
  --bg-3:      #EEF0F4;

  --ink:       #1E2A4A;
  --ink-2:     #2C3858;
  --ink-3:     #4A5575;
  --mute:      #6B7490;
  --mute-2:    #99A0B5;

  --line:      #E4E7EE;
  --line-soft: #EFF1F5;

  --accent:     #E89B2A;
  --accent-2:   #C8821C;
  --accent-3:   #A0680F;
  --accent-soft:#FFE9C2;
  --accent-tint:#FFF6E5;
  --accent-deep:#7A4F0A;

  --wa:      #25D366;
  --wa-2:    #1FB855;
  --wa-soft: #E8F9EE;

  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max:    1180px;
  --gut:    clamp(20px, 4vw, 44px);
  --rad:    12px;
  --rad-lg: 18px;

  --shadow-xs: 0 1px 2px rgba(30,42,74,.04);
  --shadow-sm: 0 2px 6px rgba(30,42,74,.05), 0 1px 2px rgba(30,42,74,.04);
  --shadow-md: 0 8px 24px -10px rgba(30,42,74,.12), 0 2px 6px -2px rgba(30,42,74,.04);
  --shadow-lg: 0 24px 60px -20px rgba(30,42,74,.18), 0 8px 20px -8px rgba(30,42,74,.08);

  --header-h: 68px;
}
@media (max-width:560px){ :root{ --header-h:60px } }

/* ── Reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--header-h);
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:#fff}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  html{ scroll-behavior:auto }
}

/* ── Primitives ────────────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
}

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.022em;
}
h1{
  font-size:clamp(34px, 5.4vw, 60px);
  line-height:1.04;
  letter-spacing:-.032em;
}
h2{
  font-size:clamp(26px, 3.4vw, 38px);
  line-height:1.12;
  letter-spacing:-.026em;
}
h3{
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.014em;
}
p{ color:var(--ink-3); line-height:1.65 }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--accent-3);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

.sec{ padding:clamp(64px, 9vw, 112px) 0; position:relative }
.sec + .sec{ border-top:1px solid var(--line) }
.sec--tint{ background:var(--bg-2) }
.sec--tint + .sec{ border-top:none }

.sec-head{ max-width:720px; margin-bottom:clamp(36px, 5vw, 56px) }
.sec-head .eyebrow{ margin-bottom:18px }
.sec-head h2{ margin-bottom:16px }
.sec-head p{
  font-size:clamp(15.5px, 1.4vw, 17.5px);
  color:var(--mute);
  line-height:1.55;
  max-width:64ch;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1;
  border-radius:10px;
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:#fff;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-xs);
  white-space:nowrap;
  min-height:44px; /* touch */
}
.btn:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.btn .ico{ width:16px; height:16px; flex-shrink:0 }

.btn--primary{ background:var(--ink); border-color:var(--ink); color:#fff }
.btn--primary:hover{ background:#0F1A33; border-color:#0F1A33 }

.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--ink) }
.btn--accent:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#fff }

.btn--ghost{
  background:#fff;
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow-xs);
}
.btn--ghost:hover{ border-color:var(--ink) }

.btn--wa{ background:var(--wa); border-color:var(--wa); color:#fff }
.btn--wa:hover{ background:var(--wa-2); border-color:var(--wa-2) }

.btn--lg{ padding:14px 22px; font-size:14.5px; border-radius:11px }

/* ── Header ────────────────────────────────────────────────────────── */
header.site{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
header.site.is-hidden{ transform:translateY(-100%) }
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px var(--gut);
  max-width:var(--max);
  margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink) }
.brand-mk{
  width:34px; height:34px;
  border-radius:8px;
  background:url('../logo.png') center/100% 100% no-repeat;
  flex-shrink:0;
}
.brand-name{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name b{
  font-weight:700; font-size:15px; letter-spacing:-.014em;
}
.brand-name i{
  font-style:normal; font-weight:500; font-size:11px;
  color:var(--mute); letter-spacing:.02em; margin-top:2px;
}
.nav-links{ display:flex; gap:28px }
.nav-links a{
  font-size:14px; font-weight:500; color:var(--ink-3);
  transition:color .2s ease; padding:6px 0;
}
.nav-links a:hover{ color:var(--accent-2) }
.nav-cta{ display:flex; align-items:center; gap:10px }
@media (max-width:880px){ .nav-links{display:none} .brand-name i{display:none} }
@media (max-width:480px){ .nav-cta .btn--ghost,.nav-cta .btn--wa span{display:none} }
@media (max-width:480px){ .nav-cta .btn--wa{ padding:11px 14px } }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{
  padding:clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
  position:relative;
  overflow:hidden;
}
.hero::before{
  /* soft accent wash, top-right */
  content:"";
  position:absolute;
  top:-160px; right:-160px;
  width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(232,155,42,.18), transparent 72%);
  pointer-events:none;
  z-index:0;
}
.hero::after{
  /* dotted grid texture, faint */
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(30,42,74,.05) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:0 0;
  mask-image:radial-gradient(circle at 80% 30%, black 0%, transparent 60%);
  -webkit-mask-image:radial-gradient(circle at 80% 30%, black 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1 }

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
@media (min-width:980px){
  .hero-grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:72px;
  }
}

.hero h1{ max-width:18ch; margin-bottom:22px }
.hero h1 .ac{
  background:linear-gradient(180deg, transparent 70%, var(--accent-soft) 70%, var(--accent-soft) 96%, transparent 96%);
  padding:0 4px;
  border-radius:2px;
  color:var(--ink);
}
.hero .lede{
  max-width:560px;
  font-size:clamp(16.5px, 1.5vw, 18.5px);
  color:var(--mute);
  line-height:1.6;
  margin-bottom:30px;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.hero-quiet{
  margin-top:18px;
  font-size:13.5px;
  color:var(--mute);
}
.hero-quiet a{
  color:var(--ink); font-weight:600;
  border-bottom:1px solid var(--line); padding-bottom:1px;
  transition:border-color .2s, color .2s;
}
.hero-quiet a:hover{ border-bottom-color:var(--accent); color:var(--accent-3) }

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:24px 32px;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero-trust div{ min-width:0 }
.hero-trust .v{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--ink);
  line-height:1;
  display:flex; align-items:baseline; gap:1px;
}
.hero-trust .v sup{
  font-size:.5em;
  color:var(--accent-2);
  font-weight:700;
  vertical-align:top;
  position:relative; top:-.5em;
  margin-left:1px;
}
.hero-trust .l{
  font-size:12.5px;
  color:var(--mute);
  margin-top:4px;
  letter-spacing:0;
}

/* Hero panel: refined "match" preview card */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.panel::before{
  /* outer tilt accent */
  content:"";
  position:absolute;
  inset:auto -28px -22px auto;
  width:140px; height:140px;
  background:radial-gradient(closest-side, rgba(232,155,42,.22), transparent 70%);
  pointer-events:none;
  z-index:0;
}
.panel-top{
  background:linear-gradient(135deg, #1E2A4A 0%, #2A3760 100%);
  color:#fff;
  padding:22px 26px;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:1;
}
.panel-top::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:64px; height:3px;
  background:var(--accent);
}
.panel-top .mk{
  width:42px; height:42px;
  background:url('../logo.png') center/100% 100% no-repeat;
  border-radius:8px;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.18);
}
.panel-top b{
  display:block;
  font-size:15.5px; font-weight:700;
  color:#fff; letter-spacing:-.014em; line-height:1.2;
}
.panel-top span{
  display:block;
  font-size:12px; color:rgba(255,255,255,.65);
  margin-top:3px; font-weight:500; letter-spacing:.01em;
}

.panel-body{ position:relative; z-index:1 }
.panel-section{ padding:22px 26px }
.panel-section + .panel-section{ border-top:1px solid var(--line-soft) }
.panel-section h4{
  font-family:var(--mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.panel-section h4::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* "Composizione network": verified, symmetric 3×2 grid */
.panel-section h4 em{
  font-style:normal;
  font-weight:500;
  color:var(--mute-2);
  letter-spacing:.06em;
}
.comp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 14px;
}
.comp-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  transition:border-color .2s, background .2s;
}
.comp-row:hover{ border-color:var(--accent-soft); background:#fff }
.comp-row b{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.04em;
}
.comp-row span{
  font-size:16px;
  font-weight:700;
  color:var(--accent-3);
  letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;
}
.comp-note{
  margin-top:12px;
  font-size:12px;
  color:var(--mute);
  letter-spacing:.005em;
}

.panel-verticals{ background:var(--accent-tint) }
.panel-verticals h4{ color:var(--accent-deep) }
.panel-verticals h4::after{ background:rgba(160,104,15,.2) }
.panel-vert-list{
  display:flex; flex-wrap:wrap; gap:6px;
}
.panel-vert-list span{
  font-size:12px; font-weight:600;
  color:var(--accent-deep);
  padding:5px 10px;
  background:#fff;
  border:1px solid var(--accent-soft);
  border-radius:6px;
  letter-spacing:-.005em;
}

.panel-foot{
  font-size:13px;
  color:var(--mute);
  line-height:1.55;
  background:var(--bg-2);
}
.panel-foot b{ color:var(--ink); font-weight:600 }

/* ── "Cos'è" ──────────────────────────────────────────────────────── */
.cose-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:820px){
  .cose-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px;
    align-items:stretch;
  }
}
.cose-grid .lhs h2{ margin-bottom:24px }
.cose-grid .lhs .eyebrow{ margin-bottom:18px }
.cose-grid .lhs{
  display:flex;
  flex-direction:column;
}
.cose-photo{
  border-radius:var(--rad-lg);
  overflow:hidden;
  margin:24px 0 0;
  background:var(--bg-3);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  flex:1;
  min-height:280px;
}
.cose-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
}
@media (max-width:819px){
  .cose-photo{ flex:none; min-height:0 }
  .cose-photo img{ aspect-ratio:4 / 3; height:auto }
}
.def-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:6px 8px;
  box-shadow:var(--shadow-sm);
  margin-top:24px;
}
.def-card > div{
  padding:14px 14px;
  border-radius:8px;
  display:grid;
  grid-template-columns:90px 1fr;
  gap:14px;
  align-items:start;
}
.def-card > div + div{ border-top:1px solid var(--line-soft) }
.def-card dt{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-3);
  padding-top:3px;
  position:relative;
  padding-left:14px;
}
.def-card dt::before{
  content:"";
  position:absolute;
  left:0; top:9px;
  width:8px; height:1.5px;
  background:var(--accent);
  border-radius:1px;
}
.def-card dd{
  font-size:14.5px;
  color:var(--ink-3);
  line-height:1.55;
}
.def-card dd b{ color:var(--ink); font-weight:600 }
@media (max-width:520px){
  .def-card > div{ grid-template-columns:1fr; gap:6px }
  .def-card dt{ padding-top:0 }
  .def-card dt::before{ top:8px }
}
.cose-body p{
  font-size:17px;
  margin-bottom:20px;
  color:var(--ink-3);
  line-height:1.7;
}
.cose-body p:last-child{ margin-bottom:0 }
.cose-body strong{
  color:var(--ink);
  font-weight:600;
  background:linear-gradient(transparent 62%, var(--accent-soft) 62%);
  padding:0 2px;
}

/* ── Vantaggi ─────────────────────────────────────────────────────── */
.vant-list{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:680px){ .vant-list{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){
  .vant-list{ grid-template-columns:repeat(4, 1fr); gap:18px }
}
.vant-item{
  padding:28px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  transition:border-color .25s, transform .25s, box-shadow .25s;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.vant-item::after{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.vant-item:hover{ border-color:var(--accent-soft); box-shadow:var(--shadow-sm); transform:translateY(-2px) }
.vant-item:hover::after{ transform:scaleX(1) }
.vant-ic{
  width:44px; height:44px;
  border-radius:11px;
  background:var(--accent-tint);
  color:var(--accent-3);
  display:flex; align-items:center; justify-content:center;
}
.vant-ic svg{ width:22px; height:22px }
.vant-item h3{ font-size:17px; letter-spacing:-.01em }
.vant-item p{ font-size:14.5px; color:var(--mute); line-height:1.55 }

/* ── Roles (Sei figure dirigenziali) ──────────────────────────────── */
.roles-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){ .roles-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width:1000px){ .roles-grid{ grid-template-columns:repeat(3, 1fr); gap:16px } }

.role-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.role-card:hover{
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.role-card-head{
  display:flex; align-items:flex-start; gap:14px;
}
.role-ic{
  width:46px; height:46px;
  border-radius:11px;
  background:linear-gradient(160deg, var(--accent-tint) 0%, #FFFBF1 100%);
  color:var(--accent-3);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:1px solid var(--accent-soft);
}
.role-ic svg{ width:24px; height:24px }
.role-meta{ flex:1; min-width:0 }
.role-tag{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--accent-3);
  text-transform:uppercase;
  display:inline-block;
  margin-bottom:4px;
}
.role-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--ink);
  line-height:1.25;
}
.role-name span{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--mute);
  margin-top:3px;
  letter-spacing:0;
}
.role-list{
  list-style:none;
  display:flex; flex-direction:column;
  gap:0;
  padding-top:8px;
  border-top:1px solid var(--line-soft);
}
.role-list li{
  font-size:13.5px;
  color:var(--ink-3);
  padding:8px 0 8px 18px;
  position:relative;
  line-height:1.5;
}
.role-list li + li{ border-top:1px solid var(--line-soft) }
.role-list li::before{
  content:"";
  position:absolute;
  left:0; top:15px;
  width:8px; height:1.5px;
  background:var(--accent);
  border-radius:1px;
}
.role-list li b{
  color:var(--ink);
  font-weight:600;
  background:linear-gradient(transparent 70%, rgba(232,155,42,.22) 70%);
  padding:0 1px;
}

/* ── Network (dark stats block) ───────────────────────────────────── */
.net-photo{
  border-radius:var(--rad-lg);
  overflow:hidden;
  margin-bottom:24px;
  background:var(--bg-3);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.net-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center 60%;
}
@media (max-width:680px){
  .net-photo img{ aspect-ratio:4 / 3 }
}
.net-block{
  background:linear-gradient(135deg, #1E2A4A 0%, #243160 100%);
  color:#fff;
  border-radius:var(--rad-lg);
  padding:clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  position:relative;
  overflow:hidden;
}
.net-block::before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width:340px; height:340px;
  background:radial-gradient(closest-side, rgba(232,155,42,.18), transparent 70%);
  pointer-events:none;
}
.stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px 24px;
  position:relative;
}
@media (min-width:780px){
  .stats{ grid-template-columns:repeat(4, 1fr); gap:24px }
}
.stat{ position:relative }
@media (min-width:780px){
  .stat:not(:first-child){ padding-left:24px }
  .stat:not(:first-child)::before{
    content:""; position:absolute;
    left:0; top:8px; bottom:8px;
    width:1px; background:rgba(255,255,255,.12);
  }
}
.stat .v{
  font-size:clamp(40px, 4.6vw, 52px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.95;
  margin-bottom:10px;
  color:#fff;
  display:flex; align-items:baseline; gap:1px;
}
.stat .v sup{
  font-size:.45em;
  color:var(--accent);
  font-weight:700;
  vertical-align:top;
  position:relative; top:-.7em;
  margin-left:2px;
}
.stat .l{
  font-size:13.5px;
  color:rgba(255,255,255,.7);
  line-height:1.4;
  max-width:14ch;
}

.roles-coverage{
  margin-top:clamp(32px, 4vw, 44px);
  padding-top:clamp(24px, 3vw, 32px);
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
}
.roles-coverage h3{
  font-family:var(--mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:20px;
}
.roles-coverage ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (min-width:540px){ .roles-coverage ul{grid-template-columns:repeat(3, 1fr)} }
@media (min-width:880px){ .roles-coverage ul{grid-template-columns:repeat(5, 1fr)} }
.roles-coverage li{
  font-size:13.5px;
  color:rgba(255,255,255,.92);
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px;
  transition:background .2s, border-color .2s;
}
.roles-coverage li:hover{ background:rgba(255,255,255,.08); border-color:rgba(232,155,42,.4) }
.roles-coverage li b{ font-weight:600 }
.roles-coverage li span{ color:var(--accent); font-size:13.5px; font-weight:600 }

/* ── Reasons (Cinque ragioni strutturali) ─────────────────────────── */
.reasons{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  counter-reset:reason;
}
.reason{
  padding:clamp(24px, 3vw, 36px) 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  position:relative;
}
.reason:last-child{ border-bottom:1px solid var(--line) }
@media (min-width:820px){
  .reason{
    grid-template-columns:96px 1fr 2fr;
    gap:40px;
    align-items:start;
  }
}
.reason-num{
  display:flex; align-items:flex-start; gap:10px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--mute);
  letter-spacing:.04em;
  font-weight:500;
  padding-top:2px;
}
.reason-num b{
  color:var(--accent-3);
  font-weight:600;
  font-size:18px;
  letter-spacing:-.02em;
  font-family:var(--sans);
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--accent-tint);
  border:1px solid var(--accent-soft);
  border-radius:8px;
  flex-shrink:0;
}
.reason-title{
  display:flex; align-items:flex-start; gap:14px;
}
.reason-title svg{
  flex-shrink:0; width:22px; height:22px;
  color:var(--accent-3);
  margin-top:2px;
}
.reason-title h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.018em;
}
.reason-body p{
  font-size:15.5px;
  color:var(--mute);
  max-width:64ch;
  line-height:1.6;
}
.reason:hover .reason-num b{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}

/* ── Gruppo ───────────────────────────────────────────────────────── */
.group{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:680px){ .group{ grid-template-columns:1fr 1fr } }
.group-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s;
  display:flex;
  flex-direction:column;
}
.group-item:hover{
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.group-plate{
  height:120px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
.group-plate::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(30,42,74,.04) 1px, transparent 1px);
  background-size:14px 14px;
  pointer-events:none;
}
.group-plate img{
  max-height:72px; max-width:80%;
  width:auto;
  object-fit:contain;
  position:relative; z-index:1;
}
.group-plate .wm{
  font-family:var(--sans);
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--ink);
  position:relative; z-index:1;
}
.group-plate .wm i{ font-style:normal; color:var(--accent); margin:0 1px }
.group-plate .wm em{
  font-style:normal; font-weight:500;
  color:var(--ink-3); letter-spacing:-.02em;
  margin-left:4px;
}
.group-body{
  padding:24px 26px 26px;
  display:flex; flex-direction:column;
  gap:8px;
  flex:1;
}
.group-body .g-tag{
  font-family:var(--mono);
  font-size:10.5px; font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent-3);
}
.group-body .g-name{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.2;
}
.group-body p{
  font-size:14.5px;
  color:var(--mute);
  line-height:1.6;
  margin-top:4px;
}

/* ── Sostenibilità + Documenti ────────────────────────────────────── */
.sec--docs{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--bg-2) 100%);
}
.sec--docs + .sec{ border-top:none }
.sec--docs + .sec--tint{ background:var(--bg-2) }

/* Sostenibilità: text + photo grid */
.sost-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:stretch;
  margin-bottom:clamp(40px, 5vw, 64px);
}
@media (min-width:900px){
  .sost-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px }
}
.sost-text .eyebrow{ margin-bottom:18px }
.sost-text h2{ margin-bottom:18px; max-width:18ch }
.sost-lede{
  font-size:clamp(15.5px, 1.4vw, 17.5px);
  color:var(--mute);
  margin-bottom:24px;
  max-width:54ch;
  line-height:1.6;
}
.sost-lede b{ color:var(--ink); font-weight:600 }
.sost-list{
  list-style:none;
  display:flex; flex-direction:column;
  gap:14px;
}
.sost-list li{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14.5px;
  color:var(--ink-3);
  line-height:1.55;
  transition:border-color .2s, transform .2s;
}
.sost-list li:hover{ border-color:var(--accent-soft); transform:translateX(2px) }
.sost-list li svg{
  width:22px; height:22px;
  color:var(--accent-3);
  margin-top:1px;
}
.sost-list li b{ color:var(--ink); font-weight:600 }

.sost-photo{
  position:relative;
  border-radius:var(--rad-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  background:var(--bg-3);
  min-height:320px;
}
.sost-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 40%;
}
@media (max-width:899px){
  .sost-photo{ min-height:0 }
  .sost-photo img{ aspect-ratio:4 / 3; height:auto }
}
.sec-head--center{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.sec-head--center .eyebrow{ justify-content:center }

/* Split head: title on the left, CTA card on the right (Network section) */
.sec-head--split{
  max-width:none;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:end;
}
@media (min-width:880px){
  .sec-head--split{ grid-template-columns:minmax(0,1fr) minmax(280px, 340px); gap:48px }
}
.sec-head-text{ max-width:720px }
.sec-head-text .eyebrow{ margin-bottom:18px }
.sec-head-text h2{ margin-bottom:16px }
.sec-head-text p{
  font-size:clamp(15.5px, 1.4vw, 17.5px);
  color:var(--mute);
  line-height:1.55;
  max-width:64ch;
}

.head-doc{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  box-shadow:var(--shadow-sm);
  transition:transform .25s, border-color .25s, box-shadow .25s;
  text-decoration:none; color:inherit;
}
.head-doc:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-md);
}
.head-doc:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.head-doc-ic{
  width:42px; height:42px;
  flex-shrink:0;
  border-radius:10px;
  background:var(--accent-tint);
  color:var(--accent-3);
  display:flex; align-items:center; justify-content:center;
}
.head-doc-ic svg{ width:22px; height:22px }
.head-doc-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.head-doc-tag{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-3);
}
.head-doc-title{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.3;
}
.head-doc-arrow{
  width:32px; height:32px;
  flex-shrink:0;
  border-radius:8px;
  background:var(--bg-2);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.head-doc-arrow svg{ width:16px; height:16px }
.head-doc:hover .head-doc-arrow{ background:var(--ink); color:#fff }

.docs{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  max-width:980px;
  margin:0 auto;
}
@media (min-width:760px){ .docs{ grid-template-columns:1fr 1fr; gap:26px } }

.doc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  overflow:hidden;
  color:inherit;
  box-shadow:var(--shadow-xs);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.doc-card:hover,
.doc-card:focus-visible{
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  outline:none;
}

/* PDF preview plate */
.doc-plate{
  position:relative;
  height:170px;
  background:
    radial-gradient(circle at 30% 20%, rgba(232,155,42,.10), transparent 55%),
    linear-gradient(135deg, #FFF6E5 0%, #FFE9C2 100%);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  overflow:hidden;
}
.doc-thumb{
  position:relative;
  width:108px;
  height:130px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow-md);
  padding:18px 12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .35s ease;
}
.doc-card:hover .doc-thumb{ transform:translateY(-2px) rotate(-1.5deg) }
.doc-thumb .doc-corner{
  position:absolute; top:0; right:0;
  width:22px; height:22px;
  background:linear-gradient(225deg, var(--bg-2) 0%, var(--bg-2) 50%, var(--line) 50%, var(--line) 52%, transparent 52%);
}
.doc-thumb .doc-badge{
  position:absolute;
  top:10px; left:-6px;
  background:#D93025;
  color:#fff;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  padding:4px 8px 4px 9px;
  border-radius:3px;
  box-shadow:0 2px 6px rgba(217,48,37,.35);
}
.doc-thumb .doc-badge::after{
  content:"";
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:0;
  border-top:4px solid #8E1A12;
  border-left:6px solid transparent;
}
.doc-thumb .doc-lines{
  display:flex; flex-direction:column; gap:5px;
}
.doc-thumb .doc-lines i{
  display:block;
  height:4px;
  border-radius:2px;
  background:var(--line);
}

/* Card body */
.doc-body{
  padding:22px 26px 24px;
  display:flex; flex-direction:column;
  gap:6px;
  flex:1;
}
.doc-body .doc-tag{
  font-family:var(--mono);
  font-size:10.5px; font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent-3);
}
.doc-body .doc-name{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.2;
  margin-top:2px;
}
.doc-body p{
  font-size:14.5px;
  color:var(--mute);
  line-height:1.6;
  margin-top:6px;
}
.doc-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  align-self:flex-start;
  padding:11px 18px;
  border-radius:10px;
  background:var(--ink);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  transition:background .2s, transform .2s;
}
.doc-cta svg{ width:16px; height:16px; color:#fff }
.doc-card:hover .doc-cta{ background:var(--accent-2) }

@media (max-width:560px){
  .doc-plate{ height:150px }
  .doc-thumb{ width:96px; height:118px; padding:16px 10px 12px }
  .doc-body{ padding:20px 20px 22px }
  .doc-body .doc-name{ font-size:17.5px }
  .doc-body p{ font-size:14px }
  .doc-cta{ width:100%; align-self:stretch }
}

/* ── Contact ──────────────────────────────────────────────────────── */
.contact{ background:linear-gradient(180deg, #fff 0, var(--bg-2) 100%) }
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:start;
}
@media (min-width:820px){
  .contact-grid{ grid-template-columns:1.15fr 1fr; gap:64px }
}
.contact h2{ max-width:18ch; margin-bottom:20px }
.contact .lede{
  font-size:17.5px;
  color:var(--mute);
  margin-bottom:32px;
  max-width:50ch;
  line-height:1.6;
}
.contact-actions{
  display:flex; gap:12px; flex-wrap:wrap;
}

.contact-bullets{
  list-style:none;
  display:flex; flex-direction:column;
  gap:10px;
  margin-top:24px;
}
.contact-bullets li{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  color:var(--ink-3);
  line-height:1.5;
}
.contact-bullets li svg{
  width:20px; height:20px;
  color:var(--accent-3);
}
.contact-bullets li b{ color:var(--ink); font-weight:600 }

/* Contact form */
.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  padding:clamp(22px, 3vw, 32px);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
}
.contact-form-head{
  display:flex; flex-direction:column;
  gap:6px;
  margin-bottom:4px;
}
.contact-form-tag{
  font-family:var(--mono);
  font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-3);
}
.contact-form-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--ink);
  line-height:1.25;
}

.cf-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:520px){
  .cf-grid{ grid-template-columns:1fr 1fr; gap:14px 16px }
}
.cf-field{ display:flex; flex-direction:column; gap:6px }
.cf-field--full{ grid-column:1 / -1 }
.cf-label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
  letter-spacing:-.005em;
}
.cf-label em{
  font-style:normal;
  color:var(--accent-3);
  margin-left:2px;
}
.cf-field input,
.cf-field textarea{
  font:inherit;
  font-size:14.5px;
  color:var(--ink);
  padding:11px 13px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:9px;
  outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
  width:100%;
  font-family:var(--sans);
  letter-spacing:-.005em;
  line-height:1.45;
  resize:vertical;
}
.cf-field textarea{
  min-height:108px;
}
.cf-field input:focus,
.cf-field textarea:focus{
  background:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,155,42,.18);
}
.cf-field input:user-invalid,
.cf-field textarea:user-invalid{
  border-color:#D93025;
}

.cf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--ink-3);
  line-height:1.5;
  cursor:pointer;
  padding:2px 0;
}
.cf-check input{
  appearance:none;
  -webkit-appearance:none;
  width:18px; height:18px;
  border:1.5px solid var(--line);
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  flex-shrink:0;
  margin-top:1px;
  position:relative;
  transition:border-color .15s, background .15s;
}
.cf-check input:checked{
  border-color:var(--ink);
  background:var(--ink);
}
.cf-check input:checked::after{
  content:"";
  position:absolute;
  left:5px; top:2px;
  width:5px; height:9px;
  border-right:1.8px solid #fff;
  border-bottom:1.8px solid #fff;
  transform:rotate(45deg);
}
.cf-check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cf-check a{
  color:var(--ink); font-weight:600;
  border-bottom:1px solid var(--line);
}
.cf-check a:hover{ border-bottom-color:var(--accent); color:var(--accent-3) }
.cf-check em{
  font-style:normal;
  color:var(--accent-3);
  margin-left:2px;
}

/* Honeypot: invisible to humans, visible to bots */
.cf-hp{
  position:absolute;
  left:-9999px; top:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.cf-submit{
  width:100%;
  margin-top:4px;
}
.cf-submit[disabled]{
  opacity:.7;
  cursor:wait;
}

.cf-status{
  font-size:13.5px;
  line-height:1.5;
  margin-top:2px;
  padding:0;
  color:var(--mute);
  min-height:1.2em;
  transition:color .2s;
}
.cf-status.is-error{ color:#D93025; font-weight:600 }
.cf-status.is-success{
  color:var(--ink);
  font-weight:600;
  padding:14px 16px;
  background:var(--accent-tint);
  border:1px solid var(--accent-soft);
  border-radius:9px;
}

.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  padding:8px;
  box-shadow:var(--shadow-sm);
}
.contact-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px;
  border-radius:10px;
  transition:background .2s;
}
.contact-row + .contact-row{ border-top:1px solid var(--line-soft) }
.contact-row:hover{ background:var(--bg-2) }
.contact-row .ic{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--ink);
}
.contact-row.is-call .ic{ background:var(--accent-tint); color:var(--accent-3) }
.contact-row.is-cal .ic{ background:var(--accent-tint); color:var(--accent-3) }
.contact-row.is-wa .ic{ background:var(--wa-soft); color:var(--wa-2) }
.contact-row .ic svg{ width:18px; height:18px }
.contact-row .body{ min-width:0; flex:1 }
.contact-row .lbl{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:3px;
}
.contact-row .val{
  font-size:15.5px;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.005em;
  word-break:break-word;
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer.site{
  border-top:1px solid var(--line);
  padding:32px 0 28px;
  font-size:13px;
  color:var(--mute);
  background:#fff;
}
.foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px 28px;
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
  align-items:center;
}
.foot-brand{ display:flex; align-items:center; gap:10px }
.foot-brand .mk{
  width:22px; height:22px;
  border-radius:5px;
  background:url('../logo.png') center/100% 100% no-repeat;
}
.foot .copy b{ color:var(--ink); font-weight:600 }
.foot a{ transition:color .2s }
.foot a:hover{ color:var(--accent-3) }

/* ── Tooltips ─────────────────────────────────────────────────────── */
[data-tip]{ position:relative; cursor:help; outline:none; }
[data-tip]:focus-visible{ box-shadow:0 0 0 2px rgba(232,155,42,.4); border-radius:8px }
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%, 4px);
  background:rgba(20,22,28,.78);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.005em;
  white-space:normal;
  width:max-content;
  max-width:240px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  z-index:50;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translate(-50%, 4px);
  width:0; height:0;
  border:5px solid transparent;
  border-top-color:rgba(20,22,28,.78);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  z-index:50;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip].is-tipped::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::before,
[data-tip].is-tipped::before{
  opacity:1;
  transform:translate(-50%, 0);
}
/* Stats sit at the top of a dark section — flip the tooltip below */
.stat[data-tip]::after,
.hero-trust [data-tip]::after{
  bottom:auto;
  top:calc(100% + 8px);
}
.stat[data-tip]::before,
.hero-trust [data-tip]::before{
  bottom:auto;
  top:calc(100% + 2px);
  border-top-color:transparent;
  border-bottom-color:rgba(20,22,28,.78);
}
@media (max-width:640px){
  [data-tip]::after{ max-width:200px; font-size:12px }
}