/* =========================================================
   DaiSystems — Main Global Styles (SaaS Profissional)
   Arquivo único: main.css
   Revisado em: 2026-02-18
   ========================================================= */

/* =========================================================
   PALETA OFICIAL (NOVO PADRÃO)
   ========================================================= */
:root{
  /* Base escura */
  --ds-bg: #0B0F1A;          /* fundo principal */
  --ds-surface: #111827;     /* fundo alternativo (blocos) */
  --ds-surface-2: rgba(17,24,39,.85);

  /* Texto */
  --ds-text: #E5E7EB;        /* texto principal */
  --ds-muted: #B8BDC9;       /* texto secundário */
  --ds-muted-2: rgba(184,189,201,.78);

  /* Roxos */
  --ds-primary: #8A5CFF;         /* principal */
  --ds-primary-hover: #6C3EF0;   /* hover */
  --ds-glow: rgba(184, 156, 255, .18);            /* glow */

  /* Efeitos / UI */
  --ds-primary-soft: rgba(138, 92, 255, .14);
  --ds-stroke: rgba(255,255,255,.10);

  --ds-radius: 18px;
  --ds-radius-sm: 14px;
  --ds-shadow: 0 18px 48px rgba(0,0,0,.55);

  /* Layout */
  --ds-container: 1120px;

  /* =========================================================
     COMPAT / ALIASES (para não quebrar CSS antigo)
     ========================================================= */
  --roxo-principal: var(--ds-primary);
  --roxo-escuro: var(--ds-primary-hover);

  --bg-site: var(--ds-bg);
  --bg-card: var(--ds-surface);

  /* usados em “modern.css” dentro do próprio arquivo */
  --text: var(--ds-text);
  --muted: var(--ds-muted);
  --radius: var(--ds-radius);
  --shadow: var(--ds-shadow);
  --stroke: var(--ds-stroke);

  /* usados no “style.css” antigo */
  --panel: rgba(17,24,39,.78); /* painel translúcido padrão */
  --ds-panel: rgba(17,24,39,.78); /* compat com agendamento-cards */

  --logo-height: 56px;
}

/* Base global */
html, body{
  background: var(--ds-bg);
  color: var(--ds-text);
}

a{ color: inherit; }
::selection{ background: rgba(138,92,255,.35); }

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

/* Fundo global (todas as páginas) */
html, body{ min-height:100%; }

body{
  font-family:"Open Sans", system-ui, sans-serif;
  color: var(--ds-text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Imagem global */
  background-image: var(--bg-image);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;

  /* iOS/mobile */
  background-attachment: scroll;

  /* fallback */
  background-color: var(--ds-bg);
}

/* Overlay para legibilidade (obrigatório) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: var(--bg-overlay);
  z-index:-1;
}


/* Container único (alinha site todo) */
.container{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0;
}


/* LINKS */
a{
  text-decoration:none;
  transition: color .3s ease;
}

/* =========================================================
   HEADER (corrigido: sem padding duplicado + alinhamento do logo)
   ========================================================= */
.main-header{
  background: rgba(5,5,5,.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 2px 12px rgba(0,0,0,.6);

  position: sticky;
  top:0;
  z-index:1000;

  /* padding único e previsível */
  padding: 10px 0;
}

.header-container{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;

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

  /* evita “pulo” quando o logo muda */
  min-height: 78px; /* 72px logo + folga */
}

/* Logo */
.logo-slogan{
  display:flex;
  flex-direction:column;
}

.logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1;
}

/* LOGO: 72px exatos + alinhamento estável */
.logo-img{
  height:72px;
  width:auto;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(184,156,255,.25));
}

/* Navegação */
.main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.main-nav a{
  font-family:"Poppins", sans-serif;
  font-weight:500;
  font-size:.95rem;
  color: var(--ds-text);
  padding: 8px 10px;
  border-radius:10px;
  opacity:.88;
  line-height: 1;
}

.main-nav a:hover,
.main-nav a:focus{
  color:#0B0F1A;
  background-color: var(--roxo-principal);
  outline:none;
  box-shadow: 0 0 12px rgba(184,156,255,.35);
}


/* ===== Header — alinhamento e quebras (fix) ===== */
.main-header{
  padding: 14px 0;
  border-bottom: 1px solid var(--stroke);
}
.header-container{
  gap: 14px;
}
.logo-link{ gap: 12px; }

/* controla tamanho da logo com uma variável */
.logo-img{
  height: var(--logo-height);
  width: auto;
}

/* Nav central e quebra bonita (sem ficar um item em cima do outro) */
.main-nav{
  flex: 1;
  display: flex;
  justify-content: center;
}
.main-nav ul{
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
}

/* separador (•) não pode “sobrar” sozinho */
.nav-divider{ opacity: .45; padding: 0 6px; }

/* desktop: evita quebra desnecessária */
@media (min-width: 901px){
  .header-container{ flex-wrap: nowrap; }
  .main-nav ul{ flex-wrap: nowrap; }
}

/* tablets: esconde o separador pra não bagunçar */
@media (max-width: 900px){
  .nav-divider{ display:none; }
}
/* =========================================================
   BOTÕES
   ========================================================= */
.btn-primary,
.btn-outline{
  font-family:"Poppins", sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding: 12px 26px;
  border-radius: 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:none;
}

.btn-primary{
  background-color: var(--roxo-principal);
  color: #0B0F1A;
  box-shadow: 0 0 18px rgba(184,156,255,.22);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .18s ease;
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--roxo-escuro);
  color: #E5E7EB;
  box-shadow: 0 0 26px rgba(184,156,255,.30);
  transform: translateY(-1px);
}

.btn-outline{
  background: transparent;
  color: var(--roxo-principal);
  border: 2px solid var(--roxo-principal);
  box-shadow:none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .18s ease;
}

.btn-outline:hover,
.btn-outline:focus{
  background-color: var(--roxo-principal);
  color:#0B0F1A;
  box-shadow: 0 0 18px rgba(184,156,255,.22);
  transform: translateY(-1px);
}

.btn-large{
  font-size:1.02rem;
  padding: 13px 32px;
}

/* =========================================================
   HERO / SEÇÕES
   ========================================================= */
.hero-section{
  background: transparent;
  padding: 80px 0 60px;
  color: var(--ds-text);
}

.hero-container{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 40px;
}

.hero-content{
  max-width: 720px;
  text-align:center;

  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--ds-radius);
  padding: 28px 22px;
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(10px);
}

.hero-content h1{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size: 2.6rem;
  margin-bottom: 20px;
  color: #F9FAFB;
  line-height:1.15;
}

.hero-content p{
  font-size:1.05rem;
  margin-bottom: 30px;
  color: rgba(184,189,201,.95);
}

.hero-ctas a{ margin-right: 12px; }

/* FEATURES */
.features-section{
  padding: 60px 0 70px;
  background: transparent;
  font-family:"Open Sans", sans-serif;
}

.features-section h2{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:2.1rem;
  margin-bottom: 40px;
  color:#F9FAFB;
  text-align:center;
}

.features-section p{
  font-size:1.05rem;
  margin-bottom: 30px;
  color: rgba(184,189,201,.95);
  text-align:center;
}

.features-grid{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;

  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.feature-item{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 0 18px rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 0 26px rgba(184,156,255,.22);
  border-color: rgba(184,156,255,.25);
}

.feature-item h3{
  font-family:"Poppins", sans-serif;
  color: var(--roxo-principal);
  margin-bottom: 12px;
  font-weight:600;
  font-size:1.2rem;
}

.feature-item p{
  color: var(--ds-text);
  font-size:.98rem;
  line-height:1.55;
  text-align:left;
  margin-bottom:0;
}

/* =========================================================
   PORTFÓLIO
   ========================================================= */
.portfolio-section{
  padding: 42px 0 55px;
  background: transparent;
  text-align:center;
}

.portfolio-section h2{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height:1.15;
  margin-bottom: 10px;
  color:#F9FAFB;
}

.portfolio-section p{
  font-size:.98rem;
  margin-bottom: 20px;
  color: rgba(184,189,201,.95);
}

.portfolio-section .subtitulo{
  max-width: 820px;
  margin: 0 auto 10px;
  opacity:.88;
}

.portfolio-section .proof-line{
  max-width: 820px;
  margin: 0 auto 18px;
  opacity:.86;
  font-size:.98rem;

  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.portfolio-grid{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;

  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.portfolio-item{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;

  display:flex;
  flex-direction:column;
  height:100%;
}

.portfolio-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 22px rgba(0,0,0,.75);
  border-color: rgba(184,156,255,.22);
}

.portfolio-item img{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
  border-radius:0;
}

.portfolio-item h3{
  margin: 16px 16px 8px;
  font-size:1.1rem;
  color:#F9FAFB;
}

.portfolio-item p,
.portfolio-desc{
  margin: 0 16px 16px;
  font-size:.95rem;
  color: rgba(184,189,201,.95);
  opacity:.95;
}

.portfolio-item .btn-primary{
  margin: auto 16px 18px;
  align-self: stretch;
  min-width:0;
}

/* =========================================================
   CTA / FOOTER
   ========================================================= */
.cta-section{
  background: var(--panel);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding: 70px 0;
  text-align:center;
  color: var(--ds-text);
  backdrop-filter: blur(10px);
}

.cta-section h2{
  font-family:"Poppins", sans-serif;
  font-size:2.1rem;
  margin-bottom:14px;
  font-weight:700;
  color:#F9FAFB;
}

.cta-section p{
  font-size:1.05rem;
  margin-bottom:28px;
  color: rgba(184,189,201,.95);
}

.cta-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.main-footer{
  background: rgba(5,5,5,.75);
  border-top: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  color: rgba(184,189,201,.88);
  padding: 30px 0;
  font-family:"Open Sans", sans-serif;
}

.footer-container{
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;
}

.ai-note{
  font-size:.78rem;
  color: rgba(184,189,201,.65);
  margin-bottom:10px;
}

.footer-bottom{ font-size:.85rem; }

.footer-link{
  color: rgba(184,189,201,.85);
  text-decoration:none;
  transition: color .25s ease, text-shadow .25s ease;
}

.footer-link:hover{
  color: var(--roxo-principal);
  text-shadow: 0 0 10px rgba(184,156,255,.25);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 768px){
  .header-container{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    min-height: unset;
  }

  .main-nav ul{
    gap: 14px;
  }

  .hero-content h1{ font-size: 2.1rem; }
  .hero-content p{ font-size: 1rem; }

  .hero-ctas{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  body{ background-attachment: scroll; }
}

@media (max-width: 480px){
  .logo-img{ height: 52px; }

  .cta-buttons{ flex-direction:column; }

  .btn-primary, .btn-outline{
    width:100%;
    max-width:320px;
  }
}

/* =========================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.whatsapp-floating{
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border-radius:50%;
  background-color: var(--roxo-principal);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 18px rgba(0,0,0,.6);
  z-index:1200;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.whatsapp-floating svg { font-size: 0; } /* opcional */

.whatsapp-floating:hover,
.whatsapp-floating:focus{
  background-color: var(--roxo-escuro);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0,0,0,.8);
  outline:none;
}

@media (max-width: 480px){
  .whatsapp-floating{
    right:14px;
    bottom:14px;
    width:50px;
    height:50px;
  }
}

/* =========================================================
   SEO / Nichos
   ========================================================= */
.section{ padding:56px 0; }
.muted{ color: var(--ds-muted-2); }
.small{ font-size:.92rem; }
.center{ display:flex; justify-content:center; }

.niche-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.niche-card{
  display:block;
  padding:18px 16px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.niche-card:hover{
  transform: translateY(-2px);
  border-color: rgba(184,156,255,.35);
  background: rgba(138,92,255,.08);
}

.niche-card h3{ margin:0 0 6px; font-size:1.05rem; }
.niche-card p{ margin:0; color: var(--ds-muted-2); text-align:left; }

.hero--seo{ padding:64px 0 40px; }

.checklist, .steps{
  margin-top:14px;
  padding-left:18px;
}
.checklist li{ margin:10px 0; }
.steps li{ margin:12px 0; }

.faq details{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:14px;
  margin:10px 0;
  background: rgba(255,255,255,.02);
}
.faq summary{ cursor:pointer; font-weight:700; }

@media (max-width: 900px){
  .niche-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .niche-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   MODERN UI LAYER (mantido, mas alinhado à paleta nova)
   ========================================================= */
html{ scroll-behavior:smooth; }

.ds-wrap{
  background:
    radial-gradient(900px 540px at 20% -10%, rgba(138,92,255,.18), transparent 60%),
    radial-gradient(900px 540px at 90% 10%, rgba(184,156,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,15,26,1) 0%, rgba(11,15,26,.92) 100%);
}

.ds-container{
  width:min(var(--ds-container), calc(100% - 32px));
  margin-inline:auto;

}

/* typography */
.ds-eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  font-size:.85rem;
}

.ds-h1{
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:14px 0 10px;
  color: var(--text);
}

.ds-h2{
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color: var(--text);
  margin:0;

}

.ds-lead{
  color: var(--muted);
  font-size:1.02rem;
  line-height:1.6;
  margin:0;
  padding: 6px;
}

.ds-section{ padding:56px 0; }

.ds-grid-2{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 900px){ .ds-grid-2{ grid-template-columns:1fr; } }

.ds-panel{
  background: rgba(17,24,39,.80);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.ds-panel.pad{ padding:22px; }

.ds-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ds-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.ds-btn.primary{
  background: linear-gradient(90deg, var(--ds-primary), var(--ds-glow));
  color:#0B0F1A;
  border-color: rgba(184,156,255,.25);
}

.ds-btn.ghost{
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: rgba(255,255,255,.12);
  margin-top:10px;
}

/* (remove dourado) */
.ds-btn.gold{
  background: var(--ds-primary) !important;
  color:#0B0F1A !important;
  border-color: transparent !important;
}
.ds-btn.gold:hover{ background: var(--ds-primary-hover) !important; }

.ds-kpis{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
@media (max-width: 700px){ .ds-kpis{ grid-template-columns:1fr; } }

.ds-kpi{
  padding:14px 14px 16px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.ds-kpi b{ display:block; color:var(--text); font-size:1.05rem; margin-bottom:6px; }
.ds-kpi span{ color:var(--muted); font-size:.9rem; }

.ds-cards{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:16px;
  margin-top:18px;
}
@media (max-width: 980px){ .ds-cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .ds-cards{ grid-template-columns: 1fr;} }

.ds-card{
  border-radius:20px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.ds-card:hover{ transform: translateY(-3px); border-color: rgba(184,156,255,.25); }

.ds-card img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
}
.ds-card .body{ padding:14px 14px 16px; }
.ds-card h3{ margin:0 0 8px; color:var(--text); font-size:1.02rem; }
.ds-card p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.4; }

.ds-steps{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:12px;
  margin-top:18px;
}
@media (max-width: 980px){ .ds-steps{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .ds-steps{ grid-template-columns: 1fr;} }

.ds-step{
  border-radius:20px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  padding:14px 14px 16px;
}
.ds-step .n{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(184,156,255,.95);
  color:#0B0F1A;
  margin-bottom:10px;
}
.ds-step p{ margin:0; color:var(--text); font-size:.95rem; line-height:1.4; }
.ds-step p span{ color:var(--muted); font-weight:500; }

.ds-proof{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:18px;
}
@media (max-width: 900px){ .ds-proof{ grid-template-columns:1fr; } }

.ds-media{
  border-radius:22px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.ds-media img, .ds-media video{ width:100%; display:block; background:#000; }
.ds-media .cap{ padding:10px 12px 12px; color:var(--muted); font-size:.9rem; }

.ds-cta{
  margin-top:22px;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(138,92,255,.14), rgba(184,156,255,.08));
  text-align:center;
  box-shadow: var(--shadow);
}
.ds-cta h3{ margin:0 0 8px; color:var(--text); font-size:1.25rem; }
.ds-cta p{ margin:0 0 14px; color:var(--muted); }

/* CTA hierarquia */
.ds-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.ds-btn-main{
  transform: translateY(0);
  box-shadow: 0 16px 40px rgba(184,156,255,.18);
  position:relative;
}

.ds-btn-main:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(184,156,255,.24);
}

.ds-btn-main::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(60% 120% at 50% 50%, rgba(184,156,255,.26), transparent 60%);
  opacity:.9;
  filter: blur(10px);
  z-index:-1;
}

.ds-btn-secondary{
  opacity:.78;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
}
.ds-btn-secondary:hover{ opacity:1; }

.ds-btn-icon{
  display:inline-flex;
  width:28px;
  height:28px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.22);
  font-size:.9rem;
}

.ds-hero-micro{
  margin-top:10px;
  color: rgba(229,231,235,.70);
  font-size:.92rem;
}

.ds-transition{
  display:inline-block;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  color: rgba(229,231,235,.72);
  margin-bottom:14px;
}

/* Voltar ao topo */
.btn-topo{
  position:fixed;
  right:20px;
  bottom:90px;
  width:44px;
  height:44px;
  border-radius:999px;

  display:none;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: var(--text);
  text-decoration:none;
  font-weight:900;

  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  z-index:1300;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}

.btn-topo:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(184,156,255,.30);
}
.btn-topo:focus-visible{
  outline: 2px solid rgba(184,156,255,.85);
  outline-offset:3px;
}

/* =========================================================
   SYSTEM MODERN LAYER (mantém estrutura)
   ========================================================= */
main{ background: transparent; }

.hero-section.ag-hero{
  padding:64px 0 !important;
  background: transparent !important;
}

.hero-section.ag-hero .container.hero-container{
  width:min(var(--ds-container), calc(100% - 32px)) !important;
}

.hero-section.ag-hero h1{
  font-size: clamp(2rem, 3.8vw, 3.1rem) !important;
  letter-spacing:-.02em;
  line-height:1.06;
}

.hero-section.ag-hero p{
  color: var(--muted) !important;
  line-height:1.6 !important;
  font-size:1.02rem !important;
}

.btn-primary.btn-large{
  border-radius:999px !important;
  padding:14px 18px !important;
  font-weight:800 !important;
  background: var(--ds-primary) !important;
  color: #0B0F1A !important;
  border:1px solid rgba(184,156,255,.20) !important;
}
.btn-primary.btn-large:hover{
  background: var(--ds-primary-hover) !important;
  color: #E5E7EB !important;
}

.features-section, .ag-section{
  padding:56px 0 !important;
  background: transparent !important;
}

.features-grid.ag-grid{
  width:min(var(--ds-container), calc(100% - 32px));
  margin:18px auto 0;
  gap:16px !important;
}

.feature-item.ag-card{
  border-radius:22px !important;
  border:1px solid var(--stroke) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: var(--shadow) !important;
}

.feature-item.ag-card h3{ color: var(--text) !important; }
.feature-item.ag-card p{ color: var(--muted) !important; }

/* =========================================================
   AGENDAMENTO CARDS (corrige vars + cores)
   ========================================================= */
.problems, .solutions, .demo{ padding:48px 0; }

.problems .section-title-lead,
.solutions .section-title-lead,
.demo .section-title-lead{
  color: var(--ds-muted);
  max-width:860px;
  margin:8px auto 0;
}

.problems .cards-grid,
.solutions .cards-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
}

.problems article.card,
.solutions article.card{
  background: var(--ds-panel);
  border:1px solid var(--ds-stroke);
  border-radius: var(--ds-radius);
  overflow:hidden;
  box-shadow: var(--ds-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.problems article.card:hover,
.solutions article.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  border-color: rgba(184,156,255,.30);
}

.problems article.card img{
  width:100%;
  display:block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background:#050505;
}

.problems article.card .card-body,
.solutions article.card .card-body{
  padding:14px 14px 16px;
}

.problems article.card h3,
.solutions article.card h3{
  margin:0 0 8px;
  font-size:1.02rem;
  color:#F9FAFB;
}

.problems article.card p,
.solutions article.card p{
  margin:0;
  color: rgba(184,189,201,.95);
  font-size:.94rem;
  line-height:1.35;
}

.solutions .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(184,156,255,.22);
  color:#E5E7EB;
  font-size:.78rem;
  margin-bottom:10px;
  background: rgba(138,92,255,.10);
}

/* STEPS */
.how-it-works .steps-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:14px;
}

.how-it-works .step{
  background: var(--ds-panel);
  border:1px solid var(--ds-stroke);
  border-radius: var(--ds-radius);
  padding:14px 14px 16px;
  box-shadow: var(--ds-shadow);
}

.how-it-works .step .num{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(184,156,255,.95);
  color:#0B0F1A;
  margin-bottom:10px;
}

.how-it-works .step p{ margin:0; color:#E5E7EB; font-size:.95rem; line-height:1.35; }
.how-it-works .step p strong{ color:#fff; }

/* DEMO */
.demo .demo-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
  align-items:start;
}

.demo .demo-box{
  background: var(--ds-panel);
  border:1px solid var(--ds-stroke);
  border-radius: var(--ds-radius);
  overflow:hidden;
  box-shadow: var(--ds-shadow);
}

.demo .demo-box img,
.demo .demo-box video{
  width:100%;
  display:block;
  background:#000;
}

.demo .demo-box .caption{
  padding:10px 12px 12px;
  font-size:.9rem;
  color: rgba(184,189,201,.95);
}

/* CTA strip */
.cta-strip{
  background: linear-gradient(90deg, rgba(138,92,255,.14), rgba(184,156,255,.08));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:22px 18px;
  text-align:center;
  box-shadow: var(--ds-shadow);
}
.cta-strip h3{ margin:0 0 8px; color:#F9FAFB; }
.cta-strip p{ margin:0 0 14px; color: rgba(184,189,201,.95); }

/* diminui o "buraco" vertical */
.section-tight{ padding-top:16px !important; }

/* SEO BOX */
.seo-box{
  margin: 22px auto 0;
  padding:20px 26px;
  border-radius:18px;

  background: linear-gradient(90deg, rgba(138,92,255,.10), rgba(184,156,255,.06));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--ds-shadow);

  max-width:920px;
  width: calc(100% - 28px);

}

.seo-box h2{
  margin:0 0 8px;
  color:#F9FAFB;
  font-size:1.25rem;
  line-height:1.25;
}

.seo-box p{
  margin:8px 0;
  color: rgba(184,189,201,.95);
  line-height:1.55;
}

.seo-box .section-title-lead{
  margin:6px 0 10px;
  color: rgba(229,231,235,.78);
  max-width:860px;
  }

.seo-list{
  list-style:none !important;
  padding:0 !important;
  margin:14px 0 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:8px 14px;
}

.seo-list li{
  list-style:none !important;
  position:relative;
  padding-left:22px;
  margin:0;
  color:#E5E7EB;
  font-size:.95rem;
  line-height:1.35;
}

.seo-list li::before{
  content:"✓";

  left:0;
  top:0;
  font-weight:700;
  color: var(--ds-primary);
}

/* =========================================================
   SEO — SEÇÃO #seo (CAIXA PARA SEU HTML ATUAL)
   - Você já tem <section class="ds-section" id="seo"><div class="ds-container">...
   - Então estilizamos somente essa ds-container, sem afetar o resto do site.
   ========================================================= */
#seo.ds-section{
  padding: 56px 0 72px;
}

/* a caixa em volta do texto (o que você pediu) */
#seo .ds-container{
  max-width: 920px;
  width: calc(100% - 32px);
  margin: 0 auto;

  padding: 28px 28px 26px;
  border-radius: 18px;

  background: linear-gradient(90deg, rgba(138,92,255,.10), rgba(184,156,255,.06));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(10px);
}

/* respiro interno e hierarquia */
#seo .ds-h2{
  margin: 0 0 12px;
}

/* remove o “padding 6px” que deixa o texto com cara de solto/errado */
#seo .ds-lead{
  padding: 0;
  margin: 0 0 10px;
  max-width: none; /* não precisa mais do inline max-width */
}

/* segundo parágrafo (buscas comuns) */
#seo p{
  margin: 0;
  max-width: none; /* não precisa mais do inline max-width */
  opacity: .86;
}

/* mobile: padding mais enxuto */
@media (max-width: 520px){
  #seo .ds-container{ padding: 22px 18px 20px; }
}
/* =========================================================
   SOLUÇÕES (mantido + alinhado à paleta e containers)
   ========================================================= */
.solucoes-hero, .solucoes-section, .features-section, .pricing-section{
  background: transparent !important;
}

.solucoes-hero{ padding:64px 0; }

.solucoes-hero-inner{
  width:min(var(--ds-container), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 900px){ .solucoes-hero-inner{ grid-template-columns:1fr; } }

.solucoes-hero h1{
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 12px;
}

.solucoes-hero-sub, .solucoes-hero-support{
  color: var(--muted);
  line-height:1.6;
}

.solucoes-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.solucoes-grid{
  width:min(var(--ds-container), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}
@media (max-width: 980px){ .solucoes-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .solucoes-grid{ grid-template-columns: 1fr;} }

.solucoes-card{
  border-radius:22px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding:18px;

  display:flex;
  flex-direction:column;
}

.solucoes-card h3{ margin:0 0 8px; }
.solucoes-card p{ margin:0; color: var(--muted); line-height:1.5; }

.solucoes-proof{
  width:min(var(--ds-container), calc(100% - 32px));
  margin:0 auto;
}
.solucoes-proof .ds-proof{ margin-top:18px; }

/* Botão principal (garante roxo) */
.btn-primary,
.ds-btn.gold{
  background: var(--ds-primary) !important;
  color: #0B0F1A !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.ds-btn.gold:hover{
  background: var(--ds-primary-hover) !important;
}

/* Qualquer acento vira roxo */
.tag-dev,
.badge,
.solutions .badge{
  background: rgba(138,92,255,.10) !important;
  border-color: rgba(184,156,255,.22) !important;
  color: #E5E7EB !important;
}

/* ===== Soluções — caixa destaque (highlight) ===== */
.solucoes-highlight{
  background: rgba(17, 24, 39, 0.55);
  border: 1px solid rgba(138, 92, 255, 0.22);
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.solucoes-highlight::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(70% 120% at 30% 0%, rgba(184,156,255,.22), transparent 58%);
  opacity: .9;
  pointer-events:none;
}
.solucoes-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(138, 92, 255, 0.28);
  background: rgba(138, 92, 255, 0.12);
  color: #E5E7EB;
  font-size: .78rem;
  font-weight: 700;
}
.solucoes-highlight h2{
  position: relative;
  margin: 10px 0 8px;
  color: #F9FAFB;
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}
.solucoes-highlight p{
  position: relative;
  margin: 0 0 12px;
  color: rgba(229,231,235,.82);
  line-height: 1.55;
}
.solucoes-list{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.solucoes-list li{
  position: relative;
  padding-left: 22px;
  color: rgba(229,231,235,.92);
  line-height: 1.35;
}
.solucoes-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #8A5CFF;
  font-weight: 900;
}

/* ===== Soluções — cards (texto e respiro) ===== */
#lista-solucoes.features-section{
  padding-top: 66px;
  padding-bottom: 96px; /* evita colar na próxima seção */
}

.solucoes-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.solucoes-card h3{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  line-height: 1.25;
}

.tag-dev{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(229,231,235,.88);
}

.solucoes-card-lead{
  margin: 0;
  line-height: 1.5;
}

.solucoes-card-mini{
  margin: 0;
  line-height: 1.55;
  color: rgba(229,231,235,.82);
}

.solucoes-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 6px;
}

.solucoes-tags .tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(229,231,235,.92);
  font-size: .84rem;
  line-height: 1;
}

/* botões no rodapé do card */
.solucoes-card-actions{
  margin-top:auto;
  padding-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* =========================================================
   FIX — Sobreposição entre cards e .seo-box (estoque/SEO)
   A caixa .seo-box não pode "subir" e invadir a linha de cards.
   ========================================================= */
.problems .cards-grid,
.solutions .cards-grid{
  margin-bottom: 18px; /* cria respiro antes da .seo-box */
}

/* se a .seo-box vier logo após uma grid genérica, garante espaçamento */
.seo-box{
  position: relative;
  z-index: 1;
}

.ds-blog-desc {
  margin-top: 8px;
  opacity: .9;
}

.ds-blog-card h3{
  font-size: 28px !important;
}

.ds-blog-links {
  margin-top: 10px;
  line-height: 1.7;
  opacity: .95;
  padding-left: 18px;
}


.ds-blog-links a {
  text-decoration: none;
}

.ds-blog-links a:hover {
  text-decoration: underline;
   color: #7b3ff2; /* roxo */
}

.ds-mini-faq p{
  margin-top: 12px;
  opacity: .92;
  line-height: 1.6;
}