/* ===============================
   Nivvin Tech – Core Styles
   Paleta: Ink/Navy/Azure/Sky/Ice
   =============================== */

:root{
  --nt-ink:#101626;     /* fundo profundo */
  --nt-navy:#1B3059;    /* header/áreas estruturais */
  --nt-azure:#4384D9;   /* primaria (ações) */
  --nt-sky:#79C4F2;     /* hover/destaque */
  --nt-ice:#8DD5F2;     /* superfícies sutis */
  --nt-text:#0E1630;    /* texto em fundos claros */
  --nt-muted:#4A5B7F;   /* texto secundário */
  --nt-card:#FFFFFF;    /* cards claros */
  --nt-border:#E6EBF3;  /* bordas */
  --nt-body:#f7f9fc;    /* fundo claro global */
  --header-h:64px;      /* altura do header (aprox.) */
}

*{
  margin:0; padding:0;
  box-sizing:border-box;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

html{scroll-behavior:smooth}
img{max-width:100%; display:block}

/* BODY */
body{ background: var(--nt-body); color: var(--nt-text); }

/* Ajudam as âncoras a não ficarem atrás do header */
.anchor{ scroll-margin-top: calc(var(--header-h) + 18px); }

/* ================= LOADER ================= */
#loader{
  position: fixed; inset: 0;
  background: #fff;
  display:flex; justify-content:center; align-items:center;
  z-index: 9999;
}
.loader-bar{
  width: 140px; height: 4px;
  background: var(--nt-azure);
  animation: loading 1.2s infinite ease-in-out;
  border-radius: 999px;
  transform-origin:left center;
}
@keyframes loading{
  0%{ transform: scaleX(.15) }
  50%{ transform: scaleX(1) }
  100%{ transform: scaleX(.15) }
}

/* ================= LAYOUT ================= */
.container{ width:92%; max-width:1180px; margin:auto; }

/* ================= HEADER ================= */
.header{
  background:#ffffff;
  padding: 12px 0;
  position: sticky; top:0; z-index:200;
  border-bottom:1px solid var(--nt-border);
  box-shadow:0 6px 28px rgba(16,22,38,.06);
}
.header__inner{ display:flex; justify-content:space-between; align-items:center; min-height: var(--header-h); }
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.logo{ height:44px; filter:none; }

/* Navegação desktop */
.nav--desktop{ display:flex; align-items:center; }
.nav--desktop a{
  margin-left: 28px;
  text-decoration:none;
  font-weight:700;
  color: var(--nt-navy);
  opacity:.95;
  transition: .2s ease;
}
.nav--desktop a:hover{ color: var(--nt-azure); opacity:1; }
#langSwitcher{
  margin-left:20px;
  background: #fff;
  color: var(--nt-navy);
  border:1px solid var(--nt-border);
  padding:6px 8px; border-radius:10px;
}

/* Botão hambúrguer (direita) */
.hamburger{
  appearance:none; background:#fff; border:1px solid var(--nt-border);
  height:40px; width:44px; border-radius:12px;
  display:none; align-items:center; justify-content:center; gap:4px;
  padding:0 6px; cursor:pointer;
}
.hamburger svg {
  display:block;
  stroke:#1B3059;
  fill:#1B3059;
}
.hamburger:focus{ outline:none; box-shadow:0 0 0 3px rgba(67,132,217,.18); }

/* Drawer lateral à direita */
.overlay{
  position:fixed; inset:0; background:rgba(16,22,38,.45);
  z-index:250; opacity:0; pointer-events:none; transition:.25s ease;
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(84vw, 320px);
  background:#fff; border-left:1px solid var(--nt-border);
  box-shadow:-8px 0 28px rgba(16,22,38,.12);
  z-index:300; transform: translateX(100%);
  transition: transform .28s ease;
  display:flex; flex-direction:column; padding:18px;
}
.drawer.is-open{ transform: translateX(0%); }
.drawer__nav{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.drawer__link{
  text-decoration:none; font-weight:700; color:var(--nt-navy);
  padding:10px 8px; border-radius:10px;
}
.drawer__link:hover{ background:#f2f6fc; color:var(--nt-azure); }
.drawer__lang{ margin-top:auto; }
.drawer__lang select{
  width:120px; padding:8px; border-radius:10px; border:1px solid var(--nt-border);
}

/* ================= HERO ================= */
.hero{
  padding: 100px 0 70px;
  text-align:center;
  background: linear-gradient(135deg, var(--nt-navy) 0%, var(--nt-azure) 45%, var(--nt-sky) 100%);
  color: #ffffff;
}
.hero h1{
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  max-width: 900px; margin: 0 auto;
  font-weight: 800;
}
.hero p{
  margin-top: 18px;
  font-size: 1.15rem;
  color: rgba(255,255,255,.92);
}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;gap:.5rem;align-items:center;border-radius:12px;
  padding:.8rem 1.1rem;font-weight:700;transition:.2s ease;border:1px solid transparent}
.btn-primary{background: var(--nt-azure); color:#fff;}
.btn-primary:hover{background: var(--nt-sky);}

/* ================= SEÇÕES ================= */
section{ background:transparent; }
.services{ padding: 70px 0 56px; }     /* reduzido embaixo */
h2{
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: #0b3d6d;
  margin-bottom: 28px;
}

/* Cards de serviço */
.service-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.service-card{
  background:var(--nt-card); padding:20px;
  border-radius:14px;
  border:1px solid var(--nt-border);
  box-shadow:0 4px 24px rgba(16,22,38,.05);
}

/* ================= PORTFÓLIO (Masonry) ================= */
.portfolio{ padding: 48px 0 90px; }    /* topo menor para aproximar das cards */
.masonry{ column-count: 3; column-gap: 18px; }
.masonry-item{ margin-bottom:18px; break-inside: avoid; }
.masonry-item img{ width:100%; border-radius:12px; }

/* Responsividade masonry */
@media (max-width: 1024px){ .masonry{ column-count: 2; } }
@media (max-width: 640px){ .masonry{ column-count: 1; } }

/* ================= CONTATO ================= */
.contact{ padding: 90px 0; }
.contact-form{ max-width:480px; margin:auto; display:flex; flex-direction:column; gap:14px; }
.contact-form input, .contact-form textarea{
  padding: 14px;
  border:1px solid var(--nt-border);
  background:#fff;
  border-radius:10px;
  font-size: 1rem;
  outline:none;
  transition:.2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: var(--nt-azure);
  box-shadow: 0 0 0 3px rgba(67,132,217,.18);
}
.contact-form textarea{ min-height: 140px; }
.contact-form .btn-primary{ align-self:flex-start; }

/* ================= FOOTER ================= */
.footer{
  padding: 40px;
  text-align:center;
  font-size:.95rem;
  color:#334;
  background:#f0f5fb;
  border-top:1px solid var(--nt-border);
}

/* Acessibilidade e utilidades */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Honeypot totalmente oculto (não aparece para o usuário) */
.hp-field{
  position:absolute !important;
  left:-99999px; top:auto;
  width:1px; height:1px;
  overflow:hidden; border:0; padding:0; margin:0;
}

/* ====== RESPONSIVIDADE ====== */
@media (max-width: 980px){
  .nav--desktop{ display:none; }       /* esconde menu desktop */
  .hamburger{ display:inline-flex; }   /* mostra botão no mobile */
}
.table {
  width: 100%;
  background: white;
  border-radius: 10px;
  padding: 10px;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  border-bottom: 2px solid #eee;
  padding: 12px;
  color:#1f2937;
}
.table td {
  border-bottom: 1px solid #eee;
  padding: 10px;
}
.btn-small {
  padding: 6px 10px;
  background: #0ea5e9;
  font-size: 14px;
  color:white;
  border-radius:6px;
  text-decoration:none;
}
.textarea-code {
  width: 100%;
  height: 400px;
  font-family: monospace;
  padding: 15px;
  border-radius: 10px;
}