> <link rel="stylesheet" href="/common_solswv1/css/photogallery.css" media="all" />
<style type="text/css">	
	a:active, a:focus {		
		outline-color: invert;
		outline-style: none;
		outline-width: 0pt;	
	}	
	.kill {	
		display: none !important;	
	}	
	.small-red-box {	
		width: 49.9%;
		float: left;		
	}
	.red_box_frame {	
		margin-bottom: 20px;		
	}	
	.red_box .text {	
		padding-top: 5px;
		padding-bottom: 7px;		
	}	
	.red_box img, wide_image {	
		margin-top: 7px !important		
	}
	#headergraphic{
		z-index:0;
	}
</style>
<script type="text/javascript" src="/common_solswv1/js/swfobject.js"></script> <style type='text/css'>
				.highslide-footer {display: none;}
				.highslide-header {display: none;}
				.redbox_add_btn {display:none;}
		</style><style type='text/css'>
						.send_friend .highslide-html .highslide-html-content{
							height: 610px!important;
							margin: 0 auto;
							position:relative;
							width: 700px!important;
						}
						.send_friend .highslide-footer {
							display: none;
						}
						.send_friend .highslide-header {
							display: none;
						}
						.send_friend .highslide-body {
							height: 610px!important;
							margin: 0 auto;
							width: 700px!important;
						}
						.send_friend .highslide-body iframe{
							height: 600px!important;
						}
						.send_friend_closebutton {
							background: url("/common_solswv1/js/highslide_last/graphics/close.png") repeat scroll 0 0 transparent;
							cursor: pointer;
							height: 30px;
							left: 15px;
							position: relative;
							top: -15px;
							width: 30px;
						}
						.send_friend .highslide-body iframe{
							width: 700px!important;
							height: 610px!important;
						}

						</style><script type="text/javascript" src="/common_solswv1/js/mootools-core.js"></script><script type="text/javascript" src="/common_solswv1/js/jquery.js"></script><script type="text/javascript">jQuery.noConflict();</script>

					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide.css" />
					<!--[if lt IE 7]>
					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide-ie6.css" />
					<![endif]-->
					<!-- questo era il contenuto di disclaimer_slideshow.css. ora è incluso -->
					<style type='text/css'>
						.highslide-html .highslide-html-content{
							height: 355px!important;
							margin: 0 auto;
							position:relative;
							width: 366px!important;
						}
						.highslide-footer {
							display: none;
						}
						.highslide-header {
							display: none;
						}
						.highslide-body {
							height: 350px!important;
							margin: 0 auto;
							text-align: justify;
							width: 340px!important;
						}
						.highslide-body iframe{
							width: 352px!important;
							height: 350px!important;
						}
					</style>
					<!-- questo era il contenuto di contact_slideshow.js. ora è incluso -->
					<script type="text/javascript" src="/common_solswv1/js/highslide_last/highslide-full.packed.js"></script>
					 <script type="text/javascript">
					 	var graphicsDir = decodeURIComponent('%2Fcommon_solswv1%2Fjs%2Fhighslide_last%2Fgraphics%2F');

					 	hs.registerOverlay({
							html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
							position: 'top right',
							fade: 0, // fading the semi-transparent overlay looks bad in IE
							useOnHtml: true,
							offsetX: 5,
							offsetY: -4
						});
						hs.marginBottom = 5;
						hs.align = "center";
						hs.showCredits = false;
						hs.graphicsDir = graphicsDir;
						hs.dimmingOpacity = 0.75;
						hs.wrapperClassName = 'borderless floating-caption';
						hs.dragHandler = null;
						hs.outlineType = 'rounded-white';
						hs.overflow = "hidden";
					 </script>
			<script type="text/javascript">
				hs.transitions = ['expand', 'crossfade'];
				hs.align = 'center';
				</script>
			
<link href="/common_solswv1/css/framework_old_tmpl.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/common_solswv1/css/framework_global.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/1/css/style.css" rel="stylesheet" media="screen" type="text/css" />
<style type="text/css">
						.slideshow {display: block;position: relative;z-index: 0;}
						.slideshow-images {display: block;overflow: hidden;position: relative;}
						.slideshow-images img {display: block;position: absolute;z-index: 1;}
						.slideshow-images-visible {opacity: 1;}
						.slideshow-images-prev {opacity: 0;}
						.slideshow-images-next {opacity: 0;}
						.slideshow-images img {float: left;left: 0;top: 0;}
						</style><script type="text/javascript" src="/common_solswv1/js/mootools-more.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.kenburns.js"></script><script type="text/javascript">
			/* <![CDATA[ */
				var slide = new Class({
					initialize: function(){
						this.nomeheader = "headergraphic";
						if($("headergrafico") != null)
							this.nomeheader ="headergrafico";
						$(this.nomeheader).set("styles",{"height" : "240px"});
						$$(".headerflash-deco01").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco02").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco03").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco04").set("styles", {"z-index" : "800"});
						if($("header_pref2") != null)
							$("header_pref2").set("styles",{"z-index" : "999"});
						this.flag = 0;
						(function(){this.start();}).delay(0,this);
					},
					start: function(){
						var headers = ["header1.jpg","header2.jpg","header3.jpg"];
						this.show = new Slideshow.KenBurns(
											this.nomeheader,
											headers,
											{
												controller : false,
												overlap : true,
												center: false,
												height: 240,
												hu: decodeURIComponent("%2Fimages%2F"),
												width: 740,
												slide: 1,
												delay: 5000,
												duration: 2000,
												transition: Fx.Transitions.Elastic.easeOut,
												direction: "right",
												onComplete: function(){
														if(this.flag == 2){
															$(this.nomeheader).set("styles",{"background-image" : "url()"});
														}
														this.flag +=1;
												}.bind(this),
												onEnd: function(){
													this.show.pause(1);
													(function(){
														this.pause(0);
													}).delay(0,this.show);
												}.bind(this)
											});
					}
				});
			window.addEvent("load", function(){
				window.slide = new slide();
			});
			/* ]]> */
			</script>
> 
<!-- <link rel="stylesheet" href="/common_solswv1/css/photogallery.css" media="all" />
<style type="text/css">	
	a:active, a:focus {		
		outline-color: invert;
		outline-style: none;
		outline-width: 0pt;	
	}	
	.kill {	
		display: none !important;	
	}	
	.small-red-box {	
		width: 49.9%;
		float: left;		
	}
	.red_box_frame {	
		margin-bottom: 20px;		
	}	
	.red_box .text {	
		padding-top: 5px;
		padding-bottom: 7px;		
	}	
	.red_box img, wide_image {	
		margin-top: 7px !important		
	}
	#headergraphic{
		z-index:0;
	}
</style>
<script type="text/javascript" src="/common_solswv1/js/swfobject.js"></script> <style type='text/css'>
				.highslide-footer {display: none;}
				.highslide-header {display: none;}
				.redbox_add_btn {display:none;}
		</style><style type='text/css'>
						.send_friend .highslide-html .highslide-html-content{
							height: 610px!important;
							margin: 0 auto;
							position:relative;
							width: 700px!important;
						}
						.send_friend .highslide-footer {
							display: none;
						}
						.send_friend .highslide-header {
							display: none;
						}
						.send_friend .highslide-body {
							height: 610px!important;
							margin: 0 auto;
							width: 700px!important;
						}
						.send_friend .highslide-body iframe{
							height: 600px!important;
						}
						.send_friend_closebutton {
							background: url("/common_solswv1/js/highslide_last/graphics/close.png") repeat scroll 0 0 transparent;
							cursor: pointer;
							height: 30px;
							left: 15px;
							position: relative;
							top: -15px;
							width: 30px;
						}
						.send_friend .highslide-body iframe{
							width: 700px!important;
							height: 610px!important;
						}

						</style><script type="text/javascript" src="/common_solswv1/js/mootools-core.js"></script><script type="text/javascript" src="/common_solswv1/js/jquery.js"></script><script type="text/javascript">jQuery.noConflict();</script>

					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide.css" />
					<!--[if lt IE 7]>
					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide-ie6.css" />
					<![endif]-->
					<!-- questo era il contenuto di disclaimer_slideshow.css. ora è incluso -->
					<style type='text/css'>
						.highslide-html .highslide-html-content{
							height: 355px!important;
							margin: 0 auto;
							position:relative;
							width: 366px!important;
						}
						.highslide-footer {
							display: none;
						}
						.highslide-header {
							display: none;
						}
						.highslide-body {
							height: 350px!important;
							margin: 0 auto;
							text-align: justify;
							width: 340px!important;
						}
						.highslide-body iframe{
							width: 352px!important;
							height: 350px!important;
						}
					</style>
					<!-- questo era il contenuto di contact_slideshow.js. ora è incluso -->
					<script type="text/javascript" src="/common_solswv1/js/highslide_last/highslide-full.packed.js"></script>
					 <script type="text/javascript">
					 	var graphicsDir = decodeURIComponent('%2Fcommon_solswv1%2Fjs%2Fhighslide_last%2Fgraphics%2F');

					 	hs.registerOverlay({
							html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
							position: 'top right',
							fade: 0, // fading the semi-transparent overlay looks bad in IE
							useOnHtml: true,
							offsetX: 5,
							offsetY: -4
						});
						hs.marginBottom = 5;
						hs.align = "center";
						hs.showCredits = false;
						hs.graphicsDir = graphicsDir;
						hs.dimmingOpacity = 0.75;
						hs.wrapperClassName = 'borderless floating-caption';
						hs.dragHandler = null;
						hs.outlineType = 'rounded-white';
						hs.overflow = "hidden";
					 </script>
			<script type="text/javascript">
				hs.transitions = ['expand', 'crossfade'];
				hs.align = 'center';
				</script>
			
<link href="/common_solswv1/css/framework_old_tmpl.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/common_solswv1/css/framework_global.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/1/css/style.css" rel="stylesheet" media="screen" type="text/css" />
<style type="text/css">
						.slideshow {display: block;position: relative;z-index: 0;}
						.slideshow-images {display: block;overflow: hidden;position: relative;}
						.slideshow-images img {display: block;position: absolute;z-index: 1;}
						.slideshow-images-visible {opacity: 1;}
						.slideshow-images-prev {opacity: 0;}
						.slideshow-images-next {opacity: 0;}
						.slideshow-images img {float: left;left: 0;top: 0;}
						</style><script type="text/javascript" src="/common_solswv1/js/mootools-more.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.kenburns.js"></script><script type="text/javascript">
			/* <![CDATA[ */
				var slide = new Class({
					initialize: function(){
						this.nomeheader = "headergraphic";
						if($("headergrafico") != null)
							this.nomeheader ="headergrafico";
						$(this.nomeheader).set("styles",{"height" : "240px"});
						$$(".headerflash-deco01").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco02").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco03").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco04").set("styles", {"z-index" : "800"});
						if($("header_pref2") != null)
							$("header_pref2").set("styles",{"z-index" : "999"});
						this.flag = 0;
						(function(){this.start();}).delay(0,this);
					},
					start: function(){
						var headers = ["header1.jpg","header2.jpg","header3.jpg"];
						this.show = new Slideshow.KenBurns(
											this.nomeheader,
											headers,
											{
												controller : false,
												overlap : true,
												center: false,
												height: 240,
												hu: decodeURIComponent("%2Fimages%2F"),
												width: 740,
												slide: 1,
												delay: 5000,
												duration: 2000,
												transition: Fx.Transitions.Elastic.easeOut,
												direction: "right",
												onComplete: function(){
														if(this.flag == 2){
															$(this.nomeheader).set("styles",{"background-image" : "url()"});
														}
														this.flag +=1;
												}.bind(this),
												onEnd: function(){
													this.show.pause(1);
													(function(){
														this.pause(0);
													}).delay(0,this.show);
												}.bind(this)
											});
					}
				});
			window.addEvent("load", function(){
				window.slide = new slide();
			});
			/* ]]> */
			</script>
 -->
<style>
  /* tutto il tuo CSS qui */
</style>

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Nicola Ferrara - Ingegnere Informatico</title>
  <!-- <link rel="stylesheet" href="/common_solswv1/css/photogallery.css" media="all" />
<style type="text/css">	
	a:active, a:focus {		
		outline-color: invert;
		outline-style: none;
		outline-width: 0pt;	
	}	
	.kill {	
		display: none !important;	
	}	
	.small-red-box {	
		width: 49.9%;
		float: left;		
	}
	.red_box_frame {	
		margin-bottom: 20px;		
	}	
	.red_box .text {	
		padding-top: 5px;
		padding-bottom: 7px;		
	}	
	.red_box img, wide_image {	
		margin-top: 7px !important		
	}
	#headergraphic{
		z-index:0;
	}
</style>
<script type="text/javascript" src="/common_solswv1/js/swfobject.js"></script> <style type='text/css'>
				.highslide-footer {display: none;}
				.highslide-header {display: none;}
				.redbox_add_btn {display:none;}
		</style><style type='text/css'>
						.send_friend .highslide-html .highslide-html-content{
							height: 610px!important;
							margin: 0 auto;
							position:relative;
							width: 700px!important;
						}
						.send_friend .highslide-footer {
							display: none;
						}
						.send_friend .highslide-header {
							display: none;
						}
						.send_friend .highslide-body {
							height: 610px!important;
							margin: 0 auto;
							width: 700px!important;
						}
						.send_friend .highslide-body iframe{
							height: 600px!important;
						}
						.send_friend_closebutton {
							background: url("/common_solswv1/js/highslide_last/graphics/close.png") repeat scroll 0 0 transparent;
							cursor: pointer;
							height: 30px;
							left: 15px;
							position: relative;
							top: -15px;
							width: 30px;
						}
						.send_friend .highslide-body iframe{
							width: 700px!important;
							height: 610px!important;
						}

						</style><script type="text/javascript" src="/common_solswv1/js/mootools-core.js"></script><script type="text/javascript" src="/common_solswv1/js/jquery.js"></script><script type="text/javascript">jQuery.noConflict();</script>

					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide.css" />
					<!--[if lt IE 7]>
					<link rel="stylesheet" type="text/css" href="/common_solswv1/js/highslide_last/highslide-ie6.css" />
					<![endif]-->
					<!-- questo era il contenuto di disclaimer_slideshow.css. ora è incluso -->
					<style type='text/css'>
						.highslide-html .highslide-html-content{
							height: 355px!important;
							margin: 0 auto;
							position:relative;
							width: 366px!important;
						}
						.highslide-footer {
							display: none;
						}
						.highslide-header {
							display: none;
						}
						.highslide-body {
							height: 350px!important;
							margin: 0 auto;
							text-align: justify;
							width: 340px!important;
						}
						.highslide-body iframe{
							width: 352px!important;
							height: 350px!important;
						}
					</style>
					<!-- questo era il contenuto di contact_slideshow.js. ora è incluso -->
					<script type="text/javascript" src="/common_solswv1/js/highslide_last/highslide-full.packed.js"></script>
					 <script type="text/javascript">
					 	var graphicsDir = decodeURIComponent('%2Fcommon_solswv1%2Fjs%2Fhighslide_last%2Fgraphics%2F');

					 	hs.registerOverlay({
							html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
							position: 'top right',
							fade: 0, // fading the semi-transparent overlay looks bad in IE
							useOnHtml: true,
							offsetX: 5,
							offsetY: -4
						});
						hs.marginBottom = 5;
						hs.align = "center";
						hs.showCredits = false;
						hs.graphicsDir = graphicsDir;
						hs.dimmingOpacity = 0.75;
						hs.wrapperClassName = 'borderless floating-caption';
						hs.dragHandler = null;
						hs.outlineType = 'rounded-white';
						hs.overflow = "hidden";
					 </script>
			<script type="text/javascript">
				hs.transitions = ['expand', 'crossfade'];
				hs.align = 'center';
				</script>
			
<link href="/common_solswv1/css/framework_old_tmpl.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/common_solswv1/css/framework_global.css" rel="stylesheet" media="screen" type="text/css" />
<link href="/1/css/style.css" rel="stylesheet" media="screen" type="text/css" />
<style type="text/css">
						.slideshow {display: block;position: relative;z-index: 0;}
						.slideshow-images {display: block;overflow: hidden;position: relative;}
						.slideshow-images img {display: block;position: absolute;z-index: 1;}
						.slideshow-images-visible {opacity: 1;}
						.slideshow-images-prev {opacity: 0;}
						.slideshow-images-next {opacity: 0;}
						.slideshow-images img {float: left;left: 0;top: 0;}
						</style><script type="text/javascript" src="/common_solswv1/js/mootools-more.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.js"></script><script type="text/javascript" src="/common_solswv1/js/slideshow/slideshow.kenburns.js"></script><script type="text/javascript">
			/* <![CDATA[ */
				var slide = new Class({
					initialize: function(){
						this.nomeheader = "headergraphic";
						if($("headergrafico") != null)
							this.nomeheader ="headergrafico";
						$(this.nomeheader).set("styles",{"height" : "240px"});
						$$(".headerflash-deco01").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco02").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco03").set("styles", {"z-index" : "800"});
						$$(".headerflash-deco04").set("styles", {"z-index" : "800"});
						if($("header_pref2") != null)
							$("header_pref2").set("styles",{"z-index" : "999"});
						this.flag = 0;
						(function(){this.start();}).delay(0,this);
					},
					start: function(){
						var headers = ["header1.jpg","header2.jpg","header3.jpg"];
						this.show = new Slideshow.KenBurns(
											this.nomeheader,
											headers,
											{
												controller : false,
												overlap : true,
												center: false,
												height: 240,
												hu: decodeURIComponent("%2Fimages%2F"),
												width: 740,
												slide: 1,
												delay: 5000,
												duration: 2000,
												transition: Fx.Transitions.Elastic.easeOut,
												direction: "right",
												onComplete: function(){
														if(this.flag == 2){
															$(this.nomeheader).set("styles",{"background-image" : "url()"});
														}
														this.flag +=1;
												}.bind(this),
												onEnd: function(){
													this.show.pause(1);
													(function(){
														this.pause(0);
													}).delay(0,this.show);
												}.bind(this)
											});
					}
				});
			window.addEvent("load", function(){
				window.slide = new slide();
			});
			/* ]]> */
			</script>
 -->
  <style>
    :root {
      --slate-900: #0f172a;
      --slate-800: #1e293b;
      --slate-700: #334155;
      --slate-400: #94a3b8;
      --slate-300: #cbd5e1;
      --blue-600: #2563eb;
      --blue-500: #3b82f6;
      --blue-400: #60a5fa;
      --blue-300: #93c5fd;
      --blue-200: #bfdbfe;
      --purple-900: #581c87;
      --purple-600: #7e22ce;
      --purple-500: #9333ea;
      --purple-400: #a855f7;
      --green-400: #4ade80;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-height: 100vh;
      background: linear-gradient(135deg, var(--slate-900) 0%, var(--purple-900) 50%, var(--slate-900) 100%);
      color: white;
      line-height: 1.6;
    }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .section {
      padding: 5rem 0;
    }

    .text-center {
      text-align: center;
    }

    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-16 { margin-bottom: 4rem; }
    .mt-12 { margin-top: 3rem; }

    .text-5xl { font-size: 3rem; font-weight: 800; }
    .text-4xl { font-size: 2.25rem; font-weight: 700; }
    .text-2xl { font-size: 1.5rem; font-weight: 700; }
    .text-xl { font-size: 1.25rem; }
    .text-lg { font-size: 1.125rem; }

    @media (min-width: 768px) {
      .text-5xl { font-size: 4rem; }
      .text-4xl { font-size: 3rem; }
      .container { padding: 0 1.5rem; }
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 2rem;
      border-radius: 0.5rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: linear-gradient(to right, var(--blue-600), var(--purple-600));
      color: white;
    }

    .btn-primary:hover {
      transform: scale(1.05);
      background: linear-gradient(to right, #1d4ed8, #7e22ce);
    }

    .btn-outline {
      border: 2px solid var(--blue-400);
      color: var(--blue-300);
    }

    .btn-outline:hover {
      background: var(--blue-400);
      color: white;
    }

    .card {
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid var(--slate-700);
      border-radius: 0.75rem;
      padding: 2rem;
      transition: all 0.3s ease;
    }

    .card:hover {
      transform: scale(1.02);
      border-color: rgba(96, 165, 250, 0.3);
    }

    .grid {
      display: grid;
      gap: 2rem;
    }

    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    @media (min-width: 768px) { .md:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .lg:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    .flex { display: flex; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }

    .icon {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .badge {
      background: rgba(59, 130, 246, 0.2);
      color: var(--blue-300);
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      border: 1px solid rgba(96, 165, 250, 0.3);
      font-weight: 600;
      margin: 0.25rem;
    }

    .header-overlay {
      position: relative;
      overflow: hidden;
      padding: 6rem 0;
    }

    .header-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(37, 99, 235, 0.2), rgba(126, 34, 206, 0.2));
      z-index: 0;
    }

    .header-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .avatar {
      width: 6rem;
      height: 6rem;
      border-radius: 9999px;
      background: linear-gradient(to right, var(--blue-500), var(--purple-600));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 2rem;
    }

    .bg-light {
      background: rgba(30, 41, 59, 0.5);
    }

    .footer {
      padding: 2rem 0;
      border-top: 1px solid var(--slate-700);
      text-align: center;
      color: var(--slate-400);
    }

    .social-icon {
      color: var(--slate-400);
      text-decoration: none;
      margin: 0 0.75rem;
      font-size: 1.25rem;
    }

    .social-icon:hover {
      color: var(--blue-400);
    }
  </style>
<link href="/common_solswv1/css/style_print.css" media="print" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/common_solswv1/js/cart.js?v=201507"></script>
</head>
<body>

  <!-- Header -->
  <div class="header-overlay">
    <div class="header-content">
      <div class="avatar">
        <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
      </div>
      <h1 class="text-5xl mb-6">Nicola Ferrara</h1>
      <p class="text-xl mb-8" style="color:var(--blue-200); max-width:600px; margin:0 auto 2rem;">
        Ingegnere Informatico Specializzato in Sistemistica Avanzata, Smart City-IoT, Automazione Industriale, Smart Home Ricariche Elettriche HI-Fi
      </p>
      <div class="flex flex-wrap justify-center gap-4">
        <a href="#servizi" class="btn btn-primary">Scopri i Servizi</a>
        <a href="#contatti" class="btn btn-outline">Contattami</a>
      </div>
    </div>
  </div>

  <!-- Resto del corpo (abbreviato per brevità, ma deve essere completo) -->
  <section id="servizi" class="section bg-light">
    <div class="container">
      <div class="text-center mb-16">
        <h2 class="text-4xl mb-4">Servizi Specializzati</h2>
        <p class="text-xl" style="color:var(--blue-200);">-</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="card">
          <div style="color:var(--blue-400); margin-bottom:1rem;">
            <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
          </div>
          <h3 class="text-2xl mb-3">Sistemistica Avanzata</h3>
          <p style="color:var(--slate-300);">Architetture IT complesse, infrastrutture cloud e sistemi distribuiti ad alta disponibilità e scalabilità.</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="card">
          <div style="color:var(--blue-400); margin-bottom:1rem;">
            <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
          </div>
          <h3 class="text-2xl mb-3">Smart City Solutions</h3>
          <p style="color:var(--slate-300);">Connessione e gestione di reti IoT complesse per smart cities e ambienti industriali intelligenti.</p>
          <!-- Aggiungi tutti gli altri servizi qui con lo stesso pattern -->
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="card">
          <div style="color:var(--blue-400); margin-bottom:1rem;">
            <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
          </div>
          <h3 class="text-2xl mb-3">Automazione Industriale</h3>
          <p style="color:var(--slate-300);">Sviluppo di soluzioni di automazione avanzata per ottimizzare processi produttivi e ridurre costi operativi.</p>
          <!-- Aggiungi tutti gli altri servizi qui con lo stesso pattern -->
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="card">
          <div style="color:var(--blue-400); margin-bottom:1rem;">
            <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
          </div>
          <h3 class="text-2xl mb-3">Smart Home e Sistemi di ricarica Elettrica</h3>
          <p style="color:var(--slate-300);">Soluzioni integrate per case intelligenti e infrastrutture di ricarica  per veicoli elettrici, con automazione e monitoraggio avanzato.</p>
          <!-- Aggiungi tutti gli altri servizi qui con lo stesso pattern -->    
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>© 2025 Nicola Ferrara. Tutti i diritti riservati.</p>
    </div>
  </footer>

</body>
</html>