/* ============================================================
   KLYRO LABS — base.css
   Fundação compartilhada entre as páginas (tokens, reset,
   navegação, botões, rodapé e utilitários de animação).
   ============================================================ */

:root{
  --bg-deep:#050816;
  --bg-mid:#081120;
  --bg-surface:#0D1B2A;
  --blue:#2563EB;
  --blue-soft:#5B8DF7;
  --blue-dark:#1E3A8A;
  --white:#FFFFFF;
  --gray-300:#B7C2D0;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-600:#475569;
  --green:#4ADE80;
  --red-soft:#F87171;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.13);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-deep);
  color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.02em; }
.mono{ font-family:'JetBrains Mono',monospace; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 32px; }

#bg3d{ position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100%; }
section{ position:relative; z-index:2; }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(5,8,22,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
header.scrolled{ border-bottom:1px solid var(--border); }
nav{
  max-width:1140px; margin:0 auto; padding:0 32px;
  height:74px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:28px; width:28px; }
.brand span{ font-family:'Space Grotesk'; font-weight:600; font-size:15.5px; letter-spacing:0.02em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:10px; font-size:14px; font-weight:600;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; }
.btn-primary:hover{ background:#2F6BEE; transform:translateY(-1px); box-shadow:0 10px 26px rgba(37,99,235,0.35); }
.btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--gray-300); }
.btn-ghost:hover{ border-color:rgba(255,255,255,0.25); color:#fff; }
.btn-sm{ padding:9px 18px; font-size:13px; }

/* ---------- reveal on scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ---------- section headings ---------- */
.section-pad{ padding:110px 0; }
.sec-label{
  font-family:'JetBrains Mono'; font-size:12px; color:var(--gray-500); letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:18px; display:block;
}
.sec-title{ font-size:clamp(27px,3.6vw,40px); margin-bottom:14px; max-width:640px; }
.sec-sub{ color:var(--gray-400); font-size:15.5px; line-height:1.65; max-width:560px; }
.center{ text-align:center; }
.center .sec-label, .center .sec-title, .center .sec-sub{ margin-left:auto; margin-right:auto; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(37,99,235,0.04));
  position:relative; z-index:2;
}
.footer-main{ padding:70px 0 50px; display:grid; grid-template-columns:1.2fr 1fr; gap:60px; }
.footer-brand-block .brand{ margin-bottom:20px; }
.footer-brand-block .tagline{
  font-family:'Space Grotesk'; font-size:clamp(19px,2.2vw,24px); font-weight:500;
  line-height:1.35; color:var(--gray-300); max-width:380px; margin-bottom:26px;
}
.footer-brand-block .tagline em{ font-style:normal; color:var(--blue-soft); }
.footer-loc{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--gray-500); }
.footer-loc svg{ width:14px; height:14px; color:var(--blue); }
.footer-right{ display:flex; gap:80px; justify-content:flex-end; }
.f-col h4{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gray-600); margin-bottom:20px; font-weight:500;
}
.f-col a{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--gray-300); margin-bottom:14px;
  transition:color .25s;
}
.f-col a:hover{ color:var(--blue-soft); }
.f-col a svg{ width:15px; height:15px; opacity:0.75; }
.footer-bottom{
  border-top:1px solid var(--border); padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer-bottom p{ font-size:13px; color:var(--gray-600); }
.footer-bottom .made{ font-family:'JetBrains Mono'; font-size:12px; color:var(--gray-600); }
.footer-bottom .made a{ color:var(--blue-soft); transition:color .25s; }
.footer-bottom .made a:hover{ color:#7EA5FA; }

/* ---------- responsive (shared) ---------- */
@media (max-width:900px){
  .footer-main{ grid-template-columns:1fr; gap:50px; }
  .footer-right{ justify-content:flex-start; gap:60px; }
}
@media (max-width:600px){
  .wrap{ padding:0 20px; }
  nav{ padding:0 20px; }
  .section-pad{ padding:80px 0; }
  .footer-right{ flex-direction:column; gap:36px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}