:root{
      --bg0:#070611;
      --bg1:#0d0b1d;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.08);
      --txt:#eae7ff;
      --muted: rgba(234,231,255,.72);
      --muted2: rgba(234,231,255,.58);
      --stroke: rgba(255,255,255,.12);
      --accent:#7c3aed;
      --accent2:#a78bfa;

      --radius: 18px;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --maxw: 1120px;
      --navH: 72px;
    }

    [data-theme="light"]{
      --bg0:#f7f7ff;
      --bg1:#ffffff;
      --card: rgba(124,58,237,.08);
      --card2: rgba(124,58,237,.12);
      --txt:#141225;
      --muted: rgba(20,18,37,.74);
      --muted2: rgba(20,18,37,.62);
      --stroke: rgba(20,18,37,.14);
      --shadow: 0 18px 60px rgba(0,0,0,.12);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--txt);
      background:
        radial-gradient(1100px 700px at 20% 50%, rgba(124,58,237,.35), transparent 60%),
        radial-gradient(900px 600px at 90% 20%, rgba(167,139,250,.22), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 18px}

    a.brand__link {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      height:var(--navH);
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
      border-bottom:1px solid var(--stroke);
    }
    [data-theme="light"] .topbar{
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
    }
    .topbar__in{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .brand img{width:34px; height:34px; border-radius:10px}
    .brand__name{font-weight:900; letter-spacing:.2px}
    .badge{
      font-size:12px; padding:6px 10px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      border-radius:999px;
      color:var(--muted);
      white-space:nowrap;
    }


    /* Logo girando no brand (igual “o outro brand”) */
    @keyframes vrs-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    
    /* aplica no logo do topo */
    .brand__link img{
      animation: vrs-spin 10s linear infinite;
      transform-origin: 50% 50%;
      will-change: transform;
    
      /* mantém suave e com cara premium */
      box-shadow: 0 10px 30px rgba(124,58,237,.18);
    }
    
    /* opcional: dá um “boost” ao passar o mouse */
    .brand__link:hover img{
      animation-duration: 6s;
    }
    
    /* opcional: pausa em hover (se preferir) */
    /*
    .brand__link:hover img{
      animation-play-state: paused;
    }
    */
    
    /* acessibilidade: respeita usuários que não querem animação */
    @media (prefers-reduced-motion: reduce){
      .brand__link img{
        animation: none !important;
      }
    }


    /* Menu e ações */
    .menu {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
    }
    .menu a{
      color:var(--muted);
      font-size:13px;
      padding:8px 10px;
      border:1px solid transparent;
      border-radius:12px;
    }
    .menu a:hover{
      border-color: var(--stroke);
      background: rgba(255,255,255,.06);
      color: var(--txt);
    }

    .actions{display:flex; align-items:center; gap:10px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color:var(--txt);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); color: var(--accent);}
    .btn--primary{
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: rgba(167,139,250,.55);
      color: #fff;
      box-shadow: 0 16px 40px rgba(124,58,237,.28);
    }
    .btn--ghost{background: transparent}

    .themeToggle{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer;
      color: var(--muted);
    }
    .themeToggle svg{width:20px; height:20px}
    .icon-sun{display:none}
    [data-theme="light"] .icon-sun{display:block}
    [data-theme="light"] .icon-moon{display:none}

    /* Layout */
    main{padding: 18px 0 60px}
    .hero{
      padding: 26px 0 6px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      align-items:stretch;
    }
    @media (max-width: 980px){
      .heroGrid{grid-template-columns: 1fr}
      .menu{display:none}
      .badge{display:none}
    }

    .panel{
      background: linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    h1{
      margin:0 0 10px;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: -.2px;
    }
    h2{
      margin: 0 0 10px;
      font-size: clamp(20px, 2.2vw, 30px);
      line-height: 1.12;
      font-weight: 900;
    }
    p{margin:0; color: var(--muted); line-height:1.55}
    .lead{font-size:16px}
    .pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
    .pill{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color: var(--muted);
      padding:8px 10px;
      border-radius: 999px;
      font-size: 13px;
    }

    .heroArt{
      display:flex;
      flex-direction:column;
      gap:12px;
      height:100%;
    }
    .heroImg{
      width:100%;
      aspect-ratio: 16/10;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      overflow:hidden;
    }
    .heroImg img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .kpis{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
    }
    @media (max-width: 520px){
      .kpis{grid-template-columns: 1fr}
    }
    .kpi{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding: 12px;
    }
    .kpi strong{display:block; font-size: 14px; color: var(--txt)}
    .kpi span{display:block; margin-top:4px; color: var(--muted2); font-size: 12.5px; line-height:1.35}

    /* Sections */
    .section{margin-top: 18px}
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 12px;
    }
    .sectionHead .muted{color: var(--muted2); font-size: 13.5px; line-height:1.45}

    .toolbar{
      display:flex; gap:10px; flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* Accordion */
    .accordion{
      display:grid;
      gap: 12px;
    }
    details{
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
      border-radius: var(--radius);
      overflow:hidden;
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding: 14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none}
    .sumLeft{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .sumIcon{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      overflow:hidden;
    }
    .sumIcon img{width: 26px; height: 26px; opacity:.9}
    .sumTitle{
      min-width:0;
    }
    .sumTitle strong{
      display:block;
      font-weight: 900;
      letter-spacing: -.1px;
      font-size: 15px;
      color: var(--txt);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .sumTitle span{
      display:block;
      margin-top:2px;
      color: var(--muted2);
      font-size: 12.5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .chev{
      width: 38px; height: 38px;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      transition: transform .18s ease;
    }
    details[open] .chev{transform: rotate(180deg)}
    .content{
      padding: 0 14px 14px;
      border-top: 1px solid var(--stroke);
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items: start;
    }
    @media (max-width: 980px){
      .content{grid-template-columns: 1fr}
    }
    .content p{color: var(--muted); margin-top: 10px}
    .bullets{
      margin: 10px 0 0;
      padding-left: 18px;
      color: var(--muted);
      line-height:1.55;
    }
    .bullets li{margin: 6px 0}
    .shot{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 16px;
      overflow:hidden;
      aspect-ratio: 16/10;
    }
    .shot img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    /* Footer CTA */
    .cta{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items:center;
    }
    @media (max-width: 700px){
      .cta{grid-template-columns: 1fr}
    }
    .cta p{color: var(--muted2)}
    .ctaBtns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    /* Small helper */
    .sep{height:1px; background: var(--stroke); margin: 14px 0}
    .tiny{color: var(--muted2); font-size: 12.5px; line-height:1.45}


/* Footer Voraxus — responsivo e limpo ===================================================================================*/
.vrs-footer {
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
}

.vrs-footer__in{
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1.2fr 1.6fr auto;
  gap: 16px 22px;
  align-items: start;
}

.rodape {
    display: grid;
    gap: 6px;
    color: rgba(234, 231, 255, .72);
    font-size: 13px;
    line-height: 1.35;
    justify-items: center;
}

.rodape #brandName3{
  color: rgba(234,231,255,.92);
  font-weight: 800;
}

.vrs-footer__links, 
.vrs-adm {
    display: flex;
  /*gap: 10px 12px;*/
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.vrs-adm{
  justify-content: flex-end;
}

/* Links */
.vrs-footer a{
  color: rgba(234,231,255,.70);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

.vrs-footer a:hover{
  color: rgba(234,231,255,.92);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.vrs-footer a:focus-visible{
  outline: none;
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

/* Tablet */
@media (max-width: 900px){
  .vrs-footer__in{
    grid-template-columns: 1fr 1fr;
  }
  .vrs-adm{
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 560px){
   .vrs-footer__in {
     grid-template-columns: 1fr;
     gap: 12px;
     padding: 18px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
  .vrs-footer__links,
  .vrs-adm{
    justify-content: flex-start;
  }
  .vrs-footer a{
    padding: 10px 12px;
  }
}

/* Opcional: modo claro, se você usar theme switch */
html[data-theme="light"] .vrs-footer{
  border-top-color: rgba(20,18,37,.14);
  background: linear-gradient(180deg, rgba(124,58,237,.06), rgba(255,255,255,.85));
}

html[data-theme="light"] .rodape{
  color: rgba(20,18,37,.72);
}

html[data-theme="light"] .rodape #brandName3{
  color: rgba(20,18,37,.92);
}

html[data-theme="light"] .vrs-footer a{
  color: rgba(20,18,37,.70);
}

html[data-theme="light"] .vrs-footer a:hover{
  color: rgba(20,18,37,.92);
  border-color: rgba(20,18,37,.14);
  background: rgba(20,18,37,.06);
}