/* ============================================================
   FLEXPRESS — sistema de design
   Grafite / betão / aço · Oswald + IBM Plex Sans + IBM Plex Mono
   ============================================================ */

:root{
  --graphite:#1D1A1B;
  --graphite-2:#292425;
  --concrete:#FFFFFF;
  --concrete-2:#F7F6F4;
  --steel:#78767A;
  --steel-light:#A8A6A9;
  --orange:#D12B29;
  --orange-dark:#A61F1D;
  --yellow:#F1D9D8;
  --white:#F8F7F5;
  --line:#3A3435;
  --line-light:#EAE8E5;

  --display: 'Oswald', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--concrete);
  color:var(--graphite);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1.08;
  font-weight:600;
}
h1{font-size:clamp(2.6rem,6vw,5rem);}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);}
h3{font-size:1.15rem;letter-spacing:0.04em;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--orange);
  display:inline-block;
}

/* dimension-line divider — motivo de desenho técnico */
.dim-rule{
  display:flex;align-items:center;gap:8px;
  color:var(--steel-light);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  margin:0;
}
.dim-rule::before,.dim-rule::after{
  content:"";
  flex:1;height:1px;
  background:var(--line-light);
}
.dim-rule.dark{color:var(--steel);}
.dim-rule.dark::before,.dim-rule.dark::after{background:var(--line-light);}

/* facet motif — polígonos subtis inspirados no logótipo (a faceta triangular do "F") */
.facets{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
}
.facets svg{display:block;width:100%;height:100%;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--graphite);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  max-width:var(--max);margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-size:1.4rem;
  letter-spacing:0.06em;
  color:var(--white);
  display:flex;align-items:baseline;gap:6px;
}
.logo span{color:var(--orange);}
.logo-img{height:34px;width:auto;display:block;}
.footer-logo-img{height:28px;margin-bottom:14px;}
.navlinks{display:flex;gap:34px;}
.navlinks a{
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#B9BAB8;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.navlinks a:hover,.navlinks a.active{color:var(--white);border-color:var(--orange);}
.navcta{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.05em;
  color:var(--graphite);
  background:var(--orange);
  padding:9px 18px;
  text-transform:uppercase;
}
.navcta:hover{background:var(--white);color:var(--graphite);}
.burger{display:none;background:none;border:none;color:var(--white);font-size:1.6rem;cursor:pointer;}

@media(max-width:820px){
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    background:var(--graphite);
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
    border-bottom:1px solid var(--line);
  }
  .navlinks.open{max-height:400px;}
  .navlinks a{padding:16px 28px;border-bottom:1px solid var(--line-light,#2b2d31);width:100%;}
  .burger{display:block;}
  .navcta{display:none;}
}

/* ---------- hero ---------- */
.hero{
  background:var(--concrete);
  color:var(--graphite);
  padding:100px 0 76px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-light);
}
.hero::before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:420px;height:394px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20320%20300%27%3E%0A%3Cpolygon%20points%3D%2740%2C0%20190%2C0%20115%2C135%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.09%29%27/%3E%0A%3Cpolygon%20points%3D%27190%2C0%20320%2C0%20255%2C120%27%20fill%3D%27rgba%2829%2C26%2C27%2C0.055%29%27/%3E%0A%3Cpolygon%20points%3D%27115%2C135%20190%2C0%20255%2C120%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.055%29%27/%3E%0A%3Cpolygon%20points%3D%2740%2C0%20115%2C135%20-30%2C135%27%20fill%3D%27rgba%2829%2C26%2C27%2C0.04%29%27/%3E%0A%3Cpolygon%20points%3D%27255%2C120%20320%2C0%20320%2C120%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.04%29%27/%3E%0A%3Cpolygon%20points%3D%27115%2C135%20255%2C120%20190%2C255%27%20fill%3D%27rgba%2829%2C26%2C27%2C0.05%29%27/%3E%0A%3Cpolygon%20points%3D%27-30%2C135%20115%2C135%2040%2C270%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.035%29%27/%3E%0A%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:0;
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:50px;
  align-items:end;
}
.hero p.lead{
  font-size:1.15rem;
  color:#5b5c58;
  max-width:46ch;
  margin-top:18px;
}
.hero-figures{
  border-left:1px solid var(--line-light);
  padding-left:32px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.fig{font-family:var(--mono);}
.fig .num{font-size:2.1rem;color:var(--orange);display:block;font-weight:600;}
.fig .lbl{font-size:0.75rem;letter-spacing:0.08em;color:#8a8783;text-transform:uppercase;}

/* coupling motif svg */
.coupling{
  position:absolute;
  right:-60px;top:-40px;
  width:420px;height:420px;
  opacity:0.16;
  z-index:1;
}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-figures{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:24px;flex-direction:row;flex-wrap:wrap;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 26px;
  border:1px solid var(--orange);
  color:var(--graphite);
  transition:background .15s,color .15s;
}
.btn.solid{background:var(--orange);color:var(--white);}
.btn.solid:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
.btn.outline:hover{background:var(--orange);color:var(--white);}
.btn-row{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:70px 0;}
.section-light{background:var(--concrete);}
.section-dark{background:var(--graphite);color:var(--white);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:44px;gap:24px;flex-wrap:wrap;
}
.section-head p{max-width:46ch;color:#5b5c58;}
.section-dark .section-head p{color:#B9BAB8;}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:2px;background:var(--line-light);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}}

.card{
  background:var(--concrete);
  padding:32px 28px;
  position:relative;
  border:1px solid var(--line-light);
  transition:border-color .15s;
}
.card:hover{border-color:var(--orange);}
.card .tag{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--orange);
  letter-spacing:0.08em;
}
.card h3{margin-top:10px;margin-bottom:10px;}
.card p{font-size:0.92rem;color:#5b5c58;}

/* placeholder image block */
.ph{
  background:repeating-linear-gradient(135deg,#CFCDC5,#CFCDC5 10px,#D9D7D0 10px,#D9D7D0 20px);
  color:var(--steel);
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  border:1px solid var(--line-light);
  min-height:220px;
  padding:12px;
}
.ph.dark{background:repeating-linear-gradient(135deg,#26282C,#26282C 10px,#2C2E33 10px,#2C2E33 20px);border-color:var(--line);color:#9A9B98;}

/* ---------- footer ---------- */
footer{
  background:var(--graphite);
  color:#9A9B98;
  padding:56px 0 28px;
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
footer::before{
  content:"";
  position:absolute;
  bottom:0;left:0;
  width:220px;height:180px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20320%20300%27%3E%0A%3Cpolygon%20points%3D%2740%2C300%20190%2C300%20115%2C165%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.10%29%27/%3E%0A%3Cpolygon%20points%3D%27190%2C300%20320%2C300%20255%2C180%27%20fill%3D%27rgba%28248%2C247%2C245%2C0.045%29%27/%3E%0A%3Cpolygon%20points%3D%27115%2C165%20190%2C300%20255%2C180%27%20fill%3D%27rgba%28209%2C43%2C41%2C0.06%29%27/%3E%0A%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  z-index:0;
}
footer .wrap{position:relative;z-index:1;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
}
.footer-grid h4{color:var(--white);font-size:0.95rem;margin-bottom:16px;}
.footer-grid a{display:block;font-size:0.88rem;padding:4px 0;color:#9A9B98;}
.footer-grid a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;
  flex-wrap:wrap;gap:10px;
}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- utility ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid var(--line-light);
  padding:6px 12px;
  color:var(--steel);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;}}

.cta-band{
  background:var(--steel);
  color:var(--white);
  padding:56px 0;
}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}