@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg: #0d2438;
  --bg-panel: #10314e;
  --bg-panel-hover: #143a5c;
  --bg-sunken: #081826;
  --line: #3f6f96;
  --line-dim: #234a6b;
  --ink: #eef4f9;
  --ink-dim: #93add0;
  --accent: #ff6b35;
  --accent-dim: rgba(255,107,53,.14);
  --ok: #4fd1a5;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'IBM Plex Sans', sans-serif;
  --container-max-width: 1140px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--line-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center top;
  background-attachment:fixed;
}

.container{width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 1.5rem;}
section{padding:5rem 0;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-mono);font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:-0.01em;}
p{color:var(--ink-dim);}
a{color:inherit;text-decoration:none;transition:.2s ease;}
.text-accent{color:var(--accent);}
.font-mono{font-family:var(--font-mono);}
strong{color:var(--ink);font-weight:600;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-mono);font-weight:600;font-size:.85rem;
  padding:.85rem 1.6rem;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:.2s ease;text-transform:uppercase;letter-spacing:.04em;
}
.btn-primary{background:var(--accent);color:#0d2438;}
.btn-primary:hover{background:#ff8055;box-shadow:0 0 0 3px var(--accent-dim);}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}

.card{
  background-color:var(--bg-panel);
  border:1px solid var(--line-dim);
  border-radius:4px;
  padding:2rem;
  transition:.25s ease;
}
.card:hover{border-color:var(--line);transform:translateY(-3px);}
.card-highlight{border-color:var(--line);}
.card-highlight:hover{border-color:var(--accent);box-shadow:0 4px 24px rgba(255,107,53,.08);}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgb(8, 24, 38, .1);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dim);
  transition:transform .3s ease;
}
header.header-hidden{
  transform:translateY(-100%);
}
.navbar{display:flex;align-items:center;justify-content:space-between;height:76px;}
.logo{
  font-family:var(--font-mono);font-weight:700;font-size:1.15rem;color:var(--ink);
  display:flex;align-items:center;gap:.5rem;
}
.logo::before{content:'◇';color:var(--accent);font-size:2rem;}
.nav-menu{display:flex;align-items:center;gap:2.25rem;list-style:none;}
.nav-link{
  font-family:var(--font-mono);font-size:.85rem;color:var(--ink-dim);
  text-transform:uppercase;letter-spacing:.06em;position:relative;padding-bottom:2px;
}
.nav-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .2s ease;}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{width:100%;}
.nav-cta .btn{padding:.6rem 1.1rem;font-size:.85rem;}
.hamburger{display:none;background:none;border:none;width:26px;height:20px;position:relative;cursor:pointer;z-index:1100;}
.hamburger span{display:block;position:absolute;height:2px;width:100%;background:var(--ink);left:0;transition:.25s ease;}
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:9px;}
.hamburger span:nth-child(3){top:18px;}
.hamburger.active span:nth-child(1){top:9px;transform:rotate(135deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){top:9px;transform:rotate(-135deg);}

/* ---------- hero ---------- */
.hero{padding-top:10.5rem;padding-bottom:5rem;position:relative;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:3rem;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.75rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.15em;margin-bottom:1.25rem;
}
.hero-eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.hero-content h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:1.5rem;}
.hero-content p{font-size:clamp(1.02rem,1.8vw,1.18rem);margin-bottom:2.5rem;max-width:560px;color:var(--ink-dim);}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-visual{width:100%;max-width:440px;margin:0 auto;position:relative;}
.hero-visual svg{width:100%;height:auto;display:block;}
.hero-visual img{width:100%;max-width:100%;height:auto;display:block;}

/* Signature schematic diagram animation */
.flow-line{stroke:var(--line);stroke-width:1.5;fill:none;stroke-dasharray:6 6;}
.flow-line-active{
  stroke:var(--accent);stroke-width:2;fill:none;
  stroke-dasharray:400;stroke-dashoffset:400;
  animation:draw 2.6s ease forwards infinite alternate;
}
@keyframes draw{ to{stroke-dashoffset:0;} }
.flow-node{fill:var(--bg-panel);stroke:var(--line);stroke-width:1.5;}
.flow-node-active{fill:var(--accent-dim);stroke:var(--accent);stroke-width:1.5;}
.flow-label{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--ink-dim);letter-spacing:.04em;}
.flow-pulse{fill:var(--accent);}
@media (prefers-reduced-motion: reduce){.flow-line-active{animation:none;stroke-dashoffset:0;}}

/* ---------- section headers ---------- */
.section-header{max-width:680px;margin:0 auto 3rem auto;text-align:center;position:relative;}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:1rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.15em;margin-bottom:1rem;
}
.section-eyebrow::before,.section-eyebrow::after{content:'';width:20px;height:1px;background:var(--accent);}
.section-header h2{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:1rem;}
.section-header p{font-size:1.05rem;}

/* ---------- problems ---------- */
.problems{background-color:var(--bg-sunken);border-top:1px solid var(--line-dim);border-bottom:1px solid var(--line-dim);}
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.problem-card{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;}
.problem-icon{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background-color:var(--accent-dim);border:1px solid rgba(255,107,53,.25);
  border-radius:3px;color:var(--accent);
}
.problem-card h3{font-size:1.1rem;font-weight:600;}
.problem-card p{font-size:.93rem;}

/* ---------- services summary ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3rem;}
.service-card{display:flex;flex-direction:column;height:100%;}
.service-card .problem-icon{margin-bottom:1.5rem;}
.service-card h3{font-size:1.3rem;margin-bottom:.85rem;}
.service-card p{flex-grow:1;margin-bottom:1.5rem;}
.services-footer{text-align:center;}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-weight:600;font-size:.85rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.04em;
}
.link-arrow:hover{text-decoration:underline;}
.link-arrow svg{transition:transform .2s ease;}
.link-arrow:hover svg{transform:translateX(4px);}

/* ---------- timeline ---------- */
.timeline-container{position:relative;padding:2rem 0;margin-top:2.5rem;}
.timeline-line{position:absolute;top:16px;left:5%;right:5%;height:1px;border-top:1px dashed var(--line);z-index:1;}
.timeline-steps{display:flex;justify-content:space-between;position:relative;z-index:2;}
.timeline-step{display:flex;flex-direction:column;align-items:center;text-align:center;width:calc(100% / 6);padding:0 .5rem;}
.timeline-node{
  width:32px;height:32px;border-radius:50%;background-color:var(--bg);
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--ink-dim);
  margin-bottom:1.1rem;transition:.25s ease;
}
.timeline-step:hover .timeline-node{border-color:var(--accent);color:var(--accent);}
.timeline-step.active .timeline-node{border-color:var(--accent);background-color:var(--accent-dim);color:var(--accent);}
.timeline-step h4{font-size:.92rem;font-weight:600;margin-bottom:.4rem;}
.timeline-step p{font-size:.78rem;line-height:1.4;}

/* ---------- portfolio placeholder ---------- */
.portfolio-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:600px;margin:0 auto;gap:1.5rem;}
.portfolio-placeholder p{font-size:1.05rem;}

/* ---------- cta final ---------- */
.cta-final{padding:5rem 0 6.5rem 0;}
.cta-box{
  border:1px dashed var(--line);border-radius:4px;padding:3.5rem 2rem;text-align:center;
  max-width:800px;margin:0 auto;position:relative;background:var(--bg-panel);
}
.cta-box::before{
  content:'REF. CTA—Z';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--bg-panel);padding:0 .6rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--accent);letter-spacing:.1em;
}
.cta-box h2{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:1rem;}
.cta-box p{font-size:1.08rem;margin-bottom:2rem;max-width:560px;margin-left:auto;margin-right:auto;}

/* ---------- services detail page ---------- */
.services-detail-section{padding-top:9.5rem;padding-bottom:4rem;}
.service-detail-item{
  position:relative;max-width:920px;margin:0 auto 3.5rem auto;
  border:1px dashed var(--bg-panel);border-radius:4px;
  background:var(--bg-panel);
  display:grid;grid-template-columns:1fr 1fr;
}
.service-detail-item::before{
  content:attr(data-ref);position:absolute;top:-11px;left:1.75rem;
  background:var(--bg-panel);padding:0 .6rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--accent);letter-spacing:.1em;
}
.service-meta{padding:2.75rem 2.5rem;text-align:left;}
.service-meta h2{font-size:1.55rem;margin-bottom:1.25rem;}
.service-problem{border-left:2px solid var(--accent);padding:.9rem 1.1rem;margin-bottom:1.5rem;background:var(--accent-dim);}
.service-problem p{color:var(--ink);font-size:.92rem;font-style:italic;}
.service-meta > p{font-size:.95rem;}
.service-detail-item .card{padding:2.75rem 2.5rem;display:flex;flex-direction:column;background:transparent;border:none;text-align:left;}
.service-detail-item .card:hover{transform:none;}
.service-detail-item .card h3{font-size:1.2rem;margin-bottom:1.4rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.12em;font-weight:500;}
.service-features-list{list-style:none;}
.service-features-list li{position:relative;padding-left:1.4rem;margin-bottom:.85rem;color:var(--ink);font-size:.93rem;}
.service-features-list li::before{content:'—';position:absolute;left:0;color:var(--line);}

.custom-service-banner{
  max-width:920px;margin:4.5rem auto 0 auto;border:1px solid var(--line);border-radius:4px;
  padding:3rem 2.5rem;text-align:center;position:relative;background:var(--bg-panel);
}
.custom-service-banner::before{
  content:'CUSTOMIZAÇÃO';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--bg-panel);padding:0 .6rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--accent);letter-spacing:.1em;
}
.custom-service-banner h3{font-size:1.4rem;margin-bottom:1rem;}
.custom-service-banner p{margin:0 auto 2rem auto;font-size:1.02rem;max-width:600px;}

/* ---------- sobre page ---------- */
.sobre-section{padding-top:9.5rem;padding-bottom:5rem;}
.sobre-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:3rem;align-items:start;max-width:1000px;margin:0 auto;}
.sobre-content p{font-size:1.05rem;margin-bottom:1.4rem;line-height:1.75;}
.sobre-signature{
  font-family:var(--font-mono);font-size:.8rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.sobre-signature::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);}
.sobre-sidebar{
  background-color:var(--bg-panel);border:1px solid var(--line-dim);border-radius:4px;
  padding:2.25rem;position:relative;
}
.sobre-sidebar::before{
  content:'O QUE JÁ FIZ';position:absolute;top:-11px;left:1.75rem;
  background:var(--bg-panel);padding:0 .6rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--accent);letter-spacing:.1em;
}
.sobre-sidebar h3{font-size:1.05rem;margin-bottom:1.5rem;padding-bottom:.9rem;border-bottom:1px dashed var(--line-dim);
  text-transform:uppercase;letter-spacing:.08em;font-weight:500;color:var(--ink-dim);}
.experience-list{list-style:none;}
.experience-item{position:relative;padding-left:1.9rem;margin-bottom:1.5rem;}
.experience-item::before{
  content:'▹';position:absolute;left:0;top:0;color:var(--accent);font-weight:bold;font-size:1rem;
}
.experience-item h4{font-size:1rem;font-weight:600;margin-bottom:.3rem;color:var(--ink);font-family:var(--font-sans);}
.experience-item p{font-size:.88rem;}

/* ---------- contato page ---------- */
.contato-section{padding-top:9.5rem;}
.contato-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start;}
.contato-info{display:flex;flex-direction:column;gap:1.25rem;}
.contato-info-card{display:flex;align-items:flex-start;gap:1rem;}
.contato-info-icon{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background-color:var(--accent-dim);border:1px solid rgba(255,107,53,.25);border-radius:3px;
  color:var(--accent);flex-shrink:0;
}
.contato-info-text h3{font-size:1rem;font-weight:600;margin-bottom:.35rem;}
.contato-info-text p{font-size:.9rem;word-break:break-word;}
/*.contato-info-text a:hover{color:var(--accent);}*/
.contato-howitworks{padding:1.5rem;position:relative;}
.contato-howitworks h4{
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);margin-bottom:.6rem;
  text-transform:uppercase;letter-spacing:.08em;
}
.contato-howitworks p{font-size:.85rem;}

.contato-form-wrapper{
  background-color:var(--bg-panel);border:1px solid var(--line-dim);border-radius:4px;
  padding:2.75rem;position:relative;
}
.contato-form-wrapper::before{
  content:'Fale com a gente';position:absolute;top:-11px;left:1.75rem;
  background:var(--bg-panel);padding:0 .6rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--accent);letter-spacing:.1em;
}
.form-group{margin-bottom:1.4rem;}
.form-label{
  display:block;font-family:var(--font-mono);font-size:.8rem;font-weight:500;
  margin-bottom:.5rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;
}
.form-control{
  width:100%;background-color:var(--bg);border:1px solid var(--line-dim);border-radius:3px;
  padding:.75rem 1rem;color:var(--ink);font-family:var(--font-sans);font-size:.95rem;
  transition:.2s ease;
}
.form-control::placeholder{color:#5f7a97;}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
select.form-control{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg fill='%2393add0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;
}
textarea.form-control{resize:vertical;min-height:120px;}

.form-status{padding:1rem;border-radius:3px;margin-bottom:1.5rem;font-size:.92rem;display:none;font-family:var(--font-mono);}
.form-status.success{display:block;background-color:rgba(79,209,165,.1);border:1px solid rgba(79,209,165,.3);color:var(--ok);}
.form-status.error{display:block;background-color:var(--accent-dim);border:1px solid rgba(255,107,53,.3);color:var(--accent);}
.form-status.loading{display:block;background-color:rgba(63,111,150,.15);border:1px solid var(--line);color:var(--ink-dim);}

/* ---------- footer ---------- */
footer{background:var(--bg-sunken);border-top:1px solid var(--line-dim);padding:3.5rem 0 2rem 0;}
.footer-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem;margin-bottom:2.5rem;}
.footer-nav{display:flex;gap:2rem;list-style:none;}
.footer-nav-link{color:var(--ink-dim);font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;}
.footer-nav-link:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--line-dim);padding-top:1.5rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-bottom p{font-size:.85rem;font-family:var(--font-mono);color:var(--ink-dim);text-align:center;}

/* ---------- responsive ---------- */
@media (max-width:992px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:2.5rem;}
  .hero-content p{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-visual{order:-1;max-width:340px;}
  .services-grid,.problems-grid{grid-template-columns:repeat(2,1fr);}
  .service-detail-item{grid-template-columns:1fr;}
  .service-meta{border-right:none;border-bottom:1px dashed var(--line-dim);}
  .sobre-grid{grid-template-columns:1fr;}
  .contato-grid{grid-template-columns:1fr;gap:3rem;}
  .timeline-line{display:none;}
  .timeline-steps{flex-direction:column;gap:1.75rem;}
  .timeline-step{width:100%;flex-direction:row;text-align:left;align-items:flex-start;padding:0;}
  .timeline-node{margin-bottom:0;margin-right:1.5rem;flex-shrink:0;}
}
@media (max-width:768px){
  header .nav-menu{
    position:fixed;top:76px;left:-100%;width:100%;height:calc(100vh - 76px);
    background:var(--bg);flex-direction:column;justify-content:center;align-items:center;
    gap:2rem;transition:.3s ease;z-index:999;border-top:1px solid var(--line-dim);
  }
  header .nav-menu.active{left:0;}
  header .nav-cta{display:none;}
  .hamburger{display:block;}
  #mobile-nav-btn{display:inline-flex !important;}
  .service-meta,.service-detail-item .card{padding:2rem 1.5rem;}
}
@media (max-width:600px){
  .services-grid,.problems-grid{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column;align-items:flex-start;}
  .footer-nav{flex-direction:column;gap:1rem;}
  .footer-bottom{flex-direction:column;align-items:center;}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}
/* ---------- fundo interativo (rede esquemática) ---------- */
#bg-network{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
}
@media (max-width:600px){
  #bg-network{ opacity:.35; }
}
@media (prefers-reduced-motion: reduce){
  #bg-network{ display:none; }
}