/* ============================================================
   HOME — estilos que existem SÓ na página inicial.
   Quando criar a página de um produto, ela ganha o próprio
   arquivo em css/pages/. Nunca misture.
   ============================================================ */

/* ---------- TOPO DA PÁGINA (hero) ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:120px 0 80px;overflow:hidden;
}
.hero__grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero::after{   /* dissolve a malha na cor do fundo */
  content:"";position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;
  background:linear-gradient(to bottom,transparent,var(--void));
  pointer-events:none;
}
.hero__in{
  position:relative;z-index:2;
  width:var(--shell);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero h1{font-size:clamp(38px,5.4vw,66px);margin:22px 0}
.hero__lead{font-size:clamp(16.5px,1.35vw,19.5px);color:var(--ink-soft);max-width:37ch}
.hero .btn-row{margin-top:34px}

.hero__visual{position:relative;display:flex;justify-content:center}
.hero__visual video{
  width:min(100%,540px);border-radius:var(--radius);
  mix-blend-mode:screen;               /* apaga o fundo preto do vídeo */
  filter:saturate(1.08) contrast(1.05);
}
.hero__halo{
  position:absolute;inset:-8% -4%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(87,207,212,.20),rgba(31,101,191,.10) 45%,transparent 70%);
  filter:blur(20px);
}

.hero__hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero__hint span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--mute)}
.hero__hint i{
  display:block;width:1px;height:38px;
  background:linear-gradient(var(--cyan),transparent);
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{
  0%,100%{opacity:.25;transform:scaleY(.5)}
  50%{opacity:1;transform:scaleY(1)}
}

/* ---------- FAIXA DE NÚMEROS ---------- */
.strip{border-block:1px solid var(--line);background:rgba(11,24,58,.28)}
.strip__in{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.strip__i{padding:26px 8px 26px 0}
.strip__i b{display:block;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em}
.strip__i span{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

/* ---------- MÉTODO (passos numerados) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:30px 26px 0 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step::before{  /* a linha do gradiente que "preenche" quando aparece na tela */
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--grad);transition:width 1.1s var(--ease);
}
.step.on::before{width:100%}
.step__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--cyan)}
.step h3{font-size:19px;margin:14px 0 10px}
.step p{color:var(--mute);font-size:15.5px}

/* ---------- GRADE DE SERVIÇOS ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* ---------- O SÍMBOLO ---------- */
.symbol{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.symbol img{border-radius:var(--radius);border:1px solid var(--line);width:100%}
.symbol h2{font-size:clamp(26px,3.2vw,38px);margin:14px 0 16px}
.symbol__text > p{color:var(--mute)}
.symbol dl{margin:26px 0 0;display:grid;gap:18px}
.symbol dt{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px;
}
.symbol dd{margin:0;color:var(--mute);font-size:15.5px}

/* ---------- CONTATO ---------- */
.contact{
  border:1px solid var(--line);border-radius:24px;
  padding:64px 56px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,rgba(31,101,191,.22),transparent 62%);
}
.contact h2{font-size:clamp(28px,3.6vw,44px);margin:16px auto 18px;max-width:20ch}
.contact p{color:var(--mute);max-width:52ch;margin:0 auto}
.contact .btn-row{justify-content:center;margin-top:34px}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .hero{min-height:auto;padding:104px 0 60px}
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__visual{order:-1}
  .strip__in{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .step::before{display:none}
  .grid-2,.symbol{grid-template-columns:1fr;gap:34px}
  .contact{padding:46px 24px}
}