/* Landing page styles to match the reference mock */
@font-face{ font-family:'BRSonoma'; src:url('/css/fonts/br-sonoma/BRSonoma-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --brand-primary:#5B6DFF;       /* indigo */
  --brand-primary-2:#7A5BFF;     /* purple */
  --brand-dark:#2F3858;          /* navy */
  --brand-muted:#6C7A91;         /* muted */
  --teal:#28e0d6;                /* cyan accent for dividers */
  --surface:#ffffff;
  --bg:#f4f6fb;
  --soft-shadow:0 8px 24px rgba(18,25,38,.08);
}

html,body{ 
  background:var(--bg); 
  color:#1d2330; 
  font-family: 'BRSonoma', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; 
  margin: 0;
  padding: 0;
}

/* Header */
.landing-nav{  
  position:fixed; 
  top:0; 
  left: 0;
  right: 0;
  z-index:100; 
  background:#EEEDF6; 
  backdrop-filter:saturate(180%) blur(10px); 
  border-bottom:1px solid rgba(0,0,0,.05); 
  box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 0.3);

 }
.landing-nav .brand{ font-weight:600; color:#1d2330; }
.landing-nav .nav-link{ color:#6b7280; font-weight:500; }
.landing-nav .nav-link:hover{ color:var(--brand-primary); }
.landing-nav .logo{ height:22px; }
.btn-gradient{ background-image:linear-gradient(90deg,var(--brand-primary),var(--brand-primary-2)); color:#fff; border:none; box-shadow:0 8px 20px rgba(91,109,255,.3); }
.btn-gradient:hover{ filter:brightness(1.05); color:#fff; }

.hero .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; pointer-events:none; }
.hero .hero-art{ max-height:420px; height: auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.12)); }
.hero h1{ color:#20283e; }
.hero .btn-primary{ background:var(--brand-primary); border-color:var(--brand-primary); }

/* Gradient card highlight */
.highlight {
  background-color: #eeedf6;
  padding: 50px;
}

.ms-2{
  display: flex;
  justify-content: center;    
  align-items: center;       
  text-align: center;
  gap:10px;
}

.features{
  background-color: white;
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}



h3.h6.mb-2 {
  font-size: clamp(24px, 1.2vw, 32px); 
}

p.text-muted.small.mb-0 {
  font-size: clamp(18px, 1.2vw, 24px); 
}


.gradient-card{ background:linear-gradient(180deg, #B8B8FF 0%, #3E4568 100%); box-shadow:var(--soft-shadow); position:relative; }

/* Cards */
.shadow-soft{ box-shadow:var(--soft-shadow); }
.feature-card{ 
  background-color: #eeedf6; 
  border:1px solid rgba(0,0,0,.04); 
  transition:transform .2s ease, box-shadow .2s ease; 

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

.feature-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(18,25,38,.10); }
.feature-card .icon{ width:100px; height:auto; opacity:.9; filter:hue-rotate(270deg) saturate(1.1); }

/* Band */
.band{ background:white; }
.band-inner{ background:var(--brand-dark); border-radius: 0px; }


.linear-gradient{
  height: 30px;
  background:linear-gradient(180deg,#40FBBE 0%, #796CFF 100%);
}

/* Knowledge */
.knowledge .container-xxl{ position:relative; }
/* .knowledge .container-xxl::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,transparent 0 10%, var(--teal) 10% 60%, transparent 60%); border-radius:2px; } */
.mini-card{ border:1px solid rgba(0,0,0,.04); }
.gradient-card--soft{ background:linear-gradient(180deg,#ecedff 0%, #ffffff 70%); }
.gradient-card--green{ background:linear-gradient(180deg,#e0fff6 0%, #ffffff 70%); }

.container-helper{
  display: flex;
  justify-content: center;
  text-align: center;
  background:#3e4568;

  color: white;
  font-size:1.25rem !important;
}

.container-helper-knowledge{
  display: flex;
}


.container-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: left;
  flex-wrap: wrap;
  padding: 6rem;
}

.container-texto p {
  max-width: 800px; 
  font-size: 1rem;
  line-height: 1.5;
}

.aspas svg {
  width: 4em;   /* escala com base no font-size */
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.aspas-primeira {
  align-self: flex-start;
  transform: translateY(-40%);

}

.aspas-segunda {
  align-self: flex-end;
  transform: translateY(40%);

}







.container-knowledge {
    display: flex;
    justify-content: space-between;
    height: 518px;
    gap:10px;
}

.container {
    display: flex;
    justify-content: space-between; /* Para distribuir as 3 divs de forma igual */
    position: relative;
    height: 518px;
}

.left, .right, .middle {
    flex: 1; /* Faz cada div ocupar 1/3 do espaço */
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}

.left{
  display: flex;
  flex-direction: column;
  gap:20px;
  padding: 60px;
}

.titulo{
  color: #3E4568;
  font-size: 32px;
  font-weight: 600;
}

.text1,.text2 {
  color: #727A85;
  font-size: 24px;
  font-weight: 500;
}

.middle {
    flex: 0.1;
    position: relative; /* Necessário para as divs internas */
    background-color: #e0e0e0;
}

.left{
  flex:1.5
}



.inner-left {
    position: absolute;
    left: 100%; /* Move a div para a direita */
    background-color: #c0c0c0;
    padding: 10px;
    border-radius: 5px;
    width: 150px;
}

.inner-right {
    position: absolute;
    left: 100%; /* Move a div para a direita */
    background-color: #a0a0a0;
    padding: 10px;
    border-radius: 5px;
    width: 150px;
}

.inner-left {
    top: 10px; /* Primeira div posicionada um pouco mais abaixo */
}

.inner-right {
    top: 40px; /* Segunda div posicionada abaixo da primeira */
}

    .container-conhecimento {
      display: flex;
      position: relative;
      width: 100%;
      background: #f5f5f5;
      overflow: hidden;

    }

    .texto {
      flex: 2;
      padding: 40px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      z-index: 1;
    }

    .esquerda{
      flex:2;
      display:flex;
      flex-direction: column;
      gap:10px;
    }

    .direita{
      flex:1;
    }

    .imagem {
      flex: 1;
      position: relative;
    }

    .imagem img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    

.cards {
  position: absolute;
  top: 50%;
  left: 62%; /* empurra os cards um pouco mais pra direita */
  transform: translate(-50%, -50%); 
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}

    .card1,.card2 {
      background: white;
      padding: 14px;
      background-color: #c2caf1;
      /* width: 220px; */
      width: clamp(180px, 25vw, 300px);
      height: clamp(180px, 24vh, 400px); 
      font-size: clamp(12px, 1.2vw, 16px); 
      font-weight: 500;
      height: fit-content;

    }

    .card2{
      background-color:#85ffc6;
    }

    .conteudo-card{
      display: flex;
      flex-direction: column;
      gap:4px;
      padding: 6px;
    }

    .conteudo-card p {
  margin: 0;
  font-size: 14px;
  color: #3E4568;
  line-height: 1.4;
  word-wrap: break-word;   /* força quebra dentro da div */
  overflow-wrap: break-word;
}

.conteudo-card svg {
  width: 24px;  /* tamanho fixo do ícone */
  height: 24px;
  flex-shrink: 0; /* impede de deformar */
}

    .titulo-conhecimento{
      color: #3E4568;
      font-weight: 600;
      font-size: clamp(20px, 1.2vw, 40px); 
    }

    .texto-conhecimento{
      color: #727A85;
      font-weight: 500;
      font-size: clamp(14px, 1.2vw, 30px);
    }

    .form-control.form-control-lg.form-pill{
      border-color: #9a9fa9;
    }

 @media (min-width: 768px) {
  .feature-card {
    /* padding: 1rem !important;
    height: auto;
    width: 100%; */
    display: flex;
    flex-direction: column;
  }
}


/* Comparison table */
.comparison table{ background:#fff; }
.comparison thead th{ color:#667085; font-weight:600; }
.comparison th, .comparison td{ border-color:rgba(0,0,0,.06)!important; }
.comparison tbody tr:nth-child(even) td{ background:#f7f9ff; }

/* CTA + footer */
.cta{ background:var(--brand-dark); }
.cta .laptop{ filter:drop-shadow(0 0 12px var(--teal)); max-width:520px; }
.form-card .form-control{ border-color:#e6e8ef; }
.form-pill{ border-radius:999px; padding-left:18px; padding-right:18px; height:48px; }
.landing-footer{ background:var(--brand-dark); }

/* Buttons */
.btn-primary{ background:var(--brand-primary); border-color:var(--brand-primary); }
.btn-outline-primary{ color:var(--brand-primary); border-color:var(--brand-primary); }
.btn-outline-primary:hover{ background:var(--brand-primary); color:#fff; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero{ padding-top:16px; }
  .hero h1{ font-size:1.75rem; }
}