/* ============================================================
   XIP7 — REDESIGN 2026
   Camada de sobreposição ao style.css original.
   Direção: engenharia editorial, não "SaaS de IA genérico".
   Remove: glow neon, partículas, holograma, gradiente excessivo.
   Mantém: tipografia Syne/DM Sans/JetBrains Mono, azul de marca.
   ============================================================ */

:root {
  /* Paleta refinada — mantém o azul de marca, reduz o "glow" cyan */
  --c-ink:        #0a0c11;
  --c-ink-2:      #10131b;
  --c-paper:      #f6f4ef;
  --c-paper-ink:  #14161d;
  --c-line-soft:  rgba(255,255,255,.08);
  --shadow-soft:  0 2px 24px rgba(0,0,0,.35);
  --shadow-glow:  0 0 0 rgba(0,0,0,0); /* glow neutralizado */
  --r-img: 20px;
}

/* Tom de acento no lugar do gradiente cyan->blue no texto:
   usado com moderação, nunca em blocos grandes de texto. */
.t-accent{
  color: var(--c-blue-2);
  font-style: normal;
}
.section-dark .t-accent{ color:#8fb2ff; }

/* Reduz o glow padrão dos cards para algo mais sóbrio */
.card-3d:hover{ box-shadow: var(--shadow-card), 0 12px 32px rgba(0,0,0,.35); }

/* ---------- HERO (sem canvas / sem vídeo holográfico) ---------- */
/* style.css centraliza .hero verticalmente (align-items:center) numa caixa
   de min-height:100svh — combinado com o padding-top do .hero__grid abaixo,
   isso somava dois espaçamentos e criava um vão enorme entre o menu fixo
   e o conteúdo em telas mais altas. Ancora o conteúdo no topo em vez de
   centralizá-lo como bloco; o min-height:100svh é mantido só para o
   indicador de "scroll" continuar aparecendo perto do rodapé da primeira tela. */
.hero{ text-align:left; overflow:hidden; align-items:flex-start; }
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(37,99,255,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-black) 0%, var(--c-ink-2) 100%);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:56px; align-items:center;
  padding: 60px 0 60px;
}
.hero__content{ max-width:560px; padding: 20px 24px 60px; }
.hero__title{ text-align:left; margin:0 0 24px; }
.hero__title em{ font-style:normal; color:var(--c-white); }
.hero__sub{ text-align:left; margin:0 0 32px; max-width:520px; }
.hero__actions{ justify-content:flex-start; }
.hero__proof{
  margin-top:28px; font-family:var(--font-mono); font-size:.78rem;
  color:rgba(248,250,255,.42); letter-spacing:.02em;
}
.hero__media{
  position:relative; border-radius:24px; overflow:hidden;
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--c-border);
}
.hero__media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10; }
.hero__scroll{ z-index:2; }

@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; padding:60px 0 40px; gap:40px; }
  .hero__content{ max-width:none; }
  .hero__title, .hero__sub{ text-align:center; }
  .hero__actions{ justify-content:center; }
  .hero__proof{ text-align:center; }
}

/* ---------- IMAGE FRAMES (usadas em várias seções) ---------- */
.img-frame{
  border-radius:var(--r-img); overflow:hidden; position:relative;
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--c-border);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-frame--16-9{ aspect-ratio:16/9; }
.img-frame--3-2{ aspect-ratio:3/2; }
.img-frame--4-3{ aspect-ratio:4/3; }

/* ---------- SOBRE: substitui o card de métricas pela foto ---------- */
.sobre__visual{ padding:0; }
.sobre__card-float.f1{ top:-16px; left:-16px; right:auto; }

/* ---------- CAPACIDADES ---------- */
.cap-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; margin-top:56px;
}
.cap-card{ padding:0; overflow:hidden; }
.cap-card__img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.cap-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out); }
.cap-card:hover .cap-card__img img{ transform:scale(1.05); }
.cap-card__icon{
  position:absolute; bottom:-20px; left:24px; z-index:2;
  width:44px; height:44px; border-radius:12px;
  background:var(--c-surface); border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-blue-2); box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.cap-card__body{ padding:36px 28px 28px; }

/* ---------- COMO TRABALHAMOS ---------- */
.metodo{ background:var(--c-void); }
.metodo__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.metodo__list{ list-style:none; margin-top:32px; display:flex; flex-direction:column; gap:22px; }
.metodo__step{ display:flex; gap:20px; align-items:flex-start; }
.metodo__step-num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--c-blue-2);
  border:1px solid rgba(37,99,255,.3); border-radius:8px;
  width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.metodo__step-title{ font-family:var(--font-display); font-weight:700; font-size:1rem; margin-bottom:4px; }
.metodo__step-desc{ font-size:.87rem; color:rgba(248,250,255,.5); line-height:1.6; }
@media(max-width:1024px){ .metodo__grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- ENGENHARIA DE PONTA A PONTA ---------- */
.section-dark{ background:var(--c-black); }
.produto__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.produto__caption{ margin-top:16px; font-size:.82rem; color:rgba(248,250,255,.4); line-height:1.6; font-style:italic; }
@media(max-width:1024px){ .produto__grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- O QUE CONSTRUÍMOS / KOBERTOCLIN ---------- */
.construimos{ position:relative; background:var(--c-void); overflow:hidden; }
.construimos__bg{ position:absolute; inset:0; opacity:.06; pointer-events:none; }
.construimos__bg img{ width:100%; height:100%; object-fit:cover; }
.flagship{
  position:relative; z-index:1; margin-top:48px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:24px;
  padding:48px; box-shadow:var(--shadow-card); max-width:760px;
}
.flagship__eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-blue-2); padding:5px 12px; border-radius:50px; border:1px solid rgba(37,99,255,.3); background:rgba(37,99,255,.08);
  margin-bottom:20px;
}
.flagship__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; margin-bottom:14px; }
.flagship__desc{ font-size:.95rem; line-height:1.7; color:rgba(248,250,255,.62); margin-bottom:24px; max-width:600px; }
.flagship__modules{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.flagship__cta{ width:fit-content; }

/* ---------- TECNOLOGIA ---------- */
.tech-groups{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px; margin-top:56px; padding-top:40px; border-top:1px solid var(--c-border);
}
.tech-group__title{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,250,255,.4); margin-bottom:10px;
}
.tech-group__list{ font-family:var(--font-display); font-size:1rem; font-weight:600; color:rgba(248,250,255,.85); line-height:1.6; }

/* ---------- ARTIGO: avatar de iniciais (sem foto real de autor) ---------- */
.artigo-author-card__avatar{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:#fff; letter-spacing:.02em;
}

/* ---------- ORÇAMENTO: imagem de fundo + reforço de contraste dos campos ----------
   A imagem de fundo (textura técnica) renderizava sem controle de tamanho/opacidade,
   competindo visualmente com os campos do formulário, que já eram muito sutis
   (background e borda quase invisíveis) — o conjunto fazia os inputs somem. */
.orcamento__bg img{
  width:100%; height:100%; object-fit:cover; opacity:.10;
}
.orcamento__input,
.orcamento__select{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
}
.orcamento__input::placeholder{ color:rgba(248,250,255,.38); }
.orcamento__input:focus{
  background:rgba(255,255,255,.1);
  border-color:rgba(37,99,255,.7);
}

/* ---------- CONTATO: mapa real no lugar da foto ilustrativa ---------- */
.contato__map{
  border-radius:20px; overflow:hidden; border:1px solid var(--c-border);
  box-shadow:var(--shadow-card); height:360px; background:var(--c-surface);
}
.contato__icon svg{ display:block; }

/* ---------- FAQ: perguntas frequentes (accordion nativo <details>) ---------- */
.faq__list{ max-width:760px; margin:48px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:16px;
  padding:4px 24px; transition:border-color .2s ease;
}
.faq__item[open]{ border-color:rgba(37,99,255,.4); }
.faq__question{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:20px 32px 20px 0; cursor:pointer; list-style:none; position:relative;
  color:var(--c-white);
}
.faq__question::-webkit-details-marker{ display:none; }
.faq__question::after{
  content:"+"; position:absolute; right:0; top:18px; font-size:1.3rem; color:var(--c-blue-2);
}
.faq__item[open] .faq__question::after{ content:"\2013"; }
.faq__answer{ font-size:.92rem; color:rgba(248,250,255,.6); line-height:1.7; padding:0 0 20px; margin:0; }

@media (prefers-reduced-motion: reduce){
  .faq__item{ transition:none; }
}

/* ---------- RESPONSIVO ADICIONAL ---------- */
@media(max-width:768px){
  .cap-grid{ grid-template-columns:1fr; }
  .flagship{ padding:32px 24px; }
  .faq__item{ padding:4px 16px; }
  .faq__question{ padding-right:28px; }
}