:root{
 --bg:#070b12;
 --bg2:#0d1422;
 --panel:rgba(15,22,36,.78);
 --border:#1b365d;
 --blue:#33b5ff;
 --text:#eef5ff;
 --muted:#92a6c6;
 --sidebar:320px;
}

html {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-overflow-scrolling: touch; /* Rende lo scroll fluidissimo su iPhone e iPad */
}

* {
    box-sizing: border-box;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 background:radial-gradient(circle at top,#13233e 0%,#09111d 35%,#05070b 100%);
 color:var(--text);
 font-family:'JetBrains Mono', monospace;
 min-height:100vh;
 overflow-x:hidden;
}

#background-grid{
 position:fixed;inset:0;z-index:-3;
 background-image:
 linear-gradient(rgba(51,181,255,.06) 1px,transparent 1px),
 linear-gradient(90deg,rgba(51,181,255,.06) 1px,transparent 1px);
 background-size:40px 40px;
 pointer-events:none;
}

#background-grid::after{
 content:"";
 position:absolute;inset:0;
 background:
 radial-gradient(circle at 70% 20%,rgba(51,181,255,.12),transparent 35%),
 radial-gradient(circle at 15% 80%,rgba(51,181,255,.06),transparent 30%);
}

#background-fingerprint{
 position:fixed;
 right:5%;
 top:8%;
 width:520px;
 height:520px;
 border-radius:50%;
 opacity:.05;
 border:2px solid var(--blue);
 filter:blur(.5px);
 z-index:-2;
}

.sidebar{
 position:fixed;
 left:0;top:0;
 width:var(--sidebar);
 height:100vh;
 background:rgba(7,10,17,.95);
 backdrop-filter:blur(14px);
 border-right:1px solid rgba(51,181,255,.18);
 padding:40px 30px;
 display:flex;
 flex-direction:column;
}

.sidebar::before{
 content:"";
 position:absolute;
 left:0;top:0;
 width:4px;height:100%;
 background:linear-gradient(var(--blue),transparent,var(--blue));
 box-shadow:0 0 18px var(--blue);
}

.brand{text-align:center}

#logo-container{
 width:110px;height:110px;
 margin:auto;
 border:1px solid rgba(51,181,255,.4);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(18,31,53,.55);
 box-shadow:0 0 30px rgba(51,181,255,.15);
 margin-bottom:25px;
}

.brand h2{
 font-family:'JetBrains Mono', monospace;
 font-size:2rem;
 line-height:.95;
 letter-spacing:3px;
}

.brand span{
 display:block;
 margin-top:16px;
 color:var(--muted);
 font-size:.72rem;
 letter-spacing:2px;
}

nav{margin-top:55px;flex:1}
nav ul{list-style:none}
nav li{margin:10px 0}
nav a{
 color:#dbe8ff;
 text-decoration:none;
 display:block;
 padding:14px 18px;
 border:1px solid transparent;
 border-radius:10px;
 transition:.25s;
}
nav a:hover{
 background:rgba(51,181,255,.08);
 border-color:rgba(51,181,255,.3);
 transform:translateX(8px);
 box-shadow:0 0 20px rgba(51,181,255,.15);
}

.download-cv{
 text-decoration:none;
 color:white;
 text-align:center;
 padding:15px;
 border:1px solid var(--blue);
 border-radius:12px;
 background:linear-gradient(180deg,#1b4f8b,#12345b);
 box-shadow:0 0 25px rgba(51,181,255,.3);
 transition:.3s;
}
.download-cv:hover{
 transform:translateY(-3px);
 box-shadow:0 0 35px rgba(51,181,255,.5);
}

main{
 margin-left:var(--sidebar);
}

/* --- NUOVO LAYOUT HERO --- */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    padding: 80px;
}

/* Allinea foto e titoli sulla stessa riga in alto a sinistra */
.hero-top-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

/* Controllo dimensioni foto */
.hero-image {
    width: 280px; /* Ridotto leggermente per bilanciare l'intestazione */
    flex-shrink: 0;
}

.hero-image img {
    width: 100%;
    border-radius: 22px;
    display: block;
}

/* Stile testi intestazione */
.hero-name-small {
    color: var(--blue);
    letter-spacing: 6px;
    font-size: 64px;
}

.hero-content h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4rem;
    line-height: .9;
    margin: 10px 0;
}

.hero-content h2 {
    font-size: 1.1rem;
    letter-spacing: 4px;
    color: #b7d9ff;
    margin-bottom: 25px;
}

.roles {
    display: flex;
    gap: 18px;
    color: var(--blue);
    margin-bottom: 0;
    font-weight: 700;
}

/* Il testo di presentazione che va sotto, a larghezza pagina */
.hero-bio {
    max-width: 1000px; /* Evita righe infinite difficili da leggere */
    font-size: 1.05rem;
    color: #d7e8ff;
    line-height: 1.9;
    padding-left: 24px;
    border-left: 3px solid var(--blue);
}

.hero-bio p {
    margin-bottom: 18px;
}

.hero-bio p:last-child {
    margin-bottom: 0;
}

blockquote{
 max-width:650px;
 font-size:1.2rem;
 color:#d7e8ff;
 line-height:1.8;
 padding-left:24px;
 border-left:3px solid var(--blue);
}

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

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

.fingerprint-container{

    position:relative;

    width:320px;
    height:320px;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

}

.fingerprint-container::after{

    content:"";

    position:absolute;

    left:0;
    top:-20%;

    width:100%;
    height:45px;

    background:linear-gradient(
        to bottom,
        transparent,
        rgba(51,181,255,.35),
        rgba(51,181,255,.65),
        rgba(51,181,255,.35),
        transparent
    );

    filter:blur(6px);

    animation:fingerprintScan 5s linear infinite;

}

@keyframes fingerprintScan{

    0%{

        top:-20%;
        opacity:0;

    }

    5%{

        opacity:1;

    }

    40%{

        top:120%;
        opacity:1;

    }

    45%{

        top:120%;
        opacity:0;

    }

    100%{

        top:120%;
        opacity:0;

    }

}

.fingerprint-svg{

    width:100%;
    height:100%;

    opacity:.28;

    filter:
        drop-shadow(0 0 15px rgba(51,181,255,.18));

    position:relative;

}

section{
 padding-bottom:60px;
}

#logo-container{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}

.logo{
    width:120px;
    height:auto;
    display:block;
    filter:
        drop-shadow(0 0 8px rgba(51,181,255,.35))
        drop-shadow(0 0 18px rgba(51,181,255,.20));
    transition:transform .3s ease;
}

.logo:hover{
    transform:scale(1.05);
}

.service-card img{
    width:64px;
    height:64px;
    margin-bottom:20px;
}

.service-card h3{
    margin:0 0 12px;
    font-size:1.2rem;
}

.service-card p{
    color:#a8b7c7;
    font-size:.95rem;
    line-height:1.5;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:18px;
}

.contact-card img{
    width:34px;
    height:34px;
}

.contact-card span{
    font-size:1rem;
}







#background-effects{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.circle-large{

    position:absolute;

    right:120px;
    top:70px;

    width:420px;
    height:420px;

    border-radius:50%;

    border:2px solid rgba(47,181,255,.18);

    box-shadow:

        0 0 35px rgba(47,181,255,.10),

        inset 0 0 35px rgba(47,181,255,.05);

}

.circle-large::before{

content:"";

position:absolute;

inset:18px;

border-radius:50%;

border:10px dashed rgba(47,181,255,.15);

animation:rotateSlowReverse 90s linear infinite;

}

.circle-large::after{

content:"";

position:absolute;

inset:36px;

border-radius:50%;

border:10px solid rgba(47,181,255,.08);

}

.circle-small{

    position:absolute;

    right:80px;
    top:300px;

    width:210px;
    height:210px;

    border-radius:50%;

    border:2px solid rgba(47,181,255,.20);

    box-shadow:
        0 0 20px rgba(47,181,255,.10),
        inset 0 0 20px rgba(47,181,255,.05);

}

.circle-small::before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:50%;

    border:6px dashed rgba(47,181,255,.18);

    animation:rotateSlow 45s linear infinite;

}

.circle-small::after{

    content:"";

    position:absolute;

    inset:34px;

    border-radius:50%;

    border:4px solid rgba(47,181,255,.10);

}

#background-effects::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(circle, rgba(47,181,255,.9) 1px, transparent 2px);

    background-size:180px 180px;

    opacity:.05;

    animation:blinkNodes 6s ease-in-out infinite;

}

@keyframes blinkNodes{

    0%,100%{
        opacity:.03;
    }

    50%{
        opacity:.09;
    }

}

.scan-line{

    position:absolute;

    width:180%;

    height:180px;

    left:-40%;

    top:-20%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(47,181,255,.10),
            transparent);

    transform:rotate(-20deg);

    animation:scanner 20s linear infinite;

}

@keyframes scanner{

    from{

        transform:
            translateX(-20%)
            translateY(-20%)
            rotate(-20deg);

    }

    to{

        transform:
            translateX(40%)
            translateY(60%)
            rotate(-20deg);

    }

}

#logo-container{

    position:relative;

    overflow:hidden;

}

#logo-container::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-120%;

    width:80%;

    height:300%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.22),
            transparent);

    transform:rotate(18deg);

    animation:logoScan 7s linear infinite;

}

@keyframes logoScan{

    from{
        left:-120%;
    }

    to{
        left:180%;
    }

}

@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes rotateSlowReverse{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}

@keyframes pulseGlow{

    0%,100%{
        opacity:.08;
        scale:1;
    }

    50%{
        opacity:.18;
        scale:1.03;
    }

}


/* ===========================
   PARTE 2.2
   Cards - About - Education
   Experience - Skills
   Da aggiungere in fondo al file style.css
=========================== */

.cards-row{
    display:flex;
    flex-direction:column;
    gap:32px;
    padding:0 80px 80px;
    width:100%; /* Evita che le card diventino troppo larghe nei monitor ultra-wide */
}

.card{
    position:relative;
    background:linear-gradient(180deg,rgba(18,28,45,.88),rgba(10,16,28,.92));
    border:1px solid rgba(51,181,255,.18);
    border-radius:22px;
    padding:34px;
    overflow:hidden;
    transition:.35s;
    backdrop-filter:blur(10px);
}

.card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg,transparent,rgba(51,181,255,.05),transparent);
    transform:translateX(-100%);
    transition:.7s;
}

.card:hover::before{
    transform:translateX(100%);
}

.card:hover{
    transform:translateY(-8px);
    border-color:rgba(51,181,255,.45);
    box-shadow:
        0 15px 40px rgba(0,0,0,.45),
        0 0 25px rgba(51,181,255,.18);
}

.card h3{
    font-family:'JetBrains Mono', monospace;
    color:#7fd0ff;
    font-size:1.45rem;
    letter-spacing:1px;
    margin-bottom:24px;
}

.card p{
    color:#d5e3f5;
    line-height:1.9;
}

.card ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.card li{
    padding:12px 16px;
    border-left:3px solid #33b5ff;
    background:rgba(255,255,255,.025);
    color:#dce9fa;
    transition:.25s;
}

.card li:hover{
    transform:translateX(6px);
    background:rgba(51,181,255,.08);
}

.skill-bars{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.skill-badge {
    position: relative;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(51, 181, 255, .3);
    background: rgba(51, 181, 255, .06);
    color: #eef5ff;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all .25s ease;
    cursor: default;
}

.skill-badge:hover {
    background: rgba(51, 181, 255, .15);
    border-color: #33b5ff;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(51, 181, 255, .25);
}

.skill{
    position:relative;
    padding:14px 18px;
    border-radius:12px;
    border:1px solid rgba(51,181,255,.18);
    background:rgba(255,255,255,.02);
    overflow:hidden;
    font-weight:600;
    color:#eef5ff;
}

.skill::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:75%;
    background:linear-gradient(90deg,
        rgba(51,181,255,.35),
        rgba(51,181,255,.08));
    z-index:-1;
}

#about::after,
#education::after,
#experience::after,
#skills::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-35px;
    top:-35px;
    border-radius:50%;
    border:1px solid rgba(51,181,255,.16);
}

section h2{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:2px;
}

/* ==========================================
   PARTE 2.3 - SERVIZI, CONTATTI E FOOTER
   Da aggiungere in fondo a style.css
========================================== */

#services,
#contacts{
    padding:80px;
}

#services>h2,
#contacts>h2{
    font-family:'JetBrains Mono', monospace;
    font-size:2.4rem;
    margin-bottom:45px;
    color:#eef7ff;
    position:relative;
}

#services>h2::after,
#contacts>h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-12px;
    width:180px;
    height:3px;
    background:#33b5ff;
    box-shadow:0 0 18px rgba(51,181,255,.8);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.service-card{
    position:relative;
    min-height:210px;
    padding:34px;
    border-radius:22px;
    overflow:hidden;

    background:
        linear-gradient(180deg,
        rgba(18,28,45,.95),
        rgba(10,15,25,.92));

    border:1px solid rgba(51,181,255,.18);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;
}

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        135deg,
        transparent,
        rgba(51,181,255,.05),
        transparent);

    opacity:0;
    transition:.4s;
}

.service-card::after{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:160px;
    height:160px;
    border-radius:50%;
    border:1px solid rgba(51,181,255,.15);
    pointer-events:none;
	display: none;
}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(51,181,255,.45);

    box-shadow:
      0 18px 40px rgba(0,0,0,.45),
      0 0 25px rgba(51,181,255,.18);

}

.service-card:hover::before{
    opacity:1;
}

.service-card h3{
    font-family:'JetBrains Mono', monospace;
    margin-bottom:18px;
    color:#84d8ff;
}

.service-card p{
    color:#c9d9ef;
    line-height:1.8;
}

.contacts-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:28px;

}

.contacts-grid>div{

    background:rgba(17,24,40,.88);

    border:1px solid rgba(51,181,255,.18);

    border-radius:18px;

    padding:28px;

    transition:.3s;

}

.contacts-grid>div:hover{

    transform:translateY(-6px);

    border-color:#33b5ff;

    box-shadow:
      0 0 22px rgba(51,181,255,.18);

}

.contacts-grid h4{

    color:#6fd0ff;

    margin-bottom:14px;

    font-family:'JetBrains Mono', monospace;

}

.contacts-grid span{

    display:block;

    color:#d9e6f7;

    line-height:1.8;

}

footer{

    margin-left:320px;

    padding:35px 80px;

    border-top:1px solid rgba(51,181,255,.12);

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#7c91b2;

    background:rgba(8,10,16,.7);

    backdrop-filter:blur(12px);

}

footer a{

    color:#8edcff;

    text-decoration:none;

}

footer a:hover{

    color:white;

}

.tech-line{

    width:100%;

    height:1px;

    margin:60px 0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(51,181,255,.5),

        transparent

    );

    box-shadow:

        0 0 14px rgba(51,181,255,.35);

}

/* ==========================================
   PARTE 2.4
   RESPONSIVE - ANIMAZIONI - MICROINTERAZIONI
   Aggiungere in fondo a style.css
========================================== */

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{
    width:0px;
}

::-webkit-scrollbar-track{
    background:#07111d;
}

::-webkit-scrollbar-thumb{
    background:#1f6aa7;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#39bcff;
}

/* ---------- Text selection ---------- */

::selection{
    background:#33b5ff;
    color:#fff;
}

/* ---------- Smooth transitions ---------- */

a,
button,
.card,
.service-card,
.contacts-grid > div,
.skill,
.download-cv{
    transition:
        all .28s ease;
}

/* ---------- Glow pulse ---------- */

@keyframes glowPulse{

    0%{
        box-shadow:0 0 0 rgba(51,181,255,.15);
    }

    50%{
        box-shadow:
            0 0 35px rgba(51,181,255,.35);
    }

    100%{
        box-shadow:
            0 0 0 rgba(51,181,255,.15);
    }

}

.download-cv{

    animation:
        glowPulse 3.5s infinite;

}

/* ---------- Reveal animation ---------- */

.reveal{

    opacity:0;

    transform:
        translateY(40px);

    transition:
        opacity .8s,
        transform .8s;

}

.reveal.visible{

    opacity:1;

    transform:
        translateY(0);

}

/* ---------- Fade ---------- */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

.hero-content h1{

    animation:
        fadeUp .9s ease;

}

.hero-content h2{

    animation:
        fadeUp 1.2s ease;

}

.hero-image{

    animation:
        fadeUp 1s ease;

}

.roles{

    animation:
        fadeUp 1.35s ease;

}

blockquote{

    animation:
        fadeUp 1.55s ease;

}

/* ---------- Card hover ---------- */

.card:hover,
.service-card:hover{

    filter:
        brightness(1.05);

}

/* ---------- Responsive ---------- */

@media (max-width:1500px){

::-webkit-scrollbar {
        display: none; /* Nasconde del tutto la corsia fissa su schermi stretti */
        width: 0;
    }

    #hero{
        grid-template-columns:
            340px
            1fr;
    }

    .hero-decoration{
        display:none;
    }

}

@media (max-width:1200px){

    :root{
        --sidebar:280px;
    }

    #hero{
        grid-template-columns:
            1fr;
        text-align:center;
    }

    .hero-image{
        max-width:380px;
        margin:auto;
    }

    blockquote{
        margin:auto;
    }

    .roles{
        justify-content:center;
    }

}

@media (max-width:900px){

    :root{
        --sidebar: 0px;
    }

    html, body {
        overflow-x: hidden;
    }

    .sidebar{
        position: relative;
        width: 100%;
        max-width: 100vw;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(51,181,255,.18);
        box-sizing: border-box;
        padding: 30px 15px;
    }

    main{
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
    }

    #hero{
        padding: 40px 20px;
        gap: 30px;
    }

    /* 1. Mette in verticale FOTO (sopra) e NOME (sotto) */
    .hero-top-row {
        flex-direction: column !important;
        text-align: center;
        align-items: center;
        gap: 20px;
    }

    .hero-image {
        max-width: 240px;
        width: 100%;
        margin: 0 auto;
    }

    .hero-content {
        width: 100%;
        text-align: center;
    }

    .hero-name-small {
        font-size: 64px;
    }

    .hero-content h1 {
        font-size: 2.8rem;
        word-break: break-word;
    }

    .hero-content h2 {
        font-size: 0.95rem;
        letter-spacing: 2px;
    }

    .roles {
        justify-content: center;
    }

    /* 2. Adatta il blocco BIO sotto */
    .hero-bio {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid var(--blue);
        padding-top: 25px;
    }

    .cards-row{
        padding: 20px;
        grid-template-columns: 1fr;
    }

    #services,
    #contacts{
        padding: 35px 20px;
    }

    footer{
        margin-left: 0;
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 25px 20px;
    }
	
	/* 1. Rimuove la linea luminosa azzurra e il bordo destro della sidebar */
    .sidebar::before {
        display: none !important;
    }

    .sidebar {
        border-right: none !important;
    }

    /* 2. Nasconde i cerchi di sfondo che sbordano a destra su smartphone */
    #background-effects,
    #background-fingerprint,
    .circle-large,
    .circle-small {
        display: none !important;
    }

}

@media (max-width:640px){

    .hero-content h1{
        font-size: 2.4rem; /* Dimensione ideale per schermi stretti sotto i 400px */
    }

    .hero-content h2{
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .roles{
        flex-wrap: wrap;
    }

    nav a{
        text-align: center;
    }

    .service-card{
        min-height: auto;
    }

}

/* ==========================================
   PARTE 2.5
   PREMIUM EFFECTS / HUD / FINISHING
   Aggiungere in fondo a style.css
========================================== */

:root{
  --glow: rgba(51,181,255,.45);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%,rgba(51,181,255,.08),transparent 18%),
    radial-gradient(circle at 80% 70%,rgba(51,181,255,.06),transparent 20%);
  animation:bgShift 18s ease-in-out infinite alternate;
  z-index:-1;
}

@keyframes bgShift{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-20px) scale(1.03);}
}

.card,
.service-card,
.contacts-grid>div{
  position:relative;
}

.card::after,
.contacts-grid>div::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
      rgba(51,181,255,.0),
      rgba(51,181,255,.35),
      rgba(51,181,255,.0));
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.35;
  pointer-events:none;
  
}

.hero-image{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}

@keyframes scan{
  from{translate:-70% -70%;}
  to{translate:140% 140%;}
}

.hero-content h1{
  text-shadow:
    0 0 10px rgba(51,181,255,.15),
    0 0 30px rgba(51,181,255,.25);
}

.hero-name-small,
.roles{
  text-shadow:0 0 10px var(--glow);
}

nav a::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#33b5ff;
  display:inline-block;
  margin-right:10px;
  box-shadow:0 0 10px #33b5ff;
}

.card:hover,
.service-card:hover{
  box-shadow:
    0 0 0 1px rgba(51,181,255,.2),
    0 18px 40px rgba(0,0,0,.45),
    0 0 35px rgba(51,181,255,.18);
}

blockquote{
  position:relative;
}
blockquote::before{
  content:"❝";
  position:absolute;
  left:-14px;
  top:-18px;
  font-size:2rem;
  color:#33b5ff;
  opacity:.6;
}

.skill{
  overflow:hidden;
}
.skill::before{
  content:"";
  position:absolute;
  left:-100%;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:skillSweep 5s linear infinite;
}

@keyframes skillSweep{
  to{left:120%;}
}

/* ==========================================
   ALERT BOX / CALL TO ACTION (Hero Section)
========================================== */

.alert-box {
    position: relative;
    background: linear-gradient(135deg, rgba(18, 28, 45, 0.92), rgba(10, 16, 28, 0.96));
    border: 1px solid rgba(51, 181, 255, 0.35);
    border-left: 4px solid #33b5ff;
    border-radius: 18px;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.45), 
        0 0 22px rgba(51, 181, 255, 0.12);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	max-width: 800px;
}

.alert-box:hover {
    border-color: rgba(51, 181, 255, 0.6);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.5), 
        0 0 30px rgba(51, 181, 255, 0.22);
    transform: translateY(-3px);
}

.alert-box h3 {
    font-family: 'JetBrains Mono', monospace;
    color: #7fd0ff;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.alert-box p {
    color: #d5e3f5;
    font-size: 0.98rem;
    line-height: 1.8;
    margin-bottom: 12px;
}

.alert-box p:last-child {
    margin-bottom: 0;
}

.alert-box strong {
    color: #ffffff;
    font-weight: 600;
}

/* Ottimizzazione mobile per l'alert box */
@media (max-width: 900px) {
    .alert-box {
        padding: 22px;
        margin-top: 20px;
    }
    
    .alert-box h3 {
        font-size: 1.1rem;
    }
}

/* ==========================================
   FIX DEFINITIVO: SCROLL MOBILE & TOUCH (CHROME/IOS)
   ========================================== */

/* 1. Il tag HTML è l'UNICO responsabile dello scorrimento della pagina */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    overscroll-behavior-y: none; /* Disattiva l'effetto molla del browser */
}

/* 2. Il tag BODY usa 'clip' per evitare sbordamenti senza creare un contenitore scorrevole */
body {
    overflow-y: visible !important;
    overflow-x: clip !important;
    width: 100% !important;
    min-height: 100vh;
    position: relative;
    touch-action: pan-y; /* Forza il browser ad accettare SEMPRE lo scorrimento verticale */
    -webkit-overflow-scrolling: touch;
}

/* 3. Evita che elementi di sfondo o sovrapposti intercettino i tocchi su smartphone */
@media (max-width: 900px) {
    #background-grid,
    #background-effects,
    #background-fingerprint,
    .scan-line,
    .circle-large,
    .circle-small {
        pointer-events: none !important;
    }
}