:root{
  --bg:#0A0F1E;
  --surface:#111830;
  --surface-2:#161f3d;
  --line:#26314f;
  --ink:#E9EEF8;
  --muted:#8B96AE;
  --cyan:#4FD8EB;      /* radar / HUD */
  --gold:#F0B454;      /* loot / highlight */
  --green:#5BD98A;     /* shipped */
  --violet:#8B7CFF;    /* AI */
  --red:#F06A6A;
  --radius:14px;
  --maxw:1080px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:#04121a}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(79,216,235,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,216,235,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
}

a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;position:relative;z-index:1}

/* nav */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,15,30,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.5px;user-select:none;touch-action:manipulation}
.logo .cursor{color:var(--cyan);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex;gap:26px;font-size:13.5px}
.nav-links a{color:var(--muted);font-weight:500}
.nav-links a:hover{color:var(--ink);text-decoration:none}

/* player card */
.hero{padding-top:30px;padding-bottom:40px;position:relative}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2.5px;
  color:var(--cyan);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px;
  margin-left:4px;
}
h1{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,6.5vw,68px);
  font-weight:700;line-height:1.04;letter-spacing:-1.5px;margin-bottom:20px;
}
h1 .accent{color:var(--gold)}
.hero-sub{font-size:17px;color:var(--muted);max-width:620px;margin-bottom:36px}
.hero-sub strong{color:var(--ink);font-weight:600}

/* player stat bar */
.player-card{
  margin-top:44px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface) 0%,rgba(17,24,48,.4) 100%);
  padding:22px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  position:relative;overflow:hidden;
}
.player-card::before{
  content:'PLAYER STATUS';position:absolute;top:10px;right:14px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:2px;color:var(--muted);opacity:.6;
}
.stat .stat-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:5px}
.stat .stat-value{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600}
.stat .stat-value.gold{color:var(--gold)}
.stat .stat-value.cyan{color:var(--cyan)}
.stat .stat-value.green{color:var(--green)}

.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;
  font-size:14px;font-weight:600;transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:#04121a}
.btn-primary:hover{box-shadow:0 6px 24px rgba(79,216,235,.35)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan)}

/* sections */
section{padding-top:1px;padding-bottom:40px}
#skills{padding-top:1px}
.section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.section-head h2{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.4vw,32px);
  font-weight:700;letter-spacing:-.6px;
}
.section-head .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;
  color:var(--cyan);text-transform:uppercase;margin-left:auto;
}

/* skills */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.skill-block{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:20px 22px;transition:border-color .2s ease;
}
.skill-block:hover{border-color:rgba(79,216,235,.45)}
.skill-block h3{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);
  padding:4px 11px;border-radius:99px;
}

/* projects / quest log */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter-btn{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:7px 15px;border-radius:99px;cursor:pointer;transition:all .18s ease;
}
.filter-btn:hover{color:var(--ink);border-color:var(--muted)}
.filter-btn.active{background:var(--cyan);border-color:var(--cyan);color:#04121a;font-weight:600}

.projects{
  display:flex;flex-direction:column;counter-reset:proj;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;
}
.project{
  padding:22px 26px 22px 32px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
  transition:background .2s ease;position:relative;
  counter-increment:proj;
}
.project:last-child{border-bottom:none}
.project:hover{background:var(--surface-2)}
.project::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan)}
.project[data-cat~="ar"]::before{background:var(--gold)}
.project[data-cat~="trading"]::before{background:var(--green)}
.project[data-cat~="ai"]::before{background:var(--violet)}
.project.hidden{display:none}
.project-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.project h3{font-family:'Space Grotesk',sans-serif;font-size:18.5px;font-weight:600;letter-spacing:-.3px}
.project h3::before{
  content:'[' counter(proj,decimal-leading-zero) ']';
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;color:var(--muted);
  letter-spacing:1px;margin-right:8px;
}
.badge{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.5px;
  padding:4px 9px;border-radius:6px;white-space:nowrap;font-weight:600;
}
.badge.shipped{background:rgba(91,217,138,.12);color:var(--green);border:1px solid rgba(91,217,138,.35)}
.badge.live{background:rgba(79,216,235,.12);color:var(--cyan);border:1px solid rgba(79,216,235,.35)}
.badge.active{background:rgba(240,180,84,.12);color:var(--gold);border:1px solid rgba(240,180,84,.35)}
.badge.rd{background:rgba(139,124,255,.12);color:var(--violet);border:1px solid rgba(139,124,255,.35)}
.project p{font-size:14px;color:var(--muted)}
.project .highlight{color:var(--ink);font-weight:500}
.tech-row{display:flex;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);margin-top:auto}
.tech{background:none;padding:0;border-radius:0}
.tech:not(:last-child)::after{content:' · ';color:var(--muted)}
.project-link{
  font-size:13px;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:0;font-family:inherit;color:var(--cyan);cursor:pointer;
}
.project-link:hover{text-decoration:underline}
.project-link::before{content:'$ ';color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:400}

/* video modal */
.video-modal{
  position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,18,.82);backdrop-filter:blur(4px);padding:24px;
  opacity:1;visibility:visible;transition:opacity .18s ease;
}
.video-modal.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s}
.video-modal-box{
  position:relative;width:fit-content;max-width:92vw;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.video-modal-box video{
  display:block;width:auto;height:auto;
  max-width:min(720px,88vw);max-height:82vh;
  border-radius:8px;background:#000;
}
.video-modal-close{
  position:absolute;top:-14px;right:-14px;width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.video-modal-close:hover{border-color:var(--cyan);color:var(--cyan)}

/* experience timeline */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.tl-item{position:relative;padding-bottom:38px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-30px;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:2.5px solid var(--cyan);
}
.tl-item.gold::before{border-color:var(--gold)}
.tl-date{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--cyan);letter-spacing:1px;margin-bottom:4px}
.tl-item.gold .tl-date{color:var(--gold)}
.tl-item h3{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;margin-bottom:2px}
.tl-item h3 a{color:inherit;text-decoration:none}
.tl-item h3 a:hover{color:var(--cyan);text-decoration:underline}
.tl-role{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.tl-item ul{padding-left:18px;font-size:14px;color:var(--muted)}
.tl-item li{margin-bottom:4px}
.tl-item li strong{color:var(--ink);font-weight:500}

/* contact */
.contact-box{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface) 0%,rgba(240,180,84,.05) 100%);
  padding:44px;text-align:center;
}
.contact-box h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.5vw,34px);font-weight:700;letter-spacing:-.6px;margin-bottom:12px}
.contact-box p{color:var(--muted);max-width:520px;margin:0 auto 28px}
.contact-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:26px 0;text-align:center}
footer p{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .logo .cursor{animation:none}
  .btn:hover,.project:hover{transform:none}
}

/* tablet */
@media (max-width:760px){
  .player-card{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:16px;font-size:12.5px}
  .contact-box{padding:32px 22px}
  /* evita overflow orizzontale su schermi stretti */
  .skills-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
}

/* phone */
@media (max-width:560px){
  .wrap{padding-left:18px;padding-right:18px}
  .nav-inner{padding:10px 18px;flex-wrap:wrap;justify-content:center;gap:6px 0}
  .logo{font-size:12.5px;width:100%;text-align:center}
  .nav-links{gap:18px;font-size:12.5px;width:100%;justify-content:center}

  .hero{padding-top:48px;padding-bottom:44px}
  .hero-eyebrow{font-size:10.5px;letter-spacing:1.8px;margin-bottom:14px}
  h1{font-size:clamp(30px,9vw,38px);letter-spacing:-.8px;margin-bottom:16px}
  .hero-sub{font-size:15px;line-height:1.65;margin-bottom:28px}

  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;padding:13px 20px}

  .player-card{
    margin-top:32px;padding:20px 18px 18px;gap:16px 14px;
  }
  .player-card::before{top:8px;right:12px;font-size:8.5px}
  .stat .stat-label{font-size:9.5px;letter-spacing:1px}
  .stat .stat-value{font-size:16px}

  .section-head h2{font-size:24px}

  .filters{gap:8px;margin-bottom:22px}
  .filter-btn{font-size:11px;padding:6px 12px}

  .project{padding:18px 18px 18px 24px}
  .project h3{font-size:17px}
  .project p{font-size:13.5px}

  .timeline{padding-left:26px}
  .tl-item::before{left:-26px;width:13px;height:13px}
  .tl-item ul{padding-left:16px;font-size:13.5px}

  .contact-box{padding:30px 18px}
  .contact-links{flex-direction:column}
  .contact-links .btn{width:100%}
}

/* very small */
@media (max-width:380px){
  .player-card{grid-template-columns:1fr 1fr;padding:16px 14px}
  h1{font-size:29px}
  .nav-links{gap:12px;font-size:11.5px}
}

/* easter egg */
.treasure{
  position:fixed;z-index:200;font-size:34px;cursor:pointer;user-select:none;
  filter:drop-shadow(0 0 10px rgba(240,180,84,.8));
  animation:treasure-float 1.6s ease-in-out infinite alternate;
}
@keyframes treasure-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.loot-popup{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:210;
  background:var(--surface);border:1px solid var(--gold);border-radius:var(--radius);
  padding:26px 34px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:loot-in .25s ease;
}
@keyframes loot-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.loot-popup h4{font-family:'Space Grotesk',sans-serif;font-size:18px;color:var(--gold);margin-bottom:6px}
.loot-popup p{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:16px}
.loot-popup button{
  background:var(--gold);border:none;color:#1a1206;font-weight:700;font-size:13px;
  padding:9px 22px;border-radius:8px;cursor:pointer;
}
@media (prefers-reduced-motion:reduce){.treasure{animation:none}}