/* ============================================================
   NEXO — design system (do Figma)
   bg #08090a · texto branco / 80% · Inter (títulos e corpo)
   IBM Plex Mono (rótulos e nav) · botão branco sobre preto
   ============================================================ */

:root{
  --bg:#08090a;
  --ink:#ffffff;
  --ink-80:rgba(255,255,255,.8);
  --ink-60:rgba(255,255,255,.6);
  --ink-40:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --on-white:rgba(0,0,0,.8);
  --accent:#3b62f6;

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gutter:clamp(24px, 6vw, 86px);
  --max:1440px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-feature-settings:"salt" 1;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

::selection{background:var(--accent);color:#fff}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- tipografia ---------- */

.h-display{
  font-weight:500;
  font-size:clamp(32px, 4.5vw, 48px);
  letter-spacing:-.05em;
  line-height:1.15;
}

.h-section{
  font-weight:500;
  font-size:clamp(28px, 3.4vw, 40px);
  letter-spacing:-.04em;
  line-height:1.2;
  max-width:20em;
}

.lead{
  font-size:clamp(17px, 1.6vw, 20px);
  color:var(--ink-80);
  max-width:44em;
}

.eyebrow{
  font-size:14px;
  font-weight:500;
  color:var(--ink-40);
}

/* ---------- header ---------- */

.site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:10;
  border-bottom:1px solid var(--line);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:clamp(28px, 6vh, 88px);
  padding-bottom:clamp(20px, 3vh, 32px);
}

.logo{display:inline-flex;align-items:center;color:var(--ink)}
.logo svg{display:block;height:20px;width:auto}

.site-nav{display:flex;gap:clamp(20px, 3.5vw, 56px)}

.site-nav a{
  font-family:var(--font-mono);
  font-size:clamp(13px, 1.2vw, 16px);
  color:var(--ink-80);
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s ease;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 20px;
  background:var(--ink);
  color:var(--on-white);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:clamp(17px, 1.5vw, 20px);
  letter-spacing:-.02em;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.92)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:clamp(640px, 100vh, 1080px);
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,9,10,.55) 0%, rgba(8,9,10,0) 45%);
}

.hero::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:calc(var(--gutter) - 1px);
  width:1px;
  background:var(--line);
  z-index:2;
  pointer-events:none;
}

.hero .wrap{
  position:relative;
  z-index:1;
  padding-top:clamp(160px, 24vh, 242px);
  width:100%;
}

.hero h1{max-width:18em}

.hero .lead{margin-top:14px;max-width:44em}

.hero .btn{margin-top:36px}

/* ---------- seções ---------- */

.section{
  padding-top:clamp(80px, 12vh, 140px);
  padding-bottom:clamp(80px, 12vh, 140px);
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:clamp(40px, 6vh, 72px);
}

.section + .section .wrap > .section-head{border-top:0}

.section-rule{
  border-top:1px solid var(--line-soft);
}

/* processo */

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 48px);
}
.step{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
  padding-top:24px;
}
.step .eyebrow{display:block}
.step-art{
  margin:clamp(32px, 5vh, 56px) auto;
  width:100%;
  max-width:260px;
}
.step-art svg{display:block;width:100%;height:auto}
@property --amp{
  syntax:'<length>';
  initial-value:-3px;
  inherits:true;
}
.step-art{--amp:-3px;transition:--amp .6s ease}
.step:hover .step-art{--amp:-12px}
.step-art svg > g{transition:stroke .4s ease}
.step:hover .step-art svg > g{stroke:#fff}
.step-art .float{
  animation:drift 7s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(var(--amp, -3px))}
}
@media (prefers-reduced-motion: reduce){
  .step-art .float{animation:none}
}
.step h3{
  font-weight:500;
  font-size:clamp(18px, 1.7vw, 22px);
  letter-spacing:-.02em;
}
.step p{
  margin-top:10px;
  color:var(--ink-60);
  font-size:15px;
  max-width:26em;
}

/* ferramentas — marquee */

.tools{
  padding-top:clamp(120px, 18vh, 220px);
  padding-bottom:clamp(120px, 18vh, 220px);
}
.tools .h-section{
  margin:0 auto;
  text-align:center;
  max-width:none;
}
.logos{
  margin-top:clamp(40px, 6vh, 72px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.logos-track{
  display:flex;
  width:max-content;
  animation:marquee 75s linear infinite;
}
.logos-set{
  display:flex;
  align-items:center;
  gap:clamp(56px, 7vw, 110px);
  padding-right:clamp(56px, 7vw, 110px);
}
.logos-set img{
  height:34px;
  width:auto;
  opacity:.75;
  transition:transform .3s ease, opacity .3s ease;
}
.logo-item:hover img{
  transform:scale(1.1);
  opacity:1;
}
.logos{padding-top:52px}
.logo-item{
  position:relative;
  display:flex;
  align-items:center;
}
.logo-item::after{
  content:attr(data-name);
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--ink-80);
  font-size:13px;
  line-height:1;
  padding:8px 12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.logo-item:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@keyframes marquee{
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .logos-track{animation:none}
}

/* time */

.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 48px);
}
.portrait{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#0b0c0e;
}
.portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portrait .clear{
  filter:grayscale(1) brightness(.55);
  transition:filter 1s ease;
}
.portrait .dither{
  image-rendering:pixelated;
  z-index:2;
  opacity:.4;
  transition:opacity 1s ease;
}
.member:hover .portrait .clear{filter:none}
.member:hover .portrait .dither{opacity:0}
.member h3{
  margin-top:20px;
  font-weight:500;
  font-size:clamp(18px, 1.7vw, 22px);
  letter-spacing:-.02em;
}
.member .role{
  margin-top:2px;
  font-size:14px;
  color:var(--ink-40);
}
.member p{
  margin-top:10px;
  color:var(--ink-60);
  font-size:15px;
}

/* cta final */

.cta{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
}
.cta .wrap{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  padding-top:clamp(100px, 16vh, 180px);
  padding-bottom:clamp(100px, 16vh, 180px);
}
.cta-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.8;
}
.cta-bg img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scaleY(-1);
}
.cta-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(8,9,10,.4) 0%, rgba(8,9,10,.85) 100%);
}

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--line-soft);
}
.site-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:32px;
  padding-bottom:32px;
}
.site-footer,
.site-footer a{
  font-size:14px;
  color:var(--ink-40);
  text-decoration:none;
}
.site-footer a:hover{color:var(--ink)}
.site-footer nav{display:flex;gap:24px}

/* ---------- página de contato ---------- */

.contact-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.contact-page > .contact-main{
  flex:1;
  position:relative;
  z-index:1;
  width:100%;
  padding-top:clamp(150px, 22vh, 220px);
  padding-bottom:clamp(80px, 10vh, 120px);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(48px, 6vw, 96px);
  margin-top:clamp(40px, 6vh, 72px);
}
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-info .item h3{
  font-size:14px;
  font-weight:500;
  color:var(--ink-40);
}
.contact-info .item p,
.contact-info .item a{
  margin-top:6px;
  display:inline-block;
  font-size:clamp(17px, 1.6vw, 20px);
  color:var(--ink-80);
  text-decoration:none;
}
.contact-info .item a:hover{color:var(--ink)}

.contact-form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-size:14px;
  font-weight:500;
  color:var(--ink-60);
}
.field input,
.field textarea{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  padding:14px 16px;
  transition:border-color .2s ease;
}
.field input:focus,
.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:140px}
.form-note{font-size:14px;color:var(--ink-40)}

/* ---------- responsivo ---------- */

@media (max-width: 900px){
  .steps{grid-template-columns:1fr}
  .step-art{margin:32px 0;max-width:220px}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .site-nav{gap:16px}
  .steps{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .hero{min-height:100svh}
}