/* mattianot.com · v16 */
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#16191d;
  --bg-2:#1b1f24;
  --surface:#21262c;
  --line:#2e353c;
  --text:#f3f6f4;
  --soft:#d9e0dc;
  --muted:#9ea8a3;
  --green:#3dff8c;
  --green-2:#22c55e;
  --green-dim:rgba(61,255,140,.1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px;
  --wrap:1120px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
::selection{background:var(--green);color:var(--bg)}
h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.15;letter-spacing:-.025em;margin:0 0 .55em}
h2{font-size:clamp(1.8rem,4.2vw,2.8rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0 0 1em}
strong{font-weight:600;color:#fff}
.g{color:var(--green)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--bg);padding:.6em 1em;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}

/* il pallino */
.dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--green);flex:none;vertical-align:.08em;margin-right:.55em}
.dot--live{box-shadow:0 0 0 0 rgba(61,255,140,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,255,140,.55)}70%{box-shadow:0 0 0 6px rgba(61,255,140,0)}100%{box-shadow:0 0 0 0 rgba(61,255,140,0)}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px max(20px,calc(50% - 540px));transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(22,25,29,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
.nav__brand{color:var(--text);text-decoration:none;font:700 1.05rem var(--mono);display:flex;align-items:center;letter-spacing:-.01em}
.nav__brand::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:10px;animation:pulse 2s infinite; margin-bottom: -2px;}
.nav__links{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav__links a{color:var(--muted);text-decoration:none;font-size:.9375rem}
.nav__links a:hover{color:var(--text)}
@media (max-width:860px){.nav__links{display:none}}

/* Collegamenti social nella navigazione */
.nav__actions{display:flex;align-items:center;gap:12px;flex:none}
.nav__instagram{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:0px solid var(--line);border-radius:50%;color:var(--text);text-decoration:none;transition:color .2s,border-color .2s,background .2s,transform .15s}
.nav__instagram svg{width:18px;height:18px}
.nav__instagram:hover{color:var(--green);border-color:var(--green);background:var(--green-dim);}
@media(max-width:380px){.nav{gap:.5rem;padding-left:14px;padding-right:14px}.nav__actions{gap:8px}.nav__instagram{width:36px;height:36px}.nav__brand{font-size:.98rem}}

/* bottoni */
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 .975rem/1 var(--sans);padding:1em 1.4em;border-radius:999px;background:var(--green);color:#0b0d0f;text-decoration:none;border:1px solid var(--green);transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn:hover{color:#0b0d0f;}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{color:var(--green);border-color:var(--green)}
.btn--sm{padding:.7em 1.1em;font-size:.875rem}

/* hero */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 70px;overflow:hidden;isolation:isolate}
.hero__rain{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.9}
.hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(22,25,29,.8) 0%,rgba(22,25,29,.8) 75%,var(--bg) 100%)}
.hero__inner{display:flex;flex-direction:column;gap:2rem}
.win{max-width:800px;/*background:rgba(19,22,26,.86);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.85);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)*/}
/*.win__bar,*/.build__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line)}
.win__bar i,.build__bar i{width:11px;height:11px;border-radius:50%;background:#3a4148}
.win__bar i:nth-child(1),.build__bar i:nth-child(1),.term__bar i:nth-child(1){background:#ff5f57}.win__bar i:nth-child(2),.build__bar i:nth-child(2),.term__bar i:nth-child(2){background:#febc2e}.win__bar i:nth-child(3),.build__bar i:nth-child(3),.term__bar i:nth-child(3){background:#28c840}
.win__url {display: none} .build__url{margin:0 auto;transform:translateX(-22px);font:400 .75rem var(--mono);color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 14px;display:inline-flex;align-items:center;gap:6px}
.win__body{/*padding:clamp(22px,4.5vw,40px)*/}

.hero h1{font-family:var(--mono);font-weight:700;font-size:clamp(2.5rem,7vw,4.6rem);letter-spacing:-.04em;color:#fff;margin-bottom:.45em}
.h1-sub{display:block;font:600 clamp(1.05rem,2.4vw,1.4rem)/1.3 var(--sans);color:var(--green);letter-spacing:-.01em;margin-top:.5em}
.lead{font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--soft);max-width:56ch;margin-bottom:1.6rem}
.flow{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;padding:0;font:400 .8125rem var(--mono);color:var(--muted)}
.flow li{display:flex;align-items:center;gap:6px}
/*.flow li+li::before{content:"";width:28px;height:1px;background:var(--line)}*/
.flow li.is-done::after{content:"→";color:var(--green);margin-left:2px}
.flow li.is-live{color:var(--text)}
/*.flow li.is-live::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);margin-left:4px;animation:pulse 2s infinite}*/
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.js .a1,.js .a2,.js .a3{opacity:0;transform:translateY(8px);animation:in .6s forwards}
.js .a1{animation-delay:.15s}.js .a2{animation-delay:.4s}.js .a3{animation-delay:.65s}
@keyframes in{to{opacity:1;transform:none}}


/* sezioni */
.sec{padding:clamp(70px,10vw,120px) 0;position:relative}
.sec--alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec__tag{display:inline-flex;align-items:center;font:400 1rem var(--mono);color:var(--green);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.1em}
.sec__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:.7em}
.sec__tag--c{justify-content:center}
.intro{color:var(--muted);font-size:1.1rem;}
.intro--c{margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
@media (max-width:880px){.grid-2{grid-template-columns:1fr}}
.grid-2 p{color:var(--soft)}

/* animazione: progetto -> sviluppo -> pubblica -> online (ciclo 11s) */
.build{margin:0}
.build__screen{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.lock{width:8px;height:7px;border-radius:2px;background:var(--green);position:relative;margin-top:3px}
.lock::before{content:"";position:absolute;left:1px;top:-5px;width:6px;height:6px;border:1.5px solid var(--green);border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.build__page{position:relative;height:400px;padding:22px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#1d2228,#191d22)}
.b{display:block;border-radius:6px;background:#2c333a;opacity:0}
.b-nav{height:25px;width:100%;background:linear-gradient(90deg,var(--green) 0 25%,transparent 25% 28%,#2c333a 28%);animation:bIn 11s infinite;--a:3%}
.b-title{height:22px;width:72%;margin-top:8px;background:#3a424a;transform-origin:left;animation:bGrow 11s infinite}
.b-line{height:15px;width:92%;transform-origin:left;animation:bGrow2 11s infinite}
.b-line--2{width:64%;animation-name:bGrow3}
.b-btn{height:25px;width:100px;border-radius:999px;background:var(--green);margin:6px 0 8px;animation:bPop 11s infinite}
.b-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.b-card{height:170px;border:1px solid var(--line);background:#232930;animation:bCard 11s infinite}
.b-card:nth-child(2){animation-name:bCard2}.b-card:nth-child(3){animation-name:bCard3}
@keyframes bIn{0%,3%{opacity:0}8%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes bGrow{0%,8%{opacity:0;transform:scaleX(0)}15%{opacity:1;transform:scaleX(1)}92%{opacity:1;transform:scaleX(1)}97%,100%{opacity:0}}
@keyframes bGrow2{0%,14%{opacity:0;transform:scaleX(0)}20%{opacity:1;transform:scaleX(1)}92%{opacity:1;transform:scaleX(1)}97%,100%{opacity:0}}
@keyframes bGrow3{0%,18%{opacity:0;transform:scaleX(0)}24%{opacity:1;transform:scaleX(1)}92%{opacity:1;transform:scaleX(1)}97%,100%{opacity:0}}
@keyframes bPop{0%,24%{opacity:0;transform:scale(.6)}29%{opacity:1;transform:scale(1.08)}31%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes bCard{0%,30%{opacity:0;transform:translateY(10px)}35%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes bCard2{0%,33%{opacity:0;transform:translateY(10px)}38%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes bCard3{0%,36%{opacity:0;transform:translateY(10px)}41%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@media (max-width:480px){.build__page{height:260px}}


/* servizi */
.cards{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(61,255,140,.5);}
.card__ico{width:44px;height:44px;border-radius:12px;background:var(--green-dim);display:grid;place-items:center;margin-bottom:1.2rem}
.card__ico svg{width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--muted);font-size:.975rem;flex:1}
.card a{text-decoration: none}
.card__out{display:inline-flex;align-items:center;margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--line);font:600 .875rem var(--sans);color:var(--text)}
.card__out::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:.6em}

/* passi */
.steps{list-style:none;margin:3.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.steps li{position:relative;display:flex;flex-direction:column;padding:0}
.steps__n{font:700 1.8rem/1 var(--mono);color:var(--green);margin-bottom:1rem;letter-spacing:-.01em}
.steps h3{margin-bottom:.6rem; /*background: var(--green); padding: 5px 12px;color: var(--bg);width: max-content;*/}
.steps p{color:var(--muted);font-size:.975rem;margin:0}
@media (max-width:1000px){.steps{gap:0 28px}}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:28px}
}

/* clienti */
.chips{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--soft);font-size:.9375rem;line-height:1.2}
.cat{font:600 .6875rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.cat::after{content:"/";font:400 .875rem var(--mono);letter-spacing:0;color:#5d6762;margin-left:.6em}

/* contatti: onde animate su tutta la sezione */
.contact{padding-top:clamp(50px,7vw,90px);position:relative;overflow:hidden;isolation:isolate}
.contact__rings{position:absolute;left:50%;top:46%;width:0;height:0;z-index:-1;pointer-events:none}
.contact__rings span{position:absolute;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border:1px solid rgba(61,255,140,.2);border-radius:50%;animation:ring 8s linear infinite;opacity:0}
.contact__rings span:nth-child(2){animation-delay:2.67s}.contact__rings span:nth-child(3){animation-delay:5.33s}
@keyframes ring{0%{transform:scale(.5);opacity:0}12%{opacity:1}100%{transform:scale(5);opacity:0}}
.launch{position:relative;text-align:center;border:1px solid rgba(61,255,140,.25);border-radius:28px;padding:clamp(56px,9vw,100px) 24px;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(61,255,140,.14),transparent 70%),rgba(27,31,36,.82)}
.launch .sec__tag{display:flex;justify-content:center}
.launch__title{font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,8vw,5rem);letter-spacing:-.045em;line-height:1;margin-bottom:.4em;display:inline-flex;align-items:flex-end}
.launch__dot{width:.2em;height:.2em;border-radius:50%;background:var(--green);margin:0 0 .08em .08em;animation:pulse 2s infinite;flex:none}
.launch__sub{color:var(--soft);font-size:clamp(1.05rem,2vw,1.2rem);max-width:48ch;margin:0 auto 2.2rem}
.btn--xl{font-size:clamp(1rem,2.6vw,1.25rem);padding:1.1em 1.8em;gap:.7em}
.launch__ig{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:1.6rem;color:var(--muted);text-decoration:none;font-size:.9375rem}
.launch__ig b{color:var(--text);font-weight:600}
.launch__ig:hover,.launch__ig:hover b{color:var(--green)}
.dante{margin:3.5rem auto 0;max-width:36ch;text-align:center}
.dante p{font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.6;color:var(--muted);font-style:italic;margin:0 0 .7em}
.dante cite{font:400 .75rem var(--mono);font-style:normal;color:#5d6762}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0;font-size:.875rem;color:var(--muted)}
.foot__inner{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:center}
.foot p{margin:0}
.foot .dot{width:.5em;height:.5em}
.foot a{color:var(--muted)}.foot a:hover{color:var(--green)}

/* comparsa */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rv.is-in{opacity:1;transform:none}

/* sottopagine (privacy, 404) */
.page{padding:130px 0 90px}
.page h1{font-size:clamp(2rem,5vw,3rem)}
.page h2{font-size:1.35rem;margin-top:2em}
.page p,.page li{color:var(--soft)}
.sec__tag.plain::before{display:none}
.term{max-width:720px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.term__bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);font:400 .75rem var(--mono);color:var(--muted)}
.term__bar i{width:11px;height:11px;border-radius:50%;background:#3a4148}
.term__bar span{margin:0 auto}
.term__body{padding:30px;font-family:var(--mono)}
.term__line{color:var(--muted)}
.term__out{font-family:var(--mono)}
.ps{color:var(--green);margin-right:.4em}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:3px;background:var(--green);vertical-align:-.15em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.muted{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .a1,.js .a2,.js .a3,.js .rv{opacity:1;transform:none}
  .b{animation:none!important;opacity:1!important;transform:none!important}
}
@media print{.hero__rain,.hero__veil,.nav,.contact__rings{display:none}body{background:#fff;color:#000}}

/* modulo contatti · v14 */
.contact-form{max-width:710px;margin:0 auto;text-align:left}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form__field{min-width:0;margin-bottom:24px}
.contact-form__field label{display:block;color:var(--soft);font:600 .875rem/1.5 var(--sans);margin-bottom:.5rem}
.contact-form__field label span{color:var(--green)}
.contact-form__field input,.contact-form__field textarea{display:block;width:100%;border:1px solid #46514c;border-radius:12px;background:#171b1f;color:var(--text);padding:13px 15px;font:400 1rem/1.5 var(--sans);outline:none;transition:border-color .2s,box-shadow .2s}
.contact-form__field textarea{resize:vertical;min-height:142px}
.contact-form__field input::placeholder,.contact-form__field textarea::placeholder{color:#97a39c;opacity:1}
.contact-form__field input:focus,.contact-form__field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(61,255,140,.13)}
.contact-form__trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form__privacy{font-size:.83rem;line-height:1.65;color:var(--muted);margin:.1rem 0 1.25rem;text-align:left}
.contact-form__privacy strong{color:var(--soft)}
.contact-form__submit{display:flex;justify-content:center;width:100%;cursor:pointer}
.contact-form__submit:disabled{cursor:wait;opacity:.65;transform:none}
.contact-form__status{font-size:.9rem;min-height:0;margin:.85rem 0 0;text-align:center;color:var(--soft)}
.contact-form__status.is-error{color:#ffb4a9}
.contact-form__status.is-success{color:var(--green)}
.contact-form__fallback{display:block;text-align:center;font-size:.9rem;margin:.5rem auto 0}
.contact-form__fallback[hidden]{display:none}
.contact-form__alternative{font-size:.9rem;color:var(--muted);margin:1.8rem 0 0}
/* Visualizzazione cosmetica dell'indirizzo: CSS escaped, non una barriera antispam.
   Il vero mailto viene creato solo dopo un'azione e un responso del server. */
.email-reveal{appearance:none;background:none;border:0;padding:0;margin:0;display:inline;color:var(--green);cursor:pointer;font:inherit;text-decoration:none;}
.email-reveal::after{content:"\69\6e\66\6f\40\6d\61\74\74\69\61\6e\6f\74\2e\63\6f\6d"}
.email-reveal:hover{color:var(--text)}
.email-reveal:disabled{opacity:.7;cursor:wait}
.email-action__status{font-size:.85rem;color:var(--soft);margin-left:.4em}
.email-action__status.is-error{color:#ffb4a9}
.email-action__status.is-success{color:var(--green)}
@media(max-width:600px){.contact-form__row{grid-template-columns:1fr;gap:0}.launch{padding-inline:18px}.contact-form__field input,.contact-form__field textarea{font-size:16px}}