/* _shared.css */
/* v. 1.00 - 10 June 2026 */
/* Built with PioneerAIO, framework by Gabriele Gobbo · https://www.pioneeraio.it */

:root{--nero:#15181c; --card:#1d2127; --card2:#1d2127;
    --blu:#1f5fa3; --azz:#4db2ec; --lime:#afd64e;
    --txt:#d6d9dd; --bianco:#ffffff; --bordo:#2c313a;}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--nero);color:var(--txt);font-family:'Open Sans',sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--azz);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Roboto',sans-serif;color:var(--bianco);line-height:1.2}
/* barra azzurra */
  .topbar{background:var(--blu);font-size:12px}
.topbar .wrap{max-width:1024px;margin:0 auto;padding:4px 32px;display:flex;gap:18px}
.topbar a{color:#fff;font-weight:600;opacity:.9}
.topbar a.active{opacity:1;font-weight:700;color:var(--lime)}
.topbar a:hover{opacity:1;text-decoration:none}
/* barra nera con logo + nav */
  .nav{background:#000;border-bottom:1px solid var(--bordo);position:sticky;top:0;z-index:50}
.nav .wrap{max-width:1024px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between}
.nav img{height:34px;width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:20px;align-items:center}
.nav ul a{color:#fff;font-family:'Roboto',sans-serif;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.2px}
.nav ul a.active{color:var(--lime)}
.nav ul a:hover{color:var(--azz);text-decoration:none}
.burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
/* breadcrumb */
  .crumb{max-width:1024px;margin:0 auto;padding:14px 32px 0;font-size:13px;color:#7e858d}
.crumb a{color:#9aa0a7}
.crumb a:hover{color:var(--azz);text-decoration:none}
.crumb i{font-size:10px;margin:0 7px;color:#555}
/* hero */
  .hero{max-width:1024px;margin:0 auto;padding:28px 32px 30px}
  .hero.hero-profile{display:flex;gap:30px;align-items:center}
.eyebrow{color:var(--lime);font-family:'Roboto',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(30px,5vw,50px);font-weight:900;margin-bottom:18px}
.hero p.lead{font-size:clamp(18px,2.4vw,22px);max-width:760px;color:#dcdcdc}
/* sezioni */
  main{max-width:1024px;margin:0 auto;padding:0 32px}
section{padding:34px 0;border-top:1px solid var(--bordo)}
section h2{font-size:clamp(22px,3vw,30px);margin-bottom:16px}
section h2 i{color:var(--azz);margin-right:10px}
section p{margin-bottom:14px;max-width:820px}
/* card numeriche colorate */
  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:10px 0 4px}
.stat{border-radius:14px;padding:24px 16px;text-align:center;transition:transform .25s;color:#fff}
.stat:hover{transform:translateY(-5px)}
.stat.s1{background:linear-gradient(150deg,#1f5fa3,#143f6e)}
.stat.s2{background:linear-gradient(150deg,#4db2ec,#2787c0)}
.stat.s3{background:linear-gradient(150deg,#7e57c2,#54338f)}
.stat.s4{background:linear-gradient(150deg,#e0567f,#b03457)}
.stat.s5{background:linear-gradient(150deg,#6aa829,#4e8019)}
.stat .num{font-family:'Roboto',sans-serif;font-weight:900;font-size:clamp(26px,3.4vw,40px);color:#fff;line-height:1}
.stat .num span{opacity:.85}
.stat .lab{font-size:13px;margin-top:8px;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
/* bio */
  .bio{background:#0a0c0e;border:1px solid var(--bordo);border-radius:16px;padding:26px;display:flex;gap:22px;align-items:flex-start}
.bio .ic{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--blu);display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff}
.bio h3{font-size:20px;margin-bottom:8px}
.bio p{margin-bottom:0;font-size:16px}
/* card smistamento */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-top:6px}
.c{display:block;background:var(--card);border:1px solid var(--bordo);border-radius:14px;padding:24px;transition:transform .25s,border-color .25s;color:var(--txt)}
.c:hover{transform:translateY(-4px);border-color:var(--azz);text-decoration:none}
.c .ci{font-size:24px;color:var(--azz);margin-bottom:12px}
.c h3{font-size:19px;margin-bottom:6px}
.c p{font-size:15px;margin:0;color:#aeb4bb}
/* footer */
  footer{background:#0c0e11;border-top:1px solid var(--bordo);margin-top:30px;padding:30px 32px;text-align:center;font-size:14px;color:#888}
footer a{color:#aeb4bb}
footer .soc{margin-bottom:14px;display:flex;gap:18px;justify-content:center;font-size:18px}
footer p{max-width:760px;margin-left:auto;margin-right:auto}
.topbar{background:var(--blu);font-size:12px}
.nav{background:#000;border-bottom:1px solid var(--bordo);position:sticky;top:0;z-index:50}
.crumb{max-width:1024px;margin:0 auto;padding:14px 32px 0;font-size:13px;color:#7e858d}
.pull{border-left:3px solid var(--blu);padding:6px 0 6px 22px;margin:24px 0;font-family:'Roboto',sans-serif;font-size:clamp(19px,2.6vw,24px);color:#fff;font-weight:700;line-height:1.35;max-width:820px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-top:6px}
/* card heritage colorate */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:10px 0 4px}
.stat .eyb{font-family:'Roboto',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.stat .big{font-family:'Roboto',sans-serif;font-weight:900;font-size:clamp(18px,2.2vw,23px);line-height:1.1;margin-bottom:8px}
.stat .sub{font-size:13px;line-height:1.4;color:rgba(255,255,255,.92)}
.bio{background:#0a0c0e;border:1px solid var(--bordo);border-radius:16px;padding:26px;display:flex;gap:22px;align-items:flex-start}
/* stat forum */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:10px 0 4px}
/* card sezioni colorate */
  .areas{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-top:6px}
.area{display:block;border-radius:16px;padding:26px;color:#fff;transition:transform .25s}
.area:hover{transform:translateY(-5px);text-decoration:none}
.area .ai{font-size:26px;margin-bottom:12px;opacity:.95}
.area h3{color:#fff;font-size:22px;margin-bottom:8px}
.area p{color:rgba(255,255,255,.92);font-size:15px;margin:0}
.area.salotto{background:linear-gradient(150deg,#1f5fa3,#143f6e);grid-column:1 / -1}
.area.aiuto{background:linear-gradient(150deg,#4db2ec,#2787c0)}
.area.chiacchiere{background:linear-gradient(150deg,#7e57c2,#54338f)}
.area.creare{background:linear-gradient(150deg,#e0567f,#b03457)}
.area.friends{background:linear-gradient(150deg,#6aa829,#4e8019)}
/* card scura contatti */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-top:6px}
.hero .photo{flex:0 0 auto;width:160px;height:160px;border-radius:18px;object-fit:cover;border:1px solid var(--bordo)}
.hero .htext{flex:1}
.roles{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.roles span{background:var(--card);border:1px solid var(--bordo);border-radius:20px;padding:7px 15px;font-size:14px;color:#cfd3d8}
/* card colorate formati */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:10px 0 4px}
.stat.s6{background:linear-gradient(150deg,#d98324,#a85f12)}
.ctabar{margin-top:8px;padding-top:6px}
.ctabar a{display:inline-flex;align-items:center;gap:9px;background:var(--blu);border-radius:12px;padding:14px 22px;color:#fff;font-weight:700;font-family:'Roboto',sans-serif}
.ctabar a:hover{background:#2870bd;text-decoration:none}
.note{font-size:14px;color:#8b9097;border-left:3px solid var(--bordo);padding-left:16px;margin-top:18px;max-width:820px}

@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .stats{grid-template-columns:repeat(2,1fr)}
    .cards{grid-template-columns:1fr}
    .bio{flex-direction:column}
  }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .cards{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    .bio{flex-direction:column}
  }
@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .stats{grid-template-columns:repeat(2,1fr)}
    .areas{grid-template-columns:1fr}
    .area.salotto{grid-column:auto}
    .cards{grid-template-columns:1fr}
  }
@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .hero.hero-profile{flex-direction:column;text-align:center}
    .cards{grid-template-columns:1fr}
  }
@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .bio{flex-direction:column}
  }
@media(max-width:780px){
    .topbar{display:none}
    .nav ul{position:fixed;inset:54px 0 auto 0;background:#0a0c0e;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--bordo);display:none}
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a{display:block;padding:14px 22px}
    .burger{display:block}
    .cards{grid-template-columns:1fr}
    .bio{flex-direction:column}
  }