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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#030611;
  color:white;
  overflow-x:hidden;
}

/* HOME */

.intro-home{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:80px 22px;

  background:
    radial-gradient(
      circle at center,
      rgba(110,0,255,0.30) 0%,
      rgba(35,5,75,0.38) 36%,
      #030611 78%
    );

  overflow:hidden;
}

/* TOP LABEL */

.top-label{
  position:absolute;
  top:58px;

  display:flex;
  flex-direction:column;
  align-items:center;

  font-size:18px;
  letter-spacing:6px;
  font-weight:700;

  color:rgba(255,255,255,0.82);

  text-shadow:
    0 0 18px rgba(170,90,255,0.45);
}

.top-subtitle{
  margin-top:14px;

  font-size:14px;
  letter-spacing:1px;
  font-weight:400;

  color:rgba(255,255,255,0.58);

  text-align:center;

  max-width:680px;

  line-height:1.6;
}

.top-label::after{
  content:"";

  display:block;

  width:120px;
  height:2px;

  margin:18px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190,120,255,0.9),
      transparent
    );

  box-shadow:
    0 0 18px rgba(180,90,255,0.9);
}

/* LOGO */

.energy-logo{
  width:460px;
  height:460px;

  display:flex;
  justify-content:center;
  align-items:center;

  margin-bottom:-91px;

  animation:logoEnter 1.8s ease forwards;
  pointer-events:none;
}

.energy-logo img{
  width:530px;

  filter:
    drop-shadow(0 0 14px rgba(210,160,255,0.85))
    drop-shadow(0 0 42px rgba(140,0,255,0.75));
}

/* TITOLO */

.flip-title{
  display:flex;
  gap:4px;

  font-size:72px;
  font-weight:300;
  letter-spacing:10px;

  margin-top:-10px;
  margin-bottom:26px;
}

.flip-title span{
  display:inline-block;

  opacity:0;

  transform:
    rotateY(90deg)
    translateY(20px);

  animation:
    letterFlip 0.7s ease forwards;

  animation-delay:var(--d);

  text-shadow:
    0 0 10px rgba(255,255,255,0.25),
    0 0 30px rgba(180,90,255,0.55);
}

/* MENU */

.main-menu{
  transform:translateX(47px);
}

.main-menu{
  display:flex;
  gap:32px;

  align-items:center;
  justify-content:center;

  flex-wrap:wrap;
}

.main-menu a{
  color:white;

  text-decoration:none;

  letter-spacing:8px;
  font-size:22px;
  font-weight:700;

  transition:0.3s;
}

.main-menu a:hover{
  color:#d9b3ff;

  text-shadow:
    0 0 12px rgba(190,120,255,0.9),
    0 0 30px rgba(190,120,255,0.5);
}

.main-menu span{
  width:1px;
  height:28px;

  background:transparent;

  box-shadow:none;
}

/* DEMO PAGE */

.demo-subtitle{
  font-size:20px;

  color:rgba(255,255,255,0.76);

  margin:-8px 0 28px;

  line-height:1.45;
}

.logo-grid{
  width:min(940px,92vw);

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:20px 26px;

  margin-top:10px;

  align-items:center;
}

.logo-card{
  height:96px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  background:transparent;

  border:none;

  padding:10px;

  transition:0.35s ease;

  animation:logoBreath 4.2s ease-in-out infinite;
}

.logo-card img{
  max-width:180px;
  max-height:112px;
  object-fit:contain;
  display:block;
}

.logo-card:hover{
  transform:
    translateY(-4px)
    scale(1.04);
}

.logo-card:hover img{
  transform:scale(1.12);

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.45))
    drop-shadow(0 0 28px rgba(170,80,255,0.72));
}

/* BUTTON */

.back-home-btn,
.main-btn{
  display:inline-block;

  margin-top:44px;

  padding:17px 32px;

  border-radius:18px;

  background:white;

  color:#140722;

  text-decoration:none;

  font-size:15px;
  font-weight:900;
  letter-spacing:1px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.28);

  transition:0.25s ease;
}

.back-home-btn:hover,
.main-btn:hover{
  transform:translateY(-4px);
}

/* ANIMAZIONI */

@keyframes logoEnter{

  0%{
    opacity:0;

    transform:
      scale(0.58);

    filter:blur(18px);
  }

  100%{
    opacity:1;

    transform:
      scale(1);

    filter:blur(0);
  }

}

@keyframes logoBreath{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.035);
  }

}

@keyframes letterFlip{

  0%{
    opacity:0;

    transform:
      rotateY(90deg)
      translateY(22px);

    filter:blur(8px);
  }

  100%{
    opacity:1;

    transform:
      rotateY(0deg)
      translateY(0);

    filter:blur(0);
  }

}

/* MOBILE */

@media(max-width:768px){

  .intro-home{
    padding:70px 18px;
  }

  .top-label{
    top:34px;

    font-size:13px;

    letter-spacing:3px;
  }

  .top-subtitle{
    font-size:12px;

    max-width:320px;
  }

  .energy-logo{
    width:280px;
    height:280px;

    margin-bottom:-55px;
  }

  .energy-logo img{
    width:230px;
  }

  .flip-title{
    font-size:34px;

    letter-spacing:4px;

    gap:2px;
  }

  .main-menu{
    gap:18px;
  }

  .main-menu a{
    font-size:14px;

    letter-spacing:3px;
  }

  .main-menu span{
    display:none;
  }

  .demo-subtitle{
    font-size:17px;
  }

  .logo-grid{
    grid-template-columns:repeat(2,1fr);

    gap:18px 16px;

    width:min(460px,92vw);
  }

  .logo-card{
    height:84px;
  }

  .logo-card img{
    max-height:62px;
  }
}

/* SMARTPHONE: griglia loghi a singola colonna */
@media(max-width:600px){
  .logo-grid{
    grid-template-columns:1fr!important;
    width:min(420px,92vw)!important;
    gap:14px!important;
  }

  .logo-card{
    width:100%!important;
    height:auto!important;
    min-height:120px;
    padding:18px 14px!important;
  }

  .logo-card img{
    max-width:80%!important;
    max-height:80px!important;
  }

  .logo-card img.trenitalia-logo{
    max-width:80%!important;
    max-height:80px!important;
  }

  .logo-card img.generali-logo{
    max-width:60%!important;
    max-height:80px!important;
  }
}

/* FIX CLICK GLOBALI - fuori dal blocco mobile */
.main-menu{
  position:relative;
  z-index:50;
}

.main-menu a{
  position:relative;
  z-index:60;
  cursor:pointer;
  pointer-events:auto;
}

.logo-grid,
.logo-card{
  position:relative;
  z-index:20;
}

.logo-card{
  cursor:pointer;
  pointer-events:auto;
}

.logo-card img{
  pointer-events:none;
}

.logo-card img[src*="trenitalia"]{
  max-width:240px !important;
  max-height:90px !important;
}

.trenitalia-logo{
  max-width:240px !important;
  max-height:90px !important;
}

.generali-logo{
  max-width:155px !important;
  max-height:90px !important;
}

.logo-card:hover .trenitalia-logo,
.logo-card:hover .generali-logo{
  transform:scale(1.12);

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.45))
    drop-shadow(0 0 28px rgba(170,80,255,0.72));
}

.logo-card:hover img.trenitalia-logo,
.logo-card:hover img.generali-logo{
  transform:scale(1.12) !important;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.45))
    drop-shadow(0 0 28px rgba(170,80,255,0.72)) !important;
}


/* HOME WORDMARK FINAL - NO SCROLL + MENU PULITO */

.intro-home{
  height:100vh;
  min-height:0;
  padding:24px 22px 26px;
  justify-content:flex-start;
  overflow:hidden;
  position:relative;
}

.top-label{
  top:28px;
  font-size:17px;
  letter-spacing:7px;
  z-index:20;
}

.top-subtitle{
  max-width:1280px;
  white-space:nowrap;
  margin-top:16px;
  font-size:18px;
  line-height:1.22;
  letter-spacing:.35px;
  color:rgba(255,255,255,0.84);
}

.top-label::after{
  width:145px;
  margin:18px auto 0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(205,135,255,.95), transparent);
  box-shadow:
    0 0 16px rgba(190,95,255,.95),
    0 0 34px rgba(150,60,255,.75);
}

.energy-logo{
  width:330px;
  height:330px;
  margin-top:85px;
  margin-bottom:0;
  position:relative;
  z-index:10;
}

.energy-logo img{
  width:270px;
  filter:
    drop-shadow(0 0 13px rgba(220,175,255,0.86))
    drop-shadow(0 0 38px rgba(145,0,255,0.72));
}

.hero-wordmark{
  position:absolute;
  top:190px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
  white-space:nowrap;
  font-size:152px;
  line-height:1;
  font-weight:300;
  letter-spacing:35px;
  color:rgba(190,120,255,0.075);
  -webkit-text-stroke:1px rgba(205,145,255,0.16);
  text-shadow:
    0 0 22px rgba(155,70,255,0.10),
    0 0 48px rgba(115,35,255,0.12);

  background-image:linear-gradient(
    110deg,
    rgba(190,120,255,0.075) 0%,
    rgba(190,120,255,0.075) 44%,
    rgba(235,210,255,0.34) 50%,
    rgba(190,120,255,0.075) 56%,
    rgba(190,120,255,0.075) 100%
  );
  background-size:280% 100%;
  background-repeat:no-repeat;
  background-position:0% 0;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroWordmarkSheen 11s linear infinite;
  will-change:background-position;
}

@keyframes heroWordmarkSheen{
  0%   { background-position:0% 0; }
  100% { background-position:100% 0; }
}

.flip-title{
  display:none;
}

.main-menu{
  gap:72px;
  margin-top:px;
  margin-bottom:22px;
  position:relative;
  z-index:30;
}

.main-menu a{
  position:relative;
  letter-spacing:9px;
  font-size:19px;
  font-weight:900;
  color:white;
  text-decoration:none;
  text-shadow:
    0 0 10px rgba(255,255,255,0.34),
    0 0 24px rgba(190,120,255,0.48);
}

.main-menu a::after{
  display:none;
}

.main-menu span{
  height:48px;
  background:transparent;
  box-shadow:none;
}

.home-actions{
  width:min(1120px, 92vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:118px;
  position:relative;
  z-index:30;
  margin-top:0;
}

.home-actions::after{
  content:"";
  position:absolute;
  top:-24px;
  left:50%;
  width:min(1240px, 94vw);
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(190,90,255,0.95), rgba(255,255,255,0.86), rgba(190,90,255,0.95), transparent);
  box-shadow:
    0 0 13px rgba(190,90,255,0.95),
    0 0 34px rgba(150,60,255,0.75);
  pointer-events:none;
}

.home-actions::before{
  content:none;
}

.home-action-card,
.home-action-card:visited{
  min-height:154px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 24px 18px;
  border-radius:18px;
  text-decoration:none;
  color:white;
  background:rgba(38,10,76,0.15);
  border:1px solid rgba(187,82,255,0.78);
  box-shadow:
    0 0 24px rgba(145,55,255,0.25),
    inset 0 0 25px rgba(255,255,255,0.022);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.home-action-card:hover{
  transform:translateY(-5px);
  background:rgba(62,18,110,0.25);
  border-color:rgba(220,160,255,0.95);
  box-shadow:
    0 0 34px rgba(178,90,255,0.56),
    0 0 76px rgba(118,32,255,0.28),
    inset 0 0 30px rgba(255,255,255,0.045);
}

.home-action-icon{
  width:42px;
  height:42px;
  color:#b46cff;
  filter:
    drop-shadow(0 0 10px rgba(195,125,255,0.95))
    drop-shadow(0 0 24px rgba(145,65,255,0.48));
}

.home-action-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.home-action-icon svg *{
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-action-card strong{
  position:relative;
  display:inline-block;
  font-size:21px;
  line-height:1.1;
  letter-spacing:8px;
  font-weight:900;
  color:white;
  text-shadow:
    0 0 10px rgba(255,255,255,0.36),
    0 0 25px rgba(190,120,255,0.70);
}

.home-action-card strong::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-11px;
  width:136px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(205,140,255,0.98), transparent);
  box-shadow:
    0 0 12px rgba(210,150,255,0.96),
    0 0 30px rgba(170,80,255,0.75);
}

.home-action-card small{
  margin-top:16px;
  max-width:450px;
  display:block;
  font-size:18px;
  line-height:1.38;
  font-weight:400;
  color:rgba(255,255,255,0.90);
  text-shadow:
    0 0 10px rgba(255,255,255,0.16),
    0 0 18px rgba(170,80,255,0.20);
}

@media(max-width:1200px){
  .top-subtitle{
    white-space:normal;
    max-width:900px;
  }

  .energy-logo{
    margin-top:128px;
  }

  .hero-wordmark{
    font-size:108px;
    top:202px;
  }

  .main-menu{
    gap:46px;
  }

  .main-menu a{
    font-size:18px;
    letter-spacing:7px;
  }

  .home-actions{
    gap:58px;
  }

  .home-action-card small{
    font-size:17px;
  }
}

@media(max-width:768px){
  .intro-home{
    min-height:100vh;
    height:auto;
    padding:74px 18px 48px;
    justify-content:flex-start;
    overflow:hidden;
  }

  .top-label{
    top:34px;
    font-size:13px;
    letter-spacing:3px;
  }

  .top-subtitle{
    white-space:normal;
    max-width:340px;
    margin-top:12px;
    font-size:12px;
    line-height:1.55;
  }

  .top-label::after{
    width:110px;
    margin-top:14px;
  }

  .energy-logo{
    width:250px;
    height:250px;
    margin-top:86px;
    margin-bottom:24px;
  }

  .energy-logo img{
    width:214px;
  }

  .hero-wordmark{
    top:285px;
    left:50%;
    transform:translate(-50%, -50%);
    width:100vw;
    max-width:100vw;
    font-size:clamp(56px, 15.5vw, 110px);
    letter-spacing:2px;
    white-space:nowrap;
    text-align:center;
    overflow:hidden;
    color:rgba(190,120,255,0.085);
    -webkit-text-stroke:1px rgba(205,145,255,0.16);
  }

  .main-menu{
    margin-top:-16px;
    margin-bottom:30px;
    gap:20px;
    transform:none!important;
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .main-menu span{
    display:none;
  }

  .main-menu a{
    font-size:14px;
    letter-spacing:3px;
  }

  .home-actions{
    width:min(430px, 92vw);
    grid-template-columns:1fr;
    gap:18px;
    margin-top:0;
  }

  .home-actions::after{
    top:-22px;
    width:min(390px, 92vw);
  }

  .home-actions::before{
    display:none;
  }

  .home-action-card{
    min-height:140px;
    padding:18px 14px;
  }

  .home-action-icon{
    width:42px;
    height:42px;
  }

  .home-action-card strong{
    font-size:16px;
    letter-spacing:5px;
  }

  .home-action-card small{
    font-size:15px;
    line-height:1.5;
  }
}

/* Home — neutralizza pseudo-elementi decorativi e divisori menu */
*::before,
*::after {
  animation: none !important;
}

.home-actions::before,
.home-actions::after,
.main-menu span,
.home-action-card::before,
.home-action-card::after {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Home — disattiva filtri/blur/blend/shadow forti su card e icone */
.home-action-card,
.home-action-card:hover,
.home-actions,
.intro-home,
.home-action-icon {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
}