:root{
    --bg:#0A0A0B;
    --bg-2:#131315;
    --bg-3:#1B1B1E;
    --text:#E7E8EA;
    --text-dim:#9A9CA1;
    --silver:#C9CBCE;
    --silver-light:#F5F6F7;
    --silver-dark:#5D5F63;
    --line: rgba(255,255,255,0.09);
    --line-strong: rgba(255,255,255,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--silver);
    font-weight:600;
  }
  .chrome-text{
    background:linear-gradient(100deg, var(--silver-dark) 0%, var(--silver-light) 25%, var(--silver) 45%, var(--silver-light) 60%, var(--silver-dark) 85%);
    background-size:250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 7s linear infinite;
  }
  @keyframes shimmer{
    0%{background-position:0% 50%;}
    100%{background-position:250% 50%;}
  }

  /* NAV */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,10,11,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:background .3s ease;
  }
  nav{
    max-width:1080px; margin:0 auto; padding:22px 32px;
    display:flex; justify-content:space-between; align-items:center;
  }
  @media (max-width:780px){
    nav{padding:18px 24px;}
  }
  .hero-logo-wrap{
    display:inline-block;
    animation:floaty 6s ease-in-out 1.4s infinite;
  }
  .hero-logo{
    height:130px; width:auto; display:block;
    margin-bottom:30px;
    filter:drop-shadow(0 0 22px rgba(255,255,255,0.14));
    opacity:0;
    animation:fadeUp .9s cubic-bezier(.22,.8,.3,1) .05s forwards;
  }
  @keyframes floaty{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @media (max-width:780px){ .hero-logo{height:92px;} }
  .navlinks{display:flex; gap:36px; font-size:0.86rem; color:var(--text-dim);}
  .navlinks a{position:relative; padding-bottom:4px; transition:color .2s;}
  .navlinks a:hover{color:var(--silver-light);}
  .navlinks a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--silver-light); transition:width .25s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .lang-switch{display:flex; gap:4px; align-items:center; margin-left:28px; padding-left:28px; border-left:1px solid var(--line);}
  .lang-btn{
    background:transparent; border:1px solid transparent; color:var(--text-dim);
    font-size:0.76rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600;
    letter-spacing:0.05em; padding:5px 9px; cursor:pointer; border-radius:3px;
    transition:color .2s, border-color .2s;
  }
  .lang-btn:hover{color:var(--silver-light);}
  .lang-btn.active{color:var(--bg); background:var(--silver-light);}
  @media (max-width:780px){ .lang-switch{margin-left:0; padding-left:0; border-left:none;} }

  /* HAMBURGER + MENU MOBILE */
  .menu-btn{
    display:none;
    background:transparent; border:none; cursor:pointer;
    width:40px; height:40px; padding:8px;
    flex-direction:column; justify-content:center; gap:5px;
  }
  .menu-btn span{
    display:block; height:1.5px; width:100%;
    background:var(--silver-light);
    transition:transform .3s ease, opacity .3s ease;
  }
  .menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .mobile-menu{
    display:none;
    position:fixed; top:76px; left:0; right:0; z-index:99;
    background:rgba(10,10,11,0.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:12px 24px 24px;
    flex-direction:column;
    opacity:0; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .mobile-menu.open{opacity:1; transform:translateY(0);}
  .mobile-menu a{
    padding:16px 4px;
    font-size:1rem; color:var(--text-dim);
    border-bottom:1px solid var(--line);
    transition:color .2s, padding-left .2s;
  }
  .mobile-menu a:hover{color:var(--silver-light); padding-left:10px;}
  .mobile-menu a:last-child{border-bottom:none;}
  @media (max-width:780px){
    .menu-btn{display:flex;}
    .mobile-menu{display:flex;}
    .mobile-menu:not(.open){pointer-events:none;}
  }


  /* MODALI LEGALI */
  .legal-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(10,10,11,0.8);
    backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center;
    padding:24px;
  }
  .legal-overlay.open{display:flex;}
  .legal-panel{
    background:var(--bg-2);
    border:1px solid var(--line-strong);
    max-width:620px; width:100%;
    max-height:80vh; overflow-y:auto;
    padding:40px;
    position:relative;
  }
  .legal-panel h3{font-size:1.4rem; margin-bottom:20px; color:var(--silver-light);}
  .legal-panel p{font-size:0.92rem; color:var(--text-dim); margin-bottom:14px; line-height:1.7;}
  .legal-panel .ph{color:var(--silver); font-style:italic;}
  .legal-close{
    position:absolute; top:16px; right:16px;
    background:transparent; border:1px solid var(--line);
    color:var(--text-dim); width:34px; height:34px;
    cursor:pointer; font-size:1rem; line-height:1;
    transition:color .2s, border-color .2s;
  }
  .legal-close:hover{color:var(--silver-light); border-color:var(--line-strong);}
  footer .legal-links{display:flex; gap:20px;}
  footer .legal-links a{color:var(--text-dim); transition:color .2s; cursor:pointer;}
  footer .legal-links a:hover{color:var(--silver-light);}

  /* MESSAGGI FORM */
  .form-msg{font-size:0.88rem; margin-top:4px; display:none;}
  .form-msg.ok{color:#9BC49B; display:block;}
  .form-msg.err{color:#C99B9B; display:block;}

  /* HERO */
  .hero{
    background:
      radial-gradient(ellipse at 70% 0%, rgba(255,255,255,0.07) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 100%, rgba(255,255,255,0.04) 0%, transparent 50%),
      var(--bg);
    color:var(--text);
    padding:88px 0 100px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{position:relative; z-index:2;}
  .hero .eyebrow{color:var(--text-dim);}
  .hero h1{
    font-size:clamp(2.4rem, 5.2vw, 4.5rem);
    line-height:1.08;
    margin:22px 0 28px;
    max-width:15ch;
    font-weight:400;
    color:var(--silver-light);
  }
  .hero h1 em{font-style:italic;}
  .hero p.lead{
    font-size:1.08rem;
    max-width:46ch;
    color:var(--text-dim);
    margin-bottom:8px;
  }
  .hero-root{
    position:absolute;
    right:-8%;
    top:-4%;
    height:110%;
    width:62%;
    opacity:0.9;
    z-index:1;
    pointer-events:none;
  }
  .hero-glow{
    position:absolute; top:-20%; right:-10%; width:60%; height:80%;
    background:radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 65%);
    z-index:0; pointer-events:none;
    animation:pulse 6s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:0.6; transform:scale(1);}
    50%{opacity:1; transform:scale(1.08);}
  }
  @media (max-width:780px){ .hero-root{ opacity:0.3; right:-30%; width:100%; } }

  /* SECTION SHARED */
  section{padding:110px 0; position:relative; scroll-margin-top:70px;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    margin-top:14px;
    font-weight:400;
    color:var(--silver-light);
  }
  .section-head p{
    margin-top:16px;
    color:var(--text-dim);
    font-size:1.02rem;
    max-width:52ch;
  }

  /* CHI SIAMO */
  .chisiamo{background:var(--bg);}
  .chisiamo-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:64px;
    align-items:start;
  }
  .chisiamo-grid p{margin-bottom:18px; color:var(--text-dim); font-size:1.02rem;}
  .stat-block{
    border-top:1px solid var(--line);
    padding-top:18px;
    margin-top:12px;
  }
  .stat-row{display:flex; gap:40px; flex-wrap:wrap;}
  .stat{min-width:120px;}
  .stat .num{font-family:'Fraunces',serif; font-size:2.2rem; font-weight:500;}
  .stat .lbl{font-size:0.82rem; color:var(--text-dim); margin-top:4px;}

  /* AREE */
  .aree{background:var(--bg-2);}
  .area-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .area-card{
    background:var(--bg-2);
    padding:48px 40px;
    transition:background .35s ease, transform .35s ease;
    position:relative;
    overflow:hidden;
  }
  .area-card::before{
    content:'';
    position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .area-card:hover::before{left:120%;}
  .area-card:hover{background:var(--bg-3); transform:translateY(-4px);}
  .area-card .icon{width:42px; height:42px; margin-bottom:26px;}
  .area-card .icon svg{width:100%; height:100%; stroke:var(--silver-light); fill:none; stroke-width:1.3;}
  .area-card h3{font-size:1.3rem; font-weight:500; margin-bottom:12px; color:var(--silver-light);}
  .area-card .tag{
    font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em;
    color:var(--text-dim); font-weight:600; margin-bottom:10px; display:block;
  }
  .area-card p{font-size:0.94rem; color:var(--text-dim);}
  @media (max-width:780px){ .area-list{grid-template-columns:1fr;} }

  /* VALORI */
  .valori{background:var(--bg);}
  .valori .section-head p{color:var(--text-dim);}
  .valori-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
  }
  .valore{transition:transform .3s ease;}
  .valore:hover{transform:translateY(-4px);}
  .valore .num{font-family:'Fraunces',serif; color:var(--silver-light); font-size:1rem; margin-bottom:14px; display:block;}
  .valore h3{font-size:1.15rem; font-weight:500; margin-bottom:10px; color:var(--silver-light);}
  .valore p{font-size:0.92rem; color:var(--text-dim);}
  @media (max-width:780px){ .valori-grid{grid-template-columns:1fr; gap:36px;} }

  /* CONTATTI */
  .contatti{background:var(--bg-2); padding-bottom:64px;}
  .contatti-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
  }
  .contact-list{margin-top:28px;}
  .contact-item{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 0; border-top:1px solid var(--line);
    transition:padding-left .25s ease;
  }
  .contact-item:hover{padding-left:8px;}
  .contact-item:last-child{border-bottom:1px solid var(--line);}
  .contact-item .k{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim);}
  .contact-item .v{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--silver-light);}
  .note{
    margin-top:22px; font-size:0.82rem; color:var(--text-dim); font-style:italic;
  }
  .form{display:flex; flex-direction:column; gap:16px;}
  .form input, .form textarea{
    background:transparent; border:none; border-bottom:1px solid var(--line);
    padding:12px 2px; font-family:'IBM Plex Sans',sans-serif; font-size:0.98rem;
    color:var(--text); outline:none; transition:border-color .2s;
  }
  .form input::placeholder, .form textarea::placeholder{color:var(--silver-dark);}
  .form input:focus, .form textarea:focus{border-color:var(--silver-light);}
  .form label{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:-6px;}
  .form button{
    margin-top:10px; align-self:flex-start;
    background:var(--silver-light); color:var(--bg);
    border:none; padding:14px 30px; font-size:0.92rem;
    cursor:pointer; letter-spacing:0.03em; font-weight:600;
    transition:background .2s, transform .2s;
  }
  .form button:hover{background:#fff; transform:translateY(-2px);}
  @media (max-width:820px){ .contatti-grid, .chisiamo-grid{grid-template-columns:1fr;} }

  footer{
    background:var(--bg); color:var(--text-dim);
    padding:22px 0; font-size:0.82rem;
    border-top:1px solid var(--line);
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* staggered reveal for grid children */
  .stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .stagger.in > *{opacity:1; transform:translateY(0);}
  .stagger.in > *:nth-child(1){transition-delay:.05s;}
  .stagger.in > *:nth-child(2){transition-delay:.18s;}
  .stagger.in > *:nth-child(3){transition-delay:.31s;}
  .stagger.in > *:nth-child(4){transition-delay:.44s;}

  /* scroll progress bar */
  .scroll-progress{
    position:fixed; top:0; left:0; height:2px; width:0%;
    background:linear-gradient(90deg, var(--silver-dark), var(--silver-light));
    z-index:200; pointer-events:none;
    box-shadow:0 0 8px rgba(255,255,255,0.25);
  }

  /* hero entrance */
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(26px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hero .eyebrow, .hero h1, .hero p.lead{
    opacity:0;
    animation:fadeUp .9s cubic-bezier(.22,.8,.3,1) forwards;
  }
  .hero .eyebrow{animation-delay:.3s;}
  .hero h1{animation-delay:.5s;}
  .hero p.lead{animation-delay:.72s;}

  /* SVG icon line-draw on reveal */
  .area-card .icon svg path{
    stroke-dasharray:120;
    stroke-dashoffset:120;
    transition:stroke-dashoffset 1.4s ease .3s;
  }
  .stagger.in .area-card .icon svg path{stroke-dashoffset:0;}

  /* cursor-follow glow in hero */
  .hero-cursor-glow{
    position:absolute; width:520px; height:520px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events:none; z-index:1;
    transform:translate(-50%,-50%);
    transition:opacity .4s ease;
    opacity:0;
  }

  /* 3D tilt on cards */
  .area-card{transform-style:preserve-3d; will-change:transform;}
  .area-list{perspective:900px;}

  /* particelle argento nell'hero */
  .hero-particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }

  /* la radice SVG si disegna al caricamento */
  .hero-root path{
    stroke-dasharray:700;
    stroke-dashoffset:700;
    animation:drawline 2.4s ease .7s forwards;
  }
  .hero-root circle{
    opacity:0;
    animation:fadeUp 1s ease 2.4s forwards;
  }
  .hero-root text{
    opacity:0;
    animation:fadeUp 1s ease 2.7s forwards;
  }
  @keyframes drawline{ to{stroke-dashoffset:0;} }

  /* linea che cresce sotto ogni valore */
  .valore::after{
    content:''; display:block; width:0; height:1px;
    background:var(--line-strong); margin-top:20px;
    transition:width .9s ease .4s;
  }
  .stagger.in .valore::after{width:100%;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .stagger > *{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
    .chrome-text{animation:none;}
    .hero .eyebrow, .hero h1, .hero p.lead, .hero-logo{animation:none; opacity:1;}
    .hero-logo-wrap{animation:none;}
    .area-card .icon svg path{stroke-dasharray:none; stroke-dashoffset:0; transition:none;}
    .hero-root path{stroke-dasharray:none; stroke-dashoffset:0; animation:none;}
    .hero-root circle, .hero-root text{opacity:1; animation:none;}
    .valore::after{width:100%; transition:none;}
    .hero-cursor-glow{display:none;}
    .hero-particles{display:none;}
    .scroll-progress{display:none;}
  }

  @media (max-width:780px){
    .navlinks{display:none;}
    section{padding:80px 0;}
    .hero{padding:78px 0 72px;}
  }

/* ====== MULTI-PAGINA ====== */
.brand{
  font-family:'Fraunces',serif; font-size:1.05rem;
  letter-spacing:0.05em; color:var(--silver-light);
  transition:opacity .2s;
}
.brand:hover{opacity:.75;}

.navlinks a.active{color:var(--silver-light);}
.navlinks a.active::after{width:100%;}

/* hero delle sottopagine */
.page-hero{
  background:
    radial-gradient(ellipse at 75% 0%, rgba(255,255,255,0.06) 0%, transparent 55%),
    var(--bg);
  padding:130px 0 70px;
}
.page-hero .eyebrow, .page-hero h1, .page-hero .lead{
  opacity:0;
  animation:fadeUp .8s cubic-bezier(.22,.8,.3,1) forwards;
}
.page-hero .eyebrow{animation-delay:.05s;}
.page-hero h1{
  font-size:clamp(2rem, 4.2vw, 3.3rem);
  font-weight:400; color:var(--silver-light);
  margin-top:16px; line-height:1.12;
  animation-delay:.2s;
}
.page-hero .lead{
  margin-top:18px; color:var(--text-dim);
  font-size:1.05rem; max-width:54ch;
  animation-delay:.38s;
}
@media (max-width:780px){ .page-hero{padding:110px 0 56px;} }

/* timeline pagina about */
.timeline{margin-top:20px; border-left:1px solid var(--line-strong); padding-left:32px;}
.tl-item{position:relative; padding-bottom:40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:''; position:absolute; left:-37px; top:7px;
  width:9px; height:9px; border-radius:50%;
  background:var(--silver-light);
  box-shadow:0 0 10px rgba(255,255,255,0.3);
}
.tl-item h3{font-size:1.1rem; font-weight:500; color:var(--silver-light); margin-bottom:8px;}
.tl-item p{font-size:0.95rem; color:var(--text-dim);}

/* dettaglio aree */
.area-detail{
  border:1px solid var(--line);
  background:var(--bg-2);
  padding:52px 48px;
  margin-bottom:32px;
}
.area-detail .icon{width:46px; height:46px; margin-bottom:24px;}
.area-detail .icon svg{width:100%; height:100%; stroke:var(--silver-light); fill:none; stroke-width:1.3;}
.area-detail h2{font-size:1.6rem; font-weight:500; color:var(--silver-light); margin-bottom:16px;}
.area-detail p{color:var(--text-dim); font-size:1rem; margin-bottom:14px; max-width:64ch;}
.focus-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.focus-pill{
  font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--silver); border:1px solid var(--line-strong);
  padding:9px 16px; font-weight:600;
}
@media (max-width:780px){ .area-detail{padding:36px 26px;} }

/* valori estesi */
.value-block{
  border-top:1px solid var(--line);
  padding:36px 0;
}
.value-block:last-of-type{border-bottom:1px solid var(--line);}
.value-block .num{
  font-family:'Fraunces',serif; color:var(--silver);
  font-size:0.9rem; letter-spacing:0.12em; text-transform:uppercase;
  display:block; margin-bottom:12px;
}
.value-block h2{font-size:1.4rem; font-weight:500; color:var(--silver-light); margin-bottom:12px;}
.value-block p{color:var(--text-dim); font-size:0.98rem; max-width:62ch; margin-bottom:10px;}