@font-face {
  font-family:Inter;
  src:url('inter.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('manrope.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}
:root {
  color-scheme:dark;
  --bg:#08090d;
  --panel:#15161b;
  --text:#f4f3f6;
  --muted:#a9abb3;
  --red:#c81d39;
  --light:#ff617a;
  --accent:#e8ba79;
  --line:#2b2c33;
  --display:Manrope,'Segoe UI',sans-serif;
  --body:Inter,'Segoe UI',sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.75 var(--body)
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.055em
}
h2 {
  font-size:clamp(36px,4.2vw,58px)
}
h3 {
  font-size:27px
}
p {
  max-width:70ch
}
a {
  color:inherit;
  text-decoration:none
}
a,button,summary {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}
.section {
  padding-block:118px
}
.skip {
  position:fixed;
  top:12px;
  left:16px;
  background:#fff;
  color:#000;
  padding:12px 20px;
  transform:translateY(-200%);
  z-index:100
}
.skip:focus {
  transform:none
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
[hidden] {
  display:none!important
}
.reading-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--light);
  transform:scaleX(var(--reading,0));
  transform-origin:left;
  z-index:60
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  transition:background .3s,box-shadow .3s
}
.site-header.is-scrolled {
  background:#08090deb;
  backdrop-filter:blur(18px);
  box-shadow:0 1px #ffffff0c
}
.header-inner {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.header-actions {
  display:none;
  align-items:center;
  gap:10px;
  flex:none
}
.brand {
  font:750 37px/1 var(--display);
  letter-spacing:-.075em
}
.brand>span {
  font-weight:500;
  color:var(--light);
  display:inline-block;
  margin-left:4px;
  font-size:29px;
  transform:skew(-10deg)
}
.main-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:35px;
  font-size:13px
}
.main-nav>a {
  color:var(--muted);
  transition:color .2s
}
.main-nav>a:hover,.main-nav>a[aria-current] {
  color:var(--text)
}
.main-nav .nav-contact {
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:15px;
  padding:11px 19px;
  background:#191921;
  border:1px solid #39323c;
  border-radius:30px;
  color:var(--text)
}
.nav-contact>span {
  color:var(--light);
  font-size:19px
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  isolation:isolate;
  overflow:clip;
  min-height:800px
}
.hero-inner {
  display:grid;
  grid-template-columns:1.07fr 1fr;
  gap:0;
  align-items:center;
  min-height:622px;
  padding-block:36px 55px;
  position:relative
}
.hero-copy {
  position:relative;
  z-index:3
}
.intro {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#c3bdcc;
  margin-bottom:27px
}
.intro>span {
  width:27px;
  height:1px;
  background:var(--light)
}
h1 {
  font-size:clamp(48px,5.7vw,82px);
  line-height:1.08;
  letter-spacing:-.065em;
  font-weight:650;
  position:relative;
  white-space:nowrap
}
.title-mask {
  display:block;
  overflow:hidden;
  padding-bottom:.09em;
  margin-bottom:-.09em
}
.title-mask>span {
  display:block;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)
}
.title-mask:nth-child(2)>span {
  transition-delay:.12s
}
.hero-description {
  font-size:16px;
  line-height:1.9;
  max-width:445px;
  color:var(--muted);
  margin-top:29px
}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:35px
}
.button {
  display:inline-flex;
  gap:25px;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:8px 9px 8px 22px;
  border:1px solid transparent;
  border-radius:32px;
  font-size:12px;
  font-weight:600
}
.primary {
  background:var(--red);
  color:white;
  box-shadow:0 8px 32px #c81d3920;
  transition:background .2s,box-shadow .2s
}
.primary:hover {
  background:#a91831;
  box-shadow:0 10px 36px #c81d3940
}
.button-arrow {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:#ffffff15;
  border-radius:50%;
  font-size:20px;
  transition:transform .25s
}
.button:hover .button-arrow {
  transform:rotate(45deg)
}
.quiet-link {
  display:inline-flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  color:#d2ceda
}
.quiet-link>span {
  color:var(--light);
  font-size:17px
}
.quiet-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.hero-credentials {
  margin-top:41px;
  font-size:10px;
  color:var(--muted)
}
.hero-credentials p:first-child {
  color:#cbc6d4;
  display:flex;
  align-items:center;
  gap:8px
}
.hero-credentials p+p {
  margin-top:6px
}
.hero-credentials p>span {
  font-size:19px;
  color:var(--accent);
  line-height:1
}
.hero-credentials small {
  font-size:9px;
  padding:1px 7px;
  border:1px solid #3e3547;
  border-radius:4px;
  margin-left:6px
}
.hero-atmosphere {
  position:absolute;
  inset:-150px 0 0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 90% 40%,#831c3435,transparent 55%),radial-gradient(ellipse at 15% 0,#6c4b1b20,transparent 50%)
}
.hero-lab {
  min-width:0;
  position:relative;
  margin-left:-10px;
  margin-top:15px
}
.hero-stage {
  height:440px;
  position:relative;
  perspective:1400px;
  --screen:#edf4e9;
  --phone-ink:#24513d
}
.scene-tilt {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:none
}
.scene-world {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(11deg) rotateY(-18deg) rotateZ(4deg)
}
.desktop-window {
  position:absolute;
  width:94%;
  top:48px;
  left:8%;
  border:1px solid #ffffff32;
  border-radius:11px;
  overflow:hidden;
  background:#1d1a22;
  box-shadow:0 2px 0 #54414a,0 25px 60px #0009,0 0 65px #d32a4420;
  transform:translateZ(60px);

}
.window-bar {
  height:33px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 13px;
  color:#b6a9b8;
  font-size:9px;
  background:linear-gradient(110deg,#2e222b,#1b1a23)
}
.window-dots {
  display:flex;
  gap:5px
}
.window-dots i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#85616f
}
.window-dots i:first-child {
  background:#e15b75
}
.window-dots i:nth-child(2) {
  background:#9c7c85
}
.desktop-window a {
  display:block;
  overflow:hidden;
  background:var(--screen)
}
.desktop-window img {
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:top
}
.blueprint {
  position:absolute;
  width:90%;
  height:310px;
  left:5%;
  top:44px;
  border:1px solid #ef53685c;
  border-radius:12px;
  transform-style:preserve-3d;
  background:linear-gradient(130deg,#e13d5511,#6d39510a)
}
.blueprint-back {
  transform:translate3d(-32px,-38px,-60px);
  opacity:.6;
  box-shadow:inset 0 0 40px #d52b4720
}
.blueprint-back:before {
  content:'';
  position:absolute;
  inset:18px;
  border:1px dashed #e755672e;
  border-radius:5px
}
.blueprint-back span {
  position:absolute;
  left:30px;
  right:30px;
  height:1px;
  background:#e755672e
}
.blueprint-back span:first-child {
  top:70px
}
.blueprint-back span:nth-child(2) {
  top:150px
}
.blueprint-back span:nth-child(3) {
  top:240px
}
.blueprint-mid {
  transform:translate3d(-8px,-15px,0);
  border-color:#d6466269;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:60px 25px 25px;
  background:#c2294010
}
.blueprint-mid div {
  border:1px solid #b33b5045;
  border-radius:3px
}
.blueprint-mid div:first-child {
  grid-row:span 2
}
.phone-window {
  position:absolute;
  width:128px;
  height:250px;
  top:183px;
  left:4%;
  background:linear-gradient(120deg,#4f3b48,#0d0c12 50%,#60424c);
  border:1px solid #9d7384;
  border-radius:22px;
  padding:6px;
  transform:translateZ(130px) rotateZ(-7deg);
  box-shadow:-15px 20px 35px #0008;

}
.phone-screen {
  height:100%;
  overflow:hidden;
  background:var(--screen);
  border-radius:16px;
  position:relative;
  padding:29px 11px 0;
  color:var(--phone-ink);
  transition:background .45s,color .45s
}
.phone-camera {
  position:absolute;
  top:10px;
  width:34px;
  height:7px;
  background:#111018;
  border-radius:20px;
  left:calc(50% - 17px);
  z-index:2
}
.phone-brand {
  display:block;
  font:700 15px/1 var(--display);
  letter-spacing:-.07em
}
.phone-title {
  display:block;
  font:600 14px/1.2 var(--display);
  letter-spacing:-.04em;
  margin-top:16px
}
.phone-lines {
  display:block;
  width:88%;
  height:15px;
  margin-top:12px;
  background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 6px);
  opacity:.35
}
.phone-button {
  display:block;
  width:65%;
  height:10px;
  margin-top:10px;
  background:currentColor;
  border-radius:8px
}
.phone-screen img {
  position:absolute;
  bottom:4px;
  left:8px;
  width:105px;
  height:86px;
  object-fit:contain
}
.phone-home {
  position:absolute;
  bottom:10px;
  width:28px;
  height:2px;
  background:#62616a;
  left:calc(50% - 14px);
  border-radius:6px
}
.responsive-badge {
  position:absolute;
  top:360px;
  right:-6%;
  display:flex;
  align-items:center;
  gap:11px;
  background:#19151fef;
  border:1px solid #784557;
  border-radius:9px;
  box-shadow:0 12px 25px #0005;
  backdrop-filter:blur(10px);
  font-size:10px;
  padding:13px 16px;
  transform:translateZ(155px) rotateZ(-4deg);
  white-space:nowrap
}
.responsive-icon {
  display:flex;
  align-items:end;
  gap:3px
}
.responsive-icon i:first-child {
  width:16px;
  height:11px;
  border:1px solid #b1a3b7;
  border-radius:2px
}
.responsive-icon i:last-child {
  width:6px;
  height:10px;
  border:1px solid #b1a3b7;
  border-radius:1px
}
.badge-check {
  color:#b9d6b7;
  font-size:13px
}
.scene-orbit {
  position:absolute;
  inset:0;
  transform:rotate(-18deg);
  pointer-events:none
}
.scene-orbit>div {
  position:absolute;
  left:0;
  right:0;
  top:54%;
  height:50%;
  border:1px solid #a34a5a2b;
  border-radius:50%;
  transform:rotateX(65deg)
}
.scene-orbit>div:nth-child(2) {
  inset:52% -13% -2%;
  border-color:#ba53611c
}
.scene-orbit>span {
  position:absolute;
  bottom:28%;
  right:4%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--light);
  box-shadow:0 0 18px #fa5067
}
.lab-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:4px;
  position:relative;
  z-index:5
}
.format-selector {
  display:none;
  gap:2px;
  padding:4px;
  background:#15131bd9;
  border:1px solid #3d2d3a;
  border-radius:30px
}
.js .format-selector {
  display:flex
}
.format-selector>button {
  border:0;
  background:transparent;
  color:#aaa2b3;
  border-radius:22px;
  min-height:36px;
  padding:8px 14px;
  font-size:10px;
  transition:background .25s,color .25s
}
.format-selector>button[aria-pressed="true"] {
  background:#39212d;
  color:#ffb8c4;
  box-shadow:inset 0 0 0 1px #8e354b69
}





.hero-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:22px 39px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted)
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:10px
}
.scroll-cue>span {
  display:grid;
  place-items:center;
  width:34px;
  height:44px;
  border:1px solid #44323f;
  border-radius:25px;
  color:var(--light);
  font-size:17px
}
.hero-region {
  text-align:right
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:60px;
  margin-bottom:48px
}
.section-context {
  font-size:12px;
  color:var(--accent);
  margin-bottom:20px
}
.section-heading>p {
  font-size:14px;
  color:var(--muted);
  max-width:310px;
  padding-bottom:4px
}
.project-showcase {
  display:block
}
.js .project-showcase {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:55px
}
.project-tabs {
  display:none
}
.js .project-tabs {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:start;
  position:sticky;
  top:130px
}
.project-tabs button {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#9d98aa;
  padding:20px 16px;
  text-align:left;
  font-size:13px;
  line-height:1.3;
  min-height:86px;
  transition:color .25s,background .25s,border-color .25s
}
.project-tabs button[aria-selected="true"] {
  color:var(--text);
  background:linear-gradient(100deg,#2b1c28,#17141d);
  border-color:#4b2d40
}
.project-tabs button:hover {
  color:var(--text)
}
.project-tabs small {
  display:block;
  font-size:10px;
  color:#a89cad;
  margin-top:8px
}
.project-symbol {
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:40px;
  font-size:28px
}
.symbol-clinica {
  color:#afc6b1
}
.symbol-arquitetura {
  color:#b2bbd5;
  font-size:34px
}
.symbol-loja {
  color:#d4b696
}
.tab-arrow {
  margin-left:auto;
  color:#df7894;
  opacity:0
}
.project-tabs button[aria-selected="true"] .tab-arrow {
  opacity:1
}
.project-panel {
  min-width:0;
  grid-column:2
}
.project-panel+.project-panel {
  margin-top:60px
}
.js .project-panel+.project-panel {
  margin-top:0
}
.project-panel.is-entering {

}
.project-screen {
  display:block;
  position:relative;
  background:#19171f;
  border:1px solid #443646;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 60px #0003
}
.project-browser {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  height:35px;
  padding:0 15px;
  background:#1b1821;
  color:#aca0b6;
  font-size:8px
}
.project-browser>span:first-child {
  font-size:7px;
  letter-spacing:4px;
  color:#815a6c
}
.project-screen>img {
  width:100%;
  aspect-ratio:1.78;
  object-fit:cover;
  object-position:top;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}
.project-screen:hover>img {
  transform:scale(1.025)
}
.screen-open {
  position:absolute;
  bottom:18px;
  right:18px;
  font-size:10px;
  display:flex;
  gap:30px;
  background:#0b0b11ee;
  color:white;
  border:1px solid #66616d;
  border-radius:28px;
  padding:10px 15px;
  backdrop-filter:blur(10px)
}
.project-story {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:35px;
  padding-top:30px
}
.project-kind {
  font-size:10px;
  color:var(--accent);
  margin-bottom:12px
}
.project-story h3 {
  font-size:28px;
  line-height:1.2
}
.project-story>div>p:not(.project-kind) {
  font-size:12px;
  color:var(--muted);
  line-height:1.9
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  padding-block:8px;
  border-bottom:1px solid #61515f
}
.text-link:hover {
  color:white;
  border-color:var(--light)
}
.text-link>span {
  font-size:17px;
  color:var(--light)
}
.project-story .text-link {
  margin-top:15px
}
.case {
  border-top:1px solid var(--line);
  margin-top:27px
}
.case>summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:var(--muted);
  padding:17px 0;
  cursor:pointer
}
.case>summary>span {
  font-size:19px;
  color:var(--accent);
  transition:transform .25s
}
.case[open]>summary>span {
  transform:rotate(45deg)
}
.case-grid {
  display:grid;
  gap:20px;
  padding-block:12px 20px
}
.case-grid>p {
  font-size:12px;
  color:var(--muted)
}
.case strong {
  display:block;
  font-size:11px;
  color:var(--text);
  font-weight:500;
  margin-bottom:7px
}
.demo-disclosure {
  display:flex;
  align-items:start;
  gap:12px;
  font-size:10px;
  color:#a79cac;
  max-width:780px;
  margin:0 0 28px;
  line-height:1.9
}
.demo-disclosure>span {
  color:var(--light);
  font-size:15px
}
.services {
  background:linear-gradient(180deg,#111017,#0d0d13);
  border-block:1px solid #ffffff08
}
.services-grid {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:110px
}
.services-intro {
  align-self:start;
  position:sticky;
  top:140px
}
.services-intro>p:not(.section-context) {
  font-size:14px;
  color:var(--muted);
  margin-block:25px;
  max-width:360px
}
.service-list article {
  position:relative;
  border-bottom:1px solid #332c39;
  padding:35px 0 35px 95px
}
.service-list article:first-child {
  padding-top:0
}
.service-list article:first-child .service-art {
  top:5px
}
.service-list h3 {
  font-size:28px
}
.service-list article>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:16px
}
.service-list article>span {
  display:block;
  font-size:10px;
  color:var(--accent);
  margin-top:15px
}
.service-art {
  position:absolute;
  left:0;
  top:40px;
  width:70px;
  height:57px;
  perspective:500px
}
.service-art>div {
  position:absolute;
  inset:3px 0;
  border:1px solid #c75c795e;
  border-radius:5px;
  transform:rotateY(-20deg) rotateX(10deg);
  background:linear-gradient(130deg,#6f324a24,#15121b);
  padding:8px;
  transition:transform .5s
}
.service-art i {
  display:block;
  height:3px;
  width:52%;
  background:#ac667c;
  margin-top:6px;
  border-radius:3px
}
.service-art i:first-child {
  width:75%;
  background:#e6bccb
}
.service-art i:last-child {
  width:33%
}
.service-art>span {
  position:absolute;
  right:-2px;
  bottom:3px;
  width:16px;
  height:29px;
  border:1px solid #c57993;
  border-radius:4px;
  background:#201620;
  transform:rotate(-6deg)
}
.art-1>div {
  border-color:#b1884780
}
.art-1 i {
  background:#ae844c
}
.art-1>span {
  border-color:#c8a471;
  background:#2a241c;
  width:24px;
  height:21px;
  bottom:-2px;
  right:3px
}
.art-2>div {
  border-color:#bc8b6f80;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  align-items:center
}
.art-2 i,.art-2 i:first-child,.art-2 i:last-child {
  width:100%;
  height:24px;
  background:#8e685854
}
.art-2>span {
  border-color:#b48f78;
  background:#32251f;
  width:20px;
  height:20px;
  border-radius:50%;
  right:1px;
  bottom:-2px
}
.service-list article:hover .service-art>div {
  transform:rotateY(0) rotateX(0) translateY(-4px)
}
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px
}
.about h2 {
  font-size:clamp(40px,4.4vw,62px)
}
.engineer-seal {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:36px;
  font-size:14px
}
.engineer-seal>span {
  font-size:44px;
  color:var(--accent);
  line-height:1
}
.engineer-seal small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.about-heading>.text-link {
  margin-top:26px
}
.about-copy .lead {
  font:500 24px/1.5 var(--display);
  color:#ddd9e4;
  letter-spacing:-.035em;
  margin-bottom:26px
}
.about-copy>p:not(.lead) {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin-top:20px
}
.tech {
  border-top:1px solid #3e2d41;
  padding-top:22px;
  margin-top:26px
}
.tech>span {
  font-size:10px;
  color:var(--accent)
}
.tech>p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin-top:8px
}
.process {
  padding-top:20px
}
.process-list {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:38px;
  list-style:none;
  padding:0;
  margin:0
}
.process-list li {
  border-top:1px solid #493040;
  padding-top:25px;
  position:relative
}
.process-list li:before {
  content:'';
  position:absolute;
  top:-3px;
  left:0;
  width:5px;
  height:5px;
  background:var(--light);
  border-radius:50%
}
.process-list li>span {
  font-size:11px;
  color:#c57c94
}
.process-list h3 {
  font-size:25px;
  margin-top:22px
}
.process-list p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:14px
}
.faq {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:100px;
  padding-top:30px
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
  border-top:1px solid var(--line)
}
.faq-list summary {
  position:relative;
  padding:23px 32px 23px 0;
  font-size:14px;
  cursor:pointer;
  list-style:none;
  line-height:1.6
}
.faq-list summary:after {
  content:'+';
  position:absolute;
  right:0;
  top:18px;
  font-size:22px;
  color:var(--accent);
  font-weight:300;
  transition:transform .25s
}
.faq-list details[open] summary:after {
  transform:rotate(45deg)
}
.faq-list details p {
  font-size:13px;
  color:var(--muted);
  padding:0 30px 25px 0
}
summary::-webkit-details-marker {
  display:none
}
.contact {
  position:relative;
  isolation:isolate;
  overflow:clip;
  border-block:1px solid #37212b;
  background:#110c12
}
.contact:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 95% 30%,#7c183736,transparent 65%)
}
.contact-grid {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  align-items:end;
  gap:100px
}
.contact-intro {
  font-size:12px;
  color:var(--accent);
  margin-bottom:20px
}
.contact h2 {
  font-size:clamp(42px,4.8vw,68px)
}
.contact h2+p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin-block:27px;
  max-width:450px
}
.contact .button>span {
  font-size:20px;
  margin-left:9px
}
.contact .button {
  padding:13px 25px;
  gap:25px
}
.contact-details {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  color:#c0afc4;
  font-size:12px
}
.contact-details a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.contact-details p {
  font-size:12px;
  color:var(--muted);
  margin-block:10px
}
.contact-details .text-link {
  font-size:12px
}

.footer {
  padding-block:35px 28px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px
}
.footer-wordmark {
  font:750 clamp(70px,12vw,170px)/1 var(--display);
  letter-spacing:-.09em;
  color:#26222c
}
.footer-wordmark>span {
  color:#5f2538;
  font-weight:400
}
.footer>div {
  padding-bottom:10px;
  font-size:10px;
  color:var(--muted);
  text-align:right
}
.footer>div>p:first-child {
  color:#dfd7e7
}
.footer>div>p+p {
  margin-top:7px
}
.footer>div>a {
  display:inline-block;
  margin-top:15px;
  font-size:10px;
  color:#bd91a7
}



@media(min-width:1600px) {
  .hero-inner {
    min-height:700px
  }
  .hero {
    min-height:870px
  }
}
@media(max-width:1150px) {
  .wrap {
    width:calc(100% - 72px)
  }
  .hero-inner {
    min-height:590px
  }
  .hero-stage {
    height:390px
  }
  .hero-description {
    font-size:14px;
    max-width:385px
  }
  .actions {
    gap:20px
  }
  .button {
    font-size:11px;
    padding-left:18px;
    gap:16px
  }
  .button-arrow {
    width:32px;
    height:32px
  }
  .quiet-link {
    font-size:11px;
    gap:12px
  }
  .hero-lab {
    margin-left:0
  }
  .desktop-window {
    left:5%;
    top:50px;
    width:95%
  }
  .desktop-window img {
    height:245px
  }
  .blueprint {
    height:260px
  }
  .phone-window {
    left:1%;
    width:108px;
    height:220px;
    top:160px
  }
  .phone-screen {
    padding:26px 9px 0
  }
  .phone-title {
    font-size:12px
  }
  .phone-screen img {
    width:90px;
    height:75px;
    left:6px
  }
  .phone-brand {
    font-size:13px
  }
  .phone-lines {
    height:9px;
    margin-top:8px
  }
  .phone-button {
    margin-top:8px
  }
  .responsive-badge {
    top:307px;
    right:-3%;
    font-size:8px;
    padding:11px;
    gap:9px
  }
  .format-selector>button {
    padding-inline:11px;
    font-size:9px
  }

  .js .project-showcase {
    grid-template-columns:235px minmax(0,1fr);
    gap:32px
  }
  .project-tabs button {
    padding:17px 12px;
    gap:12px;
    font-size:12px
  }
  .project-symbol {
    width:27px
  }
  .project-story {
    gap:25px
  }
  .project-story h3 {
    font-size:24px
  }
  .services-grid {
    gap:65px
  }
  .service-list article {
    padding-left:82px
  }
  .service-list h3 {
    font-size:25px
  }
  .about {
    gap:65px
  }
  .faq {
    gap:60px
  }
  .contact-grid {
    gap:60px
  }
  .hero {
    min-height:750px
  }
}
@media(max-width:900px) {
  .main-nav {
    gap:24px
  }
  .main-nav .nav-contact {
    margin-left:0
  }
  .header-inner {
    min-height:88px
  }
  .hero-inner {
    grid-template-columns:1fr;
    min-height:0;
    padding-top:52px;
    padding-bottom:20px
  }
  .hero-copy {
    max-width:650px
  }
  h1 {
    font-size:clamp(52px,8vw,72px)
  }
  .hero-description {
    font-size:15px;
    max-width:510px
  }
  .hero-credentials {
    margin-top:25px
  }
  .hero-lab {
    width:min(580px,100%);
    justify-self:center;
    margin-top:28px
  }
  .hero-stage {
    height:440px
  }
  .desktop-window {
    top:50px;
    left:8%;
    width:89%
  }
  .desktop-window img {
    height:295px
  }
  .blueprint {
    height:310px;
    left:5%;
    width:85%
  }
  .phone-window {
    width:123px;
    height:245px;
    left:3%;
    top:180px
  }
  .phone-screen {
    padding:29px 11px 0
  }
  .phone-brand {
    font-size:15px
  }
  .phone-title {
    font-size:14px
  }
  .phone-lines {
    height:15px;
    margin-top:12px
  }
  .phone-button {
    margin-top:10px
  }
  .phone-screen img {
    width:105px;
    height:86px;
    left:8px
  }
  .responsive-badge {
    top:355px;
    right:-1%;
    font-size:10px;
    padding:12px 14px
  }
  .format-selector>button {
    font-size:10px;
    padding-inline:15px
  }

  .hero-bottom {
    margin-top:35px
  }
  .section {
    padding-block:85px
  }
  .js .project-showcase {
    grid-template-columns:1fr;
    gap:25px
  }
  .js .project-tabs {
    position:static;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
  }
  .project-tabs button {
    font-size:11px;
    gap:9px;
    min-height:78px;
    padding:13px
  }
  .project-tabs small {
    font-size:9px;
    margin-top:7px
  }
  .project-symbol {
    font-size:24px;
    width:25px
  }
  .project-panel {
    grid-column:1
  }
  .tab-arrow {
    display:none
  }
  .project-story {
    grid-template-columns:1fr 1fr;
    gap:45px
  }
  .project-story h3 {
    font-size:28px
  }
  .project-story>div>p:not(.project-kind) {
    font-size:13px
  }
  .demo-disclosure {
    margin-left:0
  }
  .services-grid {
    gap:50px
  }
  .service-list article>p {
    font-size:12px
  }
  .about {
    gap:45px
  }
  .about-copy .lead {
    font-size:22px
  }
  .about-copy>p:not(.lead) {
    font-size:13px
  }
  .process-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px
  }
  .faq {
    gap:40px;
    grid-template-columns:.9fr 1.3fr
  }
  .contact h2 {
    font-size:47px
  }

}
@media(max-width:640px) {
  html {
    scroll-padding-top:95px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:80px;
    gap:20px;
    flex-wrap:wrap;
    padding-block:18px
  }
  .brand {
    font-size:32px
  }
  .brand>span {
    font-size:25px
  }
  .js .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    background:#17141c;
    border:1px solid #43333f;
    border-radius:24px;
    padding:7px 15px;
    font-size:11px
  }
  .menu-toggle>span {
    display:flex;
    flex-direction:column;
    gap:4px;
    width:14px
  }
  .menu-toggle i {
    display:block;
    height:1px;
    background:#ded2e2;
    width:14px;
    transition:transform .25s
  }
  .menu-toggle[aria-expanded="true"] i:first-child {
    transform:translateY(2.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] i:last-child {
    transform:translateY(-2.5px) rotate(-45deg)
  }
  .header-actions { display:flex; margin-left:auto; }
  .main-nav {
    order:3;
    margin-left:0;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding-block:8px 4px
  }
  .js .main-nav {
    display:none
  }
  .js .main-nav.is-open {
    display:flex
  }
  .main-nav>a {
    font-size:12px;
    padding-block:8px
  }
  .main-nav .nav-contact {
    padding:7px 14px;
    font-size:11px;
    gap:18px
  }
  .site-header {
    background:#08090de6;
    backdrop-filter:blur(14px)
  }
  .hero-inner {
    padding-top:34px;
    padding-bottom:0
  }
  .intro {
    font-size:11px;
    margin-bottom:23px;
    gap:10px
  }
  h1 {
    font-size:clamp(38px,11vw,58px);
    line-height:1.14;
    letter-spacing:-.06em
  }
  .hero-description {
    font-size:14px;
    line-height:1.9;
    max-width:420px;
    margin-top:25px
  }
  .actions {
    gap:21px;
    margin-top:27px
  }
  .button {
    min-height:51px;
    font-size:11px;
    gap:19px;
    padding:8px 8px 8px 18px
  }
  .button-arrow {
    width:32px;
    height:32px;
    font-size:19px
  }
  .quiet-link {
    font-size:11px;
    gap:14px
  }
  .hero-credentials {
    margin-top:27px;
    font-size:9px
  }
  .hero-credentials p+p {
    margin-top:5px
  }
  .hero-credentials p>span {
    font-size:17px
  }
  .hero-credentials small {
    font-size:8px
  }
  .hero-lab {
    margin-top:35px;
    width:100%
  }
  .hero-stage {
    height:320px;
    perspective:950px
  }
  .scene-world {
    transform:rotateX(10deg) rotateY(-13deg) rotateZ(4deg)
  }
  .desktop-window {
    top:45px;
    left:8%;
    width:87%;
    border-radius:7px;

  }
  .window-bar {
    height:23px;
    font-size:6px;
    padding-inline:9px
  }
  .window-dots {
    gap:3px
  }
  .window-dots i {
    width:3px;
    height:3px
  }
  .desktop-window img {
    height:190px
  }
  .blueprint {
    height:205px;
    left:8%;
    width:83%;
    top:45px;
    border-radius:7px
  }
  .blueprint-back {
    transform:translate3d(-20px,-23px,-40px)
  }
  .blueprint-mid {
    transform:translate3d(-7px,-10px,0);
    padding:38px 15px 16px;
    gap:12px
  }
  .blueprint-back:before {
    inset:12px
  }
  .phone-window {
    top:145px;
    left:4%;
    width:88px;
    height:176px;
    border-radius:15px;
    padding:4px;
    transform:translateZ(80px) rotateZ(-7deg);

  }
  .phone-screen {
    border-radius:11px;
    padding:22px 8px 0
  }
  .phone-camera {
    top:7px;
    width:26px;
    height:5px;
    left:calc(50% - 13px)
  }
  .phone-brand {
    font-size:11px
  }
  .phone-title {
    font-size:10px;
    margin-top:10px
  }
  .phone-lines {
    height:9px;
    margin-top:8px;
    background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 4px)
  }
  .phone-button {
    height:7px;
    margin-top:7px
  }
  .phone-screen img {
    width:72px;
    height:58px;
    left:4px;
    bottom:3px
  }
  .phone-home {
    bottom:7px;
    width:21px;
    left:calc(50% - 10.5px)
  }
  .responsive-badge {
    top:255px;
    right:-1%;
    font-size:7px;
    gap:6px;
    padding:9px;
    border-radius:6px;
    transform:translateZ(95px) rotateZ(-4deg)
  }
  .responsive-icon {
    gap:2px
  }
  .responsive-icon i:first-child {
    width:12px;
    height:8px
  }
  .responsive-icon i:last-child {
    width:4px;
    height:8px
  }
  .badge-check {
    font-size:10px
  }
  .lab-controls {
    gap:8px;
    margin-top:20px
  }
  .format-selector {
    padding:3px;
    gap:0
  }
  .format-selector>button {
    font-size:9px;
    min-height:35px;
    padding:8px 11px
  }



  .hero-bottom {
    margin-top:35px;
    gap:20px;
    padding-block:22px 27px;
    align-items:flex-end;
    font-size:9px
  }
  .hero-region {
    display:none
  }
  .scroll-cue {
    font-size:9px;
    gap:9px;
    max-width:130px;
    line-height:1.7
  }
  .scroll-cue>span {
    width:27px;
    height:36px;
    flex:none;
    font-size:15px
  }
  .hero-bottom>p {
    max-width:190px
  }
  .section {
    padding-block:67px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-context {
    font-size:10px;
    margin-bottom:17px
  }
  h2 {
    font-size:clamp(32px,8.6vw,44px);
    line-height:1.17
  }
  .section-heading>p {
    margin-top:22px;
    font-size:13px;
    max-width:390px;
    padding:0
  }
  .js .project-showcase {
    gap:23px
  }
  .js .project-tabs {
    gap:6px
  }
  .project-tabs button {
    flex-direction:column;
    align-items:flex-start;
    padding:12px 10px;
    min-height:104px;
    font-size:10px;
    gap:10px;
    border-radius:7px
  }
  .project-tabs small {
    font-size:8px;
    margin-top:6px;
    line-height:1.5
  }
  .project-symbol {
    font-size:23px;
    height:22px;
    width:22px
  }
  .symbol-arquitetura {
    font-size:28px
  }
  .project-browser {
    height:26px;
    padding-inline:11px;
    font-size:7px
  }
  .project-browser>span:first-child {
    font-size:5px;
    letter-spacing:2px
  }
  .project-screen {
    border-radius:7px
  }
  .project-screen>img {
    aspect-ratio:1.5
  }
  .screen-open {
    font-size:8px;
    padding:7px 10px;
    gap:16px;
    bottom:10px;
    right:10px
  }
  .project-story {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:24px
  }
  .project-story h3 {
    font-size:29px
  }
  .project-kind {
    font-size:10px;
    margin-bottom:10px
  }
  .project-story>div>p:not(.project-kind) {
    font-size:13px
  }
  .project-story .text-link {
    margin-top:12px
  }
  .text-link {
    font-size:12px
  }
  .case {
    margin-top:22px
  }
  .case>summary {
    font-size:10px;
    line-height:1.7;
    padding-block:16px
  }
  .demo-disclosure {
    font-size:9px;
    gap:9px;
    margin:0 0 22px;
    line-height:1.9
  }
  .services-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .services-intro {
    position:static
  }
  .services-intro>p:not(.section-context) {
    font-size:14px;
    max-width:400px;
    margin-block:22px
  }
  .service-list article {
    padding:28px 0 28px 88px
  }
  .service-list article:first-child {
    padding-top:0
  }
  .service-list article>p {
    font-size:13px
  }
  .service-list article h3 {
    font-size:25px
  }
  .service-art {
    top:33px;
    width:64px
  }
  .about {
    grid-template-columns:1fr;
    gap:35px
  }
  .about h2 {
    font-size:clamp(38px,10vw,50px)
  }
  .engineer-seal {
    margin-top:28px;
    font-size:13px;
    gap:15px
  }
  .engineer-seal>span {
    font-size:35px
  }
  .engineer-seal small {
    font-size:9px
  }
  .about-heading>.text-link {
    margin-top:23px
  }
  .about-copy .lead {
    font-size:23px;
    margin-bottom:25px
  }
  .about-copy>p:not(.lead) {
    font-size:14px
  }
  .process {
    padding-top:0
  }
  .process-list {
    grid-template-columns:1fr;
    gap:0
  }
  .process-list li {
    border-top:0;
    border-left:1px solid #503044;
    padding:0 0 33px 27px;
    position:relative;
    margin-left:3px
  }
  .process-list li:before {
    top:5px;
    left:-3px
  }
  .process-list li:last-child {
    padding-bottom:0
  }
  .process-list li>span {
    font-size:10px
  }
  .process-list h3 {
    margin-top:9px;
    font-size:25px
  }
  .process-list p {
    font-size:13px;
    line-height:1.9;
    margin-top:13px;
    max-width:390px
  }
  .faq {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:0
  }
  .faq-list summary {
    font-size:13px;
    padding-block:21px
  }
  .faq-list summary:after {
    top:16px
  }
  .faq-list details p {
    font-size:13px;
    padding-right:5px
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:50px
  }
  .contact-intro {
    font-size:10px
  }
  .contact h2 {
    font-size:clamp(36px,9.6vw,49px)
  }
  .contact h2+p {
    font-size:13px
  }
  .contact-details {
    border-top:1px solid #422639;
    padding-top:35px
  }

  .contact-details>a:first-of-type {
    overflow-wrap:anywhere
  }
  .footer {
    padding-block:30px;
    gap:25px;
    align-items:start;
    flex-direction:column
  }
  .footer-wordmark {
    font-size:110px
  }
  .footer>div {
    text-align:left;
    font-size:10px;
    padding:0
  }
  .footer>div>a {
    margin-top:13px
  }
}
@media(max-width:359px) {
  .wrap {
    width:calc(100% - 32px)
  }
  h1 {
    font-size:clamp(34px,11vw,38px)
  }
  .hero-description {
    font-size:13px
  }
  .hero-stage {
    height:285px
  }
  .desktop-window img {
    height:165px
  }
  .blueprint {
    height:180px
  }
  .phone-window {
    top:127px;
    width:78px;
    height:157px
  }
  .phone-screen {
    padding:19px 7px 0
  }
  .phone-brand {
    font-size:10px
  }
  .phone-title {
    font-size:9px
  }
  .phone-screen img {
    width:64px;
    height:51px
  }
  .phone-lines {
    margin-top:7px
  }
  .phone-button {
    margin-top:6px
  }
  .responsive-badge {
    top:224px;
    font-size:6px
  }
  .format-selector>button {
    padding-inline:8px;
    font-size:8px
  }

  .hero-bottom>p {
    max-width:155px
  }
  .project-tabs button {
    padding:11px 8px;
    font-size:9px
  }
  .project-tabs small {
    font-size:7px
  }
  .service-list article {
    padding-left:78px
  }
  .service-list article h3 {
    font-size:23px
  }
  .service-art {
    width:56px
  }
}



/* Controles e leitura: mesmas medidas em todas as larguras. */
.format-selector > button {
  min-height:44px;
  padding:8px 14px;
  font-size:13px;
}
.hero-description, .about-copy > p:not(.lead), .service-list article > p,
.process-list p, .faq-list details > p, .project-story > div > p:not(.project-kind) {
  font-size:16px;
}
@media (max-width:640px) {
  .header-inner { gap:12px; }
  .main-nav > a { min-height:44px; font-size:13px; }
  .js .menu-toggle { font-size:13px; }
  .format-selector > button { padding-inline:10px; }
}
@media (max-width:359px) {
  .format-selector > button { padding-inline:4px; white-space:nowrap; }
}

/* Ícones vetoriais preservam o desenho em navegadores que usam emoji para setas. */
.icon-arrow {
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-.12em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}