:root {
  --bg-dark: #0b0b0d;
  --bg-darker: #050507;
  --bg-light: #f4f4f6;
  --text-main: #ffffff;
  --text-muted: #c4c4ce;
  --text-dark: #111111;
  --primary: #4f46e5;
  --accent: #a855f7;
  --radius-pill: 999px;
  --radius-lg: 32px;
  --radius-md: 24px;
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.45);
  --container: 1120px;
}

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

body {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-darker);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* NAVBAR */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 18px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.nav-links a {
  color: #d4d4dd;
  position: relative;
  padding-bottom: 2px;
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  border-radius: 999px;
  background: #ffffff;
  transition: width 0.18s ease-out;
}

.nav-links a:hover::after {
  width: 100%;
}

.btn-nav {
background: #ffffff;
color: #111827;
padding: 3px 24px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;

/* alinhamento perfeito do texto */
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}


.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 26px;
  cursor: pointer;
}

.nav-toggle span {
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    background: #050507;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: flex;
  }
}

/* HERO */

main {
  padding-top: 72px; /* compensar header fixo */
}

.hero {
position: relative;
color: var(--text-main);
background: url('fundo.jpg') center center / cover no-repeat;

min-height: 85vh;   /* 👉 altura ocupando 85% da tela */
display: flex;
align-items: center;  /* centraliza verticalmente */
padding: 80px 0;      /* espaçamento extra */
}

/* overlay por cima da imagem */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.4), transparent 55%),
          radial-gradient(circle at 80% 80%, rgba(0,0,0,0.5), transparent 55%),
          rgba(0,0,0,0.45); /* camada escura geral */
pointer-events: none;
}

/* garante que o conteúdo fique acima do overlay */
.hero-inner {
position: relative;
}


@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 64px 0 56px;
  }
}

.hero-kicker {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: 18px;
  color: #e5e7eb;
}

.hero-title {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.02;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-title span {
  display: block;
}

.hero-subtitle {
  font-size: 16px;
  color: var(--text-muted);
/*  max-width: 420px;*/
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn-hero-primary {
  background: #ffffff;
  color: #111827;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}

.btn-hero-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.btn-hero-secondary {
  background: transparent;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: var(--text-muted);
  padding: 10px 22px;
  font-size: 14px;
  cursor: pointer;
}

.hero-footnote {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
}

.hero-card {
  border-radius: 72px;
  background:
    radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.9), transparent 60%),
    linear-gradient(135deg, #020617, #111827);
  min-height: 360px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.hero-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.65), transparent 30%),
    linear-gradient(-135deg, rgba(15, 23, 42, 0.8), transparent 35%);
}

.hero-card-inner {
  position: relative;
  height: 100%;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-card-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #e5e7eb;
}

.hero-card-main {
  font-size: 28px;
  font-weight: 600;
  max-width: 260px;
}

.hero-card-sub {
  font-size: 13px;
  color: #e5e7eb;
  max-width: 280px;
}

/* SEÇÕES GERAIS */

section {
  scroll-margin-top: 90px;
}

.section-light {
  background: #ffffff;
  color: var(--text-dark);
  padding: 80px 0;
}

.section-title-kicker {
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
}

.section-text {
  font-size: 15px;
  max-width: 420px;
  color: #4b5563;
}

.grid-solutions {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

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

.solution-note {
  font-size: 14px;
  margin-top: 16px;
  color: #4b5563;
}

.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.card-top {
  background: #111111;
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  min-height: 120px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-top span:first-child {
  font-size: 22px;
  font-weight: 500;
}

.card-main {
  background: #c7c5ff;
  border-radius: var(--radius-lg);
  padding: 26px 26px 30px;
  min-height: 220px;
  box-shadow: var(--shadow-soft);
}

.card-main-number {
  font-size: 20px;
  margin-bottom: 12px;
}

.card-main-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.card-main-text {
  font-size: 14px;
  color: #1f2937;
}

.card-main-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
}

.card-tag {
  background: rgba(17, 24, 39, 0.06);
  border-radius: 999px;
  padding: 4px 10px;
}

/* BLOCO CINZA COM IMAGEM (quem somos / privacidade etc.) */

.section-gray {
  background: #f2f3f7;
  color: var(--text-dark);
  padding: 80px 0;
}

.grid-gray {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

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

.gray-text-big {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 24px;
}

.gray-text-body {
  font-size: 15px;
  color: #4b5563;
  max-width: 460px;
}

.gray-image {
  border-radius: var(--radius-lg);
  min-height: 260px;
  background:
    radial-gradient(circle at 15% 0, rgba(249, 115, 22, 0.8), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(37, 99, 235, 0.9), transparent 60%),
    #020617;
  box-shadow: var(--shadow-soft);
}

/* 🔥 SEÇÃO STICKY FULLSCREEN (EFEITO LUMINU) */

.section-sticky {
  width: 100%;
  background: #f5f5f7;
  color: var(--text-dark);
  padding: 0;
}

.sticky-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  min-height: 100vh;
  align-items: stretch;
}

.sticky-left {
  padding: 96px 8vw 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sticky-headline-kicker {
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #111;
}

.sticky-headline {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 22px;
  color: #111;
}

.sticky-text-intro {
  font-size: 18px;
  color: #444;
  margin-bottom: 42px;
  max-width: 520px;
}

.sticky-block {
  margin-bottom: 40px;
  max-width: 520px;
}

.sticky-block-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a1a1a;
}

.sticky-block-body {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* COLUNA DIREITA FIXA */
.sticky-right {
  position: relative;
  width: 100%;
  height: 100%;
}

.sticky-right-inner {
  position: sticky;
  top: 72px; /* altura do header */
  height: calc(100vh - 72px);
  width: 100%;
  overflow: hidden;
}

.sticky-right-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .sticky-wrapper {
    grid-template-columns: 1fr;
  }

  .sticky-left {
    padding: 64px 20px 40px;
  }

  .sticky-right-inner {
    position: relative;
    top: auto;
    height: 320px;
  }
}

/* CADASTRO */

.section-dark {
  background: #050507;
  color: #ffffff;
  padding: 80px 0;
}

.form-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

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

label {
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
  color: #e5e7eb;
}

input, select, textarea {
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #111827;
  color: #f9fafb;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}

textarea {
  border-radius: 24px;
  min-height: 120px;
  resize: vertical;
}

.form-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* FOOTER */

footer {
  background: #050507;
  color: #f9fafb;
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
}

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

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

.footer-logo-big {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.footer-heading {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #e5e7eb;
}

.footer-list {
  list-style: none;
  font-size: 14px;
  color: #d1d5db;
}

.footer-list li + li {
  margin-top: 8px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #9ca3af;
}

.footer-bottom a {
  text-decoration: underline;
  text-decoration-style: dotted;
}


/* CTA FINAL (bloco roxo antes do footer) */
.section-cta {
background: #c5dcff;
color: #111111;
padding: 80px clamp(24px, 6vw, 72px) 120px;
}

.section-cta-inner {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}

.section-cta-title {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
}

.section-cta-text {
font-size: 15px;
color: #111827;
max-width: 440px;
margin-bottom: 20px;
}

.section-cta-actions {
display: flex;
justify-content: flex-start;
}

/* botão estilo Luminu */
.btn-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ffffff;
color: #111827;
padding: 12px 26px;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}

.btn-cta-icon {
width: 26px;
height: 26px;
border-radius: 999px;
background: #111827;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

/* FOOTER FULL-WIDTH, SOBRE A SEÇÃO ANTERIOR */
footer {
position: relative;
z-index: 5;
margin-top: -70px;              /* faz o footer "subir" sobre o bloco roxo */
}

/* bloco preto que ocupa 100% da largura */
.footer-bg {
width: 100%;
background: #050507;
color: #f9fafb;
border-radius: 40px 40px 0 0;   /* cantos superiores arredondados */
padding: 80px 0 32px;
box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
border-top: 1px solid rgba(255,255,255,0.08);
}

/* mantém o grid dentro com o mesmo container que o resto do site */
.footer-top {
display: grid;
grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
gap: 40px;
align-items: flex-start;
margin-bottom: 40px;
}

@media (max-width: 960px) {
.section-cta-inner {
flex-direction: column;
align-items: flex-start;
}

.footer-bg {
border-radius: 32px 32px 0 0;
padding: 56px 0 24px;
}

.footer-top {
grid-template-columns: 1fr 1fr;
}
}

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


/* sobrescreve o estilo antigo do .logo */
.logo {
display: flex;
align-items: center;
}

/* controla tamanho e deixa branco */
.logo img {
max-height: 58px;      /* 🔹 ajuste aqui se quiser maior/menor (ex: 30–40px) */
width: auto;
display: block;
filter: brightness(0) invert(1);  /* deixa o SVG branco se ele for escuro */
}
.footer-logo img {
max-height: 120px;   /* 🔹 ajuste o tamanho que quiser: 80px, 100px, 120px… */
width: auto;
display: block;
filter: brightness(0) invert(1); /* se quiser branco também */
margin-bottom: 20px;
}



/* ===== SUBMENU MODERNO (SOLUÇÕES) ===== */
.nav-item { position: relative; display: flex; align-items: center; }

.dropdown-toggle{
display: inline-flex;
align-items: center;
gap: 8px;
color: #d4d4dd;
padding-bottom: 2px;
}
.dropdown-toggle:hover{ color:#fff; }

.chev{
font-size: 12px;
opacity: .9;
transform: translateY(-1px);
transition: transform .18s ease;
}

/* menu flutuante */
.dropdown-menu{
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: min(360px, 92vw);
padding: 10px;
border-radius: 18px;
background: rgba(10,10,14,.92);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(16px);
box-shadow: 0 24px 60px rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}

/* itens do dropdown */
.dropdown-menu a{
display: grid;
gap: 2px;
padding: 12px 12px;
border-radius: 14px;
color: #e5e7eb;
}
.dropdown-menu a:hover{
background: rgba(255,255,255,.06);
}
.dd-title{ font-weight: 600; font-size: 14px; }
.dd-desc{ font-size: 12px; color: rgba(229,231,235,.75); }

/* abre no desktop com hover e também com foco */
@media (min-width: 901px){
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dropdown:hover .chev,
.dropdown:focus-within .chev{
transform: translateY(-1px) rotate(180deg);
}
}

/* Mobile: dropdown vira "bloco" dentro do menu aberto */
@media (max-width: 900px){
.nav-item{ width: 100%; }
.dropdown-toggle{ width: 100%; justify-content: space-between; }

.dropdown-menu{
position: static;
transform: none;
width: 100%;
opacity: 1;
pointer-events: auto;
display: none;                 /* fechado por padrão */
margin-top: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
box-shadow: none;
}

.dropdown.open .dropdown-menu{ display: block; }
.dropdown.open .chev{ transform: rotate(180deg); }
}


/* ===== FIX: submenu não some ao passar o mouse ===== */

/* garante que o hover seja no container (link + menu) */
.nav-item.dropdown{
position: relative;
}

/* "ponte" invisível entre o link e o menu (cobre o gap) */
@media (min-width: 901px){
.nav-item.dropdown::after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 18px;          /* cobre o espaço entre o link e o menu */
}

/* fixa abertura usando hover do CONTAINER */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu{
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}

/* opcional: deixa o menu mais “colado” no link */
.dropdown-menu{
top: calc(100% + 8px) !important;
}
}





/* ===== BLOCO NOSSO PROPÓSITO – MODERNO ===== */
.purpose-list{
margin-top: 28px;
display: grid;
gap: 18px;
max-width: 680px;
}

.purpose-item{
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 17px;
line-height: 1.6;
color: #2a2a2a;
opacity: 0;
transform: translateY(12px);
animation: purposeFade .8s ease forwards;
}

/* delay progressivo */
.purpose-item:nth-child(1){ animation-delay: .1s; }
.purpose-item:nth-child(2){ animation-delay: .25s; }
.purpose-item:nth-child(3){ animation-delay: .4s; }

.purpose-icon{
font-size: 22px;
line-height: 1;
color: #000;
transform: translateY(4px);
}

/* animação de entrada */
@keyframes purposeFade{
to{
opacity: 1;
transform: translateY(0);
}
}

/* mobile */
@media (max-width: 768px){
.purpose-list{
gap: 16px;
}
.purpose-item{
font-size: 16px;
}
}








/* ================================
HERO BASE
================================ */
.hero{
position: relative;
overflow: hidden; /* permite o SVG sair do container */
}

/* ================================
GRID DO HERO
================================ */
.hero-grid{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 34px;
align-items: center;
position: relative;
}

/* ================================
COLUNA ESQUERDA (texto)
================================ */
/* (mantém seu CSS atual do texto) */

/* ================================
COLUNA DIREITA
================================ */
.hero-right{
display: flex;
justify-content: flex-end;
align-items: center;
}

/* ================================
SVG BASE
================================ */
.hero-art{
width: min(560px, 46vw);
aspect-ratio: 1396 / 708;
display: grid;
place-items: center;
position: relative;
color: rgba(255,255,255,.85);
}

.hero-svg{
width: 100%;
height: auto;
display: block;
opacity: .75;
mix-blend-mode: screen;
filter:
drop-shadow(0 18px 45px rgba(0,0,0,.45))
drop-shadow(0 0 25px rgba(255,255,255,.06));
animation: floaty 6s ease-in-out infinite;
}

/* ================================
ANIMAÇÃO DE ENTRADA
================================ */
.hero-art-slide{
opacity: 0;
transform: translateX(-60px) scale(.96);
animation: heroSlideIn 2.2s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: .3s;
}

@keyframes heroSlideIn{
to{
opacity: 1;
transform: translateX(0) scale(1);
}
}

@keyframes floaty{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-10px); }
}

/* =====================================================
🔥 DESKTOP ONLY — SVG FORA DO CONTAINER (AJUSTADO)
===================================================== */
@media (min-width: 901px){

.hero-right{
position: absolute;
top: 50%;
right: -160px;      /* distância lateral equilibrada */
transform: translateY(-50%);
width: 620px;       /* <<< TAMANHO IDEAL (como na 2ª imagem) */
pointer-events: none;
}

.hero-art{
width: 100%;
}
}

/* ================================
MOBILE — NÃO ALTERAR
================================ */
@media (max-width: 900px){
.hero-grid{
grid-template-columns: 1fr;
gap: 22px;
}

.hero-right{
position: static;
justify-content: center;
transform: none;
width: auto;
}

.hero-art{
width: min(520px, 92vw);
opacity: .85;
}

.hero-svg{
mix-blend-mode: normal;
}
}

/* ================================
BOTÕES HERO
================================ */
.hero-actions{
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.hero-actions button{
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s cubic-bezier(.22,1,.36,1),
background .35s ease,
color .35s ease;
}

.hero-actions button:hover{
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.hero-actions button:active{
transform: translateY(-1px) scale(.98);
}

.hero-actions .btn-hero-icon{
transition: transform .35s cubic-bezier(.22,1,.36,1);
}

.hero-actions button:hover .btn-hero-icon{
transform: translateX(6px);
}

.btn-hero-primary{
background: #ffffff;
color: #000;
border: none;
}

.btn-hero-primary:hover{
background: #f4f4f4;
}

.btn-hero-secondary{
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.35);
backdrop-filter: blur(6px);
}

.btn-hero-secondary:hover{
background: rgba(255,255,255,.18);
}

/* ================================
MOBILE ESPAÇAMENTO
================================ */
@media (max-width: 768px){
.hero{
padding-left: 18px;
padding-right: 18px;
}

.hero-inner{
padding-top: 110px;
padding-bottom: 48px;
}

.hero-title{
line-height: 1.15;
}

.hero-subtitle{
line-height: 1.6;
}

.hero-actions{
margin-top: 22px;
}
}




/* ================================
REDES SOCIAIS NO HEADER
(não interfere no menu)
================================ */

/* container das redes */
.nav-social{
display: flex;
align-items: center;
gap: 12px;
margin-left: 22px;
}

/* separador discreto antes das redes */
.nav-social::before{
content: "";
width: 1px;
height: 24px;
background: rgba(255,255,255,.25);
margin-right: 6px;
}

/* botão social */
.nav-social a{
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.08);
transition:
transform .3s cubic-bezier(.22,1,.36,1),
background .3s ease,
box-shadow .3s ease;
}

/* ícone */
.nav-social a svg{
width: 15px;
height: 15px;
fill: #fff;
opacity: .9;
}

/* hover elegante (igual ao da imagem) */
.nav-social a:hover{
transform: translateY(-2px);
background: rgba(255,255,255,.18);
box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* ================================
MOBILE — NÃO MOSTRA
================================ */
@media (max-width: 900px){
.nav-social{
display: none;
}
}



/* ================================
SOLUÇÕES PESSOAIS — PREMIUM (FUNDO CLARO)
================================ */
#solucoes-pessoais{
position: relative;
}

/* leve textura/contraste para não ficar “branco demais” */
#solucoes-pessoais::before{
content:"";
position:absolute;
inset: 0;
background:
radial-gradient(1200px 420px at 20% 0%, rgba(0,0,0,.06), transparent 60%),
radial-gradient(900px 380px at 90% 40%, rgba(0,0,0,.05), transparent 60%);
pointer-events:none;
}
#solucoes-pessoais .container{
position: relative;
z-index: 1;
}

.sp-head{ max-width: 900px; }

.sp-title{
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.06;
margin: 10px 0 14px;
letter-spacing: -0.02em;
color: #0b0b0b;
}

.sp-lead{
font-size: 16px;
line-height: 1.75;
color: rgba(0,0,0,.72);
margin: 0;
}

/* layout */
.sp-grid{
display: grid;
grid-template-columns: 1.6fr .85fr;
gap: 22px;
margin-top: 26px;
align-items: start;
}

/* cards */
.sp-cards{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.sp-card{
border-radius: 18px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(0,0,0,.08);
padding: 16px 16px 14px;
box-shadow: 0 14px 45px rgba(0,0,0,.08);
transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
background .35s ease,
border-color .35s ease;
}

.sp-card:hover{
transform: translateY(-6px);
box-shadow: 0 22px 60px rgba(0,0,0,.12);
background: rgba(255,255,255,.92);
border-color: rgba(0,0,0,.12);
}

.sp-card-top{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}

.sp-ico{
width: 38px;
height: 38px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(0,0,0,.06);
color: #0b0b0b;
}

.sp-ico svg{
width: 20px;
height: 20px;
stroke: currentColor;
}

.sp-card-title{
font-size: 16px;
margin: 0;
letter-spacing: -0.01em;
color: #0b0b0b;
}

.sp-card-text{
margin: 0;
color: rgba(0,0,0,.72);
line-height: 1.6;
font-size: 14px;
}

/* box lateral (escuro para contrastar) */
.sp-side-box{
border-radius: 20px;
padding: 18px;
background: rgba(0,0,0,.92);
color: #fff;
box-shadow: 0 18px 55px rgba(0,0,0,.22);
position: sticky;
top: 92px;
}

.sp-side-kicker{
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .75;
}

.sp-side-title{
font-size: 20px;
margin: 10px 0 10px;
letter-spacing: -0.01em;
}

.sp-side-text{
margin: 0 0 16px;
line-height: 1.7;
color: rgba(255,255,255,.82);
font-size: 14px;
}

.sp-cta{
width: 100%;
border: none;
border-radius: 999px;
padding: 12px 14px;
font-weight: 700;
background: #fff;
color: #000;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease;
}

.sp-cta:hover{
transform: translateY(-3px);
box-shadow: 0 14px 35px rgba(0,0,0,.35);
background: #f4f4f4;
}

.sp-cta-ico{
transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.sp-cta:hover .sp-cta-ico{
transform: translateX(6px);
}

/* reveal */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
opacity: 1;
transform: translateY(0);
}

/* responsivo */
@media (max-width: 900px){
.sp-grid{
grid-template-columns: 1fr;
}
.sp-cards{
grid-template-columns: 1fr;
}
.sp-side-box{
position: static;
top: auto;
}
}



/* ================================
SEÇÃO VÍDEO (MODERNA, SEM AUTOPLAY)
================================ */
.section-video{
background: #ffffff;
color: #111;
padding: 90px 0;
position: relative;
overflow: hidden;
}
.section-video::before{
content:"";
position:absolute;
inset: 0;
background:
radial-gradient(900px 420px at 15% 0%, rgba(79,70,229,.10), transparent 60%),
radial-gradient(800px 380px at 85% 60%, rgba(168,85,247,.10), transparent 60%);
pointer-events:none;
}

.video-card{
position: relative;
z-index: 1;
max-width: 980px;
margin: 0 auto;
border-radius: 34px;
overflow: hidden;
box-shadow: 0 28px 70px rgba(0,0,0,.16);
border: 1px solid rgba(0,0,0,.08);
background: #0b0b0d;
}

.video-frame{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #0b0b0d;
}

/* Vídeo real (inicia escondido) */
.video-frame video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}

/* Capa (poster) */
.video-poster{
position: absolute;
inset: 0;
background: center/cover no-repeat;
filter: saturate(1.05) contrast(1.05);
}

/* camada escura premium por cima da capa */
.video-poster::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.08), transparent 55%),
linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.20));
}

/* botão play */
.video-play{
position: absolute;
inset: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
}

.play-btn{
width: 92px;
height: 92px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(255,255,255,.92);
box-shadow: 0 18px 55px rgba(0,0,0,.35);
transform: translateY(0);
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .28s ease;
}
.video-play:hover .play-btn{
transform: translateY(-3px);
background: #fff;
box-shadow: 0 22px 70px rgba(0,0,0,.42);
}
.play-btn svg{
width: 28px;
height: 28px;
margin-left: 3px; /* centraliza o triângulo */
fill: #111;
}

/* mini badge discreto */
.video-badge{
position: absolute;
left: 18px;
bottom: 18px;
z-index: 3;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
color: rgba(255,255,255,.92);
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(10px);
}

/* Quando está tocando */
.video-card.is-playing .video-poster,
.video-card.is-playing .video-play,
.video-card.is-playing .video-badge{
display: none;
}
.video-card.is-playing video{
display: block;
}

/* mobile */
@media (max-width: 768px){
.section-video{ padding: 64px 0; }
.video-card{ border-radius: 26px; }
.play-btn{ width: 78px; height: 78px; }
}







  /* trava scroll do body quando modal abre */
  body.sp-lock { overflow: hidden !important; }

  /* Overlay fullscreen */
  .sp-modal-overlay{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
    background: rgba(10, 12, 16, .62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .sp-modal-overlay.is-open{ display:block; }

  /* Shell fullscreen com layout */
  .sp-modal{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #eaf0ff;

    /* layout */
    display: flex;
    flex-direction: column;

    /* anima */
    transform: translateY(10px);
    opacity: 0;
    animation: spModalIn .18s ease forwards;
  }
  @keyframes spModalIn{
    to{ transform: translateY(0); opacity: 1; }
  }

  /* HEADER FIXO (sem botão fechar) */
  .sp-modal-head{
    position: sticky;
    top: 0;
    z-index: 2;

    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);

    background:
      radial-gradient(1200px 400px at 20% 0%, rgba(70,120,255,.22), transparent 60%),
      radial-gradient(900px 500px at 80% 40%, rgba(5,210,206,.18), transparent 60%),
      rgba(11, 15, 23, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .sp-modal-brand{
    display:flex;
    flex-direction: column;
    gap: 3px;
  }
  .sp-modal-kicker{
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .75;
  }
  .sp-modal-title{
    font-size: 18px;
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
  }

  .sp-modal-hint{
    font-size: 12px;
    opacity: .75;
    margin: 0;
    text-align: right;
    line-height: 1.35;
  }

  /* BODY com scroll interno */
  .sp-modal-body{
    flex: 1;
    overflow: auto;
    padding: 22px 18px 26px;
  }

  /* container central + 2 colunas (desktop) */
  .sp-modal-container{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 18px;
    align-items: start;
  }

  /* painel esquerdo (texto / instruções) */
  .sp-side-panel{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 18px;
    box-shadow: 0 18px 55px rgba(0,0,0,.30);
  }
  .sp-side-panel h3{
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
  }
  .sp-side-panel p{
    margin: 0 0 14px;
    opacity: .82;
    line-height: 1.55;
    font-size: 13px;
  }
  .sp-side-badges{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sp-badge{
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    opacity: .9;
  }

  /* card do formulário */
  .sp-form-card{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(11, 15, 23, .92);
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
    overflow: hidden;
  }

  .sp-form-inner{
    padding: 18px;
  }

  /* grid inputs */
  .sp-form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .sp-row-2{ grid-column: 1 / -1; }

  /* inputs */
  .sp-field{ display:flex; flex-direction:column; gap: 6px; }
  .sp-label{ font-size: 12px; opacity: .78; }

  .sp-input, .sp-select, .sp-textarea{
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    padding: 12px 12px;
    outline: none;
    transition: border .12s ease, background .12s ease, transform .12s ease;
  }
  .sp-input::placeholder, .sp-textarea::placeholder{ color: rgba(255,255,255,.50); }
  .sp-input:focus, .sp-select:focus, .sp-textarea:focus{
    border-color: rgba(44,200,77,.65);
    background: rgba(255,255,255,.08);
  }

  .sp-textarea{ min-height: 120px; resize: vertical; }

  .sp-help{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    opacity: .72;
  }
  .sp-counter{ font-variant-numeric: tabular-nums; }

  /* select arrow */
  .sp-select{
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
      linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
  }

  /* footer do card (ações fixas dentro do card) */
  .sp-form-footer{
    display:flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    flex-wrap: wrap;
  }
  .sp-btn{
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 900;
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
  }
  .sp-btn:active{ transform: translateY(1px); }

  .sp-btn-ghost{
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .sp-btn-ghost:hover{ background: rgba(255,255,255,.12); }

  .sp-btn-primary{
    background: linear-gradient(90deg, #2CC84D, #05d2ce);
    color: #081018;
  }
  .sp-btn-primary:hover{ opacity: .92; }

  .sp-note{
    padding: 0 18px 16px;
    font-size: 12px;
    opacity: .70;
    line-height: 1.45;
  }

  /* MOBILE: vira 1 coluna e tira painel esquerdo */
  @media (max-width: 980px){
    .sp-modal-container{
      grid-template-columns: 1fr;
    }
    .sp-side-panel{
      display: none;
    }
    .sp-form-grid{
      grid-template-columns: 1fr;
    }
    .sp-row-2{ grid-column: auto; }
    .sp-modal-body{ padding: 16px 14px 20px; }
    .sp-modal-head{ padding: 14px 14px; }
    .sp-modal-hint{ display:none; }
  }