:root{
      --brand:#0f1840;--brand-2:#152156;--ink:#0b1220
    }
    html,body{scroll-behavior:smooth}
    body{font-family:'Poppins',sans-serif;background-color:#0b1220;color:#0f172a}
    .container{max-width:1140px}
    .gradient-bg{background-image: url(https://livriz.pp1.com.br/img/background.png);
    background-size: cover;
      background-size:200% 200%;}
    @keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .btn-primary{background:var(--brand)}
    .btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px)}
    .card-hover{transition:transform .3s ease, box-shadow .3s ease}
    .card-hover:hover{transform:translateY(-8px);box-shadow:0 18px 45px rgba(2,6,23,.15)}
    .glass{backdrop-filter: blur(10px); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15)}
    .hero-shape{position:absolute;inset:0;pointer-events:none}
    .hero-shape:before,.hero-shape:after{content:"";position:absolute;border-radius:9999px;filter:blur(70px);opacity:.25}
    .hero-shape:before{width:420px;height:420px;background:#60a5fa;top:-40px;left:-60px}
    .hero-shape:after{width:520px;height:520px;background:#a78bfa;bottom:-60px;right:-80px}
    .timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(29,70,242,.25);transform:translateX(-50%)}
    @media (max-width: 1023px){.timeline:before{left:24px;transform:none}}
    @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .floating {
            animation: float 4s ease-in-out infinite;
        }

        #hero > div.container.mx-auto.px-6.py-24.lg\:py-32.relative > div > div:nth-child(1) > div.mt-8.flex.flex-wrap.items-center.gap-4 > a.btn-primary.inline-flex.items-center.gap-2.px-6.py-3.rounded-full.font-semibold.shadow-xl,
        body > section.py-20.gradient-bg.text-white > div > div > a {
          
          background-color:azure !important;
          color: #0f1840 !important;
        }
        #hero > div.container.mx-auto.px-6.py-24.lg\:py-32.relative > div > div:nth-child(1) > div.mt-8.flex.flex-wrap.items-center.gap-4 > a.inline-flex.items-center.gap-2.px-6.py-3.rounded-full.font-semibold.bg-white\/10.hover\:bg-white\/20 {
          background-color: azure !important;
          color: #252525 !important;
        }
        html, body {
  max-width: 100%;
  overflow-x: hidden;
        }

        .timeline:before {
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}
@media (max-width: 1023px){
  .timeline:before {
    left: 24px;
    transform: none;
  }
}

header {
  position: fixed !important;
  width: 100%;
}

#hero {
  margin-top: 6rem;
}