/* ============================================================
   Jeff Tech Hub - layout.css
   Extraido de style.css durante a reorganizacao de pastas.
   ============================================================ */
/* layout */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-sm{padding:56px 0}
.divider{border-top:1px solid var(--border)}

/* header */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,10,.85);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  opacity:0.2;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.01em}
.brand-mark{
  width:32px;height:32px;border-radius:9px;
  background:var(--gradient);
  display:grid;place-items:center;
  box-shadow:0 4px 20px rgba(124,58,237,.3);
}
.brand-mark svg{width:16px;height:16px;color:#fff}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--gradient);transform:scaleX(0);transform-origin:left;transition:transform .3s;
  border-radius:2px;
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media (max-width:900px){.nav-links{display:none}}
.menu-btn { display: none; background: transparent; border: none; color: var(--text); cursor: pointer; padding: 5px; }
@media (max-width:900px){ .menu-btn { display: block; } }
.mobile-nav { display: none; flex-direction: column; gap: 16px; background: rgba(6,6,10,0.95); backdrop-filter: blur(16px); padding: 20px; border-bottom: 1px solid var(--border); position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; }
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--text); font-weight: 500; font-size: 16px; text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* grid utils */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .grid-2.keep,.grid-3.keep,.grid-4.keep{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-2.keep,.grid-3.keep,.grid-4.keep{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* footer */
.footer{border-top:1px solid var(--border);padding:56px 0 24px;color:var(--muted);font-size:14px}
.footer h4{color:var(--text);font-size:14px;margin:0 0 12px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:8px 0}
.footer li a:hover{color:var(--text)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:800px){.footer .cols{grid-template-columns:1fr 1fr}}
.footer-bot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;padding-top:20px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted-2)
}

/* wa float */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  background:#25D366;color:#0A0A0B;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 10px 32px rgba(37,211,102,.4);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.05)}
.wa-float svg{width:28px;height:28px}

/* logos marquee */
.marquee{overflow:hidden;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
}
.marquee-track{display:flex;gap:56px;white-space:nowrap;animation:marquee 40s linear infinite;color:var(--muted);font-size:14px;letter-spacing:.05em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* mobile fixes */
@media (max-width:600px){
  .section{padding:56px 0}
  h1.h1{font-size:32px;line-height:1.1}
  h2.h2{font-size:26px}
  .grid-2.keep, .grid-3.keep, .grid-4.keep, .grid-5.keep{grid-template-columns:1fr !important}
  .hero-inner{padding:80px 0 60px}
  .stats{grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .cta{padding:32px 24px}
  .footer .cols{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
}

/* cookie banner */
.cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;max-width:600px;margin:0 auto;background:var(--bg-elev);border:1px solid var(--border);padding:20px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 10px 40px rgba(0,0,0,0.8);z-index:9999;transform:translateY(150%);animation:slideUp 0.5s forwards 1s}
.cookie-banner .cb-text{font-size:13px;color:var(--muted);line-height:1.5}
.cookie-banner strong{color:#fff;font-size:15px;margin-bottom:5px;display:block}
.cookie-banner button{flex:none;white-space:nowrap;align-self:center;padding:10px 18px}
@keyframes slideUp{to{transform:translateY(0)}}
@media(max-width:600px){.cookie-banner{flex-direction:column;text-align:center}.cookie-banner button{width:100%}}

/* ============================================================
   ESTILOS DO RODAPE
   Vivem aqui (e nao em landing.css) porque o rodape e injetado
   pelo app.js em TODAS as paginas, inclusive as que nao carregam
   landing.css. Sem estas regras aqui, os icones sociais ficam gigantes.
   ============================================================ */
/* ---------- RODAPE (estilo imagem 5) ---------- */
.legal-bar{
  border-top:1px solid var(--border);
  padding:26px 0;
}
.legal-bar-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 28px;
  font-size:13px;
}
.legal-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.legal-group a{color:var(--muted);transition:color .2s}
.legal-group a:hover{color:var(--text)}
.legal-sep{width:1px;height:18px;background:var(--border-strong)}

.social-links{display:flex;align-items:center;gap:10px}
.social-links a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--muted);
  border:1px solid var(--border);
  transition:color .25s,border-color .25s,background .25s,transform .25s;
}
.social-links a:hover{
  color:var(--text);
  border-color:var(--border-strong);
  background:var(--bg-overlay);
  transform:translateY(-2px);
}
.social-links svg{width:16px;height:16px}

.copy-line{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding:4px 0 0;
}
.copy-line strong{color:var(--text);font-weight:500}

/* ============================================================
   AJUSTES DA HOME
   A home tem a barra inferior fixa no hero (112px). Os elementos
   flutuantes injetados pelo app.js (bot de IA, carrinho e aviso de
   cookies) sao irmãos do <section class="hero-full">, entao sobem
   para nao cobrir a navegacao.
   ============================================================ */
/* O app.js cria o botao de IA e o carrinho com `style` inline, que tem
   precedencia sobre classes. Por isso o !important e necessario aqui. */
.hero-full ~ #jth-bot-btn{bottom:132px !important}
.hero-full ~ #jth-cart-btn{bottom:208px !important}
.hero-full ~ .cookie-banner{bottom:132px}

@media (max-width:900px){
  /* no celular a barra empilha e fica bem mais alta */
  .hero-full ~ #jth-bot-btn{bottom:320px !important}
  .hero-full ~ #jth-cart-btn{bottom:396px !important}
  .hero-full ~ .cookie-banner{bottom:296px}
}