/* Andrea Leonardi – Web designer · stili e animazioni (prefisso al-) */
:root{--al-bg:#0B0B0F;--al-card:#15151C;--al-line:#2A2A36;--al-tx:#F4F1EA;--al-mute:#A8A6B3;--al-lime:#C6FF3D;--al-vio:#7B5CFF;--al-cor:#FF5C39}
body.al-page{background:var(--al-bg);overflow-x:hidden}
.al-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--al-lime),var(--al-vio),var(--al-cor));z-index:9999}
.al-cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,rgba(123,92,255,.28),transparent 65%);pointer-events:none;z-index:1;mix-blend-mode:screen;transition:opacity .3s}
/* barra */
.al-bar{position:sticky!important;top:0;z-index:999;background:rgba(11,11,15,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--al-line)}
.admin-bar .al-bar{top:32px}
.al-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.al-logo{font:700 22px/1 'Space Grotesk',sans-serif;color:var(--al-tx);text-decoration:none;letter-spacing:-.5px}
.al-logo i{font-style:normal;color:var(--al-lime)}
.al-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.al-nav li a{display:block;font:500 15px/1 'Inter',sans-serif;color:var(--al-mute);text-decoration:none;padding:10px 14px;border-radius:999px;transition:color .2s,background .2s}
.al-nav li a:hover,.al-nav li.on a{color:var(--al-tx);background:rgba(255,255,255,.08)}
.al-nav li.al-cta-li a{background:var(--al-lime);color:#0B0B0F;font-weight:600}
.al-nav li.al-cta-li a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(198,255,61,.35)}
/* hero */
.elementor-section.al-hero,.elementor-section.al-title,.elementor-section.al-cta,.elementor-section.al-end{position:relative;overflow:hidden}
.al-hero{min-height:92vh;display:flex;align-items:center}
.al-hero>.elementor-container,.al-title>.elementor-container,.al-cta>.elementor-container{position:relative;z-index:2}
.al-hero canvas.al-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.al-hero::before,.al-hero::after,.al-title::before,.al-cta::before{content:"";position:absolute;border-radius:50%;filter:blur(90px);z-index:0;animation:al-drift 14s ease-in-out infinite}
.al-hero::before{width:520px;height:520px;right:-120px;top:-120px;background:var(--al-vio);opacity:.5}
.al-hero::after{width:420px;height:420px;left:-100px;bottom:-140px;background:var(--al-cor);opacity:.38;animation-delay:-6s}
.al-title::before{width:420px;height:420px;right:-100px;top:-160px;background:var(--al-vio);opacity:.4}
.al-cta::before{width:420px;height:420px;right:-80px;top:-120px;background:var(--al-lime);opacity:.16}
@keyframes al-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.15)}}
.al-grad{background:linear-gradient(90deg,var(--al-lime),#2EE6A6,var(--al-vio),var(--al-cor),var(--al-lime));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:al-sh 6s linear infinite}
@keyframes al-sh{to{background-position:300% 0}}
/* titoli: parole che salgono */
.al-split .al-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.al-split .al-wi{display:inline-block;transform:translateY(105%);animation:al-up .9s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes al-up{to{transform:none}}
body.elementor-editor-active .al-split .al-wi{transform:none;animation:none}
.al-tag .elementor-heading-title{text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.al-tag .elementor-heading-title::before{content:"";width:34px;height:2px;background:var(--al-lime)}
/* bottoni */
.al-btn .elementor-button{transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s,background .25s;position:relative}
.al-btn .elementor-button::after{content:"→";margin-left:12px;display:inline-block;transition:transform .25s}
.al-btn .elementor-button:hover{box-shadow:0 14px 34px rgba(198,255,61,.35)}
.al-btn .elementor-button:hover::after{transform:translateX(6px)}
/* marquee */
.al-marqsec{overflow:hidden}
.al-marq{overflow:hidden;white-space:nowrap}
.al-track{display:inline-flex;gap:34px;animation:al-mq 30s linear infinite;will-change:transform}
.al-track span{font:700 clamp(28px,4vw,46px)/1 'Space Grotesk',sans-serif;color:#0B0B0F;letter-spacing:-1px;text-transform:uppercase}
.al-track i{font-style:normal;font-size:clamp(22px,3vw,34px);color:#0B0B0F;align-self:center}
.al-marqsec:hover .al-track{animation-play-state:paused}
@keyframes al-mq{to{transform:translateX(-50%)}}
/* processo */
.al-step{border-top:1px solid var(--al-line);padding-top:18px;transition:border-color .3s}
.al-step:hover{border-color:var(--al-lime)}
.al-num .elementor-heading-title{-webkit-text-stroke:2px var(--al-lime);color:transparent!important;transition:color .3s}
.al-step:hover .al-num .elementor-heading-title{color:var(--al-lime)!important}
/* schede servizio con riflettore che segue il mouse */
.al-card .elementor-icon-box-wrapper{position:relative;background:var(--al-card);border:1px solid var(--al-line);border-radius:26px;padding:34px 30px;overflow:hidden;text-align:left;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s;transform-style:preserve-3d}
.al-card .elementor-icon-box-wrapper::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(198,255,61,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.al-card:hover .elementor-icon-box-wrapper{border-color:rgba(198,255,61,.55);transform:translateY(-8px)}
.al-card:hover .elementor-icon-box-wrapper::before{opacity:1}
.al-card .elementor-icon-box-icon{margin-bottom:18px!important;display:block;text-align:left}
.al-card .elementor-icon{font-size:38px;transition:transform .4s}
.al-card:hover .elementor-icon{transform:rotate(-8deg) scale(1.15)}
/* foto */
.al-photo img{border-radius:36px;box-shadow:0 30px 80px rgba(123,92,255,.35);transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.al-photo:hover img{transform:rotate(0) scale(1.02)}
.al-skills{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.al-skills li{border:1px solid var(--al-line);background:var(--al-card);color:var(--al-tx);border-radius:999px;padding:9px 18px;font:500 15px 'Inter',sans-serif;transition:background .2s,color .2s,transform .2s}
.al-skills li:hover{background:var(--al-lime);color:#0B0B0F;transform:translateY(-3px) rotate(-2deg)}
/* nome gigante */
.al-bigname{overflow:hidden;white-space:nowrap}
.al-bigname .elementor-heading-title{background:linear-gradient(90deg,var(--al-tx),var(--al-vio),var(--al-cor));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-align:center}
/* portfolio */
.al-chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 8px}
.al-chip{font:500 15px 'Inter',sans-serif;background:var(--al-card);color:var(--al-mute);border:1px solid var(--al-line);border-radius:999px;padding:10px 20px;cursor:pointer;transition:all .2s}
.al-chip:hover{color:var(--al-tx);border-color:var(--al-lime)}
.al-chip.on{background:var(--al-lime);color:#0B0B0F;border-color:var(--al-lime);font-weight:600}
.al-pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;margin-top:26px}
.al-pf-card{background:var(--al-card);border:1px solid var(--al-line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .3s}
.al-pf-card:hover{transform:translateY(-10px);border-color:rgba(198,255,61,.55);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.al-pf-card.al-hide{display:none}
.al-pf-img{display:block;overflow:hidden;aspect-ratio:5/4;background:#000}
.al-pf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.al-pf-card:hover .al-pf-img img{transform:scale(1.08)}
.al-pf-body{padding:22px 24px 26px;display:grid;gap:8px}
.al-pf-body small{font:600 12px 'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--al-lime)}
.al-pf-body h3{font:600 26px/1.1 'Space Grotesk',sans-serif;margin:0;color:var(--al-tx);letter-spacing:-.5px}
.al-pf-body p{font:400 16px/1.5 'Inter',sans-serif;color:var(--al-mute);margin:0}
.al-pf-body a.al-more{font:600 16px 'Space Grotesk',sans-serif;color:var(--al-lime);text-decoration:none}
.al-pf-empty{color:var(--al-mute);font:500 18px 'Inter',sans-serif}
/* contatti */
.al-form{display:grid;gap:18px;background:var(--al-card);border:1px solid var(--al-line);border-radius:28px;padding:34px}
.al-form label{font:500 15px 'Inter',sans-serif;color:var(--al-mute);display:grid;gap:8px}
.al-form input,.al-form textarea{font:400 17px 'Inter',sans-serif;background:#0B0B0F;color:var(--al-tx);border:1px solid var(--al-line);border-radius:14px;padding:15px 18px;width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.al-form input:focus,.al-form textarea:focus{outline:0;border-color:var(--al-lime);box-shadow:0 0 0 4px rgba(198,255,61,.15)}
.al-form .al-hp{position:absolute;left:-9999px}
.al-form button{justify-self:start;font:600 18px 'Space Grotesk',sans-serif;background:var(--al-lime);color:#0B0B0F;border:0;border-radius:999px;padding:17px 34px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.al-form button:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(198,255,61,.35)}
.al-note{padding:16px 20px;border-radius:16px;font:500 17px 'Inter',sans-serif;margin-bottom:18px}
.al-note.ok{background:rgba(46,230,166,.15);color:#2EE6A6;border:1px solid #2EE6A6}.al-note.ko{background:rgba(255,92,57,.15);color:#FF8A6B;border:1px solid var(--al-cor)}
.al-info .elementor-widget-text-editor a{color:var(--al-lime)}
/* comparsa allo scroll */
html.al-js body:not(.elementor-editor-active) .al-rv{opacity:0;transform:translateY(46px);transition:opacity .7s,transform .8s cubic-bezier(.2,.9,.2,1)}
html.al-js body:not(.elementor-editor-active) .al-rv.al-in{opacity:1;transform:none}
@media (max-width:767px){.al-hero{min-height:84vh}.al-logo{font-size:19px}.al-nav li a{padding:8px 10px;font-size:14px}.admin-bar .al-bar{top:46px}.al-cursor{display:none}.al-photo img{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.al-split .al-wi{transform:none}html.al-js .al-rv{opacity:1!important;transform:none!important}}

/* scheda singola lavoro */
.al-work{max-width:1000px;margin:0 auto;padding:60px 24px 100px;color:var(--al-mute);font:400 18px/1.7 'Inter',sans-serif}
.al-work-hero{width:100%;border-radius:28px;display:block;margin-bottom:26px;border:1px solid var(--al-line)}
.al-work-client{color:var(--al-lime)}.al-work-text{color:var(--al-tx)}
.al-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:36px 0}
.al-gallery figure{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--al-line)}.al-gallery img{width:100%;height:auto;display:block;transition:transform .6s}.al-gallery figure:hover img{transform:scale(1.05)}
.al-work-btn{display:inline-block;background:var(--al-lime);color:#0B0B0F;font:600 18px 'Space Grotesk',sans-serif;padding:16px 30px;border-radius:999px;text-decoration:none}
.al-work a.al-more{color:var(--al-lime);text-decoration:none}
body.single-al_portfolio{background:var(--al-bg)}body.single-al_portfolio h1.entry-title{color:var(--al-tx);font-family:'Space Grotesk',sans-serif}
/* gradiente anche sulle parole animate (ogni parola è un blocco a sé) */
.al-split .al-grad .al-wi{background-image:linear-gradient(90deg,#C6FF3D,#2EE6A6,#7B5CFF,#FF5C39,#C6FF3D);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:al-up .9s cubic-bezier(.2,.9,.2,1) forwards,al-sh 6s linear infinite;animation-delay:calc(var(--i)*70ms + 120ms),0s}
body.elementor-editor-active .al-split .al-grad .al-wi{animation:al-sh 6s linear infinite}
@media (max-width:767px){.al-nav{justify-content:center}.al-hero-h .elementor-heading-title{word-break:normal;overflow-wrap:anywhere}.al-title{padding-block:60px 30px}.al-pf-grid{grid-template-columns:1fr}.al-gallery{grid-template-columns:1fr}.al-form{padding:22px}.al-work{padding:36px 16px 70px}.al-card .elementor-icon-box-wrapper{padding:26px 22px}.elementor-section.al-end .al-bigname .elementor-heading-title{font-size:13vw!important}}
/* menu hamburger (mobile) */
.al-burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--al-line);background:var(--al-card);cursor:pointer;padding:0;position:relative;flex:none}
.al-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--al-tx);border-radius:2px;transition:transform .3s,opacity .2s,top .3s}
.al-burger span:nth-child(1){top:16px}.al-burger span:nth-child(2){top:22px}.al-burger span:nth-child(3){top:28px}
.al-nav.open .al-burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.al-nav.open .al-burger span:nth-child(2){opacity:0}
.al-nav.open .al-burger span:nth-child(3){top:22px;transform:rotate(-45deg)}
.al-burger:focus-visible,.al-nav a:focus-visible{outline:2px solid var(--al-lime);outline-offset:2px}
@media (max-width:767px){
.al-nav{flex-wrap:wrap;justify-content:space-between!important}
.al-burger{display:block}
.al-nav ul{display:none;width:100%;flex-direction:column;align-items:stretch;gap:6px;padding:14px 0 8px}
.al-nav.open ul{display:flex;animation:al-menu .3s ease}
.al-nav li a{font-size:20px;padding:16px 18px;background:var(--al-card);border-radius:16px}
.al-nav li.al-cta-li a{text-align:center;background:var(--al-lime)}
}
@keyframes al-menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* colore principale e barra di chiamata */
.al-btn .elementor-button{background-color:var(--al-lime)!important;color:var(--al-on,#0B0B0F)!important}
.al-marqsec{background:var(--al-lime)!important}
.al-chip.on,.al-skills li:hover,.al-nav li.al-cta-li a,.al-form button,.al-work-btn{background:var(--al-lime);color:var(--al-on,#0B0B0F)}
.al-grad,.al-split .al-grad .al-wi{background-image:linear-gradient(90deg,var(--al-lime),#7B5CFF,#FF5C39,var(--al-lime))}
.al-infolist{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--al-mute);font:400 18px 'Inter',sans-serif}
.al-infolist a{color:var(--al-lime);text-decoration:none;font-weight:600}
.al-callbar{display:none}
@media (max-width:767px){
.al-callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:998;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,11,15,.92);backdrop-filter:blur(12px);border-top:1px solid var(--al-line)}
.al-callbar a{text-align:center;text-decoration:none;font:600 17px 'Space Grotesk',sans-serif;padding:15px;border-radius:999px}
.al-call{background:var(--al-lime);color:var(--al-on,#0B0B0F)}.al-wa{background:#25D366;color:#06210f}
body.al-page{padding-bottom:76px}
}

/* animazioni sobrie */
.al-grad,.al-split .al-grad .al-wi{animation-name:none}
.al-split .al-grad .al-wi{animation:al-up .9s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
.al-hero::before,.al-hero::after,.al-title::before,.al-cta::before{animation-duration:30s;opacity:.28}
.al-cursor,.al-progress{display:none!important}
.al-track{animation-duration:45s}

/* blocco chiamata */
.al-callsec .elementor-widget-button{margin-bottom:14px}
.al-callsec .al-btn .elementor-button{width:100%;text-align:center;font-size:22px}
.al-btn.al-wabtn .elementor-button{background-color:#25D366!important;color:#06210f!important}
.al-callsec .al-callbtn .elementor-button::after,.al-callsec .al-wabtn .elementor-button::after{content:""}

.al-pf-body small{color:var(--al-lime)}
.al-skills li:hover{color:#0B0B0F}

/* ===== Liquid glass ===== */
body.al-page{background:#07070C}
body.al-page::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:
 radial-gradient(40% 40% at 15% 20%,rgba(123,92,255,.55),transparent 70%),
 radial-gradient(35% 35% at 85% 15%,rgba(255,92,57,.40),transparent 70%),
 radial-gradient(40% 40% at 70% 85%,rgba(198,255,61,.22),transparent 70%),
 radial-gradient(35% 35% at 10% 90%,rgba(45,156,255,.35),transparent 70%);animation:al-orbs 40s ease-in-out infinite alternate}
@keyframes al-orbs{to{transform:translate(3%,-3%) rotate(6deg) scale(1.08)}}
body.al-page .elementor-section:not(.al-marqsec):not(.al-bar){background:transparent!important}
.al-hero::before,.al-hero::after,.al-title::before,.al-cta::before{display:none}
/* titolo iniziale: colori caldi */
.al-hero .al-grad,.al-hero .al-split .al-grad .al-wi{background-image:linear-gradient(90deg,#FF6B2C,#FFC145,#FF4D8D,#FF6B2C)}
/* vetro */
.al-card .elementor-icon-box-wrapper,.al-pf-card,.al-step,.al-form,.al-callsec>.elementor-container,.al-cta>.elementor-container,.al-info,.al-gallery figure,.al-skills li,.al-chip,.al-callbar,.al-nav,.al-note,.al-work{
 background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
 border:1px solid rgba(255,255,255,.22)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.38)}
.al-step{padding:26px 24px;border-radius:26px}
.al-callsec>.elementor-container,.al-cta>.elementor-container{border-radius:36px;padding:44px 36px}
.al-info{padding:30px;border-radius:26px}
.al-work{border-radius:30px;margin-top:20px}
/* barra: pillola di vetro */
.al-bar{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;padding-top:14px!important}
.al-nav{border-radius:999px;padding:8px 10px 8px 24px}
.al-nav li a:hover,.al-nav li.on a{background:rgba(255,255,255,.14)}
.al-burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
@media (max-width:767px){.al-nav{border-radius:28px;padding:8px 10px 8px 18px}.al-nav li a{background:rgba(255,255,255,.1)!important}.al-callbar{border-radius:28px 28px 0 0}}
/* riflesso luminoso sulle schede */
.al-card .elementor-icon-box-wrapper::after,.al-pf-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%);opacity:.55;transition:opacity .4s}
.al-pf-card{position:relative}
.al-card:hover .elementor-icon-box-wrapper::after,.al-pf-card:hover::after{opacity:1}
.al-pf-card:hover,.al-card:hover .elementor-icon-box-wrapper{border-color:rgba(255,255,255,.5)!important}
/* campi e pulsanti */
.al-form input,.al-form textarea{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.al-btn .elementor-button,.al-form button,.al-work-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(0,0,0,.18),0 10px 30px rgba(0,0,0,.35)}
.al-chip.on,.al-nav li.al-cta-li a{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px rgba(0,0,0,.3)}
.al-chip:not(.on){color:var(--al-tx)}
.al-pf-img,.al-gallery img{border-radius:0}
.al-photo img{border:1px solid rgba(255,255,255,.3)}
.al-end{border-top:1px solid rgba(255,255,255,.12)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.al-card .elementor-icon-box-wrapper,.al-pf-card,.al-step,.al-form,.al-nav{background:#15151C!important}}

/* sfondo animato della prima sezione (aurora) */
.elementor-section.al-hero::before,.elementor-section.al-hero::after{display:block!important;content:"";position:absolute;inset:-25%;width:auto;height:auto;right:auto;left:auto;top:auto;bottom:auto;border-radius:0;z-index:0;pointer-events:none;opacity:1}
.elementor-section.al-hero::before{background:radial-gradient(34% 44% at 24% 30%,rgba(123,92,255,.75),transparent 70%),radial-gradient(30% 40% at 76% 26%,rgba(255,92,57,.62),transparent 70%),radial-gradient(34% 40% at 60% 80%,rgba(198,255,61,.34),transparent 70%),radial-gradient(28% 36% at 18% 80%,rgba(45,156,255,.45),transparent 70%);filter:blur(34px);animation:al-aurora 14s ease-in-out infinite alternate}
.elementor-section.al-hero::after{background:conic-gradient(from 0deg at 50% 50%,rgba(45,156,255,0),rgba(45,156,255,.38),rgba(255,92,57,0),rgba(123,92,255,.38),rgba(45,156,255,0));filter:blur(70px);animation:al-spin 28s linear infinite;mix-blend-mode:screen}
@keyframes al-aurora{0%{transform:translate(-5%,-4%) scale(1) rotate(0deg)}50%{transform:translate(5%,4%) scale(1.12) rotate(6deg)}100%{transform:translate(-3%,6%) scale(1.05) rotate(-5deg)}}
@keyframes al-spin{to{transform:rotate(360deg)}}

/* Chi sono: testo leggibile, si illumina al passaggio del mouse */
.al-aboutcol>.elementor-widget-wrap,.al-aboutbox{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:38px 34px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 50px rgba(0,0,0,.38)}
.al-aboutcol .elementor-heading-title,.al-aboutbox h2{color:#FFFFFF!important;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.al-aboutcol .al-split .al-wi,.al-aboutbox .al-split .al-wi{transition:color .25s,text-shadow .25s}
.al-aboutcol .al-split:hover .al-wi,.al-aboutbox .al-split:hover .al-wi{color:var(--al-lime);text-shadow:0 0 28px rgba(198,255,61,.55)}
.al-aboutcol .al-abouttext,.al-aboutcol .al-abouttext p,.al-aboutbox p{color:#D9D6E4!important;transition:color .25s,text-shadow .25s}
.al-aboutcol .al-abouttext:hover p,.al-aboutbox p:hover{color:#FFFFFF!important;text-shadow:0 1px 18px rgba(255,255,255,.28)}
.al-aboutcol .al-skills li{color:#FFFFFF}

/* menu: voci bianche, il pulsante resta com'è */
.al-nav li:not(.al-cta-li) a,.al-nav li:not(.al-cta-li) a:hover,.al-nav li.on:not(.al-cta-li) a{color:#FFFFFF!important}
.al-nav li.al-cta-li a{color:var(--al-on,#0B0B0F)!important}

/* sfondo hero: sfere di vetro che fluttuano + griglia */
.al-hero canvas.al-net{opacity:.45}
.al-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.al-orbw{position:absolute;will-change:transform}
.al-orb{border-radius:50%;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.85),rgba(255,255,255,.18) 20%,transparent 42%),radial-gradient(circle at 62% 72%,var(--c),transparent 72%);box-shadow:inset 0 0 50px rgba(255,255,255,.28),inset -14px -18px 40px rgba(0,0,0,.25),0 40px 90px -10px var(--c);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:al-orbf var(--d) ease-in-out infinite alternate}
@keyframes al-orbf{0%{transform:translate(0,0) rotate(0) scale(1)}100%{transform:translate(-34px,46px) rotate(18deg) scale(1.08)}}
.al-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 75% at 55% 45%,#000,transparent);mask-image:radial-gradient(70% 75% at 55% 45%,#000,transparent);animation:al-gridm 24s linear infinite}
@keyframes al-gridm{to{background-position:64px 64px}}
@media (max-width:767px){.al-orbw:nth-child(n+4){display:none}.al-orb{opacity:.8}}

/* sfondo hero: tecnologico (pioggia di codice, griglia, finestra editor) */
.al-rain{position:absolute;inset:0;width:100%;height:100%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 70%)}
.al-hero canvas.al-net{display:none}
.al-win{position:absolute;right:5%;bottom:14%;width:410px;max-width:40vw;z-index:1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(198,255,61,.12);animation:al-winf 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes al-winf{to{transform:translateY(-16px) rotate(-1deg)}}
.al-win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25)}
.al-win-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.al-win-bar i:nth-child(2){background:#FEBC2E}.al-win-bar i:nth-child(3){background:#28C840}
.al-win-bar span{margin-left:10px;font:12px ui-monospace,Menlo,Consolas,monospace;color:rgba(255,255,255,.6)}
.al-win pre{margin:0;padding:16px 18px;min-height:176px;font:13px/1.75 ui-monospace,Menlo,Consolas,monospace;color:#E8E6F0;white-space:pre;overflow:hidden;background:transparent;border:0}
.al-win .k{color:#C6FF3D}.al-win .a{color:#FF9A5C}.al-win .s{color:#7DD3FC}.al-win .c{color:#8B8AA0}.al-win .p{color:#F4F1EA}
.al-caret{display:inline-block;width:8px;height:15px;background:#C6FF3D;vertical-align:-2px;margin-left:1px;animation:al-bl 1s steps(1) infinite}
@keyframes al-bl{50%{opacity:0}}
@media (max-width:1100px){.al-win{display:none}}

/* sfondo hero: scena da web designer (editor + browser + telefono) */
.al-rain,.al-hero canvas.al-net{display:none!important}
.al-grid{background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:radial-gradient(75% 80% at 60% 45%,#000,transparent);mask-image:radial-gradient(75% 80% at 60% 45%,#000,transparent)}
.al-guide{position:absolute;background:rgba(45,156,255,.35);box-shadow:0 0 12px rgba(45,156,255,.5)}
.al-guide.v{top:0;bottom:0;width:1px;left:58%;animation:al-gv 14s ease-in-out infinite alternate}
.al-guide.h{left:0;right:0;height:1px;top:68%;animation:al-gh 16s ease-in-out infinite alternate}
@keyframes al-gv{to{left:63%}}@keyframes al-gh{to{top:60%}}
.al-stage{position:absolute;right:3%;top:52%;width:560px;height:430px;margin-top:-190px}
.al-stage .al-win{position:absolute;left:0;top:0;width:290px;max-width:none;right:auto;bottom:auto;animation:al-winf 9s ease-in-out infinite alternate}
.al-stage .al-win pre{min-height:196px;padding:12px 14px 12px 8px}
.al-win .ln{display:inline-block;width:26px;color:#6E6D85;text-align:right;margin-right:12px;user-select:none}
.al-brw{position:absolute;right:0;bottom:0;width:380px;border-radius:18px;overflow:hidden;z-index:2;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 30px 80px rgba(0,0,0,.55);animation:al-winf 11s ease-in-out infinite alternate-reverse}
.al-url{background:rgba(255,255,255,.1);border-radius:99px;padding:3px 14px;margin-left:12px!important;font:11.5px ui-monospace,Menlo,Consolas,monospace;color:rgba(255,255,255,.7)}
.al-canvas{position:relative;height:238px;margin:10px}
.wf{position:absolute;display:block;border-radius:6px;background:rgba(255,255,255,.22);opacity:0;animation:al-wf 12s ease-in-out infinite;animation-delay:var(--t)}
.wf.t{background:rgba(255,255,255,.7)}.wf.a{background:#C6FF3D}.wf.l{background:#FF9A5C;border-radius:50%}.wf.i{background:linear-gradient(135deg,#7B5CFF,#FF5C39);border-radius:12px}.wf.c{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:10px}
@keyframes al-wf{0%{opacity:0;transform:scale(.86)}5%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.al-sel{position:absolute;border:1.5px solid #C6FF3D;box-shadow:0 0 20px rgba(198,255,61,.35);animation:al-sel 12s ease-in-out infinite}
.al-sel u{position:absolute;width:7px;height:7px;background:#0B0B0F;border:1.5px solid #C6FF3D;border-radius:2px}
.al-sel u:nth-child(1){left:-4px;top:-4px}.al-sel u:nth-child(2){right:-4px;top:-4px}.al-sel u:nth-child(3){left:-4px;bottom:-4px}.al-sel u:nth-child(4){right:-4px;bottom:-4px}
.al-sel em{position:absolute;left:-1px;top:-19px;background:#C6FF3D;color:#0B0B0F;font:600 10px Inter,sans-serif;padding:2px 7px;border-radius:4px 4px 4px 0;font-style:normal;white-space:nowrap}
.al-sel .al-ptr{position:absolute;right:-12px;bottom:-14px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.al-sel b{position:absolute;right:-52px;bottom:-30px;background:#FF5C39;color:#fff;font:600 10px Inter,sans-serif;padding:2px 8px;border-radius:99px}
@keyframes al-sel{0%,8%{left:2%;top:3%;width:96%;height:11%}18%,32%{left:4%;top:20%;width:64%;height:24%}42%,50%{left:4%;top:61%;width:26%;height:12%}60%,72%{left:60%;top:20%;width:36%;height:54%}82%,94%{left:4%;top:78%;width:92%;height:19%}100%{left:2%;top:3%;width:96%;height:11%}}
.al-phone{position:absolute;left:34px;bottom:-6px;width:112px;height:216px;border-radius:24px;z-index:3;background:rgba(11,11,15,.7);border:2px solid rgba(255,255,255,.35);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden;animation:al-winf 8s ease-in-out infinite alternate}
.al-pn{position:absolute;left:50%;top:6px;width:34px;height:7px;margin-left:-17px;border-radius:9px;background:rgba(255,255,255,.3)}
.al-tagc{position:absolute;z-index:4;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:#F4F1EA;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:99px;animation:al-winf 7s ease-in-out infinite alternate}
.al-tagc.c1{left:300px;top:-10px;color:#C6FF3D}.al-tagc.c2{right:-8px;top:128px;animation-delay:-2s;color:#FF9A5C}.al-tagc.c3{left:-6px;top:260px;animation-delay:-3s;color:#7DD3FC}.al-tagc.c4{left:186px;bottom:-34px;animation-delay:-4s;color:#FF4D8D}
@media (max-width:1380px){.al-stage .al-win,.al-tagc.c1,.al-tagc.c3{display:none}.al-stage{width:400px;margin-top:-140px}.al-phone{left:-30px}}
@media (max-width:1100px){.al-stage{display:none}}

/* mobile: il pulsante Contatti resta giallo come su computer */
@media (max-width:767px){
.al-nav li.al-cta-li a,.al-nav li.al-cta-li a:hover{background:var(--al-lime)!important;color:var(--al-on,#0B0B0F)!important;font-weight:700;border:0}
}
/* evita che la scena copra il titolo */
@media (max-width:1560px){.al-stage .al-win,.al-tagc.c1,.al-tagc.c3{display:none}.al-stage{width:400px;margin-top:-140px}.al-phone{left:-30px}}
@media (min-width:1561px){.al-stage .al-win,.al-tagc.c1,.al-tagc.c3{display:block}}

/* stessa scena su computer, tablet e telefono: sotto i 1100px passa sotto al testo, in scala */
@media (max-width:1100px){
.al-orbs{overflow:hidden}
.al-stage{display:block!important;left:50%;right:auto;top:auto;bottom:22px;width:400px;height:300px;margin:0 0 0 -200px;transform-origin:50% 100%;transform:scale(var(--s,1))}
.al-stage .al-win,.al-tagc.c1,.al-tagc.c3{display:none!important}
.al-brw{width:380px;right:0}
.al-phone{left:-6px;bottom:-4px}
.al-tagc.c2{right:-6px;top:60px}.al-tagc.c4{left:200px;bottom:-30px}
.elementor-section.al-hero{padding-bottom:360px!important}
}
@media (max-width:480px){.elementor-section.al-hero{padding-bottom:330px!important}}

/* la grafica sta di lato solo su computer: su tablet e telefono non c'è */
@media (max-width:1100px){
.al-stage{display:none!important}
.elementor-section.al-hero{padding-bottom:110px!important;min-height:0}
}

/* tablet e telefono: la grafica resta sotto al testo, in scala; su computer sta di lato */
@media (max-width:1100px){
.al-stage{display:block!important;left:50%;right:auto;top:auto;bottom:22px;width:400px;height:300px;margin:0 0 0 -200px;transform-origin:50% 100%;transform:scale(var(--s,1))}
.al-stage .al-win,.al-tagc.c1,.al-tagc.c3{display:none!important}
.elementor-section.al-hero{padding-bottom:360px!important}
}
@media (max-width:480px){.elementor-section.al-hero{padding-bottom:330px!important}}

/* filtri portfolio: bianchi, quello attivo giallo */
.al-chip:not(.on){color:#FFFFFF!important}
.al-chip:not(.on):hover{border-color:var(--al-lime)!important;color:var(--al-lime)!important}
.al-chip.on,.al-chip.on:hover{background:var(--al-lime)!important;color:var(--al-on,#0B0B0F)!important;border-color:var(--al-lime)!important;font-weight:700}