/* ====================================================================
   STYLE.CSS — Estilo visual do site institucional GTI
   ====================================================================
   Este arquivo é organizado seguindo a ordem das seções no HTML,
   de cima para baixo: variáveis de cor → header → hero → seções →
   formulário → rodapé → ajustes para celular (media queries).

   DICA PARA INICIANTES: cada bloco entre chaves { } é chamado de
   "regra CSS". A parte antes da chave (ex: ".hero h1") é o "seletor"
   — ele diz QUAL elemento do HTML vai receber aquele estilo.
   ==================================================================== */


/* --------------------------------------------------------------------
   1. VARIÁVEIS DE COR (CUSTOM PROPERTIES)
   --------------------------------------------------------------------
   Aqui ficam as cores e medidas reutilizadas em todo o site.
   Em vez de escrever "#f97316" em 20 lugares diferentes, escrevemos
   uma vez aqui como --orange e usamos var(--orange) no resto do CSS.

   VANTAGEM: se quiser trocar a cor laranja da marca, muda só aqui
   e o site inteiro atualiza sozinho.
-------------------------------------------------------------------- */
:root {
  --bg: #f6f8fb;              /* fundo cinza claro usado nas seções "brancas" */
  --dark: #07111f;            /* azul bem escuro, quase preto — fundo do header e seções escuras */
  --dark-2: #0b1b32;          /* variação do azul escuro */
  --blue: #1457d9;            /* azul principal da marca */
  --blue-2: #3b82f6;          /* azul mais claro, usado em gradientes */
  --orange: #f97316;          /* laranja principal — cor de destaque/ação (botões, links importantes) */
  --orange-2: #fb923c;        /* laranja mais claro, usado em textos de destaque */
  --text: #172033;            /* cor padrão do texto em fundo claro */
  --muted: #667085;           /* cinza usado em textos secundários (descrições) */
  --line: #e6eaf2;            /* cor das bordas finas em fundo claro */
  --white: #ffffff;
  --radius: 24px;             /* arredondamento padrão usado em cards e caixas */
  --shadow: 0 24px 80px rgba(15, 23, 42, .12); /* sombra suave usada em vários elementos */
}


/* --------------------------------------------------------------------
   2. RESET E ESTILO BASE
   --------------------------------------------------------------------
   Todo navegador tem margens e espaçamentos "padrão" diferentes.
   Este bloco zera tudo para começarmos do zero, igual em qualquer
   navegador.
-------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* box-sizing: border-box → faz o padding e a borda ENTRAREM no tamanho
   total do elemento, em vez de somar por fora. Evita muita dor de cabeça. */

html { scroll-behavior: smooth; }
/* faz a página rolar suavemente quando clica em links tipo "#contato" */

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6; /* espaçamento entre linhas de texto, facilita leitura */
  -webkit-font-smoothing: antialiased; /* deixa a fonte mais nítida no Mac/iOS */
}

a { color: inherit; text-decoration: none; } /* links não ficam azuis/sublinhados por padrão */
ul { list-style: none; } /* remove as bolinhas padrão de listas */

.container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}
/* .container é usado em quase toda seção para centralizar o conteúdo.
   min(1160px, ...) significa: "use 1160px de largura, MAS nunca passe
   de 100% da tela menos 40px de respiro nas laterais". */

.section-dark {
  background: var(--dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
/* classe usada em seções com fundo escuro (Hero, Tecnologia, Contato) */


/* ====================================================================
   3. CABEÇALHO / NAVBAR (o menu fixo no topo da página)
   ==================================================================== */

.site-header {
  position: fixed;       /* fica grudado no topo mesmo rolando a página */
  inset: 0 0 auto 0;      /* atalho para top:0, left:0, right:0 */
  height: 76px;
  z-index: 1000;          /* garante que fique por cima de tudo */
  background: rgba(7, 17, 31, .78); /* azul escuro com transparência */
  backdrop-filter: blur(18px);      /* efeito de "vidro fosco" atrás do menu */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar {
  width: min(1160px, calc(100% - 40px));
  height: 76px;
  margin: 0 auto;
  display: flex;                 /* alinha logo e links lado a lado */
  align-items: center;
  justify-content: space-between; /* logo na esquerda, menu na direita */
}

/* --- Logo (marca) --- */
.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 52px; height: 52px; border-radius: 10px;
  object-fit: contain; /* a logo aparece inteira, sem cortar nem esticar */
  background: transparent;
  box-shadow: none;
}
/* ^ Esse é o tamanho do ícone GTI que aparece no header e no rodapé.
     Para deixar maior ou menor, mude os valores de width e height. */

.brand-text { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
.brand-text span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .02em; }

/* --- Links do menu --- */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72); transition: .2s; }
.nav-links a:hover { color: #fff; } /* fica branco ao passar o mouse */

.nav-login { border: 1px solid rgba(255,255,255,.16); padding: 9px 14px; border-radius: 999px; }
.nav-cta {
  background: var(--orange);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 999px; /* 999px = formato "pílula" (totalmente arredondado) */
  box-shadow: 0 8px 18px rgba(249,115,22,.24);
}

/* --- Botão hambúrguer (menu mobile) — só aparece em telas pequenas --- */
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px auto; border-radius: 10px; }
/* As 3 linhas do ícone hambúrguer. display:none aqui = escondido no
   desktop. Ele é ativado lá embaixo, dentro do media query mobile. */


/* ====================================================================
   4. HERO (a primeira seção grande, com o título principal)
   ==================================================================== */

.hero {
  padding: 150px 0 95px; /* espaço maior em cima por causa do header fixo */
  min-height: 780px;
  display: flex;
  align-items: center; /* centraliza o conteúdo verticalmente */
}

/* --- Círculos de luz desfocados no fundo (efeito decorativo) --- */
.hero-bg::before, .hero-bg::after {
  content: '';                /* obrigatório para elementos ::before/::after aparecerem */
  position: absolute;
  border-radius: 50%;         /* círculo perfeito */
  filter: blur(10px);
  pointer-events: none;       /* garante que não atrapalhe cliques */
}
.hero-bg::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(20,87,217,.32), transparent 66%); /* glow azul */
  top: -180px; right: 5%;
}
.hero-bg::after {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(249,115,22,.22), transparent 66%); /* glow laranja */
  bottom: -160px; left: 4%;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr; /* duas colunas quase iguais: texto | imagem */
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1; /* fica acima dos círculos de luz do fundo */
}

/* --- "Selo" pequeno acima do título (eyebrow) --- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange-2);
  font-weight: 800; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow-highlight {
  color: #fff;
  background: var(--orange);
  padding: 2px 8px;
  border-radius: 5px;
}
/* ^ Essa classe cria o "selinho" laranja com fundo sólido dentro do
     eyebrow, tipo um destaque (badge) sobre uma palavra específica. */
.eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;          /* usa a mesma cor do texto do eyebrow */
  box-shadow: 0 0 20px currentColor; /* cria o efeito de "bolinha brilhando" */
}
.eyebrow.light { color: var(--blue); } /* variação usada em seções com fundo claro */

/* --- Título principal (H1) --- */
.hero h1 {
  font-size: clamp(26px, 4vw, 48px);
  /* clamp(mínimo, ideal, máximo):
     - nunca menor que 26px (telas muito pequenas)
     - nunca maior que 48px (telas muito grandes)
     - no meio, cresce de forma proporcional à largura da tela (4vw) */
  line-height: 1.12;
  letter-spacing: -.04em; /* aproxima um pouco as letras, visual mais "premium" */
  margin-bottom: 24px;
}

.hero p {
  font-size: 19px;
  color: rgba(255,255,255,.68);
  max-width: 620px; /* impede o parágrafo de ficar largo demais e difícil de ler */
  margin-bottom: 34px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* botões lado a lado */

/* --- Botões (usados em várias partes do site) --- */
.btn {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 14px;
  font-weight: 800; font-size: 14px;
  transition: .25s; /* suaviza qualquer mudança (cor, posição) */
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 14px 34px rgba(249,115,22,.26);
}
.btn-primary:hover { transform: translateY(-2px); background: #ea580c; }
/* translateY(-2px) = sobe o botão 2px ao passar o mouse, dando
   sensação de "flutuar". Efeito comum em botões modernos. */

.btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.btn-secondary:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.btn.full { width: 100%; } /* usado no botão do formulário, ocupa a largura toda */

/* --- Selinhos de confiança (ex: "100% em nuvem") --- */
.trust-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.trust-row span {
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  font-size: 12px; font-weight: 700;
}


/* ====================================================================
   5. MOCKUP VISUAL DO HERO (dashboard + cartões flutuantes + celular)
   ==================================================================== */

.hero-visual { position: relative; min-height: 520px; }
/* position:relative aqui é importante: os elementos "filhos" com
   position:absolute (como os floating-card) se posicionam EM RELAÇÃO
   a essa caixa, não à tela inteira. */

.dashboard-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(18px); /* efeito vidro fosco */
  border-radius: 28px;
  padding: 22px;
}
.main-dashboard { position: absolute; inset: 40px 20px auto 0; min-height: 395px; }

.card-top { display: flex; gap: 7px; align-items: center; margin-bottom: 24px; }
.card-top span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
/* as 3 bolinhas decorativas tipo "botões de janela" no topo do card */
.card-top strong { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.55); }

.dashboard-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.dashboard-title small { color: rgba(255,255,255,.48); font-weight: 700; }
.dashboard-title h3 { font-size: 25px; letter-spacing: -.03em; }

.status-pill {
  background: rgba(34,197,94,.14); /* verde translúcido */
  color: #86efac;
  border: 1px solid rgba(34,197,94,.25);
  padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
}

.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* 2 colunas */
.metric-grid div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 16px; }
.metric-grid strong { display: block; font-size: 15px; }
.metric-grid small { color: rgba(255,255,255,.5); }

.chart-lines { height: 92px; display: flex; align-items: end; gap: 12px; margin-top: 24px; padding: 0 10px; }
.chart-lines span {
  flex: 1; /* cada barrinha do gráfico divide o espaço igualmente */
  border-radius: 12px 12px 0 0; /* arredonda só os cantos de cima */
  background: linear-gradient(180deg, var(--orange-2), var(--blue-2)); /* gradiente laranja→azul de cima para baixo */
  opacity: .86;
}
/* As ALTURAS de cada barra (curtas/altas) são definidas direto no HTML
   via "style" inline, não aqui no CSS. */

/* --- Cartões flutuantes (Academias / Provedor) --- */
.floating-card {
  position: absolute;
  width: 230px; padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: var(--shadow);
}
.floating-card strong { display: block; }
.floating-card small { color: var(--muted); }
.card-academia { top: 0; right: 0; }      /* posição do cartão "GTI Academias" */
.card-provedor { bottom: 32px; left: 0; } /* posição do cartão "GTI Provedor" */

/* --- Mockup de celular --- */
.phone-mockup {
  position: absolute; right: 12px; bottom: 0;
  width: 122px; height: 220px;
  border-radius: 28px;          /* cantos arredondados tipo smartphone */
  background: #101828;
  border: 7px solid rgba(255,255,255,.12); /* simula a "moldura" do aparelho */
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.phone-notch { position: absolute; top: 10px; width: 42px; height: 5px; background: rgba(255,255,255,.2); border-radius: 20px; }
/* ^ aquele "tracinho" no topo do celular, simula o entalhe da câmera */
.phone-mockup span, .phone-mockup small { color: rgba(255,255,255,.55); font-size: 12px; }
.phone-mockup strong { font-size: 18px; color: #fff; letter-spacing: .04em; }
.phone-icon { width: 60px; height: 60px; object-fit: contain; }
/* ^ tamanho do ícone GTI dentro do mockup do celular. */


/* ====================================================================
   6. ESTRUTURA GERAL DE SEÇÕES (títulos repetidos no site)
   ==================================================================== */

section { padding: 96px 0; } /* espaçamento vertical padrão de toda <section> */

.section-heading h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.05em;
  color: var(--dark);
  margin-bottom: 18px;
}
.section-dark .section-heading h2 { color: #fff; } /* título branco em seções escuras */
.section-heading p { color: var(--muted); font-size: 17px; max-width: 700px; }
.section-dark .section-heading p { color: rgba(255,255,255,.62); }
.section-heading.center { text-align: center; max-width: 800px; margin: 0 auto 56px; }
.section-heading.center p { margin: 0 auto; }


/* ====================================================================
   7. SEÇÃO "INTRODUÇÃO" (sobre a GTI)
   ==================================================================== */

.intro-section { background: #fff; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.intro-copy {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  color: var(--muted);
  font-size: 17px;
}


/* ====================================================================
   8. SEÇÃO "ECOSSISTEMA" (cards dos 4 produtos: MetaFit, Provedor etc)
   ==================================================================== */

.ecosystem { background: var(--bg); }
.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* 4 colunas */

.solution-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  min-height: 440px;     /* garante que todos os cards tenham a mesma altura mínima */
  display: flex; flex-direction: column; /* empilha o conteúdo de cima a baixo */
  position: relative;
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
  transition: .25s;
}
.solution-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } /* "levanta" ao passar o mouse */
.solution-card.active { border-color: rgba(249,115,22,.35); } /* destaque para o MetaFit (já disponível) */
.solution-card.soon { opacity: .86; } /* produtos "em breve" ficam levemente apagados */

.solution-label {
  position: absolute; top: 18px; right: 18px;
  background: #eef4ff; color: var(--blue);
  font-size: 11px; font-weight: 900;
  padding: 5px 9px; border-radius: 999px;
}
.active .solution-label { background: #fff7ed; color: #ea580c; } /* selo laranja no card ativo */

.solution-icon { font-size: 34px; margin-bottom: 18px; } /* o emoji de cada produto */
.solution-card h3 { font-size: 24px; letter-spacing: -.04em; margin-bottom: 10px; color: var(--dark); }
.solution-card p { color: var(--muted); margin-bottom: 18px; }
.solution-card ul { display: grid; gap: 8px; margin-bottom: 24px; }
.solution-card li { color: #475467; font-size: 14px; display: flex; gap: 8px; }
.solution-card li::before { content: '✓'; color: var(--orange); font-weight: 900; } /* checkmark laranja antes de cada item */
.card-link { margin-top: auto; color: var(--blue); font-weight: 900; font-size: 14px; }
/* margin-top:auto empurra o link para o final do card, mesmo que o
   texto acima seja curto — mantém o botão sempre alinhado embaixo. */


/* ====================================================================
   9. SEÇÃO "JORNADA" (linha do tempo de implantação)
   ==================================================================== */

.journey { background: #fff; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.step span {
  display: inline-grid; place-items: center; /* centraliza o número dentro do círculo */
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--dark); color: #fff; font-weight: 900;
  margin-bottom: 22px;
}
.step strong { display: block; font-size: 18px; margin-bottom: 8px; }
.step small { color: var(--muted); font-size: 14px; }


/* ====================================================================
   10. SEÇÃO "PREVIEW" (mockup grande de telas do sistema)
   ==================================================================== */

.preview { padding: 112px 0; }
.preview-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.preview .btn { margin-top: 28px; }
.preview-stack { position: relative; min-height: 420px; }

.preview-window {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.preview-window.large { height: 360px; padding: 18px; }

.window-bar { display: flex; gap: 7px; margin-bottom: 16px; }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }

.preview-content { display: grid; grid-template-columns: 110px 1fr; gap: 18px; height: 290px; }
/* coluna estreita (menu lateral) + coluna larga (conteúdo principal) */

.sidebar-lines { background: rgba(255,255,255,.06); border-radius: 18px; padding: 18px; display: grid; gap: 12px; align-content: start; }
.sidebar-lines i, .preview-main i, .preview-title {
  display: block; border-radius: 999px; background: rgba(255,255,255,.13);
}
/* essas "tracinhos" (tag <i>) simulam textos/linhas de uma interface
   sem precisar desenhar uma tela real — efeito tipo "skeleton loading" */
.sidebar-lines i { height: 12px; }

.preview-main { background: rgba(255,255,255,.06); border-radius: 18px; padding: 18px; }
.preview-title { width: 55%; height: 24px; margin-bottom: 20px; }
.preview-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.preview-cards i { height: 74px; border-radius: 16px; background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(249,115,22,.20)); }
.preview-table { display: grid; gap: 10px; }
.preview-table i { height: 15px; }

.preview-window.small {
  position: absolute; right: 25px; bottom: 8px;
  width: 220px; height: 170px; padding: 18px;
  background: rgba(249,115,22,.16);
}
.preview-window.small div { width: 62px; height: 62px; border-radius: 20px; background: rgba(255,255,255,.16); margin-bottom: 16px; }
.preview-window.small span { display: block; height: 13px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.20); }


/* ====================================================================
   11. SEÇÃO "BENEFÍCIOS"
   ==================================================================== */

.benefits { background: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.benefit-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.benefit-card strong { font-size: 18px; color: var(--dark); display: block; margin-bottom: 10px; }
.benefit-card p { color: var(--muted); }


/* ====================================================================
   12. SEÇÃO "TECNOLOGIA" (infraestrutura técnica)
   ==================================================================== */

.technology { padding: 112px 0; }
.tech-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.tech-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.tech-list div { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); border-radius: 20px; padding: 22px; }
.tech-list span { display: block; color: var(--orange-2); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; margin-bottom: 8px; }
.tech-list strong { color: #fff; font-size: 17px; }


/* ====================================================================
   13. SEÇÃO "POR QUE A GTI" (diferenciais)
   ==================================================================== */

.why-gti { background: #fff; }
.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.why-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.why-cards div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.why-cards strong { display: block; font-size: 18px; margin-bottom: 8px; color: var(--dark); }
.why-cards p { color: var(--muted); }


/* ====================================================================
   14. SEÇÃO "LANDING PAGES" (links rápidos para cada produto)
   ==================================================================== */

.landing-pages { background: var(--bg); }
.landing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.landing-grid a { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: .25s; }
.landing-grid a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.landing-grid span { color: var(--blue); font-weight: 900; font-size: 13px; }
.landing-grid strong { display: block; color: var(--dark); font-size: 20px; margin: 8px 0 5px; }
.landing-grid small { color: var(--muted); }


/* ====================================================================
   15. SEÇÃO "CONTATO" (formulário final)
   ==================================================================== */

.final-cta { padding: 112px 0; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }

.contact-note {
  margin-top: 28px;
  display: inline-flex; flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
}
.contact-note span { color: rgba(255,255,255,.64); }

.contact-form {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 28px;
  backdrop-filter: blur(18px);
  display: grid; gap: 16px; /* espaço uniforme entre cada campo do formulário */
}
.contact-form label { color: rgba(255,255,255,.78); font-weight: 700; font-size: 13px; display: grid; gap: 7px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 14px;
  padding: 13px 14px;
  font-family: inherit;
  outline: none; /* remove o contorno azul padrão do navegador ao clicar */
}
.contact-form option { color: var(--dark); } /* opções do <select> ficam legíveis (texto escuro) */
.contact-form textarea { min-height: 110px; resize: vertical; } /* só permite redimensionar verticalmente */
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.14); /* anel laranja ao clicar no campo */
}


/* ====================================================================
   16. RODAPÉ (FOOTER)
   ==================================================================== */

.footer { background: #050b14; color: #fff; padding: 54px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 40px; }
.footer p { color: rgba(255,255,255,.52); margin-top: 16px; max-width: 420px; }
.footer strong { display: block; margin-bottom: 12px; }
.footer a { display: block; color: rgba(255,255,255,.55); margin: 7px 0; font-size: 14px; }
.footer a:hover { color: #fff; }
.footer-bottom {
  width: min(1160px, calc(100% - 40px));
  margin: 34px auto 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  color: rgba(255,255,255,.36);
  font-size: 13px;
}


/* ====================================================================
   17. AVISO TOAST (mensagem "Abrindo WhatsApp...")
   ==================================================================== */

.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 90px); /* começa escondido, 90px abaixo da tela */
  background: var(--dark); color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 18px;
  font-weight: 800;
  z-index: 2000;
  box-shadow: var(--shadow);
  transition: .3s;
}
.toast.show { transform: translate(-50%, 0); }
/* quando o JavaScript adiciona a classe "show", o toast sobe para a
   posição visível com uma transição suave. */


/* ====================================================================
   18. ANIMAÇÃO "REVEAL" (aparecer suavemente ao rolar a página)
   --------------------------------------------------------------------
   Funciona em conjunto com o script.js: o JavaScript adiciona a
   classe "visible" quando o elemento entra na tela, e o CSS abaixo
   cuida da transição visual.
   ==================================================================== */

.reveal {
  opacity: 0;                          /* começa invisível */
  transform: translateY(26px);         /* começa 26px mais abaixo da posição final */
  transition: .75s ease;               /* anima qualquer mudança em 0.75 segundos */
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);            /* sobe para a posição normal, ficando visível */
}
/* As classes abaixo atrasam a animação de elementos específicos,
   criando um efeito "em cascata" quando vários aparecem juntos. */
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .22s; }
.delay-3 { transition-delay: .32s; }


/* ====================================================================
   19. RESPONSIVIDADE — TELAS MÉDIAS (tablets, até 1020px)
   --------------------------------------------------------------------
   @media (max-width: 1020px) significa:
   "essas regras só valem quando a tela tiver 1020px de largura ou menos"
   ==================================================================== */
@media (max-width: 1020px) {
  /* todos os grids de 2 colunas viram 1 coluna só (empilhado) */
  .hero-grid, .intro-grid, .preview-grid, .tech-grid, .why-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  /* grids de 4 colunas viram 2 colunas */
  .solution-grid, .benefit-grid, .landing-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2,1fr); }

  .hero { padding-top: 130px; }
  .hero-visual { min-height: 500px; }
}


/* ====================================================================
   20. RESPONSIVIDADE — CELULARES (até 760px)
   ==================================================================== */
@media (max-width: 760px) {
  .container, .navbar, .footer-bottom { width: min(100% - 28px, 1160px); }
  .site-header, .navbar { height: 68px; } /* header um pouco mais baixo no celular */

  .brand-text span { display: none; } /* esconde "Gestão Tecnológica Inteligente" no header mobile, só fica o ícone */

  .menu-toggle { display: block; } /* mostra o botão hambúrguer */

  /* --- Menu mobile (aparece ao clicar no hambúrguer) --- */
  .nav-links {
    position: fixed; top: 68px; left: 14px; right: 14px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7,17,31,.98);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 18px;
    transform: translateY(-18px); /* começa escondido, levemente acima */
    opacity: 0;
    pointer-events: none;          /* impede clicar nos links enquanto está escondido */
    transition: .25s;
  }
  .nav-links.open {
    /* classe adicionada pelo script.js ao clicar no hambúrguer */
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { display: block; padding: 13px 8px; }
  .nav-login, .nav-cta { text-align: center; margin-top: 8px; }

  /* --- Hero no mobile --- */
  .hero { min-height: auto; padding: 110px 0 72px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 16px; }
  .hero-visual { min-height: 430px; }
  .main-dashboard { inset: 30px 0 auto 0; }
  .floating-card { width: 200px; }
  .card-academia { right: 0; }
  .card-provedor { bottom: 12px; }
  .phone-mockup { transform: scale(.84); transform-origin: right bottom; } /* reduz o celular mockup em 16% */

  section { padding: 72px 0; } /* menos espaçamento vertical no mobile */

  /* todos os grids de várias colunas viram 1 coluna só no celular */
  .solution-grid, .benefit-grid, .landing-grid, .timeline, .tech-list, .why-cards, .footer-grid {
    grid-template-columns: 1fr;
  }
  .solution-card { min-height: auto; }
  .preview-content { grid-template-columns: 78px 1fr; }
  .preview-window.small { display: none; } /* esconde o mockup pequeno no celular para não poluir */
}