/* Francesco Riolo — stylesheet */

html, body { background: #0d0c0f; color: #d8d0bc; -webkit-font-smoothing: antialiased; }
  body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; max-width: 100vw; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c5d24 0%, #d4a857 50%, #7c5d24 100%);
    border-radius: 9999px;
    border: 1px solid rgba(212,168,87,.15);
    transition: background .3s;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d4a857 0%, #ecc878 50%, #d4a857 100%);
  }
  /* Firefox */
  * { scrollbar-width: thin; scrollbar-color: #7c5d24 transparent; }

  /* Selection */
  ::selection { background: #d4a857; color: #0d0c0f; }

  /* Reveal on scroll — disabilitato, tutti visibili */
  .reveal { opacity: 1; transform: none; }

  /* Aurora background blobs */
  .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .aurora::before, .aurora::after {
    content: ''; position: absolute; border-radius: 9999px;
    filter: blur(120px); opacity: .35;
  }
  .aurora::before { width: 520px; height: 520px; left: -120px; top: -160px; background: radial-gradient(circle, #d4a857, transparent 60%); }
  .aurora::after  { width: 600px; height: 600px; right: -180px; bottom: -200px; background: radial-gradient(circle, #6e3d8a, transparent 60%); opacity: .25; }

  /* Gold gradient text */
  .text-gold-grad {
    background: linear-gradient(135deg, #ecc878 0%, #d4a857 50%, #b8862a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* Thin top hairline */
  .hairline::before {
    content: ''; display: inline-block; width: 26px; height: 1px;
    background: linear-gradient(to right, transparent, #d4a857, transparent);
    margin-right: .8rem; vertical-align: middle;
  }

  /* Card glass */
  .glass { background: linear-gradient(145deg, rgba(28,26,34,.85), rgba(20,19,24,.7)); backdrop-filter: blur(8px); }

  /* Tight tracking helpers */
  .tracking-mega { letter-spacing: -.035em; }

  /* Gold border gradient */
  .border-gold-grad { position: relative; }
  .border-gold-grad::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(212,168,87,.55), rgba(212,168,87,.05) 40%, rgba(212,168,87,0) 60%, rgba(212,168,87,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }

  /* Marquee */
  .marquee-track { display: flex; width: max-content; }

  /* Mobile menu — controlled via JS inline styles */

/* ──────────────────────────────────────── */

.nav-link {
    position: relative;
    display: inline-block;
    padding: .55rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #c8c0d4;
    transition: color .25s;
  }
  .nav-link:hover, .nav-link.active { color: #f3ecd8; }
  .nav-link::after {
    content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .15rem; height: 1px;
    background: linear-gradient(to right, transparent, #d4a857, transparent);
    transform: scaleX(0); transform-origin: center; transition: transform .35s;
  }
  .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
  #nav.scrolled { background: rgba(8,7,10,.82); backdrop-filter: blur(22px) saturate(160%); border-bottom-color: rgba(212,168,87,.15); }
  #nav:not(.scrolled) { background: none; }
  #nav:not(.scrolled)::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 140px; /* più alta della nav per dissolvenza morbida */
    background: linear-gradient(to bottom, rgba(8,7,10,.62) 0%, rgba(8,7,10,.38) 45%, rgba(8,7,10,0) 100%);
    pointer-events: none;
    z-index: -1;
  }
  #nav.scrolled #nav-wordmark { opacity: 1; transform: none; }

/* ──────────────────────────────────────── */

/* Hero carousel — crossfade slides */
  .hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 55% 60%;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.6s ease-in-out, transform 5s ease-out;
    will-change: opacity, transform;
    filter: brightness(.78) saturate(.95) contrast(1.03);
  }
  .hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
  }
  .hero-slide.is-bw { filter: brightness(.78) saturate(0) contrast(1.05); }

  /* Dots */
  .hero-dot {
    width: 22px; height: 2px; border-radius: 2px;
    background: rgba(243,236,216,.25);
    transition: background .35s, width .35s;
    cursor: pointer; padding: 0; border: 0;
  }
  .hero-dot:hover { background: rgba(243,236,216,.55); }
  .hero-dot.is-active { background: #d4a857; width: 38px; }


  /* Hero socials */
  .hero-soc {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px; margin-right: .6rem;
    border-radius: 12px;
    border: 1px solid rgba(212,168,87,.25);
    background: rgba(243,236,216,.04);
    color: rgba(243,236,216,.7);
    text-decoration: none;
    transition: all .25s;
  }
  .hero-soc svg { width: 18px; height: 18px; }
  .hero-soc-imdb svg { width: 30px; height: auto; }
  .hero-soc:hover { transform: translateY(-2px); border-color: currentColor; }
  .hero-soc-sp:hover   { color: #1DB954; background: rgba(29,185,84,.1); }
  .hero-soc-yt:hover   { color: #FF0033; background: rgba(255,0,51,.1); }
  .hero-soc-ap:hover   { color: #fc3c44; background: rgba(252,60,68,.1); }
  .hero-soc-ig:hover   { color: #E1306C; background: rgba(225,48,108,.1); }
  .hero-soc-imdb:hover { color: #F5C518; background: rgba(245,197,24,.1); }

  .role-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(243,236,216,.7);
    border: 1px solid rgba(212,168,87,.25);
    padding: .35rem .9rem;
    border-radius: 9999px;
    background: rgba(243,236,216,.03);
    transition: border-color .25s, color .25s, background .25s;
  }
  .role-chip:hover { border-color: rgba(212,168,87,.7); color: #ecc878; background: rgba(212,168,87,.08); }

  /* Hero content — scala 80% su FHD, 110% su ultrawide per mantenere proporzioni */
  @media (min-width: 1024px) and (max-width: 1919px) {
    .hero-content { zoom: 0.72; }
  }
  @media (min-width: 1920px) {
    .hero-content { zoom: 1.1; }
    .hero-content .max-w-3xl { padding-top: 75px !important; }
  }


/* ──────────────────────────────────────── */

.skill-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    color: #7a7280;
    border: 1px solid rgba(212,168,87,.18);
    padding: .35rem .85rem;
    border-radius: 9999px;
    transition: border-color .25s, color .25s;
  }
  .skill-chip:hover { border-color: #d4a857; color: #ecc878; }
  .ms-row {
    display: grid; grid-template-columns: 64px 1fr; gap: 1rem;
    padding: 1rem 0; border-bottom: 1px solid rgba(212,168,87,.08);
    align-items: baseline;
  }
  .ms-row:last-child { border-bottom: none; }
  .ms-yr {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem; color: #d4a857; letter-spacing: .06em;
  }
  .ms-row strong { color: #f3ecd8; font-weight: 500; }
  .ms-note { display: block; margin-top: .15rem; font-size: .8rem; color: #7a7280; font-style: italic; }

/* ──────────────────────────────────────── */

/* Disco cover as <img> */
  .disco-card img.cover-bg {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #08070a;
  }

/* Carousel track */
  .disco-track {
    display: flex;
    gap: 1.5rem;
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
    width: 100%;
    will-change: transform;
  }
  .disco-track .disco-card {
    flex: 0 0 auto;
    /* larghezza calcolata via JS in base al numero di card visibili */
  }

  .disco-arrow {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 9999px;
    border: 1px solid rgba(212,168,87,.3);
    color: #ecc878; background: transparent;
    cursor: pointer;
    transition: all .2s;
  }
  .disco-arrow:hover { border-color: #d4a857; background: rgba(212,168,87,.08); }
  .disco-arrow svg { width: 18px; height: 18px; }

  .disco-card {
    position: relative;
    background: linear-gradient(160deg, rgba(28,26,34,.9), rgba(20,19,24,.6));
    border: 1px solid rgba(212,168,87,.12);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.6,.2,1), border-color .35s, box-shadow .35s;
  }
  .disco-card:hover { transform: translateY(-6px); border-color: rgba(212,168,87,.35); box-shadow: 0 28px 70px -22px rgba(0,0,0,.7); }

  .disco-card .cover-link {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    text-decoration: none;
    background:
      radial-gradient(circle at 30% 25%, rgba(212,168,87,.22), transparent 55%),
      linear-gradient(135deg, #1f1a28 0%, #15121a 55%, #0a090c 100%);
  }
  .disco-card .cover-bg {
    position: absolute; inset: 0; z-index: 1;
    background-size: cover; background-position: center;
    background-repeat: no-repeat; background-color: #08070a;
    transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .35s;
  }
  .disco-card .cover-icon {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center;
  }
  .disco-card:hover .cover-bg { transform: scale(1.06); filter: brightness(.85); }

  .disco-card .cover-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1.4rem 1.4rem 1.2rem;
    display: flex; flex-direction: column; gap: .15rem;
    background: linear-gradient(to top, rgba(8,7,10,.95) 0%, rgba(8,7,10,.78) 35%, rgba(8,7,10,.45) 65%, rgba(8,7,10,0) 100%);
    pointer-events: none;
  }
  .disco-card .cover-overlay .yr {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: #d4a857; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }
  .disco-card .cover-overlay .title {
    font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 600;
    color: #f3ecd8; line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,.7); letter-spacing: -.005em;
  }
  .disco-card .cover-overlay .cover-feat {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: .85rem; color: rgba(243,236,216,.7); line-height: 1.3; margin-top: .2rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
  }
  .disco-card .cover-overlay .title-soft { opacity: .65; font-weight: 400; }

  .disco-card .cover-play {
    position: absolute; top: 50%; left: 50%;
    width: 60px; height: 60px;
    transform: translate(-50%, -50%) scale(.6);
    background: #1DB954; border-radius: 50%;
    display: grid; place-items: center;
    opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2,.6,.2,1);
    z-index: 3; box-shadow: 0 16px 36px rgba(29,185,84,.45); pointer-events: none;
  }
  .disco-card .cover-play svg { width: 26px; height: 26px; margin-left: 3px; }
  .disco-card:hover .cover-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  .disco-card .plats {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: 1rem 1.2rem 1.2rem;
  }
  .pb {
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    border-radius: 9px;
    border: 1px solid currentColor;
    background: rgba(8,7,10,.4);
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
  }
  .pb svg { width: 17px; height: 17px; display: block; }
  .pb:hover { transform: translateY(-1px); }
  .pb-sp { color: #1DB954; border-color: rgba(29,185,84,.4); }   .pb-sp:hover { background: #1DB954; color: #000; border-color: #1DB954; }
  .pb-ap { color: #fc3c44; border-color: rgba(252,60,68,.4); }   .pb-ap:hover { background: #fc3c44; color: #fff; border-color: #fc3c44; }
  .pb-am { color: #FF9900; border-color: rgba(255,153,0,.4); }   .pb-am:hover { background: #FF9900; color: #000; border-color: #FF9900; }
  .pb-dz { color: #a259ff; border-color: rgba(162,89,255,.4); }  .pb-dz:hover { background: #a259ff; color: #fff; border-color: #a259ff; }
  .pb-td { color: #9db4ff; border-color: rgba(157,180,255,.35); } .pb-td:hover { background: #9db4ff; color: #000; border-color: #9db4ff; }

  .disco-dot {
    width: 22px; height: 2px; border-radius: 2px;
    background: rgba(243,236,216,.25); border: 0; cursor: pointer; padding: 0;
    transition: background .35s, width .35s;
  }
  .disco-dot:hover { background: rgba(243,236,216,.55); }
  .disco-dot.is-active { background: #d4a857; width: 38px; }

/* ──────────────────────────────────────── */

.feat {
    display: block; text-decoration: none; overflow: hidden;
    background: linear-gradient(160deg, rgba(28,26,34,.9), rgba(20,19,24,.55));
    border: 1px solid rgba(212,168,87,.12);
    border-radius: 18px;
    transition: transform .35s, border-color .35s, box-shadow .35s;
  }
  .feat:hover { transform: translateY(-4px); border-color: rgba(212,168,87,.35); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); }
  .feat .ft { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #08070a; }
  .feat .ft img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: transform .6s, filter .25s; }
  .feat:hover .ft img { transform: scale(1.06); filter: brightness(.95); }
  .feat .play {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.22);
    opacity: 0; transition: opacity .25s;
  }
  .feat:hover .play { opacity: 1; }
  .feat .play::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(212,168,87,.95);
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .feat .play::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 0; height: 0;
    border-left: 14px solid #0d0c0f;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    transform: translate(-40%, -50%);
  }
  .feat .fb { padding: 1rem 1.2rem 1.25rem; }
  .feat .ch { font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #d4a857; margin-bottom: .3rem; }
  .feat .ti { font-size: .98rem; font-weight: 500; color: #f3ecd8; line-height: 1.35; margin-bottom: .25rem; }
  .feat .de { font-size: .82rem; color: #7a7280; font-style: italic; }

/* ──────────────────────────────────────── */

.contact-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: .67rem; letter-spacing: .06em; text-transform: uppercase;
    color: #a89880; display: flex; align-items: center; gap: .6rem;
    padding-bottom: .6rem; border-bottom: 1px solid rgba(212,168,87,.07);
  }
  .contact-item::before {
    content: ''; display: inline-block; flex-shrink: 0;
    width: 3px; height: 3px; border-radius: 50%;
    background: #d4a857; opacity: .55;
  }

  /* ── Lezioni cards ─────────────────────────── */
  .lezioni-card {
    background: rgba(20,19,24,.6);
    border: 1px solid rgba(212,168,87,.12);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: border-color .3s, box-shadow .3s;
  }
  .lezioni-card:hover {
    border-color: rgba(212,168,87,.3);
    box-shadow: 0 12px 48px -16px rgba(0,0,0,.6);
  }
  .lezioni-card--cta {
    background: rgba(212,168,87,.05);
    border-color: rgba(212,168,87,.2);
    justify-content: center;
  }
  .lezioni-ico {
    width: 36px; height: 36px;
    color: #d4a857;
    display: block;
    flex-shrink: 0;
  }
  .lezioni-ico svg { width: 100%; height: 100%; }
  .lezioni-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: #f3ecd8;
    line-height: 1.2;
  }
  .lezioni-body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .875rem;
    color: rgba(216,208,188,.65);
    line-height: 1.65;
  }

  .contact-email-link {
    display: inline-flex; align-items: center; gap: .75rem;
    text-decoration: none;
  }
  .contact-email-ico {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    border: 1px solid rgba(212,168,87,.25); background: rgba(212,168,87,.06);
    color: #d4a857; display: grid; place-items: center;
    transition: background .2s, border-color .2s;
  }
  .contact-email-link:hover .contact-email-ico {
    background: rgba(212,168,87,.12); border-color: rgba(212,168,87,.5);
  }

  .contact-row {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 14px;
    border: 1px solid rgba(212,168,87,.12);
    background: linear-gradient(160deg, rgba(28,26,34,.7), rgba(20,19,24,.4));
    text-decoration: none; transition: border-color .25s, transform .25s;
  }
  .contact-row:hover { border-color: rgba(212,168,87,.4); transform: translateY(-2px); }
  .contact-row .ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(212,168,87,.08); color: #ecc878; display: grid; place-items: center; flex-shrink: 0; }
  .contact-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7280; }
  .contact-row .val { font-size: .95rem; color: #f3ecd8; font-weight: 500; }

  .soc {
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 9999px;
    font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    color: #7a7280; border: 1px solid rgba(212,168,87,.18); background: rgba(28,26,34,.5);
    text-decoration: none; transition: all .2s;
  }
  .soc:hover { color: #f3ecd8; border-color: rgba(212,168,87,.45); }
  .soc-sp:hover { color: #1DB954; border-color: #1DB954; }
  .soc-yt:hover { color: #FF0033; border-color: #FF0033; }
  .soc-ap:hover { color: #fc3c44; border-color: #fc3c44; }
  .soc-ig:hover { color: #E1306C; border-color: #E1306C; }

  .fg { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
  .fg span { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #7a7280; }
  .fg input, .fg select, .fg textarea {
    background: rgba(8,7,10,.7); border: 1px solid rgba(212,168,87,.14); border-radius: 12px;
    padding: .8rem 1rem; color: #f3ecd8; font-family: 'Inter', sans-serif; font-size: .92rem;
    outline: none; transition: border-color .2s, background .2s;
  }
  .fg textarea { resize: vertical; min-height: 120px; }
  .fg select option { background: #0d0c0f; color: #f3ecd8; }
  .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: #d4a857; background: rgba(8,7,10,.9); }

/* ──────────────────────────────────────── */


/* ── Navbar logo ── */
.nav-logo-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.nav-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s ease-in-out; }
.nav-logo.active { opacity: 1; }
/* Logo statico (footer, mobile menu) — sempre visibile, niente carousel */
.logo-static { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; }

/* ── Mobile nav fullscreen ── */
.mobile-nav-item {
  display: block; width: 100%; text-align: center;
  padding: 1rem 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem; font-weight: 300; letter-spacing: .06em;
  color: #f3ecd8; border-bottom: 1px solid rgba(212,168,87,.12);
  transition: color .2s;
}
.mobile-nav-item:hover { color: #d4a857; }

/* ── contact-item ultrawide ── */
.contact-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: .67rem; letter-spacing: .06em; text-transform: uppercase;
  color: #a89880; display: flex; align-items: center; gap: .6rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(212,168,87,.07);
}
.contact-item::before { content: ''; display: inline-block; flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: #d4a857; opacity: .55; }
@media (min-width: 1920px) { .contact-item { font-size: .85rem; padding-bottom: .8rem; gap: .75rem; } }
@media (min-width: 1024px) and (max-width: 1919px) { .bio-lead { font-size: 1.05rem !important; } }

/* ── Navbar UHD (≥1920px) ── */
@media (min-width: 1920px) {
  #nav > div { height: 92px; }
  .nav-logo-wrap { width: 52px !important; height: 52px !important; }
  #nav-wordmark { font-size: 1rem !important; letter-spacing: .2em !important; }
  .nav-link { font-size: .82rem !important; letter-spacing: .16em !important; padding: .65rem 1.2rem !important; }
  #nav-logo-link + ul a.inline-flex { font-size: .82rem !important; padding: .65rem 1.5rem !important; }
}

/* ── Hero mobile background ── */
.hero-mobile-bg { display: none; position: absolute; inset: 0; overflow: hidden; }
.hero-mobile-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  /* Hero */
  .hero-slide { display: none !important; }
  .hero-mobile-bg { display: block !important; background-position: 50% bottom !important; }

  /* Rinforza il fade in basso su mobile */
  .hero-bottom-fade {
    background: linear-gradient(to top,
      #0d0c0f 0%,
      rgba(13,12,15,.92) 18%,
      rgba(13,12,15,.6) 38%,
      rgba(13,12,15,.15) 60%,
      transparent 100%) !important;
  }

  /* On mobile use a top-to-bottom dark gradient instead of left-to-right */
  .hero-lr-overlay { background: linear-gradient(to bottom, rgba(8,7,10,.72) 0%, rgba(8,7,10,.6) 40%, rgba(8,7,10,.42) 75%, rgba(8,7,10,.2) 100%) !important; }

  /* Disabilita tutti i fade-in su mobile */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* About mobile: bio inizia dopo la foto con padding per vedere l'immagine */
  #about .md\:col-start-2 { padding-top: 52vh !important; grid-column: 1 / -1 !important; }
  #about section { position: relative; }

  /* Stat strip numbers — scale down on mobile */
  .stat-number { font-size: 1.75rem !important; }
  .stat-label  { font-size: 9px !important; }

  /* Stat strip row: tighten gaps */
  .stats-row { gap: 1.25rem !important; }
  .stats-divider { height: 24px !important; }

  /* Hero socials + stats row — stack on mobile */
  .hero-bottom-row { flex-direction: column !important; gap: 1rem !important; }
  .stats-row { margin-left: 0 !important; }

  /* Live strip quote — smaller font */
  .live-quote { font-size: 1.5rem !important; line-height: 1.4 !important; }

  /* Discografia: allow controls to wrap */
  .disco-header-controls { flex-wrap: wrap; gap: .5rem; }

  /* About photo — less tall on mobile */
  #about .lg\:min-h-full { min-height: 45vw; }

  /* Reduce top padding on hero content for mobile */
  .hero-content { padding-top: 6rem !important; padding-bottom: 6rem !important; }

  /* Live strip — shorter on mobile */
  .live-strip { min-height: 300px !important; }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 480px) {
  /* Stat strip: center and tighten */
  .stat-item { text-align: center !important; }
  .stat-number { font-size: 1.5rem !important; }

  /* Socials row: label above icons */
  .socials-row { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
  .trovami-label { margin-right: 0 !important; }

  /* Icone sociali — spalmate su tutta la width solo su mobile */
  .socials-icons-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: .5rem !important;
  }
  .hero-soc {
    width: clamp(44px, 11vw, 58px) !important;
    height: clamp(44px, 11vw, 58px) !important;
  }

  /* Role chips wrap nicely */
  .soc-row-nowrap { flex-wrap: wrap !important; }

  /* Mobile menu items smaller on tiny screens */
  .mobile-nav-item { font-size: 1.9rem !important; padding: .75rem 0 !important; }

  /* Bio lead text */
  .bio-lead { font-size: 1.05rem !important; }

  /* About section: smaller heading */
  #about h2 { font-size: 2.8rem !important; }

  /* Press marquee — slow it a bit, don't hide */
  .marquee-track { gap: 8px; }

  /* Lezioni cards stack full width on small screens */
  .lezioni-card { padding: 1.5rem !important; }
}