/* ===================================================================
   DOM PARTNER GROWTH — Design System
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* backgrounds */
  --bg-deep:#050F0A;
  --panel:#0B2118;
  --section-alt:#0F2C1F;
  --border:#1C4632;

  /* brand greens */
  --green:#173d27;
  --green-glow:#00594C;

  /* gold */
  --gold-dark:#8C5A17;
  --gold:#C9A227;
  --gold-light:#E4C567;
  --gold-base:#A76203;

  /* text */
  --cream:#EFE9DC;
  --cream-dim:rgba(239,233,220,.92);
  /* era .38 — ficava com contraste ~3:1 contra os fundos escuros do site,
     abaixo do mínimo de 4.5:1 (WCAG AA) pra texto normal, e as letras
     "sumiam" no fundo em vários lugares (preço dos planos, nota de taxa,
     legenda dos cases). Subido pra .60 (~5.4–6.2:1 nos fundos do site),
     continua lendo como texto secundário/mais discreto que --cream-dim,
     mas agora realmente legível */
  --cream-faint:rgba(239,233,220,.60);

  --font-head:'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1180px;
  --radius:14px;
  --ease:cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  background:var(--bg-deep);
  color:var(--cream);
  margin:0;
  overflow-x:hidden;
}
body{
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

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

/* Bloco 2 do pente fino: títulos em Cormorant Garamond, peso médio, sem
   caixa alta — troca de maior impacto visual por menor custo. --font-title
   continua sendo usado por rótulos/UI (nav, números, eco-node-title etc.),
   só os headings reais (h1-h4) migram pra --font-head. */
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:500;
  line-height:1.15;
  margin:0;
  letter-spacing:.2px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:22px;
  height:1px;
  background:var(--gold);
}

.section{
  position:relative;
  padding:110px 0;
}
.section--alt{
  background:rgba(15,44,31,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.section--tight{ padding:70px 0; }

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-head h2{
  font-size:clamp(28px,4vw,42px);
}
.section-head p{
  color:var(--cream-dim);
  margin-top:16px;
  font-size:16px;
}

/* ---------- grain overlay e barra de progresso ----------
   Removidos no Bloco 2 do pente fino ("O que sai"): grão por cima do
   conteúdo e barra de progresso no topo. As classes .grain/.progress-bar
   ainda existem no HTML de cada página (não removidas pra evitar reabrir
   todo arquivo); como não há mais CSS pra elas, ficam sem efeito visual —
   dois <div>/<svg> vazios no DOM, invisíveis. */

/* ---------- capsule nav ---------- */
.site-header{
  position:fixed;
  top:22px;
  left:0; right:0;
  z-index:900;
  display:flex;
  justify-content:center;
  transition:transform .45s var(--ease);
}
.site-header.is-hidden{
  transform:translateY(-140%);
}
.nav-capsule{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(11,33,24,.72);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:999px;
  padding:8px 10px 8px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-capsule .brand{
  display:flex;
  align-items:center;
  margin-right:6px;
}
.nav-capsule .brand img{
  height:22px;
  width:auto;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:9px 14px;
  border-radius:999px;
  color:var(--cream-dim);
  transition:color .25s, background .25s;
  white-space:nowrap;
}
.nav-links a:hover{
  color:var(--cream);
  background:rgba(255,255,255,.05);
}
.nav-links a.is-active{
  color:var(--bg-deep);
  background:var(--gold-light);
}
.nav-cta{
  margin-left:6px;
  padding:10px 20px !important;
  border-radius:999px;
  background:var(--gold) !important;
  color:var(--bg-deep) !important;
  font-weight:600 !important;
}

/* ---------- submenu "Serviços" (Bloco 5: agrupa as 4 frentes num só item) ---------- */
.nav-item{ position:relative; }
.nav-sub-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:9px 14px;
  border-radius:999px;
  color:var(--cream-dim);
  background:none;
  border:none;
  transition:color .25s, background .25s;
  white-space:nowrap;
}
.nav-sub-toggle:hover,
.nav-item.is-open .nav-sub-toggle{
  color:var(--cream);
  background:rgba(255,255,255,.05);
}
.nav-sub-toggle.is-active{
  color:var(--bg-deep);
  background:var(--gold-light);
}
.nav-sub-caret{
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .25s;
}
.nav-item.is-open .nav-sub-caret{ transform:rotate(225deg); margin-top:1px; }
.nav-submenu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  min-width:180px;
  background:rgba(6,20,14,.97);
  border:1px solid var(--border);
  border-radius:16px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity .2s, transform .2s;
  z-index:20;
}
.nav-item.is-open .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-submenu a{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:9px 14px;
  border-radius:12px;
  color:var(--cream-dim);
  white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav-submenu a:hover{ color:var(--cream); background:rgba(255,255,255,.06); }
.nav-submenu a.is-active{ color:var(--bg-deep); background:var(--gold-light); }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--cream);
  padding:8px 10px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  display:block;
  width:20px;
  height:1.5px;
  background:var(--cream);
  position:relative;
  transition:.25s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media(max-width:860px){
  .nav-capsule{ width:calc(100% - 40px); max-width:420px; padding:8px 8px 8px 18px; }
  .nav-links{
    position:fixed;
    top:78px; left:20px; right:20px;
    background:rgba(6,20,14,.97);
    border:1px solid var(--border);
    border-radius:18px;
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    gap:2px;
    display:none;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:13px 16px; text-align:center; }
  .nav-toggle{ display:block; }

  .nav-item{ position:static; }
  .nav-sub-toggle{ width:100%; justify-content:center; padding:13px 16px; }
  .nav-submenu{
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    border:none;
    background:rgba(255,255,255,.03);
    margin:2px 0 4px;
    display:none;
  }
  .nav-item.is-open .nav-submenu{ display:flex; }
  .nav-submenu a{ text-align:center; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.3px;
  border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--bg-deep);
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  border-color:var(--border);
  color:var(--cream);
}
.btn-ghost:hover{
  border-color:var(--gold);
  color:var(--gold-light);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:92svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:160px 20px 90px;
  overflow:hidden;
}
@media(max-width:640px){
  .hero{
    min-height:100vh;
    min-height:78svh;
    padding:120px 20px 80px;
  }
}
.hero-particles{
  /* confinado só à área da hero (que é position:relative + overflow:hidden
     acima): antes era "fixed" cobrindo a janela inteira, então, depois que a
     convergência terminava (só os primeiros ~80% da altura da hero rolados),
     o aglomerado ficava parado, congelado por cima do resto do site inteiro
     durante toda a rolagem — lia como um "quadrado travado". Agora o efeito
     rola junto com a hero e some de vista assim que ela sai da tela, como
     uma abertura única, em vez de uma textura permanente */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
}
.hero-content--clean{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}
.hero-content--clean::before{
  content:'';
  position:absolute;
  inset:-60px -10%;
  background:radial-gradient(ellipse 62% 75% at center, rgba(4,13,9,.85) 0%, rgba(4,13,9,.6) 45%, rgba(4,13,9,0) 78%);
  z-index:0;
  pointer-events:none;
}
.hero .eyebrow{ justify-content:center; }
.hero h1{
  font-size:clamp(34px,6.4vw,84px);
  color:var(--cream);
}
.hero h1 .accent{
  color:var(--gold-light);
  font-style:italic;
}
.hero-headline{
  position:relative;
  z-index:1;
  width:100%;
  margin:0 auto;
}
.hero-headline .line-1,
.hero-headline .line-2{
  display:block;
  font-family:var(--font-head);
  font-style:normal;
  text-transform:none;
  font-size:clamp(32px,6vw,68px);
  font-weight:500;
  letter-spacing:.2px;
  color:var(--cream);
  text-shadow:0 3px 22px rgba(4,13,9,.95), 0 1px 3px rgba(4,13,9,.9);
}
.hero-headline .line-1{
  margin-bottom:6px;
}
.hero-headline .line-2{
  white-space:nowrap;
}
@media (max-width:640px){
  .hero-headline .line-2{ white-space:normal; }
}
.hero-sub{
  margin:26px auto 0;
  max-width:520px;
  color:var(--cream-dim);
  font-size:16px;
}
.hero-actions{
  margin-top:40px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-actions--inline{
  margin-top:26px;
}
.hero-inline-cta{
  background:none;
  border:none;
  padding:0;
  color:var(--gold-light);
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.3px;
  position:relative;
  z-index:1;
}
.hero-inline-cta:hover{
  color:var(--gold);
  transform:none;
}
.hero-inline-cta .arrow{ display:inline-block; transition:transform .3s var(--ease); }
.hero-inline-cta:hover .arrow{ transform:translateX(4px); }
.hero-scroll{
  position:absolute;
  bottom:118px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:2px;
  color:var(--cream-faint);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:2;
}
.hero-scroll .line{
  width:1px; height:34px;
  background:linear-gradient(var(--gold-light),transparent);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  51%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* page hero (inner pages, shorter) */
.page-hero{
  position:relative;
  padding:190px 0 70px;
  text-align:center;
}
.page-hero h1{
  font-size:clamp(32px,5.4vw,58px);
}
.page-hero p{
  max-width:520px;
  margin:20px auto 0;
  color:var(--cream-dim);
}

/* page hero com imagem de fundo em tela cheia (páginas internas) */
.page-hero--media{
  padding:250px 0 130px;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.page-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(5,15,10,.58) 0%, rgba(5,15,10,.74) 55%, rgba(5,15,10,.96) 100%);
}
.page-hero--media .container{
  position:relative;
  z-index:2;
}
.page-hero--media h1{
  text-shadow:0 4px 26px rgba(0,0,0,.65);
}
.page-hero--media p{
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
@media(max-width:640px){
  .page-hero--media{ padding:210px 0 90px; }
}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  padding:22px 0;
  background:var(--panel);
  position:relative;
  z-index:2;
}
/* dentro da hero, o marquee vira o rodapé fixo da primeira tela —
   fica visível junto com a frase, sem precisar rolar */
.hero .marquee{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee-track span{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-head);
  font-size:22px;
  color:var(--cream-faint);
  padding:0 26px;
  white-space:nowrap;
}
.marquee-track span.gold{ color:var(--gold-light); }
.marquee-track span::after{
  content:'✦';
  margin-left:26px;
  color:var(--gold);
  font-size:12px;
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- numbers / counters ---------- */
.numbers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:40px;
  margin-top:50px;
}
.number-item{ text-align:left; }
.number-item .num{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(38px,5vw,58px);
  color:var(--gold-light);
  display:block;
  white-space:nowrap;
}
.number-item .label{
  font-size:13px;
  color:var(--cream-dim);
  margin-top:6px;
}
@media(max-width:480px){
  .numbers{ gap:10px; }
  .number-item .num{ font-size:clamp(16px,6vw,32px); }
  .number-item .label{ font-size:9.5px; line-height:1.3; }
}
@media(max-width:360px){
  .number-item .num{ font-size:clamp(14px,5.6vw,28px); }
  .number-item .label{ font-size:8.8px; }
}

/* ---------- contador de faturamento ---------- */
.counter-block{
  text-align:center;
  max-width:820px;
  margin:0 auto;
  padding:56px 40px;
  border-radius:28px;
  background:radial-gradient(circle at 50% 0%, rgba(0,89,76,.28), rgba(5,15,10,.55) 70%);
  border:1px solid rgba(228,197,103,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(228,197,103,.15);
}
.counter-number{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(30px,9.5vw,120px);
  line-height:1.05;
  letter-spacing:.5px;
  color:var(--gold-light);
  text-shadow:0 0 50px rgba(228,197,103,.45), 0 0 130px rgba(0,89,76,.4);
  white-space:nowrap;
}
@media(max-width:480px){
  .counter-number{ font-size:clamp(17px,7.6vw,32px); letter-spacing:0; }
}
@media(max-width:360px){
  .counter-number{ font-size:clamp(15px,7.2vw,26px); }
}
.counter-caption{
  color:var(--cream-dim);
  font-size:16px;
  margin:18px auto 0;
  max-width:48ch;
}
/* Bloco 3 do pente fino: substitui o contador de R$21 milhões (número
   simulado, só subindo com o tempo) por resultados fixos e reais, cada
   um com contexto (o que foi feito, cliente/segmento, período) */
.impact-results{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:34px;
  margin-top:8px;
}
.impact-result{
  flex:1 1 190px;
  max-width:230px;
}
.impact-number{
  display:block;
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.1;
  color:var(--gold-light);
  text-shadow:0 0 30px rgba(228,197,103,.3);
}
.impact-context{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--cream-dim);
}
@media(max-width:640px){
  .counter-block{ padding:40px 22px; }
}

.about-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:70px;
  align-items:stretch;
}
.about-grid p{
  color:var(--cream-dim);
  font-size:16px;
  max-width:46ch;
}
@media(max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- retrato do fundador (foto real, sem moldura decorativa) ---------- */
.founder-portrait{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  height:100%;
  min-height:320px;
  max-width:340px;
  margin-left:auto;
}
.founder-portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:860px){
  .founder-portrait{ height:auto; min-height:0; aspect-ratio:4/5; max-width:280px; margin:0 auto; }
}
.founder-strip{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  display:flex;
  gap:8px;
  z-index:2;
}
.founder-strip img{
  height:64px;
  width:64px;
  border-radius:10px;
  border:1px solid rgba(228,197,103,.5);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  object-fit:cover;
  flex:1;
}

/* ---------- nosso negócio (home) ---------- */
.business-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.business-copy p{
  color:var(--cream-dim);
  font-size:16px;
  margin-top:18px;
  max-width:52ch;
}
.business-divider{
  height:1px;
  background:var(--border);
  margin:34px 0 0;
}
.business-photo{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.photo-frame{
  position:relative;
  width:100%;
  max-width:340px;
}
.photo-frame::before{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  transform:translate(16px,16px);
  z-index:0;
}
.photo-placeholder{
  position:relative;
  z-index:1;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--panel),var(--green));
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  overflow:hidden;
}
.photo-frame .photo-placeholder img{
  position:static;
  width:65%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border:none;
  border-radius:0;
}
.photo-caption{
  margin-top:22px;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--cream-dim);
  text-align:center;
}
@media(max-width:860px){
  .business-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- ecossistema (4 frentes) — esferas orbitando o centro ---------- */
.ecosystem{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:1/1;
  margin:0 auto 60px;
}
.ecosystem--products{
  max-width:420px;
  margin-bottom:48px;
}
.ecosystem--frentes{
  max-width:660px;
  margin-bottom:76px;
}
.ecosystem--frentes .eco-ring--outer{ width:400px; height:400px; }
.ecosystem--frentes .eco-ring--inner{ width:320px; height:320px; }
.ecosystem--frentes .eco-dot--r1{ --radius:98px; }
.ecosystem--frentes .eco-dot--r2{ --radius:158px; }
.ecosystem--frentes .eco-dot--r3{ --radius:228px; }
.ecosystem--frentes .eco-spoke{ --radius:190px; }
.ecosystem--frentes .eco-node--center{ width:118px; height:118px; font-size:24px; }
.ecosystem--frentes .eco-node--sat{
  --radius:190px;
  width:156px;
  height:auto;
  white-space:normal;
  flex-direction:column;
  gap:4px;
  padding:16px 14px;
  border-radius:18px;
  text-align:center;
  /* Bloco 2 do pente fino: "4 frentes" deixa de girar sem parar e vira um
     diagrama estático — o detalhe de cada frente já aparece ao passar o
     mouse (ver .eco-node-desc / :hover abaixo), não precisa mais da rotação
     pra "revelar" nada */
  animation:none;
  transform:translate(-50%,-50%) rotate(var(--start,0deg)) translateX(var(--radius,190px)) rotate(calc(-1 * var(--start,0deg)));
}
.ecosystem--frentes .eco-node-title{
  font-family:var(--font-title);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.2px;
  color:inherit;
}
.ecosystem--frentes .eco-node-desc{
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.1px;
  color:var(--cream-dim);
  text-transform:none;
}
.ecosystem--frentes .eco-node--sat:hover .eco-node-desc,
.ecosystem--frentes .eco-node--sat:focus-visible .eco-node-desc{
  color:var(--bg-deep);
}
@media(max-width:760px){
  .ecosystem--frentes{ max-width:480px; margin-bottom:60px; }
  .ecosystem--frentes .eco-ring--outer{ width:300px; height:300px; }
  .ecosystem--frentes .eco-ring--inner{ width:240px; height:240px; }
  .ecosystem--frentes .eco-dot--r1{ --radius:74px; }
  .ecosystem--frentes .eco-dot--r2{ --radius:118px; }
  .ecosystem--frentes .eco-dot--r3{ --radius:170px; }
  .ecosystem--frentes .eco-spoke{ --radius:140px; }
  .ecosystem--frentes .eco-node--center{ width:100px; height:100px; font-size:21px; }
  .ecosystem--frentes .eco-node--sat{
    --radius:140px;
    width:auto;
    height:44px;
    padding:0 18px;
    border-radius:999px;
    flex-direction:row;
  }
  .ecosystem--frentes .eco-node-desc{ display:none; }
}
@media(max-width:520px){
  .ecosystem--frentes .eco-node--sat{ --radius:96px; font-size:11px; padding:0 12px; height:36px; }
  .ecosystem--frentes .eco-ring--outer{ width:212px; height:212px; }
  .ecosystem--frentes .eco-ring--inner{ width:152px; height:152px; }
  .ecosystem--frentes .eco-dot--r1{ --radius:50px; }
  .ecosystem--frentes .eco-dot--r2{ --radius:80px; }
  .ecosystem--frentes .eco-dot--r3{ --radius:115px; }
  .ecosystem--frentes .eco-spoke{ --radius:96px; }
  .ecosystem--frentes .eco-node--center{ width:76px; height:76px; font-size:16px; }
}
@media(max-width:640px){
  #ecossistema .ecosystem--products{
    max-width:none;
    width:calc(100% + 56px);
    margin-left:-28px;
    margin-right:-28px;
  }
}

/* anéis decorativos girando devagar atrás das esferas */
.eco-ring{
  position:absolute;
  top:50%;
  left:50%;
  border:1px dashed var(--border);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation-play-state:paused;
}
.eco-ring--outer{
  width:300px;
  height:300px;
  animation:eco-ring-spin 100s linear infinite;
}
.eco-ring--inner{
  width:240px;
  height:240px;
  opacity:.6;
  animation:eco-ring-spin 76s linear infinite reverse;
}
.ecosystem.is-active .eco-ring{ animation-play-state:running; }
@keyframes eco-ring-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* partículas de energia orbitando — efeito "holograma" */
.eco-particles{ position:absolute; inset:0; pointer-events:none; }
.eco-dot{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--size,4px);
  height:var(--size,4px);
  margin:calc(var(--size,4px) / -2) 0 0 calc(var(--size,4px) / -2);
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-light) 0%, var(--gold) 65%, transparent 100%);
  box-shadow:0 0 6px 1px rgba(201,162,39,.5);
  opacity:0;
  animation:eco-orbit-dot var(--duration,12s) linear infinite;
  animation-delay:var(--delay,0s);
  animation-play-state:paused;
}
.eco-dot--r1{ --radius:74px; }
.eco-dot--r2{ --radius:118px; }
.eco-dot--r3{ --radius:170px; }
.ecosystem.is-active .eco-dot{ opacity:.85; }
.ecosystem.is-active .eco-dot{ animation-play-state:running; }
@keyframes eco-orbit-dot{
  from{ transform:translate(-50%,-50%) rotate(var(--start,0deg)) translateX(var(--radius,100px)); }
  to{ transform:translate(-50%,-50%) rotate(calc(var(--start,0deg) + 360deg)) translateX(var(--radius,100px)); }
}

/* raios que conectam o centro às frentes, girando junto com elas */
.eco-spoke{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--radius,140px);
  height:2px;
  margin-top:-1px;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(201,162,39,.55), rgba(201,162,39,0));
  animation:eco-spin var(--duration,60s) linear infinite;
  animation-play-state:paused;
  pointer-events:none;
}
.ecosystem.is-active .eco-spoke{ animation-play-state:running; }
@keyframes eco-spin{
  from{ transform:rotate(var(--start,0deg)); }
  to{ transform:rotate(calc(var(--start,0deg) + 360deg)); }
}

.eco-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--cream-dim);
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  padding:0 18px;
  height:44px;
  transition:color .25s, background .25s, border-color .25s;
}
.eco-node--sat:hover,
.eco-node--sat:focus-visible{
  color:var(--bg-deep);
  background:var(--gold-light);
  border-color:var(--gold-light);
}
.eco-node--center{
  top:50%;
  left:50%;
  width:100px;
  height:100px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:linear-gradient(160deg,var(--panel),var(--green));
  color:var(--gold-light);
  font-family:var(--font-head);
  font-weight:700;
  font-size:21px;
  letter-spacing:1px;
  z-index:2;
  box-shadow:0 0 0 0 rgba(201,162,39,.35);
  animation:eco-pulse 3.2s ease-in-out infinite;
  animation-play-state:paused;
}
.ecosystem.is-active .eco-node--center{ animation-play-state:running; }
@keyframes eco-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,.35); }
  50%{ box-shadow:0 0 0 14px rgba(201,162,39,0); }
}

/* esferas (frentes) orbitando o centro — texto sempre em pé, girando junto */
.eco-node--sat{
  --radius:140px;
  --duration:60s;
  top:50%;
  left:50%;
  z-index:1;
  animation:eco-orbit var(--duration) linear infinite;
  animation-play-state:paused;
}
.ecosystem.is-active .eco-node--sat{ animation-play-state:running; }
.ecosystem.is-active .eco-node--sat:hover,
.ecosystem.is-active .eco-node--sat:focus-visible{
  animation-play-state:paused;
}
@keyframes eco-orbit{
  from{ transform:translate(-50%,-50%) rotate(var(--start,0deg)) translateX(var(--radius,140px)) rotate(calc(-1 * var(--start,0deg))); }
  to{ transform:translate(-50%,-50%) rotate(calc(var(--start,0deg) + 360deg)) translateX(var(--radius,140px)) rotate(calc(-1 * (var(--start,0deg) + 360deg))); }
}

/* variante com logo de empresa em vez de texto (página do fundador) */
.eco-node--logo{
  width:104px;
  height:68px;
  border-radius:var(--radius);
  padding:10px;
}
.eco-node--logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.eco-node--logo.eco-node--round{
  width:76px;
  height:76px;
  border-radius:50%;
  padding:6px;
}
.eco-node--logo:hover,
.eco-node--logo:focus-visible{
  background:var(--panel);
  border-color:var(--gold);
  color:var(--cream-dim);
}

@media(max-width:520px){
  .eco-node--sat{ font-size:11px; padding:0 12px; height:36px; --radius:96px; }
  .eco-node--logo{ width:78px; height:52px; padding:8px; }
  .eco-node--logo.eco-node--round{ width:60px; height:60px; padding:5px; }
  .eco-node--center{ width:76px; height:76px; font-size:16px; }
  .eco-spoke{ --radius:96px; }
  .eco-ring--outer{ width:212px; height:212px; }
  .eco-ring--inner{ width:152px; height:152px; }
  .eco-dot--r1{ --radius:50px; }
  .eco-dot--r2{ --radius:80px; }
  .eco-dot--r3{ --radius:115px; }
}
@media (prefers-reduced-motion: reduce){
  .ecosystem .eco-spoke,
  .ecosystem .eco-node--sat,
  .ecosystem .eco-dot,
  .ecosystem .eco-ring,
  .ecosystem .eco-node--center{
    animation-play-state:paused !important;
  }
}

/* "4 frentes": anéis, partículas e raios ficam parados (diagrama estático,
   sem animação orbital contínua) e bem mais discretos — quase invisíveis,
   só uma textura sutil atrás das esferas com o nome de cada frente */
.ecosystem--frentes .eco-ring{
  animation:none;
  opacity:.3;
}
.ecosystem--frentes .eco-dot{
  animation:none;
  opacity:.3;
  transform:translate(-50%,-50%) rotate(var(--start,0deg)) translateX(var(--radius,100px));
}
.ecosystem--frentes .eco-spoke{
  animation:none;
  opacity:.45;
  transform:rotate(var(--start,0deg));
}
.ecosystem--frentes .eco-node--center{
  animation:none;
}

/* ---------- nossa essência (sobre) ---------- */
.essence-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.essence-copy p{
  color:var(--cream-dim);
  font-size:16px;
  margin-top:18px;
  max-width:52ch;
}
.essence-highlight{
  font-family:var(--font-head);
  font-style:italic;
  font-size:clamp(19px,2.2vw,24px);
  color:var(--gold-light);
  margin-top:28px;
  line-height:1.4;
  max-width:46ch;
}
.essence-author{
  display:block;
  margin-top:14px;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cream-dim);
}
.essence-art{
  position:relative;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,39,.08), transparent 55%), var(--bg-deep);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.wireframe-illustration{ width:100%; height:auto; display:block; }
.wireframe-illustration .star{ fill:rgba(239,233,220,.55); }
.wireframe-illustration .wire{ fill:none; stroke:var(--border); stroke-width:1; }
.wireframe-illustration .node{ fill:var(--gold-light); }
@media(max-width:860px){
  .essence-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- CEO ---------- */
.ceo-block{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:center;
}
.ceo-photo{
  width:220px;
  height:220px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--panel),var(--green));
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:56px;
  color:var(--gold-light);
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.ceo-photo::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5);
}
.ceo-name{
  font-family:var(--font-head);
  font-size:clamp(24px,3vw,32px);
  color:var(--cream);
}
.ceo-role{
  color:var(--gold-light);
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:6px;
  display:block;
}
.ceo-bio{
  color:var(--cream-dim);
  margin-top:18px;
  max-width:56ch;
}
@media(max-width:640px){
  .ceo-block{ grid-template-columns:1fr; text-align:center; justify-items:center; }
}

/* ---------- método É · FAZ · FALA ---------- */
.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.method-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px 28px;
  background:var(--panel);
}
.method-card .letter{
  font-family:var(--font-head);
  font-size:44px;
  color:var(--gold-light);
  display:block;
}
.method-card h3{
  font-size:20px;
  margin-top:10px;
  color:var(--cream);
}
.method-card p{
  color:var(--cream-dim);
  font-size:14px;
  margin-top:10px;
}
@media(max-width:760px){
  .method-grid{ grid-template-columns:1fr; }
}

/* ---------- timeline ---------- */
.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
  margin-top:20px;
}
.timeline::before{
  content:'';
  position:absolute;
  top:11px;
  left:0; right:0;
  height:1px;
  background:var(--border);
}
.timeline-step{
  position:relative;
  padding-top:44px;
  padding-right:24px;
}
.timeline-step .dot{
  position:absolute;
  top:0; left:0;
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:var(--cream-faint);
  transition:all .5s var(--ease);
}
.timeline-step.is-active .dot{
  background:var(--gold);
  border-color:var(--gold-light);
  color:var(--bg-deep);
  box-shadow:0 0 0 6px rgba(201,162,39,.15);
}
.timeline-step .step-index{
  font-size:11px;
  letter-spacing:2px;
  color:var(--gold-light);
}
.timeline-step h3{
  font-size:19px;
  margin-top:8px;
  color:var(--cream);
}
.timeline-step p{
  font-size:13.5px;
  color:var(--cream-dim);
  margin-top:8px;
}
@media(max-width:860px){
  .timeline{ grid-template-columns:1fr; gap:34px; }
  .timeline::before{ top:0; bottom:0; left:11px; right:auto; width:1px; height:auto; }
  .timeline-step{ padding-top:0; padding-left:44px; padding-right:0; }
  .timeline-step .dot{ top:2px; }
}

/* ---------- Netflix-style cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.nx-card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid rgba(228,197,103,.2);
  background:linear-gradient(165deg,var(--panel),var(--bg-deep) 78%);
  padding:32px 28px 28px;
  padding-left:32px;
  overflow:hidden;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.nx-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 0%, rgba(228,197,103,.16), transparent 58%);
  opacity:1;
  pointer-events:none;
}
.nx-card::after{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--gold-light), var(--green-glow));
}
.nx-card .tag{
  position:relative;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:14px;
}
.nx-card h3{
  position:relative;
  font-size:22px;
  color:var(--cream);
  font-family:var(--font-title);
  font-weight:700;
  margin-bottom:12px;
}
.nx-card .desc{
  position:relative;
  max-height:none;
  opacity:1;
  overflow:visible;
  font-size:14.5px;
  line-height:1.62;
  color:var(--cream-dim);
}
.nx-card .more{
  position:relative;
  margin-top:18px;
  font-size:12.5px;
  color:var(--gold-light);
  font-weight:600;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:1;
}
.nx-card:hover, .nx-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 26px 52px rgba(0,0,0,.4);
}

/* ---------- foto real dentro do photo-frame (home / fundador) ---------- */
.photo-frame img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

/* ---------- mentores (página do fundador) ---------- */
.mentor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
}
.mentor-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  padding:22px 24px;
  transition:border-color .35s, transform .35s;
}
.mentor-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.mentor-card .name{
  display:block;
  font-family:var(--font-head);
  font-size:18px;
  color:var(--cream);
}
.mentor-card .role{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--cream-dim);
}
.mentor-card--photo{
  display:flex;
  align-items:center;
  gap:16px;
}
.mentor-photo{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--gold);
  flex-shrink:0;
}
.mentor-card--photo .name,
.mentor-card--photo .role{
  margin-top:0;
}

/* ---------- galeria do fundador (bastidores) ---------- */
.founder-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.founder-gallery figure{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--panel);
}
.founder-gallery img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.founder-gallery figcaption{
  padding:14px 18px;
  font-size:13px;
  color:var(--cream-dim);
  letter-spacing:.3px;
}

/* ---------- cases ---------- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.case-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px;
  background:var(--panel);
  position:relative;
}
.case-card .quote-mark{
  font-family:var(--font-head);
  font-size:60px;
  color:var(--gold-dark);
  line-height:1;
  display:block;
  margin-bottom:6px;
}
.case-card p.quote{
  font-family:var(--font-head);
  font-size:20px;
  color:var(--cream);
  line-height:1.4;
}
.case-card .segment{
  margin-top:18px;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold-light);
}
@media(max-width:760px){
  .case-grid{ grid-template-columns:1fr; }
}

/* ---------- proof shots (screenshots / cases com imagem) ---------- */
.shot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.shot-card{
  display:block;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  transition:border-color .35s, transform .35s;
}
.shot-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.shot-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-deep);
}
.shot-media img, .shot-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.shot-media--portrait{ aspect-ratio:4/5; }
.shot-media--landscape{ aspect-ratio:16/10; }
.shot-media--wide{
  aspect-ratio:16/9;
  background:#fff;
}
.shot-media--wide img{
  object-fit:contain;
  padding:16px;
}
.shot-badge{
  position:absolute;
  left:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(5,15,10,.72);
  border:1px solid var(--gold);
  color:var(--gold-light);
  font-family:var(--font-title);
  font-weight:700;
  font-size:13px;
  letter-spacing:.3px;
  backdrop-filter:blur(2px);
}
.shot-body{
  padding:22px 24px;
}
.shot-tag{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:8px;
  display:block;
}
.shot-title{
  font-size:19px;
  color:var(--cream);
  font-family:var(--font-title);
  font-weight:700;
}
.shot-desc{
  margin-top:8px;
  font-size:14px;
  color:var(--cream-dim);
  line-height:1.5;
}

/* ---------- prova de valor (home) ---------- */
.proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.proof-card{
  display:block;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  transition:border-color .35s, transform .35s;
}
.proof-card:hover, .proof-card:focus-within{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.proof-card .more{
  margin-top:14px;
  font-size:12.5px;
  color:var(--gold-light);
  font-weight:600;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.proof-card--video .shot-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- decks de branding (3 slides + descrição) ---------- */
.deck-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
}
.deck-card{
  display:block;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  transition:border-color .35s, transform .35s;
}
.deck-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.deck-slides{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--bg-deep);
}
.deck-slides img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
.deck-body{
  padding:22px 24px;
}
.deck-tag{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:8px;
  display:block;
}
.deck-title{
  font-size:19px;
  color:var(--cream);
  font-family:var(--font-title);
  font-weight:700;
}
.deck-desc{
  margin-top:8px;
  font-size:14px;
  color:var(--cream-dim);
  line-height:1.5;
}

/* ---------- vídeo real embutido ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
}
.video-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.video-card video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  object-fit:cover;
}
.video-card .shot-body{
  padding:20px 24px;
}
@media(max-width:640px){
  .deck-slides{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- FAQ ---------- */
.faq-list{
  border-top:1px solid var(--border);
}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-q{
  width:100%;
  background:none;
  border:none;
  color:var(--cream);
  text-align:left;
  padding:24px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:17px;
  font-family:var(--font-title);
  font-weight:600;
  gap:20px;
}
.faq-q .plus{
  flex-shrink:0;
  width:26px; height:26px;
  border:1px solid var(--border);
  border-radius:50%;
  position:relative;
  transition:transform .35s var(--ease), border-color .35s;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:'';
  position:absolute;
  background:var(--gold-light);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:10px; height:1px; }
.faq-q .plus::after{ width:1px; height:10px; transition:transform .35s var(--ease); }
.faq-item.is-open .plus{ border-color:var(--gold); }
.faq-item.is-open .plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-a p{
  padding:0 4px 26px;
  color:var(--cream-dim);
  max-width:70ch;
  font-size:14.5px;
}

/* ---------- planos (consultoria Daniel Gualberto) ---------- */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(165deg,var(--panel),var(--bg-deep) 78%);
  padding:36px 30px 30px;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.plan-card:hover{
  transform:translateY(-6px);
  border-color:rgba(228,197,103,.4);
  box-shadow:0 26px 52px rgba(0,0,0,.4);
}
.plan-card--featured{
  border-color:var(--gold);
  background:linear-gradient(165deg,rgba(201,162,39,.1),var(--panel) 60%,var(--bg-deep) 100%);
}
.plan-badge{
  position:absolute;
  top:-13px;
  left:30px;
  background:var(--gold);
  color:var(--bg-deep);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:100px;
}
.plan-card .tag{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:14px;
}
.plan-card h3{
  font-size:23px;
  color:var(--cream);
  font-family:var(--font-title);
  font-weight:700;
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:14px;
}
.plan-price .value{
  font-family:var(--font-head);
  font-size:38px;
  color:var(--gold-light);
}
.plan-price .period{
  font-size:13.5px;
  color:var(--cream-faint);
}
.plan-note{
  font-size:12px;
  color:var(--cream-faint);
  margin-top:6px;
}
.plan-card .desc{
  font-size:14.5px;
  line-height:1.62;
  color:var(--cream-dim);
  margin-top:18px;
  flex-grow:1;
}
.plan-card .btn{
  margin-top:26px;
  width:100%;
  text-align:center;
  justify-content:center;
}
@media(max-width:860px){
  .plan-grid{ grid-template-columns:1fr; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  border-radius:24px;
  background:linear-gradient(135deg,var(--green),var(--bg-deep));
  border:1px solid var(--border);
  padding:70px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(201,162,39,.18), transparent 70%);
  top:-140px; right:-100px;
}
.cta-banner h2{
  font-size:clamp(26px,4vw,40px);
  max-width:20ch;
  margin:0 auto;
}
.cta-banner p{
  color:var(--cream-dim);
  margin-top:14px;
}
.cta-banner .hero-actions{ margin-top:32px; }

/* ---------- forms (contato) ---------- */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-grid .full{ grid-column:1 / -1; }
.field label{
  display:block;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:15px;
  transition:border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color:var(--gold);
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; cursor:pointer; }

/* ---------- alternativa de envio por e-mail no formulário de contato ---------- */
.form-email-alt{
  display:inline-block;
  margin:14px 0 0 18px;
  font-size:13px;
  color:var(--cream-dim);
  text-decoration:underline;
  text-decoration-color:var(--border);
}
.form-email-alt:hover{ color:var(--gold-light); text-decoration-color:var(--gold-light); }
@media(max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
}
.contact-side{
  border-left:1px solid var(--border);
  padding-left:56px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
}
@media(max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-side{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:40px; }
}
.contact-line{
  display:block;
  margin-bottom:22px;
}
.contact-line .k{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  display:block;
  margin-bottom:6px;
}
.contact-line .v{
  font-size:16px;
  color:var(--cream);
}
.form-note{
  font-size:12.5px;
  color:var(--cream-faint);
  margin-top:16px;
}

/* ---------- modal de contato (CTAs abrem o formulário na mesma tela) ---------- */
.contact-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,9,7,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:999;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.contact-modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.contact-modal{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:88vh;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px 36px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98);
  transition:transform .35s var(--ease);
}
.contact-modal-overlay.is-open .contact-modal{
  transform:translateY(0) scale(1);
}
.contact-modal-close{
  position:absolute;
  top:18px; right:18px;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--cream);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s, color .25s;
}
.contact-modal-close:hover{
  border-color:var(--gold);
  color:var(--gold-light);
}
.contact-modal h3{
  font-size:24px;
  color:var(--cream);
  font-family:var(--font-title);
  font-weight:700;
  margin-bottom:8px;
  padding-right:30px;
}
.contact-modal .contact-modal-sub{
  color:var(--cream-dim);
  font-size:14px;
  line-height:1.5;
  margin-bottom:24px;
}
body.modal-open{ overflow:hidden; }
@media(max-width:640px){
  .contact-modal{ padding:32px 22px; }
}

/* ---------- páginas de texto corrido (ex.: política de privacidade) ---------- */
.legal-content{
  max-width:760px;
  margin:0 auto;
}
.legal-content h2{
  font-size:26px;
  margin-bottom:14px;
}
.legal-content h3{
  font-size:20px;
  margin:36px 0 12px;
}
.legal-content p{
  color:var(--cream-dim);
  line-height:1.7;
  font-size:15.5px;
}
.legal-content a{
  color:var(--gold-light);
  text-decoration:underline;
}
.legal-updated{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--cream-faint);
}

/* ---------- botão flutuante de contato ---------- */
.floating-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:850;
  width:68px;
  height:68px;
  padding:0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1c4634, var(--panel) 72%);
  border:1.5px solid rgba(228,197,103,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  animation:floatingCtaPulse 3.2s ease-in-out infinite;
}
.floating-cta:hover, .floating-cta:focus-visible{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 20px 44px rgba(0,0,0,.6);
  border-color:var(--gold);
}
.floating-cta img{
  width:42px;
  height:42px;
  display:block;
  filter:drop-shadow(0 0 6px rgba(228,197,103,.55));
}
@keyframes floatingCtaPulse{
  0%, 100%{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 0 rgba(228,197,103,.4); }
  50%{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 12px rgba(228,197,103,0); }
}
@media(max-width:640px){
  .floating-cta{ right:16px; bottom:16px; width:58px; height:58px; }
  .floating-cta img{ width:36px; height:36px; }
}
@media(prefers-reduced-motion: reduce){
  .floating-cta{ animation:none; }
}

/* ---------- moldura decorativa (cantos dourados, estilo obra de arte) ---------- */
.page-frame{
  position:fixed;
  inset:20px;
  z-index:5;
  pointer-events:none;
}
.page-frame .frame-corner{
  position:absolute;
  width:44px;
  height:44px;
}
.page-frame .frame-corner::before,
.page-frame .frame-corner::after{
  content:'';
  position:absolute;
  background:linear-gradient(90deg, var(--gold-light), rgba(228,197,103,0));
}
.page-frame .frame-corner::before{ top:0; left:0; width:100%; height:1px; }
.page-frame .frame-corner::after{ top:0; left:0; width:1px; height:100%; background:linear-gradient(180deg, var(--gold-light), rgba(228,197,103,0)); }
.page-frame .frame-corner--tl{ top:0; left:0; opacity:.55; }
.page-frame .frame-corner--tr{ top:0; right:0; opacity:.55; transform:scaleX(-1); }
.page-frame .frame-corner--bl{ bottom:0; left:0; opacity:.55; transform:scaleY(-1); }
@media(max-width:640px){
  .page-frame{ inset:12px; }
  .page-frame .frame-corner{ width:30px; height:30px; }
}
@media print{ .page-frame{ display:none; } }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:70px 0 34px;
  background:rgba(5,15,10,.86);
  position:relative;
  z-index:2;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:40px;
}
.footer-brand img{ height:26px; margin-bottom:16px; }
.footer-brand p{
  color:var(--cream-dim);
  font-size:13.5px;
  max-width:32ch;
}
.footer-col h4{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
  margin-bottom:16px;
}
.footer-col a{
  display:block;
  font-size:14px;
  color:var(--cream-dim);
  padding:6px 0;
  transition:color .25s;
}
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:12.5px;
  color:var(--cream-faint);
}
.footer-bottom a{
  text-decoration:underline;
  transition:color .25s;
}
.footer-bottom a:hover{ color:var(--gold-light); }
.socials{ display:flex; gap:14px; }
.socials a{
  width:34px; height:34px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .3s, color .3s;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold-light); }
.socials svg{ width:14px; height:14px; }
@media(max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ---------- reveal on scroll ---------- */
/* só esconde antes do scroll se JS estiver ativo (evita conteúdo sumido sem JS).
   Distância e duração aumentadas (24px/.8s → 40px/.9s) pra ficar mais
   perceptível — o cliente pediu um site "mais animado ao rolar, com os
   textos surgindo" — sem nunca mexer em line-height/letter-spacing, só em
   opacidade e posição, então o texto não fica "espaçado" durante a entrada */
.reveal{
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal{
  opacity:0;
  transform:translateY(40px);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  /* script.js já marca cada .reveal com --i (posição dele entre os 8
     últimos elementos revelados na página, calculado em initReveal()) —
     antes isso só era usado por .reveal-stagger (que não é usado em
     lugar nenhum do HTML). Reaproveitado aqui pra dar um atraso curto e
     crescente a cada elemento: cards do mesmo grid (que entram juntos no
     observer) passam a "surgir" em cascata um atrás do outro, em vez de
     pipocarem todos ao mesmo tempo */
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- misc ---------- */
.divider{
  height:1px;
  background:var(--border);
  border:none;
  margin:0;
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.tag-pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 16px;
  font-size:12.5px;
  color:var(--cream-dim);
}

::selection{ background:var(--gold); color:var(--bg-deep); }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:var(--panel); border:1px solid var(--border); border-radius:10px; }

/* ===================================================================
   PREMIUM LAYER — esferas de fundo, glass badges, cases "pro", eyebrow numerada
   =================================================================== */

/* ---------- esferas de fundo (bg-orbs) ----------
   Removidas no Bloco 2 do pente fino ("O que sai": orbes de fundo) — e
   também o pedido do cliente de deixar as "esferas do fundo" quase
   invisíveis. O <div class="bg-orbs">...</div> já foi removido de todas
   as páginas; sem ele no HTML, essas classes não têm mais nada pra
   estilizar. */
main, header, footer{ position:relative; z-index:1; }

/* ---------- eyebrow numerada (referência editorial) ---------- */
.eyebrow-num{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:2px;
  color:var(--gold-light);
  font-weight:700;
  margin-bottom:18px;
}
.eyebrow-num .n{ font-size:15px; color:var(--gold); }
.eyebrow-num .t{
  text-transform:uppercase;
  color:var(--cream-dim);
  font-weight:600;
  letter-spacing:3px;
}

/* ---------- glass badges flutuantes sobre hero/imagens ---------- */
.glass-badge{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 20px;
  border-radius:16px;
  background:rgba(11,33,24,.48);
  border:1px solid rgba(228,197,103,.28);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  z-index:3;
}
.glass-badge .gb-num{
  font-family:var(--font-head);
  font-size:26px;
  font-weight:600;
  color:var(--gold-light);
  line-height:1;
}
.glass-badge .gb-label{
  font-size:11px;
  letter-spacing:.6px;
  color:var(--cream-dim);
  max-width:170px;
}
@media(max-width:760px){
  .glass-badge{ display:none; }
}
.glass-badge--a{ top:24%; right:6%; }
.glass-badge--b{ left:6%; bottom:16%; }

/* ---------- cases "pro" — grid de portfólio com resultado real ---------- */
.case-grid--pro{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:26px;
}
.case-card--pro{
  position:relative;
  border-radius:18px;
  padding:2px;
  background:linear-gradient(150deg, rgba(228,197,103,.55), rgba(0,89,76,.5) 55%, rgba(28,70,50,.2));
  transition:transform .4s var(--ease);
}
.case-card--pro:hover{ transform:translateY(-6px); }
.case-card--pro .ccp-inner{
  height:100%;
  border-radius:16px;
  background:var(--panel);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.case-card--pro .ccp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.case-card--pro .ccp-avatar{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  color:var(--gold-light);
  font-size:16px;
  background:var(--section-alt);
  flex-shrink:0;
}
.case-card--pro .ccp-segment{
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--cream-faint);
  text-align:right;
}
.case-card--pro .ccp-number{
  font-family:var(--font-title);
  font-size:38px;
  font-weight:800;
  color:var(--gold-light);
  line-height:1;
}
.case-card--pro .ccp-metric{
  font-size:12.5px;
  color:var(--cream-dim);
  margin-top:2px;
}
.case-card--pro .ccp-quote{
  font-size:14.5px;
  color:var(--cream-dim);
  line-height:1.65;
  border-top:1px solid var(--border);
  padding-top:14px;
}
@media(max-width:760px){
  .case-grid--pro{ grid-template-columns:1fr; }
}

/* ---------- seção clara (respiro creme entre blocos escuros) ---------- */
.section--light{
  background:var(--cream);
  color:var(--bg-deep);
}
.section--light .eyebrow-num .t,
.section--light .eyebrow .t{ color:rgba(5,15,10,.55); }
.section--light h2, .section--light h3{ color:var(--bg-deep); }
.section--light p{ color:rgba(5,15,10,.66); }
.section--light .eyebrow{ color:var(--gold-base); }
.section--light .eyebrow::before{ background:var(--gold-base); }

/* ---------- densidade de texto (home: textos menores, mais compactos) ---------- */
.section--dense .section-head p,
.section--dense p.desc,
.section--dense .ccp-quote{
  font-size:14px;
  line-height:1.6;
}
.section--dense .section-head h2{ font-size:clamp(28px,3.6vw,42px); }