/* ============================================================
   ZeniTh System — style.css  (non-critical, loaded async)
   Paleta: #050514 bg · #4f9eff neon · #a855f7 purple
   ============================================================ */

/* ===== VARS ===== */
:root{
  --bg:#050514;--bg2:#08091a;--bg3:#0d0e20;
  --card:rgba(255,255,255,.038);--border:rgba(255,255,255,.08);
  --text:#e8e8f5;--t2:#8888aa;
  --neon:#4f9eff;--neon2:#00d4ff;
  --purple:#a855f7;--pink:#ec4899;--green:#22c55e;--yellow:#f59e0b;
  --r:14px;--rs:9px;
  --sh:0 8px 40px rgba(0,0,0,.5);
  --tr:all .25s ease;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--neon);border-radius:99px}

/* ===== SECTION BASE ===== */
section{padding:5rem 0;position:relative}

/* ===== GLASS CARD ===== */
.card-glass{
  background:var(--card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--r);
}

/* ===== CONTAINER ===== */
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem;position:relative;z-index:1}

/* ===== SEC HEADER ===== */
.sec-head{margin-bottom:2.5rem}
.sec-badge{
  display:inline-flex;align-items:center;
  background:rgba(79,158,255,.09);border:1px solid rgba(79,158,255,.2);
  color:var(--neon);font-size:.68rem;font-weight:700;
  padding:.25rem .8rem;border-radius:99px;letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:.7rem;
}
.sec-title{font-size:clamp(1.8rem,3.8vw,2.7rem);font-weight:800;line-height:1.15;margin-bottom:.5rem}
.sec-sub{color:var(--t2);font-size:.95rem;line-height:1.7;max-width:500px}
.neon{color:var(--neon)}

/* ===== HERO MOCKUP ===== */
.hero-mockup-wrap{position:relative;z-index:1}
.hm-orb{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,158,255,.12) 0%,transparent 70%);
  animation:orb 5s ease infinite alternate;
  pointer-events:none;
}
@keyframes orb{to{transform:translate(-50%,-50%) scale(1.3);opacity:.4}}
.hm-card{
  position:relative;z-index:2;
  padding:.75rem;
  animation:float 7s ease infinite;
  background:var(--card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--r);
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hm-bar{display:flex;align-items:center;gap:5px;margin-bottom:.6rem}
.hm-dot{width:9px;height:9px;border-radius:50%}
.hm-dot.r{background:#ef4444}.hm-dot.y{background:#f59e0b}.hm-dot.g{background:#22c55e}
.hm-url{flex:1;background:rgba(255,255,255,.05);border-radius:99px;padding:.18rem .6rem;font-size:.6rem;color:var(--t2);margin-left:.2rem}
.hm-hero{background:rgba(79,158,255,.05);border-radius:8px;padding:.9rem;margin-bottom:.55rem;display:flex;flex-direction:column;gap:.35rem}
.hm-l{height:6px;background:rgba(255,255,255,.08);border-radius:99px}
.hm-l.w70{width:70%}.hm-l.w50{width:50%}
.neon-l{background:rgba(79,158,255,.4)}
.hm-btn-fake{width:72px;height:20px;background:linear-gradient(90deg,var(--neon),var(--neon2));border-radius:6px;margin-top:.2rem}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.hm-b{height:36px;background:rgba(255,255,255,.04);border-radius:6px;border:1px solid var(--border)}

/* ===== STATS ===== */
.stats-row{
  background:rgba(255,255,255,.02);
  border-top:1px solid var(--border);
  display:flex;justify-content:center;flex-wrap:wrap;
  position:relative;z-index:1;
}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:1.4rem 2.25rem;gap:.15rem}
.stat-n{font-size:1.9rem;font-weight:900;color:var(--neon);line-height:1;font-variant-numeric:tabular-nums}
.stat-suf{font-size:1.1rem;color:var(--neon);font-weight:700;margin-left:2px;line-height:1}
.stat-l{font-size:.68rem;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;text-align:center}
.stat-sep{width:1px;background:var(--border);align-self:stretch;margin:.65rem 0}

/* ===== SOBRE ===== */
.sobre-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
.sobre-text p{color:var(--t2);line-height:1.8;font-size:.9rem;margin-bottom:.85rem}
.check-list{margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem;list-style:none}
.check-list li{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500}
.check-list li::before{content:"✓";color:var(--neon);font-weight:700;font-size:.85rem;flex-shrink:0}
.sobre-cards{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.sobre-cards .card-glass{padding:1.2rem;transition:var(--tr)}
.sobre-cards .card-glass:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:rgba(79,158,255,.15)}
.sobre-cards .card-glass.span2{grid-column:span 2}
.sobre-cards h3{font-size:.92rem;font-weight:700;margin:.7rem 0 .4rem}
.sobre-cards p{font-size:.8rem;color:var(--t2);line-height:1.6}

/* ===== COLOR ICONS ===== */
.ci{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ci.blue{background:rgba(79,158,255,.12);color:var(--neon)}
.ci.pink{background:rgba(236,72,153,.12);color:var(--pink)}
.ci.green{background:rgba(34,197,94,.12);color:var(--green)}
.ci.purple{background:rgba(168,85,247,.12);color:var(--purple)}
.ci svg{width:20px;height:20px}

/* ===== SERVIÇOS ===== */
.srv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.srv-card{padding:1.6rem 1.35rem;transition:var(--tr);position:relative;overflow:hidden;cursor:default}
.srv-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgba(79,158,255,.15)}
.srv-card .ci{margin-bottom:1.1rem}
.srv-card:hover .ci{transform:scale(1.08)}
.srv-card h3{font-size:.95rem;font-weight:700;margin-bottom:.5rem}
.srv-card p{font-size:.8rem;color:var(--t2);line-height:1.6;margin-bottom:.9rem}
.srv-list{display:flex;flex-direction:column;gap:.3rem;list-style:none}
.srv-list li{font-size:.76rem;color:var(--t2);display:flex;align-items:center;gap:.4rem}
.srv-list li::before{content:"→";color:var(--neon);font-size:.7rem}
.srv-line{position:absolute;bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transition:transform .3s;transform-origin:left}
.srv-card:hover .srv-line{transform:scaleX(1)}
.blue-l{background:linear-gradient(90deg,var(--neon),var(--neon2))}
.pink-l{background:linear-gradient(90deg,var(--pink),#f472b6)}
.green-l{background:linear-gradient(90deg,var(--green),#4ade80)}
.purple-l{background:linear-gradient(90deg,var(--purple),#c084fc)}

/* ===== PORTFÓLIO ===== */
.port-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2.5rem}
.port-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:var(--tr)}
.port-item:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:rgba(79,158,255,.18)}
.port-img-wrap{width:100%;overflow:hidden}
.port-ph{
  height:240px;background:var(--bg3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.65rem;color:var(--t2);font-size:.82rem;
}
.port-ph svg{opacity:.25}
/* Quando imagem for adicionada */
.port-img-wrap img{width:100%;height:240px;object-fit:cover;transition:transform .4s ease}
.port-item:hover .port-img-wrap img{transform:scale(1.04)}
.port-info{padding:1rem 1.1rem;background:var(--bg2)}
.port-tag{display:inline-block;font-size:.68rem;font-weight:700;padding:.18rem .6rem;border-radius:99px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.5rem}
.blue-bg{background:rgba(79,158,255,.12);color:var(--neon)}
.pink-bg{background:rgba(236,72,153,.12);color:var(--pink)}
.green-bg{background:rgba(34,197,94,.12);color:var(--green)}
.purple-bg{background:rgba(168,85,247,.12);color:var(--purple)}
.port-info h3{font-size:.92rem;font-weight:700;margin-bottom:.3rem}
.port-info p{font-size:.78rem;color:var(--t2)}
.port-cta{text-align:center}
.port-cta p{color:var(--t2);margin-bottom:.85rem;font-size:.9rem}

/* ===== CONTATO ===== */
.contato-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:1.75rem}
.contato-left h3,.contato-form h3{font-size:1rem;font-weight:700;margin-bottom:1.1rem}
.canal{
  display:flex;align-items:center;gap:.9rem;
  padding:.95rem 1.1rem;margin-bottom:.65rem;
  transition:var(--tr);cursor:pointer;
}
.canal:hover{border-color:var(--neon);transform:translateX(3px)}
.canal div{flex:1}
.canal strong{display:block;font-size:.88rem;font-weight:700}
.canal span{display:block;font-size:.76rem;color:var(--t2);margin-top:1px}
.canal-tag{display:inline-block;background:rgba(79,158,255,.09);color:var(--neon);font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:99px;margin-top:3px}
.arr{color:var(--t2);transition:var(--tr);flex-shrink:0}
.canal:hover .arr{color:var(--neon);transform:translateX(3px)}
.info-box{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem}
.ib{display:flex;align-items:center;gap:.75rem}
.ib svg{flex-shrink:0;width:16px;height:16px}
.ib strong{display:block;font-size:.8rem;font-weight:700}
.ib span{display:block;font-size:.74rem;color:var(--t2)}
.contato-form{padding:1.5rem}
.fg{margin-bottom:.75rem}
.fg label{display:block;font-size:.69rem;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.28rem}
.fg label span{color:var(--neon)}
.fg input,.fg select,.fg textarea{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--border);color:var(--text);
  border-radius:var(--rs);padding:.58rem .85rem;
  font-size:.85rem;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--neon);
  box-shadow:0 0 0 3px rgba(79,158,255,.1);
}
.fg select option{background:#0d0e20}
.fg textarea{resize:vertical;min-height:74px}
.btn-p.full{width:100%;justify-content:center;margin-top:.2rem}
.form-ok{text-align:center;padding:2rem .5rem}
.form-ok svg{width:2.5rem;height:2.5rem;stroke:var(--green);margin:0 auto .75rem}
.form-ok h3{font-size:1rem;margin-bottom:.35rem}
.form-ok p{font-size:.82rem;color:var(--t2)}

/* ===== FOOTER ===== */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:3rem 0 1.25rem;position:relative;z-index:1}
.ft-top{display:grid;grid-template-columns:1fr 1.8fr;gap:2.5rem;margin-bottom:1.75rem}
.ft-brand p{color:var(--t2);font-size:.8rem;line-height:1.65;margin:.5rem 0 .9rem;max-width:260px}
.ft-social{display:flex;gap:.4rem}
.ft-s-link{
  width:34px;height:34px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);transition:var(--tr);
}
.ft-s-link:hover{color:var(--neon);border-color:var(--neon)}
.ft-links{display:flex;gap:2.5rem}
.fl h4{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem}
.fl a{display:block;font-size:.8rem;color:var(--t2);margin-bottom:.38rem;transition:color .2s}
.fl a:hover{color:var(--neon)}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.76rem;color:var(--t2)}

/* ===== BTT & WHATS FLOAT ===== */
#btt{
  position:fixed;bottom:5.25rem;right:1.25rem;z-index:99;
  width:40px;height:40px;background:var(--card);
  border:1px solid var(--border);color:var(--t2);
  border-radius:9px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  transition:var(--tr);opacity:0;pointer-events:none;
}
#btt.show{opacity:1;pointer-events:auto}
#btt:hover{color:var(--neon);border-color:var(--neon)}
#wfloat{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:99;
  width:50px;height:50px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  transition:transform .2s,box-shadow .2s;
}
#wfloat:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.55)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1060px){
  .srv-grid{grid-template-columns:repeat(2,1fr)}
  .hero-main{grid-template-columns:1fr}
  .hero-mockup-wrap{display:none}
}
@media(max-width:860px){
  .sobre-grid{grid-template-columns:1fr}
  .contato-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .stat-item{padding:1.1rem 1.4rem}
}
@media(max-width:768px){
  .nav-links{
    position:fixed;top:62px;left:0;right:0;
    background:rgba(5,5,20,.97);backdrop-filter:blur(16px);
    flex-direction:column;align-items:center;
    padding:1.25rem;gap:.3rem;list-style:none;
    transform:translateY(-110%);transition:transform .3s;
    border-bottom:1px solid var(--border);z-index:99;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.6rem 1.4rem;font-size:.92rem}
  .hbg{display:flex}
  .nav-cta{display:none}
  .port-grid{grid-template-columns:1fr}
  section{padding:3.5rem 0}
}
@media(max-width:520px){
  .srv-grid{grid-template-columns:1fr}
  .sobre-cards{grid-template-columns:1fr}
  .sobre-cards .card-glass.span2{grid-column:span 1}
  .ft-links{flex-direction:column;gap:1.25rem}
  .ft-bottom{flex-direction:column;text-align:center}
  .stats-row{flex-direction:column}
  .stat-sep{width:60px;height:1px;margin:0 auto}
  .hero-pills{display:grid;grid-template-columns:1fr 1fr}
  .hero-btns{flex-direction:column}
  .btn-p,.btn-g{justify-content:center}
}