:root{
  --lj-bg-dark:#020617;
  --lj-bg-hero:linear-gradient(135deg,#020617 0%,#111827 50%,#1d2248 100%);
  --lj-accent:#06b6d4;
  --lj-accent-soft:rgba(56,189,248,.15);
  --lj-card-bg:#ffffff;
  --lj-text-muted:#64748b;
}

body,html{
  background:var(--lj-bg-dark);
  font-family:"Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:#0f172a;
}

*{
  scrollbar-width: thin;
  scrollbar-color: #555555 transparent;
}

::-webkit-scrollbar{
  width:6px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background-color:#555555;
  border-radius:6px;
}

html.skip-intro #ljIntro{display:none!important;}

.lj-navbar{
  background:transparent;
}

.lj-navbar .navbar-brand{
  color:#e5e7eb;
  font-weight:800;
  letter-spacing:.03em;
  display:flex;
  align-items:center;
}




.lj-hero{
  background: var(--lj-bg-hero);
  color:#e5e7eb;
  padding:96px 0 80px;
  position:relative;
  overflow:hidden;
}

/* background image layer */
.lj-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
    rgba(8,10,20,0.35),
    rgba(8,10,20,0.55)
    ),
    url("/include/img/lj_intro_01.webp") center / cover no-repeat;
  filter: blur(14px);
  transform: scale(1.08); /* evita bordi dopo blur */
  z-index:0;
}

/* mantiene i glow già esistenti sopra lo sfondo */
.lj-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.20), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(129,140,248,.25), transparent 60%);
  pointer-events:none;
  z-index:1;
}

/* contenuto sempre sopra */
.lj-hero > .container{
  position:relative;
  z-index:2;
}












.lj-hero-title{
  font-size:clamp(2.4rem,3.4vw,3rem);
  font-weight:800;
}

.lj-hero-subtitle{
  max-width:520px;
  color:#cbd5f5;
}

.lj-pill{
  border-radius:999px;
  padding:.75rem 1.9rem;
  font-weight:600;
  border:0;
}

.lj-pill-primary{
  background:var(--lj-accent);
  color:#0f172a;
  box-shadow:0 18px 45px rgba(8,47,73,.7);
}

.lj-pill-primary:hover{
  background:#0ea5e9;
  color:#0f172a;
}

.lj-pill-outline{
  border:1px solid rgba(148,163,184,.6);
  color:#e5e7eb;
  background:transparent;
}

.lj-pill-outline:hover{
  background:rgba(15,23,42,.6);
  color:#e5e7eb;
}

.lj-hero-badge{
  background:rgba(15,23,42,.8);
  border-radius:999px;
  padding:.35rem .85rem;
  border:1px solid rgba(148,163,184,.35);
}

.lj-section-light{
  background:#f1f5f9;
}

.lj-feature-card{
  border:none;
  border-radius:20px;
  box-shadow:0 14px 40px rgba(15,23,42,.12);
  padding:24px 22px;
  height:100%;
  background:var(--lj-card-bg);
}

.lj-feature-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(15,23,42,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:#0f172a;
  margin-bottom:14px;
}

.lj-feature-title{
  font-weight:700;
  margin-bottom:6px;
  color:#0f172a;
}

.lj-feature-text{
  font-size:.92rem;
  color:var(--lj-text-muted);
}

.lj-section-title{
  font-size:2.1rem;
  font-weight:800;
  color:#0f172a;
}

.lj-section-subtitle{
  color:var(--lj-text-muted);
  max-width:520px;
}

.lj-why-card{
  border-radius:18px;
  padding:22px 20px;
  background:#0b1120;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.35);
}

.lj-why-card-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:6px;
}

.lj-why-card-text{
  font-size:.92rem;
  color:#cbd5f5;
}

footer{
  padding:26px 0;
  font-size:.85rem;
  color:#9ca3af;
  background:#020617;
  border-top:1px solid rgba(148,163,184,.3);
}

footer a{
  color:#e5e7eb;
}

#ljIntro{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  cursor:pointer;
  transition:opacity 600ms ease;
}

#ljIntro.hidden{
  opacity:0;
}

#ljIntro .intro-bg{
  position:absolute;
  inset:0;
  background-image:url("/include/img/lj_intro_01.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.05);
  pointer-events:none;
}

#ljIntro .intro-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 800px at 50% 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.7) 100%),
    linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

#ljIntro .intro-logo{
  position:absolute;
  top:80px;
  left:50%;
  transform: translateX(-50%);
  z-index:2;
  width:min(80vw,850px);
  height:auto;
  filter:drop-shadow(0 12px 45px rgba(0,0,0,.7));
  user-select:none;
  pointer-events:none;

  will-change: transform;
  animation: logo-pulse 1.4s ease-in-out infinite;
}

@keyframes logo-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(0.95);
  }
}

@media (prefers-reduced-motion:reduce){
  #ljIntro{
    transition:none;
  }
  #ljIntro .intro-bg{
    transform:none;
  }
}

.lj-navbar-sticky{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(2,6,23,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(148,163,184,.18);
}

.lj-navbar-center{
  position:relative;
  justify-content:center;
}

.lj-navbar-logo{
  height:36px;
  width:auto;
  display:block;
}

@media (max-width:576px){
  .lj-navbar-logo{
    height:30px;
  }
}