:root{
  --bg:#0e0e0e;
  --text:#f5f5f5;
  --accent:#d4af37;
  --radius:16px;
  font-family:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}

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

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
}

/*** BACKGROUND SVG ***/
.bg-svg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.blob{fill:var(--accent);opacity:.23}

/*** SLIDER PANEL ***/
.slider{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.panel{z-index:1;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2rem;
  opacity:0;
  visibility:hidden;
}
.panel.active{visibility:visible}

.inner{
  max-width:820px;
  width:90%;
}
/* Titolo fluido e davvero responsive */
h1{
  font-size:clamp(1.8rem, 8vw, 4rem);   /* già corretto */
  color:var(--accent);
  line-height:1.1;
  word-break:normal;    /* ↶ spezza solo sugli spazi */
  hyphens:none;         /* ↶ niente trattini automatici */
  text-align:center;
}

h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1rem}
h3{font-size:clamp(1.5rem,3vw,2rem);margin:1rem 0 .6rem}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.subtitle{font-size:clamp(1.2rem,2.5vw,1.6rem);opacity:.9;margin-top:.8rem}
.small{font-size:1rem;opacity:.85;line-height:1.55}

.project-img{
  max-width:520px;
  max-height:58vh;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  margin-inline:auto;
  margin-bottom:1rem;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}

/* details list */
.details{
  list-style:none;
  margin-top:0.8rem;
  padding-left:0;
  text-align:left;
}
.details li{
  margin-bottom:0.4rem;
  position:relative;
  padding-left:1.2rem;
  font-size:0.95rem;
}
.details li::before{
  content:"▹";
  position:absolute;
  left:0;
  color:var(--accent);
  font-size:0.9rem;
}

/* animated dots */
.dot{fill:var(--accent);opacity:0.35;}

/* footer */
.footer{
  position:fixed;
  bottom:0;
  width:100%;
  text-align:center;
  font-size:0.85rem;
  padding:0.4rem 0.8rem;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(4px);
}
.footer a{color:var(--accent);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* center details list */
.details{
  list-style:none;
  margin-top:0.8rem;
  padding-left:0;
  text-align:center;
}
.details li{
  margin-bottom:0.45rem;
  padding-left:1.1rem;
  position:relative;
  display:inline-block;
}
.details li::before{
  content:"▹";
  position:absolute;
  left:0;
  color:var(--accent);
}
@media(max-width:480px){
  .project-img{
    max-width:90vw;
    max-height:50vh;
  }
}