@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/titillium-web-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/titillium-web-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/titillium-web-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/titillium-web-latin-700-normal.woff2) format("woff2")}
/* ───────── TOKEN — due mondi separati, un solo colore ciascuno ───────── */
:root{
  --tl-blue:#0068B7;     /* blu del logo TL POWER */
  --li-azure:#009FE3;    /* azzurro LI TECH (brand book §6) */
  --li-navy:#022F63;     /* blu notte LI TECH (brand book §6) */
  --white:#FFFFFF;
  --ink:#10243D;
  --ink-soft:#52647A;
  --on-navy-soft:#C3D8EB;
  --rule:#DCE5EE;
  --gutter:clamp(1rem,4vw,3.5rem);
  --font-sans:"Titillium Web","Segoe UI",Roboto,Arial,sans-serif;
}
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;height:100%;overflow:hidden;background:var(--white);color:var(--ink);font-family:var(--font-sans);font-size:1rem;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--white)}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ───────── Testata ───────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;
  padding:.5rem var(--gutter);border-bottom:1px solid var(--rule)}
.top__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.top__brand img{width:2.9rem;height:auto}
.top__name{margin:0;font-size:1rem;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.top__nav{display:flex;align-items:center;gap:1.4rem;font-weight:600;font-size:.95rem}
.top__nav a{text-decoration:none}
.top__nav > a:hover{text-decoration:underline}
.lang{display:flex;gap:2px;border:1px solid var(--rule);border-radius:3px;padding:2px}
.lang a{padding:.1rem .5rem;border-radius:2px;font-size:.85rem;letter-spacing:.06em;color:var(--ink-soft)}
.lang a[aria-current]{background:var(--ink);color:#fff}

/* ───────── Le due porte ───────── */
.stage{position:relative;flex:1;min-height:0;display:grid;--split:50%;transition:--split .6s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.door{grid-area:1/1;display:flex;align-items:center;text-decoration:none;min-height:0;padding:1.5rem var(--gutter)}
.door{position:relative;isolation:isolate}
/* foto di sfondo al 50% — una per marchio */
.door::before,.door::after{content:"";position:absolute;inset:0;z-index:-1}
.door::before{opacity:.5;background-size:cover;background-repeat:no-repeat}
.door--tl::before{right:40%;background-image:url(/assets/bg-tl-power.jpg);background-position:50% 60%}
.door--li::before{left:40%;background-image:url(/assets/bg-li-tech.jpg);background-position:50% 30%}
/* velo sotto i testi: tiene leggibili logo e scritte sopra la foto */
.door--tl::after{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 22%,rgba(255,255,255,0) 46%)}
.door--li::after{background:linear-gradient(270deg,rgba(2,47,99,.72) 0%,rgba(2,47,99,.45) 30%,rgba(2,47,99,0) 55%)}
.door--tl{background:var(--white);color:var(--ink)}
.door--li{background:var(--li-navy);color:#fff;justify-content:flex-end;
  clip-path:polygon(calc(var(--split) + 4.5%) 0,100% 0,100% 100%,calc(var(--split) - 4.5%) 100%)}
.door__inner{display:flex;justify-content:flex-start;width:42%;transition:opacity .4s}
.door__body{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;width:100%;max-width:27rem}

.door__logo--tl{width:100%;height:auto}
.door__logo--li{display:flex;align-items:center;gap:1.1rem;font-weight:700;font-size:clamp(2.6rem,4.2vw,3.6rem);letter-spacing:.03em;line-height:1}
.door__logo--li img{width:clamp(5rem,7.5vw,6.5rem);height:auto}
.door h2{margin:1rem 0 0;font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:600;line-height:1.2;color:var(--tl-blue)}
.door--li h2{color:var(--li-azure)}
.door p{margin:0;color:var(--ink);font-size:1.05rem;max-width:38ch}
.door--li p{color:#fff}
.door--li .door__inner{justify-content:flex-end}
.door__cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;padding:.85rem 1.4rem;font-weight:700;
  background:var(--tl-blue);color:#fff;border-radius:2px;transition:gap .25s}
.door--li .door__cta{background:var(--li-azure);color:var(--li-navy)}
.door__cta i{font-style:normal}
.door:hover .door__cta,.door:focus-visible .door__cta{gap:1.1rem}
.door:focus-visible{outline-offset:-6px}

/* la porta scelta prende spazio, l'altra arretra */
.stage:has(.door--tl:hover),.stage:has(.door--tl:focus-visible){--split:55%}
.stage:has(.door--li:hover),.stage:has(.door--li:focus-visible){--split:45%}
.stage:has(.door--tl:hover) .door--li .door__inner,.stage:has(.door--tl:focus-visible) .door--li .door__inner,
.stage:has(.door--li:hover) .door--tl .door__inner,.stage:has(.door--li:focus-visible) .door--tl .door__inner{opacity:.45}

/* ───────── Piè di pagina ───────── */
.foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.5rem;padding:1.1rem var(--gutter);
  border-top:1px solid var(--rule);font-size:.85rem;color:var(--ink-soft)}
.foot strong{color:var(--ink);letter-spacing:.1em}

/* ───────── Schermi stretti: le porte si impilano ───────── */
@media (max-width:860px){
  .top__name{font-size:.85rem;letter-spacing:.08em}
  .top__brand img{width:2.4rem}
  .top{min-height:3.25rem}
  .stage{display:flex;flex-direction:column}
  .door{flex:1 1 50%;padding:1.25rem var(--gutter)}
  .door--li{clip-path:polygon(0 1.8rem,100% 0,100% 100%,0 100%);margin-top:-1.8rem;padding-top:2.6rem;justify-content:flex-start}
  .door--tl{padding-bottom:2.6rem}
  .door__inner,.door--li .door__inner{width:100%;justify-content:flex-start}
  .door--tl::before,.door--li::before{left:0;right:0}
  .door--tl::after{background:rgba(255,255,255,.6)}
  .door--li::after{background:rgba(2,47,99,.5)}
  .door__body{max-width:21rem;gap:.7rem}
  .door__logo--tl{width:min(100%,17rem)}
  .door__logo--li{font-size:2.3rem;gap:.8rem}
  .door__logo--li img{width:4.2rem}
  .door h2{margin-top:.4rem;font-size:1.25rem}
  .door p{font-size:.98rem}
  .door__cta{margin-top:.3rem;padding:.7rem 1.2rem}
  .foot{padding-block:.6rem;font-size:.72rem;gap:.1rem .8rem}
  .stage:has(.door:hover) .door__inner{opacity:1!important}
}
/* schermi bassi: resta l'essenziale, mai lo scorrimento */
@media (max-height:720px) and (max-width:860px){.door p{display:none}}
@media (max-height:560px){.door p{display:none}.door h2{margin-top:.2rem}.foot{padding-block:.4rem}}
@media (prefers-reduced-motion:reduce){.stage,.door__inner,.door__cta{transition:none}}