/* ===== Beeops — estilos base (cores institucionais: navy + dourado) ===== */
:root{
  --honey:#D2AA5A;
  --honey-dark:#B4914D;
  --honey-light:#E4CB9B;
  --dark:#28415F;
  --dark-soft:#35517A;
  --surface:#2C4868;
  --surface-alt:#3D6CA8;
  --surface-hover:#345278;
  --ink:#f2ede2;
  --muted:#B8C4D4;
  --muted-dim:#8A99AD;
  --border:rgba(255,255,255,0.08);
  --border-gold:rgba(210,170,90,0.3);
  --radius:14px;
  --shadow:0 20px 45px rgba(0,0,0,0.55);
  --hex-tile-w:56px;
  --hex-tile-h:100px;
}


*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', Arial, sans-serif;
  color:var(--ink);
  background:var(--dark);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Poppins', 'Inter', Arial, sans-serif;
  color:var(--ink);
  line-height:1.2;
  font-weight:600;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

/* ===== Acessibilidade: foco visível e preferência por menos movimento ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--honey);
  outline-offset:2px;
  border-radius:4px;
}

nav.main-nav a:focus-visible,
.footer-grid a:focus-visible{
  outline-color:var(--honey-light);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Evita que o cabeçalho fixo cubra o início das seções ao usar links âncora */
section[id]{ scroll-margin-top:90px; }

/* "Pular para o conteúdo" — fica fora da tela até receber foco pelo teclado */
.skip-link{
  position:absolute;
  top:-100px;
  left:16px;
  background:var(--honey);
  color:var(--dark);
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  z-index:1000;
  transition:top 0.2s ease;
}
.skip-link:focus{
  top:16px;
}

.container{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-block;
  color:var(--honey);
  font-weight:700;
  letter-spacing:2px;
  font-size:12px;
  text-transform:uppercase;
  background:rgba(210,170,90,0.1);
  border:1px solid var(--border-gold);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:6px;
}


.section{
  padding:88px 0;
}

.section-head{
  max-width:640px;
  margin:0 0 48px;
}

.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-head h1,
.section-head h2{
  font-size:clamp(28px,3.4vw,38px);
  margin-top:10px;
}

.section-head p{
  color:var(--muted);
  margin-top:14px;
  font-size:16.5px;
}

/* ===== Honeycomb texture (contínua, fixa em relação à tela) ===== */
.hex-pattern{
  position:relative;
}

.hex-pattern::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16.5 L56 49.5 L28 66 L0 49.5 L0 16.5 Z' fill='none' stroke='%23e4cb9b' stroke-opacity='0.35' stroke-width='1.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16.5 L56 49.5 L28 66 L0 49.5 L0 16.5 Z' fill='none' stroke='%23e4cb9b' stroke-opacity='0.35' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position:0 0, 28px 50px;
  background-size:var(--hex-tile-w) var(--hex-tile-h), var(--hex-tile-w) var(--hex-tile-h);
  background-repeat:repeat;
  background-attachment:fixed, fixed;
  opacity:0.14;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--honey);
  color:var(--dark);
}
.btn-primary:hover{ background:var(--honey-light); }

.btn-outline{
  border-color:var(--border);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{ background:var(--surface-hover); border-color:var(--honey); }

.btn-outline.on-dark{
  border-color:var(--honey);
  color:var(--honey);
}
.btn-outline.on-dark:hover{ background:var(--honey-light); color:var(--dark); }

/* ===== Header ===== */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--dark);
  border-bottom:1px solid var(--dark-soft);
  margin:0;
  padding-top:0;
  overflow:hidden;
  transition:box-shadow 0.25s ease;
}

header.site-header.scrolled{
  box-shadow:0 6px 20px rgba(0,0,0,0.18);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1140px;
  margin:0 auto;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--ink);
}

.logo .logo-mark{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.logo .bee{ color:var(--honey-light); }
.logo .ops{ color:var(--ink); }

nav.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
}

nav.main-nav a{
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  opacity:0.85;
  transition:opacity 0.2s, color 0.2s;
  padding:6px 0;
  border-bottom:2px solid transparent;
}

nav.main-nav a:hover,
nav.main-nav a.active{
  opacity:1;
  color:var(--honey-light);
  border-bottom-color:var(--honey-light);
}

.nav-cta{ display:flex; align-items:center; gap:20px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:24px;
  height:2px;
  background:var(--ink);
  transition:transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  nav.main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--dark);
    flex-direction:column;
    align-items:flex-start;
    padding:20px 24px;
    gap:16px;
    display:flex;
    border-bottom:1px solid var(--dark-soft);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  nav.main-nav.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-primary{ display:none; }
}

/* ===== Hero ===== */
.hero{
  background:var(--dark);
  padding:100px 0 90px;
  position:relative;
  overflow:hidden;
}

.hero .container{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:stretch;
}

.hero h1{
  font-size:clamp(30px,3.6vw,44px);
  margin-top:16px;
}

.hero h1 span{ color:var(--honey-dark); }

.hero-content p{
  color:var(--muted);
  font-size:16.5px;
  margin-top:18px;
}

.hero .cta-row{
  display:flex;
  gap:16px;
  margin-top:34px;
  flex-wrap:wrap;
}

.hero-image{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow), 0 0 80px rgba(210,170,90,0.15);
}

.hero-image img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
}

.hero .feature-tabs{
  grid-column:1 / -1;
  margin-top:90px;
}

@media (max-width:860px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-image{ order:-1; }
  .hero-image img{ aspect-ratio:16/10; min-height:0; }
  .hero .feature-tabs{ margin-top:70px; }
}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.honeycomb-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  transform:translateY(0);
}

.honeycomb-mini .cell{
  width:96px;
  height:110px;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:var(--surface);
  box-shadow:var(--shadow);
  color:var(--honey);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

.honeycomb-mini .cell.fill{ background:var(--honey); color:var(--dark); }
.honeycomb-mini .cell:nth-child(2){ transform:translateY(-30px); }
.honeycomb-mini .cell:nth-child(5){ transform:translateY(-30px); }
.honeycomb-mini .cell:nth-child(3){ transform:translateY(0); }

@media (max-width:860px){
  .honeycomb-mini{ transform:scale(0.85); }
}

/* ===== Como funciona (grid de módulos do Bitrix24) ===== */
.platform-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:40px;
}

.platform-head h2{
  font-size:clamp(26px,3vw,34px);
  margin-top:10px;
  max-width:480px;
}

.platform-head-desc{
  max-width:380px;
}

.platform-head-desc p{
  color:var(--muted);
  font-size:15px;
}

.platform-head-desc a{
  display:inline-block;
  margin-top:12px;
  color:var(--honey);
  font-weight:600;
  font-size:14.5px;
  transition:color 0.2s ease;
}
.platform-head-desc a:hover{ color:var(--honey-light); }

.platform-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.platform-tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.platform-tile:hover{
  transform:translateY(-4px);
  border-color:var(--honey);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

.platform-tile .hexicon{
  width:44px;
  height:44px;
  margin-bottom:16px;
  font-size:20px;
  color:var(--honey);
}

.platform-tile h3{ font-size:17px; margin-bottom:8px; }
.platform-tile p{ color:var(--muted); font-size:14px; }

.platform-tile.featured{
  grid-column:1;
  grid-row:1 / span 2;
  background:linear-gradient(160deg, rgba(210,170,90,0.12), var(--surface) 65%);
  border-color:var(--border-gold);
  box-shadow:0 0 50px rgba(210,170,90,0.12);
  display:flex;
  flex-direction:column;
}

.platform-tile.featured:hover{
  box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 50px rgba(210,170,90,0.12);
}

.platform-tile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.platform-tile-top .hexicon{ margin-bottom:0; width:52px; height:52px; font-size:24px; }

.platform-brand{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.platform-tile.featured h3{ font-size:22px; }
.platform-tile.featured p{ font-size:15px; }

.platform-tag{
  display:inline-block;
  margin-top:auto;
  padding-top:20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--honey);
}

.platform-tile-wide{ grid-column:span 2; }

@media (max-width:960px){
  .platform-grid{ grid-template-columns:repeat(2,1fr); }
  .platform-tile.featured,
  .platform-tile-wide{ grid-column:1 / 3; grid-row:auto; }
}
@media (max-width:600px){
  .platform-head{ align-items:flex-start; }
  .platform-grid{ grid-template-columns:1fr; }
}

/* ===== Service cards ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.services-grid.two{
  grid-template-columns:repeat(2,1fr);
}

.service-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:32px 26px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  display:flex;
  flex-direction:column;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

.service-card .hexicon{
  width:56px;
  height:56px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:var(--dark);
  margin:0 auto 18px;
}

.service-card h3{ font-size:18px; margin-bottom:10px; }
.service-card p{ color:var(--muted); font-size:14.5px; }
/* Botão no rodapé do card: alinha entre cards com textos de tamanhos diferentes */
.service-card .service-card-cta{ margin-top:auto; padding-top:16px; }

@media (max-width:960px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .services-grid{ grid-template-columns:1fr; }
  .services-grid.two{ grid-template-columns:1fr; }
}

/* ===== Slider de benefícios em abas (index — "Por que o Bitrix24") ===== */
.feature-tabs{
  --feature-tab-duration:7s;
  max-width:1000px;
  margin:0 auto;
}

.feature-tabs-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:2px solid var(--border-gold);
  margin-bottom:40px;
  overflow-x:auto;
  scrollbar-width:none;
}
.feature-tabs-nav::-webkit-scrollbar{ display:none; }

.feature-tab{
  position:relative;
  flex:0 0 auto;
  padding:10px 2px 16px;
  border:none;
  background:transparent;
  font-family:'Poppins', 'Inter', Arial, sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  opacity:0.6;
  cursor:pointer;
  transition:opacity 0.2s ease, color 0.2s ease;
}
.feature-tab:hover{ opacity:1; }
.feature-tab.active{ opacity:1; color:var(--honey); }

.feature-tab-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--honey-light);
  opacity:0;
  transition:opacity 0.3s linear;
}
.feature-tab:hover .feature-tab-progress{ opacity:0.4; }
.feature-tab.active .feature-tab-progress{ opacity:1; background:rgba(228,203,155,0.3); }

.feature-tab-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--honey);
}
/* Sem autoplay (JS desligado, pausa ou movimento reduzido), a aba ativa mostra a barra cheia */
.feature-tab.active .feature-tab-progress span{ width:100%; }
.feature-tabs.is-playing .feature-tab.active .feature-tab-progress span{
  animation:feature-tab-progress var(--feature-tab-duration) linear forwards;
}
.feature-tabs.is-paused .feature-tab.active .feature-tab-progress span{ animation-play-state:paused; }

@keyframes feature-tab-progress{
  from{ width:0; }
  to{ width:100%; }
}

.feature-panel{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:48px;
  align-items:center;
}
.feature-panel[hidden]{ display:none; }
.feature-panel.active{ animation:feature-panel-in 0.6s ease; }

@keyframes feature-panel-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

.feature-panel-text h3{ font-size:24px; margin-bottom:12px; }
.feature-panel-text > p{ color:var(--muted); font-size:15.5px; margin-bottom:22px; }
/* Botões da aba lado a lado (quebram linha em telas estreitas) */
.feature-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.feature-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
}
.feature-list li{
  position:relative;
  padding-left:22px;
  font-weight:600;
  font-size:16px;
  line-height:1.3;
}
.feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.3em;
  width:10px;
  height:11px;
  background:var(--honey);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.feature-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:340px;
  padding:40px 32px;
  border-radius:var(--radius);
  border:1px solid var(--border-gold);
  background:linear-gradient(160deg, rgba(210,170,90,0.16), var(--surface) 60%);
  box-shadow:var(--shadow), 0 0 50px rgba(210,170,90,0.1);
  overflow:hidden;
}
.feature-visual > *{ position:relative; }

.feature-visual .hexicon{
  width:84px;
  height:84px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:var(--dark);
  margin-bottom:22px;
}
.feature-visual strong{
  font-family:'Poppins', 'Inter', Arial, sans-serif;
  font-size:clamp(30px,4vw,46px);
  line-height:1.1;
  color:var(--honey);
}
.feature-visual span{
  max-width:300px;
  margin-top:10px;
  color:var(--muted);
  font-size:15px;
}

/* Variante com foto no lugar do ícone + texto */
.feature-visual--image{
  min-height:0;
  padding:0;
  aspect-ratio:4 / 3;
}
.feature-visual--image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:35% center;
}
/* Imagem 3:2 (ex.: CRM) mostrada inteira, sem corte */
.feature-visual--wide{ aspect-ratio:3 / 2; }
/* Card inclinado em 3D, virado para o texto; endireita um pouco no hover */
.feature-visual--tilt{
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition:transform 0.5s ease;
}
.feature-visual--tilt:hover{ transform:perspective(1400px) rotateY(-3deg) rotateX(1deg); }
@media (max-width:860px){
  .feature-visual--tilt{ transform:perspective(1000px) rotateY(-5deg) rotateX(2deg); }
}
@media (prefers-reduced-motion:reduce){
  .feature-visual--tilt{ transition:none; }
}
/* Imagem recortada (fundo transparente): sem moldura, "flutua" sobre a seção */
.feature-visual--float{
  min-height:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.feature-visual--float img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 24px 40px rgba(6,12,28,0.55));
}
/* Telas largas: a imagem avança um pouco sobre a margem direita da página */
@media (min-width:1240px){
  .feature-visual--float img{
    align-self:flex-start;
    width:calc(100% + 60px);
    max-width:none;
  }
}

@media (max-width:860px){
  .feature-tabs-nav{ justify-content:flex-start; gap:24px; margin-bottom:28px; }
  .feature-tab{ font-size:16px; }
  .feature-panel{ grid-template-columns:1fr; gap:28px; }
  .feature-visual{ order:-1; min-height:220px; padding:28px 20px; }
  .feature-visual--image{ min-height:0; padding:0; }
  .feature-visual--float{ min-height:0; padding:0; }
}

/* ===== Service detail rows (página Soluções) ===== */
.service-row{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:center;
  padding:56px 0;
  border-bottom:1px solid var(--border);
}

.service-row:last-child{ border-bottom:none; }

.service-row .num{
  font-family:'Poppins',sans-serif;
  font-size:64px;
  font-weight:700;
  color:var(--honey);
  opacity:0.5;
}

.service-row h3{ font-size:26px; margin:8px 0 14px; }
.service-row p{ color:var(--muted); font-size:16px; margin-bottom:18px; }

.service-row ul{ display:flex; flex-direction:column; gap:10px; }
.service-row ul li{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-size:15px;
}
.service-row ul li::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex:0 0 auto;
}

.service-row.reverse{ direction:rtl; }
.service-row.reverse > *{ direction:ltr; }

@media (max-width:760px){
  .service-row{ grid-template-columns:1fr; }
  .service-row.reverse{ direction:ltr; }
}

/* ===== Modelos de contratação (Escopo Aberto/Fechado) ===== */
.scope-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.scope-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:34px 30px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.scope-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

.scope-card .tag{
  display:inline-block;
  background:var(--surface-alt);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:16px;
}

.scope-card h3{ font-size:20px; margin-bottom:10px; }
.scope-card p.desc{ color:var(--muted); font-size:14.5px; margin-bottom:20px; }

.scope-card ul{ display:flex; flex-direction:column; gap:11px; }
.scope-card ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  color:var(--ink);
}
.scope-card ul li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:6px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex:0 0 auto;
}

@media (max-width:760px){
  .scope-grid{ grid-template-columns:1fr; }
}

/* ===== Seção de processo (Como conduzimos o seu projeto) ===== */
.process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  list-style:none;
}

.process-step{
  background:var(--surface);
  border-radius:var(--radius);
  padding:28px 20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.process-step:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

.process-step .step-num{
  width:46px;
  height:46px;
  margin:0 auto 16px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--dark);
}

.process-step h3{ font-size:18px; font-weight:700; margin-bottom:4px; }

.process-step .step-tagline{
  font-style:italic;
  color:var(--honey);
  font-size:12.5px;
  margin-bottom:10px;
}

.process-step p{ color:var(--muted); font-size:13.5px; }

@media (max-width:960px){
  .process-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .process-grid{ grid-template-columns:1fr; }
}

/* ===== Stats / trust strip ===== */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:center;
}
.stats-strip .stat strong{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:38px;
  color:var(--honey-dark);
}
.stats-strip .stat span{
  color:var(--muted);
  font-size:14px;
}

@media (max-width:700px){
  .stats-strip{ grid-template-columns:1fr; gap:32px; }
}

/* ===== Carrossel de logos de clientes (marquee contínuo) ===== */
.logo-marquee{
  overflow:hidden;
  width:100%;
  margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:80px;
  padding:0 40px;
  animation:logo-marquee-scroll 24s linear infinite;
  animation-play-state:running !important;
  will-change:transform;
}
.logo-marquee-track img{
  width:160px;
  height:70px;
  object-fit:contain;
  flex:0 0 auto;
  filter:grayscale(100%) brightness(1.6);
  opacity:0.75;
  transition:opacity 0.2s ease, filter 0.2s ease;
}
.logo-marquee-track img:hover{
  filter:none;
  opacity:1;
}
@keyframes logo-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ===== Faixa de selos de avaliação (G2, Capterra, Software Advice) ===== */
.badges-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:36px;
}
.badges-strip img{
  width:140px;
  height:auto;
}
@media (max-width:700px){
  .badges-strip{ gap:24px; }
  .badges-strip img{ width:110px; }
}

/* ===== CTA banda ===== */
.cta-band{
  background:var(--dark);
  color:var(--ink);
  padding:70px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band h2{ color:var(--ink); font-size:clamp(26px,3.2vw,34px); }
.cta-band p{ color:var(--muted); margin-top:12px; font-size:16px; }
.cta-band .cta-row{
  margin-top:28px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

/* ===== Footer ===== */
footer.site-footer{
  background:var(--dark);
  color:var(--muted);
  padding:56px 0 28px;
  border-top:1px solid var(--dark-soft);
  position:relative;
  overflow:hidden;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  position:relative;
  z-index:1;
}

.footer-grid h4{
  color:var(--ink);
  font-size:15px;
  margin-bottom:16px;
}

.footer-grid p{ font-size:14px; line-height:1.7; }

.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul li a{ color:var(--muted); font-size:14px; opacity:0.85; transition:opacity 0.2s, color 0.2s; }
.footer-grid ul li a:hover{ opacity:1; color:var(--honey-light); }

.footer-bottom{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--dark-soft);
  font-size:13px;
  color:var(--muted-dim);
  text-align:center;
  position:relative;
  z-index:1;
}

@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ===== Hero interno das páginas internas (Soluções, Planos) ===== */
.about-hero{
  background:var(--dark);
  padding:80px 0;
}
.about-hero .container{
  max-width:820px;
}
.about-hero .eyebrow{ margin-bottom:10px; }
.about-hero h1{ font-size:clamp(30px,4vw,44px); }
.about-hero p.lead{ color:var(--muted); font-size:18px; margin-top:18px; }

/* ===== Página Planos ===== */
.price-card .variant-toggle{ margin-bottom:16px; }

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  list-style:none;
}

.price-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:32px 26px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}

.price-card.featured{
  border:2px solid var(--honey);
  box-shadow:var(--shadow), 0 0 60px rgba(210,170,90,0.18);
}

.price-card.featured:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 60px rgba(210,170,90,0.18);
}

/* Selo "Mais popular" como fita no canto superior direito */
.price-card .badge{
  position:absolute;
  z-index:2;
  top:20px;
  right:-42px;
  width:170px;
  padding:6px 0;
  text-align:center;
  transform:rotate(45deg);
  background:var(--honey);
  color:var(--dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
}

.price-card h3{ font-size:22px; font-weight:700; margin-bottom:4px; }
.price-card .plan-tagline{ color:var(--muted); font-size:13.5px; margin-bottom:20px; min-height:36px; }

.price-card .price{
  font-family:'Poppins',sans-serif;
  font-size:46px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px;
  color:var(--honey-dark);
  margin:0 0 2px;
}
.price-card .price span{ font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; }
.price-card .price-note{ font-size:12px; color:var(--muted); margin-bottom:22px; }

.price-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1; }
.price-card ul li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13.5px;
  color:var(--ink);
}
.price-card ul li::before{
  content:"";
  width:7px;
  height:7px;
  margin-top:6px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex:0 0 auto;
}

.price-card .btn{
  width:100%;
  justify-content:center;
  padding:15px 24px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.price-card .btn-primary{ box-shadow:0 6px 16px rgba(210,170,90,0.35); }

.pricing-table-wrap{ overflow-x:auto; }
.pricing-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.pricing-table th, .pricing-table td{
  padding:14px 16px;
  text-align:center;
  font-size:13.5px;
  border-bottom:1px solid var(--border);
}
.pricing-table th{ background:var(--dark); color:var(--ink); font-weight:600; }
.pricing-table td:first-child, .pricing-table th:first-child{ text-align:left; font-weight:600; }
.pricing-table tr:last-child td{ border-bottom:none; }

@media(max-width:960px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-table{ font-size:12px; }
  .pricing-table th, .pricing-table td{ padding:10px 8px; }
}

/* ===== Página Contato ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}

.contact-info h1{ font-size:30px; }
.contact-info p.lead{ color:var(--muted); margin-top:14px; font-size:16px; }

.contact-channels{ margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.contact-channel{
  display:flex;
  align-items:center;
  gap:16px;
}
.contact-channel .hexicon{
  width:48px;
  height:48px;
  background:var(--honey);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--dark);
  flex:0 0 auto;
}
.contact-channel strong{ display:block; font-size:15px; }
.contact-channel span{ color:var(--muted); font-size:14px; }

.contact-form{
  background:var(--surface);
  border-radius:var(--radius);
  padding:38px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.form-group{ margin-bottom:20px; }
.form-group label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--ink);
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:13px 14px;
  border-radius:10px;
  border:1.5px solid var(--border);
  font-family:inherit;
  font-size:14.5px;
  background:var(--surface-alt);
  color:var(--ink);
  transition:border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--honey);
  box-shadow:0 0 0 3px rgba(210,170,90,0.15);
}
.form-group textarea{ resize:vertical; min-height:120px; }

.contact-form .btn{ width:100%; justify-content:center; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ===== Utilitários de fundo (agora unificados — sem zebra entre seções) ===== */
.section-alt-bg{ background:var(--dark) !important; }
.section-light-bg{ background:var(--dark) !important; }

/* ===== Alternador de cobrança Mensal/Anual ===== */
.billing-toggle-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:48px;
}

/* ===== Toggle deslizante (base para .billing-toggle e .variant-toggle) ===== */
.billing-toggle,
.variant-toggle{
  position:relative;
  display:inline-flex;
  background:var(--surface-alt);
  border-radius:999px;
  padding:4px;
}

.toggle-slider{
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:calc(50% - 4px);
  background:var(--honey);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  transition:transform 0.25s ease;
  z-index:1;
}

.billing-toggle.slide-2 .toggle-slider,
.variant-toggle.slide-2 .toggle-slider{
  transform:translateX(100%);
}

.billing-btn,
.variant-tag{
  position:relative;
  z-index:3;
  flex:1;
  text-align:center;
  border:none;
  background:transparent;
  border-radius:999px;
  font-family:inherit;
  cursor:pointer;
  color:var(--ink);
  opacity:0.7;
  transition:color 0.2s ease, opacity 0.2s ease;
}

.billing-btn.active,
.variant-tag.active{
  color:var(--dark);
  opacity:1;
  font-weight:800;
}

.billing-btn{
  padding:11px 30px;
  font-weight:600;
  font-size:14px;
}

.variant-tag{
  padding:6px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.billing-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--honey-light);
  color:var(--dark);
  font-size:12.5px;
  font-weight:700;
  padding:6px 16px;
  border-radius:999px;
}

.savings-tag{
  display:none;
  background:var(--honey-light);
  color:var(--dark);
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:12px;
}

.savings-tag.visible{ display:inline-block; }